From 46355c8776f3efac96affbde3d2a7ed3f2535141 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matt=C3=A9o=20Delabre?= <contact@matteodelabre.me>
Date: Wed, 4 Dec 2019 13:53:33 -0500
Subject: [PATCH] app: Affichage des alias

---
 app/src/components/TermInput.js |  8 ++++++++
 app/src/data/mock.js            |  6 ------
 app/style/style.css             | 18 ++++++++++++++++++
 3 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/app/src/components/TermInput.js b/app/src/components/TermInput.js
index c6382c8..22125e1 100644
--- a/app/src/components/TermInput.js
+++ b/app/src/components/TermInput.js
@@ -216,6 +216,14 @@ const TermInput = ({terms, availableTerms, setTerms}) =>
                         onClick={addTerm.bind(null, suggestion)}
                     >
                         {suggestion.name}
+                        {suggestion.alias.length >= 1 ? (
+                            <span
+                                className="TermInput_suggestionAlias"
+                                title={`Alias du terme : ${suggestion.alias.join(', ')}`}
+                            >
+                                {suggestion.alias.join(', ')}
+                            </span>
+                        ) : null}
                     </li>
                 )}
             </ul>
diff --git a/app/src/data/mock.js b/app/src/data/mock.js
index 9dbda56..02c26fb 100644
--- a/app/src/data/mock.js
+++ b/app/src/data/mock.js
@@ -23,9 +23,6 @@ export const terms = {
         id: 'Q154882',
         name: 'Légionellose',
         alias: [
-            'Légionnellose',
-            'Légionnelose',
-            'Légionelose',
             'Maladie des légionnaires',
         ],
         types: [types.disease],
@@ -42,8 +39,6 @@ export const terms = {
         id: 'Q326663',
         name: 'Encéphalite à tiques',
         alias: [
-            'Encéphalite à tique',
-            'Encéphalites à tiques',
             'Encéphalite d\'Europe centrale',
             'Encéphalite verno-estivale russe',
             'Méningoencéphalite à tique',
@@ -106,7 +101,6 @@ export const terms = {
         id: 'Q127076',
         name: 'Vomissement',
         alias: [
-            'Vomissements',
             'Vomi',
             'Vomissage',
             'Vomir',
diff --git a/app/style/style.css b/app/style/style.css
index af989e0..404cf0f 100644
--- a/app/style/style.css
+++ b/app/style/style.css
@@ -156,6 +156,10 @@ input
 
     cursor: pointer;
     line-height: calc(2 * var(--base-size));
+    white-space: nowrap;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
 
     transition: background var(--animation-short) var(--animation-ease-out);
 }
@@ -165,6 +169,19 @@ input
     background: var(--color-light-darker);
 }
 
+.TermInput_suggestionAlias
+{
+    font-style: italic;
+    color: var(--color-dark-lighter);
+}
+
+.TermInput_suggestionAlias::before
+{
+    content: "— ";
+    margin-left: calc(.4 * var(--base-size));
+    margin-right: calc(.25 * var(--base-size));
+}
+
 /**
  * Graph
  */
@@ -248,6 +265,7 @@ input
     font-size: var(--font-size-larger);
     font-style: italic;
     color: var(--color-dark-lighter);
+    text-align: center;
 }
 
 /**