Skip to content

O
OpenQuizz
Commit abebb66c authored by Jérémie Passerat's avatar Jérémie Passerat
Browse files
Options

Modifications mineures suite ajout mode sombre

parent c1b951fe
Show whitespace changes
Inline Side-by-side
Showing with 134 additions and 43 deletions
src/Login.vue
View file @ abebb66c
<template>
<div id="body">
<div id="titreApp"> OpenQuizz </div>
<div id="loginForm" v-on:keyup="keymonitor">
<p>Trois comptes temporaires : Charles, Jacques, Valery</p>
......@@ -17,6 +22,7 @@
<button @click.prevent="logIn" >Connexion</button>
</div>
</div>
</template>
<script>
......@@ -25,6 +31,9 @@ import Service from './service/Service'
export default {
name: "Login",
mounted() {
document.body.style.backgroundColor = "aqua";
},
methods: {
logIn: function () {
let that = this
......@@ -62,11 +71,23 @@ export default {
</script>
<style scoped>
body {
background-color: green;
min-height: 100vh;
}
#loginForm {
width : 1000px;
width : 500px;
text-align: center;
align-content: center;
margin: 15% auto 0;
margin: 6% auto 0;
border: 1px solid black;
padding-top: 2.5% ;
padding-bottom: 2.5% ;
background-color: mediumpurple;
}
input{
......@@ -80,5 +101,11 @@ button {
text-align: center;
}
#titreApp {
text-align: center;
padding-top: 7.5%;
font-size: 300%;
}
</style>
\ No newline at end of file
src/Menu.vue
View file @ abebb66c
......@@ -7,13 +7,13 @@
<div class="circle" id="menuAuteur" v-on:click="isAffiche = !isAffiche" v-bind:style="styleCircle">
</div>
<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>
<div class="sous_menu" v-on:click="choixMenuAnnexe">Tags</div>
<div class="sous_menu" v-on:click="evaluations">Evaluations</div>
<div class="sous_menu" v-on:click="choixMenuAnnexe">Deconnexion</div>
<div class="menu" v-bind:class="darkMode ? 'menuDark' : ''" v-show="isAffiche">
<div class="sous_menu" v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="choixMenuAnnexe">Profil</div>
<div v-if="etat !== 'Mises à jour'" v-bind:class="darkMode ? 'sous_menuDark' : ''" class="sous_menu" v-on:click="choixMenuAnnexe">Mises à jour</div>
<div v-else class="sous_menu" v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="choixMenuAnnexe">Contenu</div>
<div class="sous_menu" v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="choixMenuAnnexe">Tags</div>
<div class="sous_menu" v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="evaluations">Evaluations</div>
<div class="sous_menu" v-bind:class="darkMode ? 'sous_menuDark' : ''" v-on:click="choixMenuAnnexe">Deconnexion</div>
</div>
</div>
</template>
......@@ -256,13 +256,14 @@ p {
align-content: center;
display: flex;
position: absolute;
left: 47.5%;
left: 44%;
margin-top: 0.5%;
margin-bottom: 0.1%;
}
.dark {
.dark, .menuDark, .sous_menuDark {
background-color: #111 !important;
color: #eee;
border-color: white !important;
}
</style>
\ No newline at end of file
src/components/Barre_Filtre.vue
View file @ abebb66c
<template>
<div>
<form>
<select class="filtre" name="filtre" v-model="selected" v-on:change="a()" size="1">
<select class="filtre" name="filtre" v-bind:style="darktheme ? { 'background-color': 'black', color: 'white'} : ''"
v-model="selected" v-on:change="a()" size="1">
<option disabled value="">Choix du filtre</option>
<option>tags officiels</option>
<option v-show="panierChoisi">tags libres</option>
......@@ -21,7 +22,9 @@ export default {
// Variable indicative du fait de savoir si le mode panier est activé ou pas (change l'affichage des filtres disponibles)
panierChoisi : {
type: Boolean
}
},
// Signal d'activation ou non du theme sombre
darktheme: {}
},
methods: {
/**
......@@ -47,4 +50,5 @@ export default {
margin-top: 2px;
flex-basis: 80%;
}
</style>
\ No newline at end of file
src/components/Barre_Recherche.vue
View file @ abebb66c
<template>
<div>
<form><input type="text" class="filtre" placeholder="votre recherche"></form>
<form><input type="text" v-bind:style="darktheme ? { 'background-color': 'black', color: 'white'} : ''" class="filtre" placeholder="votre recherche"></form>
</div>
</template>
<script>
export default {
name: "Barre_Recherche"
name: "Barre_Recherche",
props: {
// Signal d'activation ou non du theme sombre
darktheme: {}
},
}
</script>
......@@ -17,4 +21,11 @@ export default {
flex-basis: 80%;
height: 22px;
}
/*
input[type="text"]{ background-color: black; color: white}
*/
</style>
\ No newline at end of file
src/components/Choix_Mode.vue
View file @ abebb66c
<template>
<div>
<div id = "choixDuMode" class="contenusPersos" v-on:click="changerChoix">
<div id = "contenusPanier" v-bind:class="{'clicked': contenuPanier, 'nonClicked': !contenuPanier}">
<div id = "choixDuMode" class="contenusPersos" v-on:click="changerChoix" >
<div class= "contenusPanier" v-if="!darktheme" v-bind:class="{'clicked': contenuPanier, 'nonClicked': !contenuPanier}">
<p>Panier</p>
</div>
<div class= "contenusPanier" v-else v-bind:class="{'clicked': contenuPanier, 'nonClickedDark': !contenuPanier}">
<p>Panier</p>
</div>
<div class = "contenusBanque" v-if="!darktheme" v-bind:class="{'clicked': !contenuPanier, 'nonClicked': contenuPanier}">
<p>Banque</p>
</div>
<div class = "contenusBanque" v-else v-bind:class="{'clicked': !contenuPanier, 'nonClickedDark': contenuPanier}">
<div id = "contenusBanque" v-bind:class="{'clicked': !contenuPanier, 'nonClicked': contenuPanier}">
<p>Banque</p>
</div>
......@@ -25,7 +35,9 @@ export default {
},
props: {
// Signal pour remise à zéro de l'affichage du menu Panier / banque
razModeVariante: {}
razModeVariante: {},
// Signal d'activation ou non du theme sombre
darktheme: {}
},
methods: {
......@@ -56,12 +68,12 @@ export default {
<style scoped>
#choixDuMode {
border: 1px solid black;
flex-basis: 10%;
display: flex;
z-index: 1;
}
#contenusPanier, #contenusBanque {
.contenusPanier, .contenusBanque {
width: 49%;
flex-grow: 1;
text-align: center;
......@@ -72,6 +84,10 @@ export default {
outline: 1px solid black;
}
.nonClickedDark {
outline: 1px solid white;
}
.clicked {
outline: 5px solid yellow;
}
......
src/components/Volet_Base.vue
View file @ abebb66c
......@@ -9,10 +9,10 @@
v-show="!modeConsultation && !modeModification" v-on:click="changerVariante">{{ texteBoutonvariante }}</button>
<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">
<Volet_Menu v-bind:panierChoisi = "panierChoisi" @filtre_choisi="passerFiltre" @basculeRechercheFiltre="basculeRechercheFiltre"/>
<Volet_Contenu @mode_choisi="ajusterMode" v-bind:filtre_choisi="filtre_choisi" v-bind:variante="variante" v-bind:auteur="auteur"
<button id="boutonVolet" v-on:click="desactiverVolet" v-bind:style="{'margin-top': '0%'}"></button>
<div class="full" id="volet" v-bind:style="darktheme ? {'border-color': 'white'} : {'border-color': 'black'}" v-show="isActif">
<Volet_Menu v-bind:darktheme="darktheme" v-bind:panierChoisi = "panierChoisi" @filtre_choisi="passerFiltre" @basculeRechercheFiltre="basculeRechercheFiltre"/>
<Volet_Contenu v-bind:darktheme="darktheme" @mode_choisi="ajusterMode" v-bind:filtre_choisi="filtre_choisi" v-bind:variante="variante" v-bind:auteur="auteur"
@filtresChoisis="filtresChoisis" v-bind:razModeVariante="razModeVariante" v-bind:modeFiltre="modeFiltre" />
</div>
</div>
......@@ -53,7 +53,7 @@
<th v-show="!isActif">Type</th>
<th v-show="!isActif">Source</th>
<th v-on:click="supprimerContenus" class="supprimerContenus">
<img v-bind:src="panierChoisi ? imgPoubelle : imgEtoile" alt='' height=20 width=20/></th>
<img v-bind:style="{'background-color': 'orange'}" v-bind:src="panierChoisi ? imgPoubelle : imgEtoile" alt='' height=20 width=20/></th>
</tr>
<tbody>
......@@ -114,7 +114,8 @@
</table>
<tooltip />
<div id="ajouterContenu" v-show="panierChoisi && !modeConsultation" class="circle" v-bind:style="{'margin-left': (!isActif ? '94.8%' : '94%')}">
<div id="ajouterContenu" v-show="panierChoisi && !modeConsultation" class="circle" v-bind:class="darktheme ? 'circleDark' : ''"
v-bind:style="{'margin-left': (!isActif ? '94.8%' : '94%')}">
<b-popover target="ajouterContenu" triggers="click" placement="lefttop">
<template #title>Choix : </template>
<button v-on:click="ajouterContenu('1')" v-bind:style="'height: auto; width: auto'">1. Créer un markdown</button>
......@@ -694,7 +695,7 @@ tfoot {
position: relative;
width: 300px;
height: 500px;
border: 1px solid black;
border: 1px solid;
margin-top: 2px;
margin-left: 10px;
margin-right: 10px;
......@@ -723,10 +724,27 @@ tfoot {
justify-content: center;
height: 75px;
width: 75px;
/*background: white url(../assets/img/plus.png);*/
background: white url(../assets/img/plus.png);
background-size: cover;
}
.circleDark{
/* border: 1px solid black ;
border-radius: 50%;
display: flex; !* or inline-flex *!
align-items: center;
justify-content: center;
height: 75px;
width: 75px;
!*background: white url(../assets/img/plus.png);*!*/
border: 1px solid white;
background: black url(../assets/img/plus2.png);
background-size: cover;
/*background-size: cover;*/
}
#ajouterContenu {
position:absolute;
......@@ -745,9 +763,13 @@ tfoot {
th{
text-align: center;
}
#choixDuMode::v-deep {
border-color: white;
}
th image
{
background-color: yellow;
......@@ -762,12 +784,13 @@ th image
width: 20px;
padding-bottom: 4px;
padding-top: -3px;
background-color: orange;
}
.ajouterTiers {
height: 20px;
width: 20px;
background: url(../assets/img/etoile.png);
background: orange url(../assets/img/etoile.png);
}
......@@ -778,11 +801,12 @@ th image
#ensemble {
background-color: whitesmoke;
height: 845px;
height: 966px;
}
#tableau {
background-color: lightgrey;
padding-top: 0.25%;
}
/*#divPrincipale {
......@@ -792,17 +816,16 @@ th image
/*<img src="@/assets/img/etoile.png" alt="" height=20 width=20/>*/
.ensembledark {
background-color: #878787 !important;
/*background-color: #878787 !important;*/
background-color: #353839 !important;
color: white;
}
.tableaudark td {
background-color: #878787 !important;
/*background-color: #878787 !important;*/
background-color: #353839 ;
color: white;
}
.titreTab {
background-color: !important;
border-color: white;
}
.tableaudark thead {
......@@ -810,4 +833,9 @@ th image
color: black;
}
.tableaudark th {
border-color: white;
}
</style>#FF8C00
\ No newline at end of file
src/components/Volet_Contenu.vue
View file @ abebb66c
......@@ -8,7 +8,7 @@
<Detail_Contenu v-bind:modeFiltre="modeFiltre" v-bind:panierChoisi="panierChoisi" v-bind:filtre_choisi="filtre_choisi"
v-bind:auteur="auteur" @creer_filtre="creer_filtre"/>
</div>
<Choix_Mode v-show="!variante" @mode_choisi="ajusterMode" v-bind:razModeVariante="razModeVariante" />
<Choix_Mode v-show="!variante" v-bind:darktheme="darktheme" @mode_choisi="ajusterMode" v-bind:razModeVariante="razModeVariante" />
</div>
</template>
......@@ -34,7 +34,9 @@ export default {
// Signal pour remise à zéro de l'affichage du menu Panier / banque
razModeVariante: {},
// mode filtre enclenché ou non
modeFiltre: {}
modeFiltre: {},
// Signal d'activation ou non du theme sombre
darktheme: {}
},
methods: {
......
src/components/Volet_Menu.vue
View file @ abebb66c
<template>
<div class="menu">
<div id="listeFiltres" class="filtre">
<Barre_Filtre v-bind:panierChoisi="panierChoisi" v-show="modeFiltre" @filtre_choisi="passerFiltre"/>
<Barre_Recherche v-show="!modeFiltre"/>
<Barre_Filtre v-bind:darktheme="darktheme" v-bind:panierChoisi="panierChoisi" v-show="modeFiltre" @filtre_choisi="passerFiltre"/>
<Barre_Recherche v-bind:darktheme="darktheme" v-show="!modeFiltre"/>
</div>
<button id="recherche" v-bind:class="{'modeFiltre': modeFiltre, 'modeRecherche': !modeFiltre}" v-on:click="changerModeMenu"></button>
</div>
......@@ -19,7 +19,9 @@ export default {
},
props: {
// Variable permettant de déterminer si on est en mode panier ou en mode banque
panierChoisi: {}
panierChoisi: {},
// Signal d'activation ou non du theme sombre
darktheme: {}
},
data: function () {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment