From 9606997963d20d60611edfcc78ce12e6e35ae795 Mon Sep 17 00:00:00 2001
From: Sylvain Coulange <sylvain.coulange@univ-grenoble-alpes.fr>
Date: Sun, 29 Nov 2020 18:22:10 +0100
Subject: [PATCH] colorisation boutons + encadrement des tokens quand affichage
 du tag

---
 grammacolorapp/views.py       |  4 ++--
 static/js/coloriser.js        |  8 ++++++++
 static/languages/languages.js |  2 +-
 static/styles/styles.css      | 21 +++++++++++++++++++--
 templates/coloriser.html      |  4 ++--
 5 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/grammacolorapp/views.py b/grammacolorapp/views.py
index 8eeb091..19b7dfe 100644
--- a/grammacolorapp/views.py
+++ b/grammacolorapp/views.py
@@ -2,8 +2,8 @@ from django.shortcuts import render
 from django.http import JsonResponse
 import re, json, spacy, subprocess
 
-nlpFr = spacy.load('fr_core_news_lg')
-nlpZh = spacy.load('zh_core_web_lg')
+nlpFr = spacy.load('fr_core_news_md')
+nlpZh = spacy.load('zh_core_web_md')
 
 def home(request):
     updateTimeStr = updateTime()
diff --git a/static/js/coloriser.js b/static/js/coloriser.js
index e735562..22b6915 100644
--- a/static/js/coloriser.js
+++ b/static/js/coloriser.js
@@ -88,6 +88,12 @@ async function runSpacy() {
 
 	var outText = document.getElementById('outText');
 	outText.innerHTML = result;
+
+	// On relance switchTags() si il était actif
+	if (tags) {
+		switchTags(); 
+		switchTags();
+	}
 	
 }
 
@@ -112,12 +118,14 @@ function switchTags(){
 	if (tags) { // Masque les étiquettes morphosyntaxiques
 		for (i=0; i<tokens.length; i++){
 			tokens[i].title = '';
+			tokens[i].classList = "token";
 		}
 		divBtnTags.style.border = "1px solid transparent";
 
 	} else { // Affiche les étiquettes morphosyntaxiques
 		for (i=0; i<tokens.length; i++){
 			tokens[i].title = tokens[i].getAttribute('title-data');
+			tokens[i].classList = "token tokenborder";
 		}
 		divBtnTags.style.border = "1px solid green";
 	}
diff --git a/static/languages/languages.js b/static/languages/languages.js
index 62b5545..6325886 100644
--- a/static/languages/languages.js
+++ b/static/languages/languages.js
@@ -25,7 +25,7 @@ var langJson = {
     },
     "sp_subtitle": {
         "fr": "<span style='color:#00b54a'>Coloriseur</span> <span style='color:#980086'>grammatical</span> <span style='color:#fff'>et</span> <span style='color:#980086'>automatique</span> <span style='color:#c00018'>de</span> <span style='color:#00b54a'>texte</span>",
-        "zh": ""
+        "zh": "<span style='color:#980086'>自動</span><span style='color:#00b54a'>語法</span><span style='color:#fff'>和</span><span style='color:#00b54a'>文本着色器</span>"
     },
     "sp_consigne": {
         "fr": "Entrez du texte à analyser :",
diff --git a/static/styles/styles.css b/static/styles/styles.css
index 256d5ae..ba3622b 100644
--- a/static/styles/styles.css
+++ b/static/styles/styles.css
@@ -24,18 +24,29 @@ body {
     padding: 0px;
 }
 
+h1 {
+    font-size: 3em;
+}
+
 h2 {
     padding: 10px;
-    font-size: 1.5em;
+    font-size: 2em;
     font-weight: bold;
     margin: auto;
 }
 
 .contours {
-    -webkit-text-stroke-width: 0.7px;
+    -webkit-text-stroke-width: 0.5px;
     -webkit-text-stroke-color: black;
 }
 
+button {
+    border-radius: 5px;
+    margin: 5px;
+    padding: 2px 18px;
+}
+
+
 .outputParam {
     position: absolute;
     right: 0px;
@@ -158,4 +169,10 @@ footer {
 
 .btntags {
     border: 1px solid transparent;
+}
+
+.tokenborder:hover {
+    border: 1px solid rgba(255, 255, 255, 0.74);
+    border-radius: 5px;
+    padding-top: 10px;
 }
\ No newline at end of file
diff --git a/templates/coloriser.html b/templates/coloriser.html
index 07c7ea1..19af7c3 100644
--- a/templates/coloriser.html
+++ b/templates/coloriser.html
@@ -30,8 +30,8 @@
             <button onclick="getExample()"><span id="sp_exemple" class="langspan"></span></button>
         </div>
         <textarea class="inText" id="inText"></textarea>
-        <button onclick="runSpacy()"><span id="sp_analyser" class="langspan"></span></button>
-        <button onclick="erase()"><span id="sp_effacer" class="langspan"></span></button>
+        <button style="background-color: rgb(179, 247, 179);" onclick="runSpacy()"><span id="sp_analyser" class="langspan"></span></button>
+        <button style="background-color: rgb(221, 221, 221);" onclick="erase()"><span id="sp_effacer" class="langspan"></span></button>
     </div>
 
     <div id="outputDiv" class="win-black outputMainDiv">
-- 
GitLab