new portal style options and some small design changes (#2)

data-fair · Apr 5, 2023 · 8ad830a · 8ad830a
1 parent 5a56c2c
commit 8ad830a
Show file tree

Hide file tree

Showing 8 changed files with 174 additions and 74 deletions.
diff --git a/.husky/pre-push b/.husky/pre-push
@@ -1,4 +1,5 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-docker build --network=host -t portals-dev .
+npm run test-deps
+npm run test
diff --git a/contract/config.json b/contract/config.json
@@ -135,6 +135,12 @@
         "title": "Couleur secondaire",
         "x-display": "color-picker"
       },
+      "tertiaryColor": {
+        "type": "string",
+        "default": "#1E88E5",
+        "title": "Couleur tertiaire",
+        "x-display": "color-picker"
+      },
       "secondaryBackgroundColor": {
         "type": "string",
         "default": "#CFD8DC",
@@ -379,6 +385,9 @@
         }, {
           "const": "secondary",
           "title": "couleur secondaire"
+        }, {
+          "const": "tertiary",
+          "title": "couleur tertiaire"
         }]
       },
       "topicsBackgroundColor": {
@@ -396,7 +405,7 @@
           "title": "couleur secondaire"
         }, {
           "const": "primarySecondary",
-          "title": "couleur primaire ou secondaire selon le contexte"
+          "title": "couleur principale ou secondaire selon le contexte"
         }]
       }
     }
@@ -1037,6 +1046,42 @@
         "default": false,
         "x-props": {"hideDetails": "auto"}
       },
+      "homeLinksPosition": {
+        "title": "Position des liens sur la page d'accueil",
+        "x-if": "homeShowLinks",
+        "type": "string",
+        "default": "belowKpi",
+        "oneOf": [{
+          "title": "sous la description et les chiffres clés",
+          "const": "belowKpi"
+        }, {
+          "title": "sous la bannière",
+          "const": "belowBanner"
+        }]
+      },
+      "homeLinksOptions": {
+        "title": "Options de l'affichage des liens sur la page d'accueil",
+        "type": "array",
+        "x-if": "homeShowLinks",
+        "x-props": {"hideDetails": "auto"},
+        "items": {
+          "type": "string",
+          "oneOf": [{
+            "const": "outlined",
+            "title": "afficher un contour"
+          }, {
+            "const": "rounded",
+            "title": "arrondir"
+          }, {
+            "const": "elevate",
+            "title": "élèver (applique l'élévation par défaut de votre configuration)"
+          }, {
+            "const": "reverseColor",
+            "title": "inverser la couleur de fond et de texte"
+          }]
+        },
+        "default": ["outlined", "elevate"]
+      },
       "homeLinks": {
         "title": "Liste de liens",
         "type": "array",
@@ -1068,29 +1113,6 @@
             "linkTitle": {"type": "string", "title": "Titre long", "description": "un titre plus long qui ne sera pas affiché directement mais visible au survol et utilisé par les outils d'accessibilité"}
           }
         }
