From 6b3651f5f28a5d38451cef985706362e4e65757a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=B4me=20Chauveau?= <jerome.chauveau@unicaen.fr>
Date: Fri, 1 May 2020 11:25:48 +0200
Subject: [PATCH] active button enabled + css stuff

---
 src/assets/dedediteur.css     |  1 +
 src/assets/menubar.scss       | 83 +++++++++++++++++++++--------------
 src/components/Dedediteur.vue | 12 ++---
 3 files changed, 58 insertions(+), 38 deletions(-)

diff --git a/src/assets/dedediteur.css b/src/assets/dedediteur.css
index b027446..d20d42e 100644
--- a/src/assets/dedediteur.css
+++ b/src/assets/dedediteur.css
@@ -7,6 +7,7 @@
 }
 .editor__content {
   margin: auto;
+  margin-top: 100px;
 }
 
 /* MOTS */
diff --git a/src/assets/menubar.scss b/src/assets/menubar.scss
index 81147b0..6898f4e 100644
--- a/src/assets/menubar.scss
+++ b/src/assets/menubar.scss
@@ -1,12 +1,11 @@
-$button-width : 42px;
-$button-border : 2px solid black;
-.menubar{
+$button-width: 42px;
+$button-border: 2px solid black;
+.menubar {
 
 
   &.paragraph-menubar {
-
     position: fixed;
-    display:flex;
+    display: flex;
     flex-direction: column;
 
     top: 100px;
@@ -17,70 +16,81 @@ $button-border : 2px solid black;
       width: $button-width;
       height: $button-width;
       background-color: white;
-      border-left: $button-border ;
-      border-right: $button-border ;
-      border-bottom: $button-border ;
-      border-top :none;
-      &:nth-child(1){
-        border-top : $button-border ;
+      border-left: $button-border;
+      border-right: $button-border;
+      border-bottom: $button-border;
+      border-top: none;
+
+      &:nth-child(1) {
+        border-top: $button-border;
       }
 
-      &:hover{
+      &:hover {
         color: white;
         background-color: black;
       }
     }
   }
 
-  &.char-menubar{
+  &.char-menubar {
 
     top: 10px;
+    left: 0px;
     display: block;
-    width : 75%;
-    margin : 50px 0px 100px 0px;
+    width: 100%;
+    position: fixed;
+    text-align: center;
+    z-index: 10;
     ul, li {
-       padding:0;
-       margin: 0;
+      padding: 0;
+      margin: 0;
     }
 
 
-
     & > ul {
       display: flex;
-      justify-content:flex-start;
+      justify-content: center;
       position: relative;
-      li, button{
+
+      li, button {
         cursor: pointer;
       }
+
       ul {
-        display:none;
+        display: none;
         position: absolute;
       }
+
       & > li {
+        background-color: white;
         width: 150px;
         list-style-type: none;
-        border-top: $button-border ;
-        border-right: $button-border ;
-        border-bottom: $button-border ;
-        &:nth-child(1){
-          border-left: $button-border ;
+        border-top: $button-border;
+        border-right: $button-border;
+        border-bottom: $button-border;
+
+        &:nth-child(1) {
+          border-left: $button-border;
         }
       }
-      li:hover{
+
+      li:hover {
         ul {
           display: flex;
           flex-direction: column;
           position: absolute;
           width: 152px;
-          li{
-            border-left: $button-border ;
-            border-right: $button-border ;
-            border-bottom: $button-border ;
+
+          li {
+            border-left: $button-border;
+            border-right: $button-border;
+            border-bottom: $button-border;
             list-style-type: none;
             margin-left: -2px;
+            background-color: white;
 
             button {
-              border :none;
+              border: none;
               background-color: white;
               width: 100%;
             }
@@ -88,8 +98,15 @@ $button-border : 2px solid black;
         }
       }
 
-
     }
+
+
+
+  }
+
+  .menubar__button.is-active{
+    color: white;
+    background-color: black;
   }
 
 }
diff --git a/src/components/Dedediteur.vue b/src/components/Dedediteur.vue
index 9da7b8c..bd1ce64 100644
--- a/src/components/Dedediteur.vue
+++ b/src/components/Dedediteur.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="editor">
     <div id="file_actions">
-      <button id="input_button" onclick="document.getElementById('input').click()"></button>
-      <button id="output_button" v-on:click="saveFile"></button>
+      <button title="Ouvrir un fichier" id="input_button" onclick="document.getElementById('input').click()"></button>
+      <button title="Enregistrer" id="output_button" v-on:click="saveFile"></button>
       <input type="file" style="display:none;" id="input" v-on:change="loadFile()">
     </div>
 
@@ -386,11 +386,13 @@ Soit un <a href="https://fr.wiktionary.org/wiki/moment">moment</a> de <a href="h
   position: fixed;
   top: 10px;
   left: 10px;
+    z-index: 200;
 }
 #output_button, #input_button{
-  border : 1px solid black;
-  width: 24px;
-  height: 24px;
+    border : 1px solid black;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
 }
 #input_button{
   background-color: white;