--- a/client/package.json Fri Nov 16 11:19:13 2018 +0100
+++ b/client/package.json Fri Nov 16 17:01:19 2018 +0100
@@ -9,6 +9,7 @@
"@types/slate-plain-serializer": "^0.6.0",
"@types/slate-react": "^0.20.0",
"bootstrap": "^4.1.3",
+ "color": "^3.1.0",
"connected-react-router": "^5.0.1",
"history": "^4.7.2",
"i18next": "^12.0.0",
@@ -39,6 +40,8 @@
"slate-html-serializer": "^0.7.2",
"slate-plain-serializer": "^0.6.2",
"slate-react": "^0.21.5",
+ "typeface-roboto-mono": "^0.0.54",
+ "typeface-rubik": "^0.0.54",
"uuid": "^3.0.1",
"yarn": "^1.12.1"
},
Binary file client/src/assets/rubik-v7-latin-regular.eot has changed
Binary file client/src/assets/rubik-v7-latin-regular.ttf has changed
Binary file client/src/assets/rubik-v7-latin-regular.woff has changed
Binary file client/src/assets/rubik-v7-latin-regular.woff2 has changed
--- a/client/src/components/ProtocolSummary.js Fri Nov 16 11:19:13 2018 +0100
+++ b/client/src/components/ProtocolSummary.js Fri Nov 16 17:01:19 2018 +0100
@@ -1,29 +1,14 @@
-import React, { Component } from 'react';
-import '../App.css';
-import './SessionSummary.css'
+import React from 'react';
+import './ProtocolSummary.css'
-export default class ProtocolSummary extends Component {
- render() {
- return (
- <div className="mt-5">
- <div>
- <span className="bg-primary">important</span>
- <p className="text-primary">la métacatégorie important</p>
- </div>
- <div>
- <span className="bg-primary">mot-clé</span>
- <p className="text-primary">la métacatégorie mot-clé</p>
- </div>
- <div>
- <span className="bg-primary">commentaire</span>
- <p className="text-primary">la métacatégorie commentaire</p>
- </div>
- <div>
- <span className="bg-primary">trouble</span>
- <p className="text-primary">la métacatégorie trouble</p>
- </div>
- </div>
- );
- }
-}
+export default ({ annotationCategories }) => (
+ <div className="protocol-summary">
+ {annotationCategories.map((category) => (
+ <div className="protocol-summary-category" key={category.key} >
+ <span className="protocol-summary-category-name badge text-light" style={{ backgroundColor: category.color, fontSize: "1em" }} >{category.name}</span>
+ <p className="text-primary">{category.description}</p>
+ </div>
+ ))}
+ </div>
+);
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/ProtocolSummary.scss Fri Nov 16 17:01:19 2018 +0100
@@ -0,0 +1,6 @@
+.protocol-summary {
+ overflow-x: hidden;
+ overflow-y: auto;
+ padding: 0.75rem 1.25rem;
+
+}
--- a/client/src/components/Session.js Fri Nov 16 11:19:13 2018 +0100
+++ b/client/src/components/Session.js Fri Nov 16 17:01:19 2018 +0100
@@ -42,19 +42,19 @@
if (this.state.screenSummary === 0) {
return (
- <div>
- <span onClick={this.toggleScreenSummary} className ="text-primary btn"><Trans i18nKey="session.protocol_display">Afficher le protocole d'annotation</Trans></span>
- <SessionSummary notes={this.props.notes} />
- </div>
+ <React.Fragment>
+ <div onClick={this.toggleScreenSummary} className ="text-primary btn"><Trans i18nKey="session.protocol_display">Afficher le protocole d'annotation</Trans></div>
+ <SessionSummary notes={this.props.notes} />
+ </React.Fragment>
);
}
if (this.state.screenSummary === 1) {
return (
- <div>
- <span onClick={this.toggleScreenSummary} className ="text-primary btn"><Trans i18nKey="session.summary_display">Afficher le résumé de la session</Trans></span>
- <ProtocolSummary />
- </div>
+ <React.Fragment>
+ <div onClick={this.toggleScreenSummary} className ="text-primary btn"><Trans i18nKey="session.summary_display">Afficher le résumé de la session</Trans></div>
+ <ProtocolSummary annotationCategories={this.props.annotationCategories} />
+ </React.Fragment>
);
}
}
@@ -66,10 +66,14 @@
<Navbar history={this.props.history} />
<div className="session-container">
<div className="session-notes">
- <div className="notes-affix">
- <a onClick={this.onClickReadOnly} href="/read-only"><span className="material-icons text-primary">remove_red_eye</span></a>
- {this.screenSummary()}
- </div>
+ <div className="notes-affix">
+ <div>
+ <a onClick={this.onClickReadOnly} href="/read-only"><span className="material-icons text-primary">remove_red_eye</span></a>
+ </div>
+ <div className="notes-affix-summary">
+ {this.screenSummary()}
+ </div>
+ </div>
<div className="notes-list">
<SessionForm session={this.props.currentSession} />
<NotesList
--- a/client/src/components/Session.scss Fri Nov 16 11:19:13 2018 +0100
+++ b/client/src/components/Session.scss Fri Nov 16 17:01:19 2018 +0100
@@ -21,13 +21,20 @@
padding-left: ($grid-gutter-width / 2);
padding-right: ($grid-gutter-width / 2);
}
- .notes-affix {
- min-width: 17%;
- max-width: 17%;
- > *:first-child {
- max-height: calc(100%);
- overflow-y: auto;
- }
+ .notes-affix {
+ min-width: 17%;
+ max-width: 17%;
+ display: flex;
+ flex-direction: column;
+ // > *:first-child {
+ // max-height: calc(100%);
+ // overflow-y: auto;
+ // }
+ }
+ .notes-affix-summary {
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
}
.notes-list {
width: 100%;
--- a/client/src/components/SessionSummary.js Fri Nov 16 11:19:13 2018 +0100
+++ b/client/src/components/SessionSummary.js Fri Nov 16 17:01:19 2018 +0100
@@ -1,21 +1,27 @@
import React from 'react';
import _ from 'lodash';
+import Color from 'color';
import '../App.css';
import './SessionSummary.css'
import {formatTimestamp} from '../utils';
const SessionSummary = ({notes}) => (
- <ul className="list-group sticky-left">
- {notes.map((note) =>
- <li className="list-group-item border-0" key={note._id}>
- <a href={'#note-' + note._id}>
- <small className="note-time text-irinotes-time bg-irinotes-headers border-0 text-center">{formatTimestamp(note.startedAt)}</small>
- <small className="note-length font-weight-bold px-2 text-muted text-center">{_.words(note.plain).length} mots</small>
- <small className="note-time text-irinotes-time bg-irinotes-headers border-0 text-center">{formatTimestamp(note.finishedAt)}</small>
- </a>
- </li>
- )}
- </ul>
+ <div className="session-summary-list">
+ <ul className="list-group sticky-left">
+ {notes.map((note) => {
+ const bgColor = note.categories.length > 0 ? Color(note.categories[0].color).lighten(0.5).hex() : "transparent";
+ return (
+ <li className="list-group-item border-0 py-1" key={note._id}>
+ <a href={'#note-' + note._id}>
+ <small className="note-time text-irinotes-time px-1 bg-irinotes-headers border-0 text-center">{formatTimestamp(note.startedAt)}</small>
+ <small className="note-length font-weight-bold text-muted text-center badge" style={{ backgroundColor: bgColor }}>{_.words(note.plain).length} mots</small>
+ <small className="note-time text-irinotes-time px-1 bg-irinotes-headers border-0 text-center">{formatTimestamp(note.finishedAt)}</small>
+ </a>
+ </li>
+ )
+ })}
+ </ul>
+ </div>
)
export default SessionSummary;
--- a/client/src/components/SessionSummary.scss Fri Nov 16 11:19:13 2018 +0100
+++ b/client/src/components/SessionSummary.scss Fri Nov 16 17:01:19 2018 +0100
@@ -1,10 +1,13 @@
-.note {
- &-length {
- color: black;
- font-size: .6rem;
- }
- &-time {
- font-size: .7rem;
+.session-summary-list {
+ overflow-y: auto;
+ .note {
+ &-length {
+ color: black;
+ font-size: .6rem;
+ }
+ &-time {
+ font-size: .7rem;
+ }
}
}
--- a/client/src/index.scss Fri Nov 16 11:19:13 2018 +0100
+++ b/client/src/index.scss Fri Nov 16 17:01:19 2018 +0100
@@ -1,22 +1,2 @@
+@import './scss/fonts';
@import './scss/custom';
-@import './scss/material-font';
-
-
-@font-face {
- font-family: 'Rubik';
- font-style: normal;
- font-weight: 400;
- src: url('assets/rubik-v7-latin-regular.eot'); /* IE9 Compat Modes */
- src: local('Rubik'), local('Rubik-Regular'),
- url('assets/rubik-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
- url('assets/rubik-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
- url('assets/rubik-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
- url('assets/rubik-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
- url('assets/rubik-v7-latin-regular.svg#Rubik') format('svg'); /* Legacy iOS */
- }
-
-body {
- margin: 0;
- // padding-top: $navbar-height + $navbar-margin-bottom;
- font-family: 'Rubik', sans-serif;
-}
--- a/client/src/scss/_custom.scss Fri Nov 16 11:19:13 2018 +0100
+++ b/client/src/scss/_custom.scss Fri Nov 16 17:01:19 2018 +0100
@@ -1,6 +1,8 @@
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
+$font-family-base: 'Rubik', sans-serif;
+
$theme-colors: (
"primary": #769FED,
"secondary": white,
@@ -51,3 +53,8 @@
@import "bootstrap/scss/bootstrap";
+
+.text-irinotes-time {
+ font-family: 'Roboto Mono', monospace;
+ font-weight: 400;
+}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/scss/_fonts.scss Fri Nov 16 17:01:19 2018 +0100
@@ -0,0 +1,49 @@
+@import "~typeface-rubik/index.css";
+
+@import "~typeface-roboto-mono/index.css";
+
+$material-icon-font-path: '~material-design-icons/iconfont/';
+
+@font-face {
+ font-family: 'Material Icons';
+ font-style: normal;
+ font-weight: 400;
+ src: url('#{$material-icon-font-path}MaterialIcons-Regular.eot'); /* For IE6-8 */
+ src: local('Material Icons'),
+ local('MaterialIcons-Regular'),
+ url('#{$material-icon-font-path}MaterialIcons-Regular.woff2') format('woff2'),
+ url('#{$material-icon-font-path}MaterialIcons-Regular.woff') format('woff'),
+ url('#{$material-icon-font-path}MaterialIcons-Regular.ttf') format('truetype');
+};
+
+.material-icons {
+ font-family: 'Material Icons';
+ font-weight: normal;
+ font-style: normal;
+ font-size: 24px; /* Preferred icon size */
+ display: inline-block;
+ line-height: 1;
+ text-transform: none;
+ letter-spacing: normal;
+ word-wrap: normal;
+ white-space: nowrap;
+ direction: ltr;
+
+ /* Support for all WebKit browsers. */
+ -webkit-font-smoothing: antialiased;
+ /* Support for Safari and Chrome. */
+ text-rendering: optimizeLegibility;
+
+ /* Support for Firefox. */
+ -moz-osx-font-smoothing: grayscale;
+
+ /* Support for IE. */
+ font-feature-settings: 'liga';
+}
+
+.material-icons {
+ &.md-18 { font-size: 18px; }
+ &.md-24 { font-size: 24px; }
+ &.md-36 { font-size: 36px; }
+ &.md-48 { font-size: 48px; }
+}
--- a/client/src/scss/_material-font.scss Fri Nov 16 11:19:13 2018 +0100
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,45 +0,0 @@
-$material-icon-font-path: '~material-design-icons/iconfont/';
-
-@font-face {
- font-family: 'Material Icons';
- font-style: normal;
- font-weight: 400;
- src: url('#{$material-icon-font-path}MaterialIcons-Regular.eot'); /* For IE6-8 */
- src: local('Material Icons'),
- local('MaterialIcons-Regular'),
- url('#{$material-icon-font-path}MaterialIcons-Regular.woff2') format('woff2'),
- url('#{$material-icon-font-path}MaterialIcons-Regular.woff') format('woff'),
- url('#{$material-icon-font-path}MaterialIcons-Regular.ttf') format('truetype');
-};
-
-.material-icons {
- font-family: 'Material Icons';
- font-weight: normal;
- font-style: normal;
- font-size: 24px; /* Preferred icon size */
- display: inline-block;
- line-height: 1;
- text-transform: none;
- letter-spacing: normal;
- word-wrap: normal;
- white-space: nowrap;
- direction: ltr;
-
- /* Support for all WebKit browsers. */
- -webkit-font-smoothing: antialiased;
- /* Support for Safari and Chrome. */
- text-rendering: optimizeLegibility;
-
- /* Support for Firefox. */
- -moz-osx-font-smoothing: grayscale;
-
- /* Support for IE. */
- font-feature-settings: 'liga';
-}
-
-.material-icons {
- &.md-18 { font-size: 18px; }
- &.md-24 { font-size: 24px; }
- &.md-36 { font-size: 36px; }
- &.md-48 { font-size: 48px; }
-}
--- a/client/yarn.lock Fri Nov 16 11:19:13 2018 +0100
+++ b/client/yarn.lock Fri Nov 16 17:01:19 2018 +0100
@@ -2438,7 +2438,7 @@
color-name "^1.0.0"
simple-swizzle "^0.2.2"
-color@^3.0.0:
+color@^3.0.0, color@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/color/-/color-3.1.0.tgz#d8e9fb096732875774c84bf922815df0308d0ffc"
integrity sha512-CwyopLkuRYO5ei2EpzpIh6LqJMt6Mt+jZhO5VI5f/wJLZriXQE32/SSqzmrh+QB+AZT81Cj8yv+7zwToW8ahZg==
@@ -10852,6 +10852,16 @@
version "0.0.6"
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
+typeface-roboto-mono@^0.0.54:
+ version "0.0.54"
+ resolved "https://registry.yarnpkg.com/typeface-roboto-mono/-/typeface-roboto-mono-0.0.54.tgz#78e706e0a4158b2b670ed3cdf2269e7a54e671cd"
+ integrity sha512-UjE3Y4Bk7DRA3m9aCN4pp8OOGFEYbJH2wK1Qj3Xv2TjEqEJo+oEmQcXwnt1/DKSYAWdKxSL3D/4ida7OoBFkwQ==
+
+typeface-rubik@^0.0.54:
+ version "0.0.54"
+ resolved "https://registry.yarnpkg.com/typeface-rubik/-/typeface-rubik-0.0.54.tgz#301d18b2efe57495beb5ef096632212b23f4faaf"
+ integrity sha512-cxhqFNp5zGUUIr2i8wDcTT+8/aFnECa/qVwEe6012ouNL2Itu629Y7aI28MazL1HvkNGrUeZ7WsvkOrdu1o9qQ==
+
ua-parser-js@^0.7.18:
version "0.7.19"
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.19.tgz#94151be4c0a7fb1d001af7022fdaca4642659e4b"