Merge pull request #203 from abes-esr/THE-1167-Mettre-en-place-le-mod…

…e-sombre-contrast FIX intitulés des roles de cartes personnes
abes-esr · Apr 4, 2024 · acb5d61 · acb5d61
2 parents 2f19d48 + e6044b1
commit acb5d61
Show file tree

Hide file tree

Showing 21 changed files with 330 additions and 49 deletions.
diff --git a/app.vue b/app.vue
@@ -509,4 +509,17 @@ h4 {
     order: 10;
   }
 }
+
+.skeleton, .skeleton-cards {
+  background-color: rgb(var(--v-theme-gris-skeleton)) !important;
+}
+
+a,
+a:visited,
+a:hover,
+a:active {
+  color: inherit;
+  text-decoration: none;
+  font-weight: 600;
+}
 </style>
diff --git a/assets/idref-icone.png b/assets/idref-icone.png
diff --git a/components/common/DomainSelector.vue b/components/common/DomainSelector.vue
@@ -94,7 +94,8 @@ watch(() => currentRoute.path, () => {
   }
 
   .v-divider {
-    color: #0b2134;
+    color: rgb(var(--v-theme-gris-fonce));
+    opacity: 0.5;
     border-width: 0 2px 0 0;
     margin: 0 2rem 0 2rem;
 

diff --git a/components/common/ExportButton.vue b/components/common/ExportButton.vue
@@ -1,12 +1,7 @@
 <template>
   <v-menu location="bottom">
     <template v-slot:activator="{ props }">
-      <v-btn flat append-icon="mdi-file-export-outline" variant="outlined" v-bind="props">
-        <template v-slot:append-icon>
-          <v-icon>
-            mdi-file-export-outline
-          </v-icon>
-        </template>
+      <v-btn flat append-icon="mdi-upload-box" variant="outlined" v-bind="props">
         <p>{{ $t("theseView.exporter") }}</p>
       </v-btn>
     </template>

diff --git a/components/common/HeaderCustom.vue b/components/common/HeaderCustom.vue
@@ -212,4 +212,8 @@ header {
     opacity: 1;
   }
 }
+
+:deep(.v-switch__track) {
+  background-color: rgb(var(--v-theme-gris-switch));
+}
 </style>
diff --git a/components/common/HeaderMobile.vue b/components/common/HeaderMobile.vue
@@ -3,37 +3,32 @@
     <div class="left-side-buttons">
       <!--    Bouton menu burger -->
       <div class="buttons">
-        <v-icon @click="activateMenu" size="35px" :class="{ 'logo-active': showMenu }">mdi-menu
+        <v-icon :title="$t('menu')" @click="activateMenu" size="35px" :class="{ 'logo-active': showMenu }">mdi-menu
         </v-icon>
-        <v-tooltip activator="parent">{{ $t('menu') }}</v-tooltip>
       </div>
       <v-btn variant="plain" @click="dialog = true" class="buttons language-accessibility-button"
         :title="$t('access.btn')">
         <img :alt="$t('header.accessibility')" id="logo-handicap-visuel" :src="'/icone-handicap-visuel-' + colorMode + '.svg'" />
-        <v-tooltip activator="parent">{{ $t('header.accessibility') }}</v-tooltip>
       </v-btn>
     </div>
     <div class="right-side-buttons">
       <!--    Bouton filtres-->
       <button v-if="type === 'resultats'" @click="activateFilterMenu" color="primary"
         class="filter-mobile-nav-bar buttons">
-        <v-icon v-bind="props" size="35px">mdi-filter-menu-outline
+        <v-icon :title="$t('filtres')" v-bind="props" size="35px">mdi-filter-menu-outline
         </v-icon>
-        <v-tooltip activator="parent" location="start">{{ $t('filtres') }}</v-tooltip>
       </button>
       <!-- Bouton accès theses -->
       <button
         v-if="type === 'these' && theseSoutenue && (categoriesValide.length > 0 || boutonsAutres.length > 0) || (theseSoutenue && status === 'enCours')"
         @click="activateThesisAccess" class="filter-mobile-nav-bar buttons">
-        <v-icon v-bind="props" color="primary" size="35px">mdi-book-arrow-down-outline
+        <v-icon :title="$t('theseView.access')" v-bind="props" color="primary" size="35px">mdi-book-arrow-down-outline
         </v-icon>
-        <v-tooltip activator="parent">{{ $t('theseView.access') }}</v-tooltip>
       </button>
       <!--    Bouton menu recherche/selecteur these/personnes-->
       <div v-if="type !== 'home'" class="buttons">
-        <v-icon @click="activateSearchBar" size="35px" :class="{ 'logo-active': showSearchBar }">mdi-magnify
+        <v-icon :title="$t('rechercher')" @click="activateSearchBar" size="35px" :class="{ 'logo-active': showSearchBar }">mdi-magnify
         </v-icon>
-        <v-tooltip activator="parent" location="start">{{ $t('rechercher') }}</v-tooltip>
       </div>
     </div>
   </nav>
@@ -337,4 +332,8 @@ watch(changeContrast, newValue => {
 :deep(.v-btn--variant-plain) {
   opacity: 1 !important;
 }
+
+:deep(.v-switch__track) {
+  background-color: rgb(var(--v-theme-gris-switch));
+}
 </style>
diff --git a/components/common/Keywords.vue b/components/common/Keywords.vue
@@ -12,7 +12,8 @@
         <div class="mots-cles-controlles" v-if="rameauKeywords.length > 0">
           <div class="subtitle">
             <h3>{{ $t("motCleControle") }}</h3>
-            <v-btn class="info-button" flat icon="mdi-information-outline" title="Informations sur les mots clés">
+            <v-btn class="info-button" flat title="Informations sur les mots clés">
+              <v-icon size="22">mdi-information-outline</v-icon>
               <span class="sr-only">Informations sur les mots clés</span>
             </v-btn>
             <v-overlay activator=".info-button" location-strategy="connected" scroll-strategy="close">
@@ -270,6 +271,11 @@ h3 {
   color: rgb(var(--v-theme-text-dark-blue))
 }
 
+.info-button {
+  min-width: unset;
+  padding: 0 8px;
+}
+
 .mdi-list-box.v-icon--size-default {
   font-size: 30px;
   width: 35px;
@@ -285,11 +291,12 @@ h3 {
   margin-top: unset !important;
 
   .free-chip {
-    background-color: rgb(var(--v-theme-secondary-darken-2)) !important;
+    background-color: rgb(var(--v-theme-secondary-darken-3)) !important;
   }
 
   .rameau-chip {
-    background-color: rgb(var(--v-theme-orange-abes)) !important;
+    background-color: rgb(var(--v-theme-orange-abes-thesaurus)) !important;
+    color: rgb(var(--v-theme-thesaurus-text));
   }
 
   .chips {
@@ -316,7 +323,7 @@ h3 {
   font-family: Roboto Black, sans-serif;
   font-weight: 600;
   font-size: 16px;
-  color: rgb(var(--v-theme-surface));
+  color: rgb(var(--v-theme-white-text));
 }
 
 .v-chip--disabled {
@@ -390,4 +397,8 @@ h3 {
     width: fit-content;
   }
 }
+
+:deep(.v-chip__underlay) {
+  opacity: 0 !important;
+}
 </style>
diff --git a/components/common/results/FacetDrawer.vue b/components/common/results/FacetDrawer.vue
@@ -298,6 +298,16 @@ watch(() => props.resetTextFields,
   opacity: 0.9;
 }
 
+.facet-search-bar {
+  :deep(.v-field__outline) {
+    --v-field-border-opacity: 1;
+  }
+
+  :deep(.v-label) {
+    opacity: 1 !important;
+  }
+}
+
 .panel-text {
   overflow: auto;
   padding: 0 10px;

diff --git a/components/common/results/ResultComponents.vue b/components/common/results/ResultComponents.vue
@@ -39,7 +39,7 @@
       </CommonResultsResultList>
     </div>
     <div v-else>
-      <div v-for="i in currentShowingNumber" :key="i" class="skeleton">
+      <div v-for="i in currentShowingNumber" :key="i" class="skeleton-wrapper">
         <v-card :flat="true" style="margin-bottom: 1rem;">
           <v-skeleton-loader type="article">
           </v-skeleton-loader>
@@ -182,7 +182,7 @@ watch(() => props.resetPage, () => {
   min-height: 190px;
 }
 
-.skeleton {
+.skeleton-wrapper {
   padding: 0;
   display: grid;
   grid-template-columns: 95%

diff --git a/components/organismes/OrganismeView.vue b/components/organismes/OrganismeView.vue
@@ -50,7 +50,7 @@
                         <a :href="`https://www.idref.fr/${props.id}`" class="idref-logo" target="_blank"
                             alt="Accéder à IdRef, le référentiel des personnes et des structures"
                             title="Accéder à IdRef, le référentiel des personnes et des structures">
-                            <img alt="logo IdRef" id="logoIdref" src="@/assets/idref-icone.png" />
+                            <img alt="Accéder à la page IdRef correspondante" id="logoIdref" :src="'/idref-icone-' + colorMode + '.svg'" />
                           <span>IdRef</span>
                         </a>
                     </div>
@@ -77,13 +77,13 @@
                                         <div v-for="(these, index) in item[key]" :key="these" class="card-wrapper">
                                             <v-lazy :options="{ threshold: 1.0 }">
 
-                                                <ResultCard :titre="these.titrePrincipal"
+                                                <ThesesResultsResultCard :titre="these.titrePrincipal"
                                                     :date="these.status === 'enCours' ? these.datePremiereInscriptionDoctorat : these.dateSoutenance"
                                                     :auteur="these.auteurs" :directeurs="these.directeurs"
                                                     :discipline="these.discipline" :etab="these.etabSoutenanceN"
                                                     :etabPPN="these.etabSoutenancePpn" :id="these.id"
                                                     :status="these.status">
-                                                </ResultCard>
+                                                </ThesesResultsResultCard>
                                             </v-lazy>
                                             <hr class="result-dividers" v-if="index < item[key].length - 1" />
                                         </div>
@@ -100,7 +100,7 @@
             </div>
         </div>
         <ClientOnly>
-            <ScrollToTopButton class="scroll-to-top-wrapper" :nb-result=1></ScrollToTopButton>
+            <CommonScrollToTopButton class="scroll-to-top-wrapper" :nb-result=1></CommonScrollToTopButton>
         </ClientOnly>
     </div>
 </template>
@@ -109,8 +109,9 @@
 import { useI18n } from "vue-i18n";
 import { ref, defineAsyncComponent } from "vue";
 import { useDisplay } from "vuetify";
-import ResultCard from "../theses/results/ResultCard.vue";
-import ScrollToTopButton from "../common/ScrollToTopButton.vue";
+import { useColorMode } from '@vueuse/core';
+
+const colorMode = useColorMode();
 
 const { mobile } = useDisplay();
 const { t } = useI18n();

diff --git a/components/personnes/PersonneView.vue b/components/personnes/PersonneView.vue
@@ -50,7 +50,7 @@
             </h1>
             <a v-if="item.has_idref" class="idref-logo" :href="`https://www.idref.fr/${item.id}`" target="_blank"
               title="Accéder à IdRef, le référentiel des personnes et des structures">
-              <img alt="logo IdRef" id="logoIdref" src="@/assets/idref-icone.png" />
+              <img alt="Accéder à la page IdRef correspondante" id="logoIdref" :src="'/idref-icone-' +  colorMode + '.svg'" />
               <span>IdRef</span>
             </a>
           </div>
@@ -107,8 +107,9 @@
 import { useI18n } from "vue-i18n";
 import { defineAsyncComponent, onUpdated, ref } from 'vue';
 import { useDisplay } from "vuetify";
+import { useColorMode } from '@vueuse/core';
 
-
+const colorMode = useColorMode();
 const { mobile } = useDisplay();
 const MessageBox = defineAsyncComponent(() => import('@/components/common/MessageBox.vue'));
 const { getPersonne } = usePersonnesAPI();

diff --git a/components/personnes/results/PersonnesCard.vue b/components/personnes/results/PersonnesCard.vue
@@ -13,7 +13,7 @@
     <div class="idref-container">
       <a v-if="item.has_idref" :href="`https://www.idref.fr/${item.id}`" target="_blank"
         title="Accéder à IdRef, le référentiel des personnes et des structures" class="idref-logo">
-        <img alt="logo IdRef" id="logoIdref" src="@/assets/idref-icone.png" />
+        <img alt="Accéder à la page IdRef correspondante" id="logoIdref" :src="'/idref-icone-' + colorMode + '.svg'" />
         <span>IdRef</span>
       </a>
     </div>
@@ -46,7 +46,9 @@
 <script setup>
 import { computed } from 'vue';
 import { useDisplay } from "vuetify";
+import { useColorMode } from '@vueuse/core';
 
+const colorMode = useColorMode();
 const router = useRouter();
 const currentRoute = useRoute();
 const { mobile } = useDisplay();

diff --git a/components/personnes/search/SearchBar.vue b/components/personnes/search/SearchBar.vue
@@ -259,6 +259,10 @@ defineExpose({
   :deep(.v-combobox__selection) {
     overflow: hidden !important;
   }
+
+  :deep(.v-label) {
+    opacity: 1 !important;
+  }
 }
 
 .searchbar__action {
@@ -361,6 +365,10 @@ defineExpose({
 :deep(.v-field--appended) {
   padding-inline-end: 0 !important;
 }
+
+:deep(.v-field__outline) {
+  --v-field-border-opacity: 1 !important;
+}
 </style>
 
 <style lang="scss">

diff --git a/components/theses/ButtonsList.vue b/components/theses/ButtonsList.vue
@@ -29,12 +29,12 @@
             </v-expansion-panel-title>
             <v-expansion-panel-text>
               <div class="buttons-list" v-for="b in sousCategorie.boutons" :key="b">
-                <v-btn v-if="b.typeAcces == 'ACCES_ESR'" color="secondary-darken-2" append-icon="mdi-open-in-new"
+                <v-btn v-if="b.typeAcces == 'ACCES_ESR'" class="thesis-access-buttons" append-icon="mdi-open-in-new"
                   @click="checkboxModal = false; dialog = true; dialogUrl = b.url.startsWith('http') ? b.url : baseURL + b.url"
                   :aria-label="b.libelle" :flat="true">{{
         b.libelle }}
                 </v-btn>
-                <v-btn v-else-if="b.url" color="secondary-darken-2" append-icon="mdi-open-in-new"
+                <v-btn v-else-if="b.url" class="thesis-access-buttons" append-icon="mdi-open-in-new"
                   :href="b.url.startsWith('http') ? b.url : baseURL + b.url" target="_blank" :title="b.libelle"
                   :aria-label="b.libelle" :flat="true">{{
         b.libelle }}
@@ -64,7 +64,7 @@
           </v-expansion-panel-title>
           <v-expansion-panel-text>
             <div class="buttons-list" v-for="b in boutonsAutres" :key="b">
-              <v-btn v-if="b.url" color="secondary-darken-2" append-icon="mdi-open-in-new"
+              <v-btn v-if="b.url" class="thesis-access-buttons" append-icon="mdi-open-in-new"
                 :href="b.url.startsWith('http') ? b.url : baseURL + b.url" target="_blank" :title="b.libelle"
                 :aria-label="b.libelle" :flat="true">{{
         b.libelle }}
@@ -454,4 +454,9 @@ h4 {
     margin-left: 10px;
   }
 }
+
+.thesis-access-buttons {
+  background-color: rgb(var(--v-theme-secondary-darken-3));
+  color: rgb(var(--v-theme-white-text));
+}
 </style>
diff --git a/components/theses/results/ResultCard.vue b/components/theses/results/ResultCard.vue
@@ -127,14 +127,6 @@ const route = useRoute();
 <style scoped lang="scss">
 @use 'vuetify/settings';
 
-a,
-a:visited,
-a:hover,
-a:active {
-  color: inherit;
-  text-decoration: none;
-}
-
 .card-container {
   display: flex;
   flex-direction: column;

diff --git a/components/theses/search/AdvancedForm.vue b/components/theses/search/AdvancedForm.vue
@@ -420,6 +420,10 @@ hr {
     color: rgb(var(--v-theme-secondary-darken-2));
     font-weight: 500;
 }
+
+:deep(.v-switch__track) {
+  background-color: rgb(var(--v-theme-gris-switch));
+}
 </style>
 
 <style>

diff --git a/components/theses/search/SearchBar.vue b/components/theses/search/SearchBar.vue
@@ -235,6 +235,10 @@ defineExpose({
   :deep(.v-combobox__selection) {
     overflow: hidden !important;
   }
+
+  :deep(.v-label) {
+     opacity: 1 !important;
+   }
 }
 
 .searchbar__action {
@@ -259,7 +263,6 @@ defineExpose({
 
   :deep(.v-label) {
     color: rgb(var(--v-theme-primary));
-    opacity: 1;
     font-size: 0.95rem;
   }
 
@@ -336,6 +339,10 @@ defineExpose({
 :deep(.v-field--appended) {
   padding-inline-end: 0 !important;
 }
+
+:deep(.v-field__outline) {
+  --v-field-border-opacity: 1 !important;
+}
 </style>
 
 <style lang="scss">