-      },
-      "homeLinksOptions": {
-        "title": "Options de l'affichage des liens sur la page d'accueil",
-        "type": "array",
-        "x-if": "homeShowLinks",
-        "x-props": {"hideDetails": "auto"},
-        "items": {
-          "type": "string",
-          "oneOf": [{
-            "const": "outlined",
-            "title": "afficher un contour"
-          }, {
-            "const": "rounded",
-            "title": "arrondir"
-          }, {
-            "const": "elevate",
-            "title": "élèver (applique l'élévation par défaut de votre configuration)"
-          }, {
-            "const": "reverseColor",
-            "title": "inverser la couleur de fond et de texte"
-          }]
-        },
-        "default": ["outlined", "elevate"]
       }
     }
   }, {

diff --git a/public/components/layout/layout-links.vue b/public/components/layout/layout-links.vue
@@ -1,34 +1,44 @@
 <template>
-  <v-row justify="center">
-    <v-hover
+  <v-row
+    justify="center"
+    class="mt-2 mb-4"
+    dense
+  >
+    <v-col
       v-for="(link, i) in links"
-      v-slot="{hover}"
       :key="i"
+      cols="6"
+      sm="4"
+      md="3"
+      lg="2"
+      style="display:flex;flex-direction:column;"
     >
-      <v-card
-        :style="style(hover)"
-        v-bind="compProps(link, hover)"
-        class="layout-link"
-      >
-        <v-card-title class="justify-center pt-3 pb-1">
-          <v-icon
-            v-if="link.icon && link.icon.name"
-            left
-            :size="36"
-            :color="textColor(hover)"
-            class="ma-0"
-          >
-            mdi-{{ link.icon.name }}
-          </v-icon>
-        </v-card-title>
-        <v-card-text
-          :style="`color: ${textColor(hover)};`"
-          class="font-weight-bold text-none justify-center text-center pb-3"
+      <v-hover v-slot="{hover}">
+        <v-card
+          :style="style(hover)"
+          v-bind="compProps(link, hover)"
+          class="layout-link flex-grow-1"
         >
-          {{ link.title }}
-        </v-card-text>
-      </v-card>
-    </v-hover>
+          <v-card-title class="justify-center pt-3 pb-1">
+            <v-icon
+              v-if="link.icon && link.icon.name"
+              left
+              :size="36"
+              :color="textColor(hover)"
+              class="ma-0"
+            >
+              mdi-{{ link.icon.name }}
+            </v-icon>
+          </v-card-title>
+          <v-card-text
+            :style="`color: ${textColor(hover)};`"
+            class="font-weight-bold text-none justify-center text-center pb-3"
+          >
+            {{ link.title }}
+          </v-card-text>
+        </v-card>
+      </v-hover>
+    </v-col>
   </v-row>
 </template>
 
@@ -47,7 +57,7 @@ export default {
   methods: {
     compProps (link, hover) {
       const props = {
-        class: 'mx-2 my-1 font-weight-bold text-none',
+        class: 'mx-2 my-2 font-weight-bold text-none',
         outlined: this.options.includes('outlined'),
         elevation: this.options.includes('elevate') ? this.elevation : 0
       }
@@ -74,17 +84,14 @@ export default {
     style (hover) {
       const color = this.readablePrimaryColor
       const borderColor = this.options.includes('outlined') ? color : 'transparent'
-      const maxTitleLength = Math.max(...this.links.map(l => (l.title || '').length))
       if (this.isDark(hover)) {
         return `
         border: 2px solid transparent;
-        width: ${32 + maxTitleLength * 10}px;
         color: white;
         background-color:${color};`
       } else {
         return `
         border: 2px solid ${borderColor};
-        width: ${32 + maxTitleLength * 10}px;
         color: ${color};
         background-color:white;`
       }
@@ -94,7 +101,4 @@ export default {
 </script>
 
 <style>
-.layout-link {
-  min-width: 90px;
-}
 </style>
diff --git a/public/components/nav/nav-link.vue b/public/components/nav/nav-link.vue
@@ -22,7 +22,7 @@
   >
     <template v-if="icon && !config.navLinkMode.includes('NoIcon')">
       <v-icon
-        :color="isDark ? 'white' : config.navLinkColor"
+        :color="lineColor"
       >
         {{ icon }}
       </v-icon>
@@ -48,17 +48,38 @@ export default {
   },
   computed: {
     ...mapState(['config']),
-    ...mapGetters(['buttonOptions']),
-    isDark () {
-      let dark = !this.config.navLinkMode.includes('Outlined')
-      if (this.hovered && this.buttonOptions.includes('hoverInverse')) dark = !dark
-      return dark
+    ...mapGetters(['buttonOptions', 'navLinkColor', 'navLinkColorDark', 'readableNavLinkColor', 'readablePrimaryColor']),
+    isOutlined () {
+      let outlined = this.config.navLinkMode.includes('Outlined')
+      if (this.hovered && this.buttonOptions.includes('hoverInverse')) outlined = !outlined
+      return outlined
+    },
+    btnColor () {
+      if (this.config.navLinkMode.includes('Outlined')) {
+        return this.readableNavLinkColor
+      }
+      return this.navLinkColor
+    },
+    lineColor () {
+      if (this.config.navLinkMode.includes('Outlined')) {
+        return this.isOutlined ? this.readableNavLinkColor : 'white'
+      }
+      if (this.isOutlined) {
+        if (this.navLinkColorDark) return this.navLinkColor
+        return this.readablePrimaryColor
+      }
+      if (this.navLinkColorDark) return 'white'
+      return this.readablePrimaryColor
     },
     btnProps () {
-      if (this.isDark) {
-        return { depressed: true, color: this.config.navLinkColor, class: 'white--text' }
-      } else {
-        return { outlined: true, color: this.config.navLinkColor }
+      return {
+        depressed: !this.isOutlined,
+        outlined: this.isOutlined,
+        color: this.btnColor,
+        style: {
+          color: this.lineColor,
+          'border-color': this.lineColor
+        }
       }
     }
   }

diff --git a/public/pages/index.vue b/public/pages/index.vue
@@ -77,10 +77,6 @@
           />
         </v-col>
       </v-row>
-      <div
-        v-else-if="config.description"
-        v-html="config.description"
-      />
       <v-row
         v-if="config.homeShowSearch && config.homeSearchPosition === 'belowBanner'"
         justify="center"
@@ -95,10 +91,15 @@
         row-class="mt-0 mb-3"
       />
       <layout-links
-        v-if="config.homeShowLinks && config.homeLinks && config.homeLinks.length"
+        v-if="config.homeShowLinks && config.homeLinks && config.homeLinks.length && config.homeLinksPosition === 'belowBanner'"
         :links="config.homeLinks"
         :options="config.homeLinksOptions"
       />
+      <div
+        v-if="(config.homeImageAsBanner || config.homeImageHidden) && config.description"
+        class="mt-3 mb-4"
+        v-html="config.description"
+      />
       <kpi
         v-if="config.showKpis"
         class="mt-4"
@@ -116,6 +117,11 @@
         :topics="topics"
         :options="config.homeTopicsOptions"
       />
+      <layout-links
+        v-if="config.homeShowLinks && config.homeLinks && config.homeLinks.length && config.homeLinksPosition === 'belowKpi'"
+        :links="config.homeLinks"
+        :options="config.homeLinksOptions"
+      />
 
       <!-- 2/3 layout when we have a twitter timeline or anything else to display to the right -->
       <v-row v-if="twoThirdsLayout">

diff --git a/public/plugins/theme.js b/public/plugins/theme.js
@@ -5,7 +5,8 @@ export default async ({ app, store, $vuetify, route }) => {
   if (store.state.inPortal && store.state.config) {
     $vuetify.theme.themes.light.primary = store.state.config.themeColor
     $vuetify.theme.themes.light.secondary = store.state.config.secondaryColor || store.state.config.themeColor
-    debug('apply colors from config in store', store.state.config.themeColor, store.state.config.secondaryColor)
+    $vuetify.theme.themes.light.tertiary = store.state.config.tertiaryColor || store.state.config.themeColor
+    debug('apply colors from config in store', store.state.config.themeColor, store.state.config.secondaryColor, store.state.config.tertiaryColor)
   } else {
     debug('keep color from original vuetify config', $vuetify.theme.themes.light.primary)
   }

diff --git a/public/store/style.js b/public/store/style.js
@@ -46,12 +46,18 @@ export default () => ({
     secondaryColor (state, getters, rootState) {
       return rootState.config && (rootState.config.secondaryColor || getters.primaryColor)
     },
+    tertiaryColor (state, getters, rootState) {
+      return rootState.config && (rootState.config.tertiaryColor || getters.primaryColor)
+    },
     readablePrimaryColor (state, getters, rootState) {
       return contrastColor(getters.primaryColor)
     },
     readableSecondaryColor (state, getters, rootState) {
       return contrastColor(getters.secondaryColor)
     },
+    readableTertiaryColor (state, getters, rootState) {
+      return contrastColor(getters.tertiaryColor)
+    },
     secondaryBackgroundColor (state, getters, rootState) {
       return rootState.config && rootState.config.secondaryBackgroundColor ? getters.backgroundColor(rootState.config.secondaryBackgroundColor, false) : '#FFFFFF'
     },
@@ -69,6 +75,21 @@ export default () => ({
     appBarMainColorDark (state, getters) {
       return isDark(getters.appBarMainColor)
     },
+    navLinkColorRaw (state, getters, rootState) {
+      const navLinkColor = rootState.config.navLinkColor || 'primary'
+      if (navLinkColor === 'secondary') return getters.secondaryColor
+      if (navLinkColor === 'primary') return getters.primaryColor
+      if (navLinkColor === 'tertiary') return getters.tertiaryColor
+    },
+    navLinkColorDark (state, getters) {
+      return isDark(getters.navLinkColorRaw)
+    },
+    navLinkColor (state, getters, rootState) {
+      return getters.backgroundColor(getters.navLinkColorRaw)
+    },
+    readableNavLinkColor (state, getters, rootState) {
+      return contrastColor(getters.navLinkColorRaw)
+    },
     headerColor (state, getters, rootState) {
       if (rootState.config.headerColor === 'page' || !rootState.config.headerColor) return getters.bodyBackgroundColor
       if (rootState.config.headerColor === 'appBar') return 'transparent'
@@ -411,12 +432,17 @@ html {
 .v-btn.primary.theme--light.v-btn--has-bg {
   ${getters.elevation ? `background: linear-gradient(90deg, ${getters.readablePrimaryColor} 0%, ${getters.darkReadablePrimary10} 100%);` : `background-color: ${getters.readablePrimaryColor}!important;`}
 }
+
+/* TODO: the next 3 rules should be deprecated and replaced by explicit coloring of buttons in components (as done in nav-link component) */
 .v-application#app.theme--light .v-btn.primary.v-btn--has-bg {
   border: 1px solid ${getters.darkReadablePrimary10} !important;
 }
 .v-btn.secondary.theme--light.v-btn--has-bg {
   background-color: ${getters.readableSecondaryColor} !important;
 }
+.v-btn.tertiary.theme--light.v-btn--has-bg {
+  background-color: ${getters.readableTertiaryColor} !important;
+}
 
 /* Apply fonts */
 ${getters.assetFontFace('bodyFont')}
@@ -465,6 +491,9 @@ ${getters.linksStyle}
 .v-application#app .secondary--text {
   color: ${getters.readableSecondaryColor}!important;
 }
+.v-application#app .tertiary--text {
+  color: ${getters.readableTertiaryColor}!important;
+}
 
 /* style of the main app bar */
 ${getters.appBarStyle}