Mode sombre v1

package-lock.json

@@ -22,6 +22,7 @@
         "vue": "^2.6.11",
         "vue-cookie": "^1.1.4",
         "vue-cookies": "^1.7.4",
+        "vue-dark-mode-switch": "^1.1.0",
         "vue-js-modal": "^2.0.0-rc.6",
         "vue-js-popover": "^1.2.1",
         "vue-showdown": "^3.1.0",
@@ -19342,6 +19343,15 @@
       "resolved": "https://registry.npmjs.org/vue-cookies/-/vue-cookies-1.7.4.tgz",
       "integrity": "sha512-mOS5Btr8V9zvAtkmQ7/TfqJIropOx7etDAgBywPCmHjvfJl2gFbH2XgoMghleLoyyMTi5eaJss0mPN7arMoslA=="
     },
+    "node_modules/vue-dark-mode-switch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/vue-dark-mode-switch/-/vue-dark-mode-switch-1.1.0.tgz",
+      "integrity": "sha512-HXdzgEcxqr3oJMeG4T4aoRU/Qk+fTuGsPpfKe8y1UAK5arzP/l7wd/hNPlKP5mcBGMLfnZAhLCCuFLUmaBmCdw==",
+      "dependencies": {
+        "core-js": "^3.6.5",
+        "vue": "^2.6.11"
+      }
+    },
     "node_modules/vue-eslint-parser": {
       "version": "7.6.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.6.0.tgz",
@@ -36460,6 +36470,15 @@
       "resolved": "https://registry.npmjs.org/vue-cookies/-/vue-cookies-1.7.4.tgz",
       "integrity": "sha512-mOS5Btr8V9zvAtkmQ7/TfqJIropOx7etDAgBywPCmHjvfJl2gFbH2XgoMghleLoyyMTi5eaJss0mPN7arMoslA=="
     },
+    "vue-dark-mode-switch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/vue-dark-mode-switch/-/vue-dark-mode-switch-1.1.0.tgz",
+      "integrity": "sha512-HXdzgEcxqr3oJMeG4T4aoRU/Qk+fTuGsPpfKe8y1UAK5arzP/l7wd/hNPlKP5mcBGMLfnZAhLCCuFLUmaBmCdw==",
+      "requires": {
+        "core-js": "^3.6.5",
+        "vue": "^2.6.11"
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.6.0",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.6.0.tgz",

package.json

@@ -35,6 +35,7 @@
     "vue": "^2.6.11",
     "vue-cookie": "^1.1.4",
     "vue-cookies": "^1.7.4",
+    "vue-dark-mode-switch": "^1.1.0",
     "vue-js-modal": "^2.0.0-rc.6",
     "vue-js-popover": "^1.2.1",
     "vue-showdown": "^3.1.0",

src/Contenu.vue

@@ -2,7 +2,7 @@
   <div id="app">
     <Volet_Base @rechercherNouvellesPublications="rechercherNouvellesPublications" @choix_variante="choixVariante"
                 @newContenu="newContenu" v-bind:nvoContenu="nvoContenu" v-bind:auteur="auteur"
-                v-bind:contenuAjoute="contenuAjoute" v-bind:majContenus="majContenus" />
+                v-bind:contenuAjoute="contenuAjoute" v-bind:majContenus="majContenus"  v-bind:darktheme="darktheme" />
   </div>
 </template>
 
@@ -48,7 +48,10 @@ export default {
     contenuAjoute: {},
     // Variable contenant un "nouveau contenu", créé à partir d'une demande de publication, à destination de Volet_Base
     nvoContenu: {},
-    majContenus: {}
+    // Signal d'alerte pour mettre à jour les contenus
+    majContenus: {},
+    // Signal d'activation ou non du theme sombre
+    darktheme: {}
 }
 }
 </script>

src/Index.vue

@@ -3,11 +3,11 @@
     <Login v-show="etat === 'unlogged'" @user_logged="setLogged"></Login>
 
     <Menu v-show="etat !== 'unlogged'" v-bind:auteur="auteur" v-bind:etat="etat" v-bind:variante="variante"
-          v-bind:recalculerNotif="recalculerNotif" @menu_choisi="changerPage"></Menu>
+          v-bind:recalculerNotif="recalculerNotif" @menu_choisi="changerPage" @darkTheme="darkTheme"></Menu>
     <Contenu v-show="etat === 'Contenu'" v-bind:auteur="auteur" v-bind:nvoContenu="nvoContenu" v-bind:contenuAjoute="contenuAjoute"
              @choix_variante="choixVariante" @newContenu="newContenu"
              @rechercherNouvellesPublications="rechercherPublications = !rechercherPublications"
