# HG changeset patch
# User ymh <ymh.work@gmail.com>
# Date 1542384079 -3600
# Node ID ac1a026edd586766c687166473bca4cbf7bc9ba0
# Parent  0e6703cd0968d82adbaa5ae4197be9114a7d50c8
Correct display of protocol
small improvment on fonts

diff -r 0e6703cd0968 -r ac1a026edd58 client/package.json
--- 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"
   },
diff -r 0e6703cd0968 -r ac1a026edd58 client/src/assets/rubik-v7-latin-regular.eot
Binary file client/src/assets/rubik-v7-latin-regular.eot has changed
diff -r 0e6703cd0968 -r ac1a026edd58 client/src/assets/rubik-v7-latin-regular.ttf
Binary file client/src/assets/rubik-v7-latin-regular.ttf has changed
diff -r 0e6703cd0968 -r ac1a026edd58 client/src/assets/rubik-v7-latin-regular.woff
Binary file client/src/assets/rubik-v7-latin-regular.woff has changed
diff -r 0e6703cd0968 -r ac1a026edd58 client/src/assets/rubik-v7-latin-regular.woff2
Binary file client/src/assets/rubik-v7-latin-regular.woff2 has changed
diff -r 0e6703cd0968 -r ac1a026edd58 client/src/components/ProtocolSummary.js
--- 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>
+);
diff -r 0e6703cd0968 -r ac1a026edd58 client/src/components/ProtocolSummary.scss
--- /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;
+
+}
diff -r 0e6703cd0968 -r ac1a026edd58 client/src/components/Session.js
--- 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
diff -r 0e6703cd0968 -r ac1a026edd58 client/src/components/Session.scss
--- 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%;
diff -r 0e6703cd0968 -r ac1a026edd58 client/src/components/SessionSummary.js
--- 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;
diff -r 0e6703cd0968 -r ac1a026edd58 client/src/components/SessionSummary.scss
--- 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;
+        }
     }
 }
 
diff -r 0e6703cd0968 -r ac1a026edd58 client/src/index.scss
--- 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;
-}
diff -r 0e6703cd0968 -r ac1a026edd58 client/src/scss/_custom.scss
--- 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;
+}
diff -r 0e6703cd0968 -r ac1a026edd58 client/src/scss/_fonts.scss
--- /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; }
+}
diff -r 0e6703cd0968 -r ac1a026edd58 client/src/scss/_material-font.scss
--- 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; }
-}
diff -r 0e6703cd0968 -r ac1a026edd58 client/yarn.lock
--- 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"