-             v-bind:majContenus="majContenus"></Contenu>
+             v-bind:majContenus="majContenus" v-bind:darktheme="darktheme"></Contenu>
     <Maj v-show="etat === 'Mises à jour'" v-bind:auteur="auteur" v-bind:isRecu="isRecu" v-bind:isPropose="isPropose"
          v-bind:contenuEnPublication="contenuEnPublication" @recalculerNotif="recalculerNotification"
          @majNvoContenu="majNvoContenu" @majContenus="majContenus = !majContenus"
@@ -49,7 +49,8 @@ export default {
       nvoContenu: '',
       rechercherPublications: false,
       majContenus: false,
-      errorMessage: 'Login ou mot de passe erroné'
+      errorMessage: 'Login ou mot de passe erroné',
+      darktheme: ''
     }
   },
   methods: {
@@ -131,6 +132,13 @@ export default {
      */
     majNvoContenu: function (event) {
       this.nvoContenu = event.contenu
+    },
+    /**
+     * @vuese
+     * Passage d'information concernant l'activation ou non du theme sombre:
+     */
+     darkTheme: function (event) {
+       this.darktheme = event.active
     }
 
   },

src/Menu.vue

 <template>
-  <div id="menuHaut">
-
+  <div id="menuHaut" v-bind:class="darkMode ? 'dark' : ''">
+    <DarkModeSwitch v-bind:style="{'margin-top': '10px', 'margin-left': '10px'}" @switched="onSwitched"/>
     <Choix_Mode_Variante class="menuVariante" v-show="variante"></Choix_Mode_Variante>
     <p v-show="!variante"> Open Quizz - Bienvenue {{auteur}}</p>
     <div class="notif" v-on:click="choixIconeNotification" v-show="isNotif === true" v-bind:style="[!variante ? {'margin-left': '90%'} : {'margin-left': '32%'}]"></div>
     <div class="circle" id="menuAuteur" v-on:click="isAffiche = !isAffiche"  v-bind:style="styleCircle">
 
     </div>
-    <div class="menu" v-show="isAffiche">
+    <div class="menu"   v-show="isAffiche">
       <div class="sous_menu" v-on:click="choixMenuAnnexe">Profil</div>
       <div v-if="etat !== 'Mises à jour'" class="sous_menu" v-on:click="choixMenuAnnexe">Mises à jour</div>
       <div v-else class="sous_menu" v-on:click="choixMenuAnnexe">Contenu</div>
@@ -22,6 +22,9 @@
 //[!isNotif ? {'margin-left': '94.75%'} : {'margin-left': '3%'}
 import Choix_Mode_Variante from "./components/Choix_Mode_Variante";
 import Service from "./service/Service";
+import DarkModeSwitch from 'vue-dark-mode-switch'
+import 'vue-dark-mode-switch/dist/vue-dark-mode-switch.css'
+
 export default {
   name: "Menu",
   data: function () {
@@ -31,6 +34,7 @@ export default {
       isRecu: false,
       isPropose: false,
       styleCircle: {},
+      darkMode: false,
       roblox: "https://www.google.com/url?sa=i&url=https%3A%2F%2Feducation.roblox.com%2F&psig=AOvVaw2WUZcaXl4Wpn3dLXhgO41R&ust=1626436473301000&source=images&cd=vfe&ved=0CAoQjRxqFwoTCIjmoJWC5fECFQAAAAAdAAAAABAD"
     }
   },
@@ -128,6 +132,10 @@ export default {
 
       })
     },
+    /**
+     * @vuese
+     * Fonction qui petmet d'affecter les bonnes marges pour le menu d'en haut à droite
+     */
     changerStyle: function () {
 
 
@@ -141,10 +149,15 @@ export default {
         this.styleCircle["margin-left"] = "94.75%"
 
       }
+    },
+    onSwitched: function (isSwitched) {
+      this.darkMode = isSwitched
+      this.$emit("darkTheme", {active: isSwitched})
     }
   },
   components: {
-    Choix_Mode_Variante
+    Choix_Mode_Variante,
+    DarkModeSwitch
   },
   watch: {
     /**
@@ -208,7 +221,7 @@ export default {
   background: white;
   border: thin solid black;
   margin-top: 46px;
-  margin-left: 93%;
+  margin-left: 94.75%;
   position: absolute;
   display: flex;
   flex-direction: column;
@@ -247,4 +260,9 @@ p {
   margin-top: 0.5%;
   margin-bottom: 0.1%;
 }
+
+.dark {
+  background-color: #111 !important;
+  color: #eee;
+}
 </style>
\ No newline at end of file

src/components/Volet_Base.vue

 <template>
-  <div id="divPrincipale">
+  <div id="divPrincipale" >
 
     <div id="principal" v-show="!modeConsultation && !modeModification">
 <!--   width: 330px;
  -->
-      <div id="ensemble" :style="isActif ? {width: '330px'} : {width: '40px'}">
+      <div id="ensemble" class="ensemble" :class="darktheme ? 'ensembledark' : ''" :style="isActif ? {width: '340px'} : {width: '40px'}">
         <button id="changerVariante" :style="isActif ? {width: 'auto'} : {width: '20px'}"
                 v-show="!modeConsultation && !modeModification" v-on:click="changerVariante">{{ texteBoutonvariante }}</button>
-        <br><br>
+        <br>
 
         <button id="boutonVolet" v-on:click="desactiverVolet"  v-bind:style="panierChoisi ? {'margin-top': '0%'} : {'margin-top': '24px'}"></button>
         <div class="full" id="volet" v-show="isActif">
@@ -17,7 +17,7 @@
         </div>
       </div>
 
-      <div id="tableau"  :style="isActif ? {width: '90%'} : {width: '98%'}" >
+      <div id="tableau"  :class="darktheme ? 'tableaudark' : ''" :style="isActif ? {width: '90%'} : {width: '98%'}" >
         <div class="choixPanier" v-show="panierChoisi && !modeConsultation && !modeModification">
           <label id="labelPerso" :style="isActif ? {'margin-left': '-5px'} : {'margin-left': '148px'}">Perso </label>
           <input type="checkbox" class="filtreTableau" id="filtrePerso" v-model="persoChecked"
@@ -41,7 +41,7 @@
             <th v-bind:colspan="!isActif ? 10 : 8">Contenus</th>
           </tr>
           </thead>
-          <tr v-bind:style="{'background-color': 'orange'}">
+          <tr v-bind:style="!darktheme ? {'background-color': 'orange'} : {'background-color': '#FF8C00'}">
             <th>Titre</th>
             <th>Auteur</th>
             <th>Version actuelle</th>
@@ -161,7 +161,10 @@ export default {
     contenuAjoute: {},
     // Permet de stocker un 'nouveau contenu' ajouté
     nvoContenu: {},
-    majContenus: {}
+    // Signal d'alerte pour mettre à jour les contenus
+    majContenus: {},
+    // Signal d'activation ou non du theme sombre
+    darktheme: {}
   },
   data: function () {
     return {
@@ -233,6 +236,10 @@ export default {
       // Fonction retour du menu des maj
       this.contenus.push(this.nvoContenu)
     },
+    /**
+     * @vuese
+     * Mise à jour des contenus pour l'auteur connecté
+     */
     majContenus: function () {
       this.contenusDuPanier()
       this.contenusDeLaBanque()
@@ -690,6 +697,7 @@ tfoot {
   border: 1px solid black;
   margin-top: 2px;
   margin-left: 10px;
+  margin-right: 10px;
 }
 
 #boutonVolet {
@@ -702,6 +710,8 @@ tfoot {
   text-align: center;
   line-height: 1em;
   margin-left: 10px;
+  margin-top: 5px;
+  margin-bottom: 20px;
 
 }
 
@@ -768,7 +778,7 @@ th image
 
 #ensemble {
   background-color: whitesmoke;
-  height: 846px;
+  height: 845px;
 }
 
 #tableau {
@@ -780,4 +790,24 @@ th image
 }*/
 
 /*<img src="@/assets/img/etoile.png" alt="" height=20 width=20/>*/
-</style>
+
\ No newline at end of file
+.ensembledark {
+  background-color: #878787  !important;
+  color: white;
+}
+
+.tableaudark td {
+  background-color: #878787  !important;
+  color: white;
+}
+
+.titreTab {
+  background-color: !important;
+}
+
+.tableaudark thead {
+  background-color: white !important;
+  color: black;
+}
+
+</style>#FF8C00
\ No newline at end of file