Merge pull request #16 from georchestra/themable

Set header colors themable
georchestra · Dec 19, 2023 · 81df576 · 81df576
2 parents 14aaa92 + 3188cc9
commit 81df576
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 29 deletions.
diff --git a/README.md b/README.md
@@ -31,15 +31,28 @@ Iframe can still be set with defining `legacy-url` attribute, style can also be
 
 Attributes available :
 
-| Attribute     | Description                                                                                          | Example                                                                     | For host | For legacy |
-|---------------|------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------|----------|------------|
-| lang          | Used to force header language (default value : en)                                                   | `<geor-header lang='de'>`                                                   | v        |            |
-| active-app    | Use this attribute to set the active class in menu                                                   | `<geor-header active-app='console'>`                                        | v        | v          |
-| logo-url      | Use this attribute to set the logo for the new header (not legacy one).                              | `<geor-header logo-url='https://linktomylogo.com'>`                         | v        |            |
-| legacy-header | Use this attribute to enable the legacy header `iframe` tag. Needs `legacy-url`.                     | `<geor-header legacy-header='true' legacy-url="/header/">`                  |          | v          |
-| legacy-url    | Legacy URL: if set, activates iframe with src attribute pointing to this URL. Needs `legacy-header`. | `<geor-header legacy-header='true' legacy-url="/header/"></geor-header>`    |          | v          |
-| style         | adds this style to iframe or host tag (if legacy url is not used)                                    | `<geor-header legacy-url="myheader.com" style="width: 100%"></geor-header>` | v        | v          |
+| Attribute     | Description                                                                                          | Example                                                                   | For host | For legacy |
+|---------------|------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------|----------|-----------|
+| lang          | Used to force header language (default value : en)                                                   | `<geor-header lang='de'>`                                                 | v        |           |
+| active-app    | Use this attribute to set the active class in menu                                                   | `<geor-header active-app='console'>`                                      | v        | v         |
+| logo-url      | Use this attribute to set the logo for the new header (not legacy one).                              | `<geor-header logo-url='https://linktomylogo.com'>`                       | v        |           |
+| legacy-header | Use this attribute to enable the legacy header `iframe` tag. Needs `legacy-url`.                     | `<geor-header legacy-header='true' legacy-url="/header/">`                |          | v         |
+| legacy-url    | Legacy URL: if set, activates iframe with src attribute pointing to this URL. Needs `legacy-header`. | `<geor-header legacy-header='true' legacy-url="/header/"></geor-header>`  |          | v         |
+| style         | adds this style to iframe or host tag (if legacy url is not used)                                    | `<geor-header legacy-url="myheader.com" style="width: 100%"></geor-header>` | v        | v         |
+| stylesheet    | allow to add stylesheet for new header                                                               | `<geor-header stylesheet="myfile.css"></geor-header>`   | v        |           |
 
+3. Optional : Override default colors with `stylesheet` attribute : 
+
+```css
+header {
+    --georchestra-primary: #124885;
+    --georchestra-secondary: #83532b;
+    --georchestra-primary-light: #12488540;
+    --georchestra-secondary-light: #83532b40;
+  }
+```
+
+Note: It's important to target the `header` tag here to override the css variables, because of the shadow DOM. 
 
 ## Development
 

diff --git a/index.html b/index.html
@@ -12,8 +12,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>geOrchestra header</title>
   </head>
-  <body style="margin: 0; height: 80px">
-    <geor-header logo-url="https://www.georchestra.org/public/georchestra-logo.svg" active-app="datahub"></geor-header>
+  <body style="margin: 0">
+    <geor-header
+      logo-url="https://www.georchestra.org/public/georchestra-logo.svg"
+      active-app="datahub"
+    ></geor-header>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/src/auth.ts b/src/auth.ts
@@ -26,6 +26,7 @@ export interface User {
 }
 
 export interface AdminRoles {
+  superUser: boolean
   admin: boolean
   console: boolean
   catalog: boolean
@@ -55,6 +56,7 @@ export function getAdminRoles(roles: KNOWN_ROLES[]): AdminRoles | null {
     console || catalog || viewer || roles.indexOf('ROLE_ADMINISTRATOR') > -1
   if (!admin) return null
   return {
+    superUser,
     admin,
     console,
     catalog,

diff --git a/src/header.ce.vue b/src/header.ce.vue
@@ -19,6 +19,7 @@ const props = defineProps<{
   legacyHeader?: string
   legacyUrl?: string
   style?: string
+  stylesheet?: string
 }>()
 
 const state = reactive({
@@ -50,7 +51,7 @@ onMounted(() => {
   getUserDetails().then(user => {
     state.user = user
 
-    if (user?.adminRoles?.admin) {
+    if (user?.adminRoles?.superUser) {
       getPlatformInfos().then(
         platformInfos => (state.platformInfos = platformInfos)
       )
@@ -68,12 +69,13 @@ onMounted(() => {
       v-bind:style="props.style"
     ></iframe>
   </div>
-  <header v-else class="host h-full text-base" v-bind:style="props.style">
+  <header v-else class="host h-[80px] text-base" v-bind:style="props.style">
+    <link rel="stylesheet" :href="props.stylesheet" v-if="props.stylesheet" />
     <div class="justify-between text-slate-600 sm:flex hidden h-full bg-white">
       <div class="flex">
         <a
           href="/"
-          class="flex justify-center items-center px-8 bg-primary/10 rounded-r-lg py-2"
+          class="flex justify-center items-center px-8 rounded-r-lg py-2 bg-primary-light"
         >
           <img
             v-if="props.logoUrl"
@@ -171,8 +173,8 @@ onMounted(() => {
         </nav>
       </div>
       <div></div>
-      <div class="flex justify-center items-center">
-        <div v-if="!isAnonymous" class="flex gap-4 items-baseline mx-6">
+      <div class="flex justify-center items-center mx-6">
+        <div v-if="!isAnonymous" class="flex gap-4 items-baseline">
           <a
             class="link-btn"
             href="/console/account/userdetails"
@@ -247,11 +249,7 @@ onMounted(() => {
       </div>
 
       <div
-        :class="[
-          { 'opacity-100 border-b-2': state.mobileMenuOpen },
-          { 'opacity-0 border-b-0': !state.mobileMenuOpen },
-          'absolute z-[1000] bg-white w-full duration-300 transition-opacity ease-in-out',
-        ]"
+        class="absolute z-[1000] bg-white w-full duration-300 transition-opacity ease-in-out"
       >
         <nav class="flex flex-col font-semibold" v-if="state.mobileMenuOpen">
           <a class="nav-item-mobile" href="/datahub/">{{ t('catalogue') }}</a>
@@ -267,6 +265,15 @@ onMounted(() => {
   </header>
 </template>
 
+<style>
+header {
+  --georchestra-primary: #85127e;
+  --georchestra-secondary: #1b1f3b;
+  --georchestra-primary-light: #85127e1a;
+  --georchestra-secondary-light: #1b1f3b1a;
+}
+</style>
+
 <style scoped>
 @tailwind base;
 @tailwind components;
@@ -282,31 +289,31 @@ onMounted(() => {
 
 @layer components {
   .nav-item-mobile {
-    @apply text-xl block text-center py-3 mx-2 w-full border-b border-b-secondary/10 first-letter:capitalize;
+    @apply text-xl block text-center py-3 w-full border-b border-b-slate-300 first-letter:capitalize;
   }
   .nav-item {
     @apply relative text-lg w-fit block after:hover:scale-x-[82%] px-2 mx-2 hover:text-black first-letter:capitalize;
   }
   .nav-item:after {
-    @apply block content-[''] absolute h-[3px] bg-gradient-to-r from-primary to-primary/30 w-full scale-x-0  transition duration-300 origin-left;
+    @apply block content-[''] absolute h-[3px] bg-gradient-to-r from-primary to-secondary-light w-full scale-x-0  transition duration-300 origin-left;
   }
   .nav-item.active {
-    @apply after:scale-x-[82%] after:bg-primary text-gray-900;
+    @apply after:scale-x-[82%] after:bg-primary after:bg-none text-gray-900;
   }
   .btn {
-    @apply px-4 py-2 mx-2 text-slate-100 bg-primary rounded hover:bg-primary/70 transition-colors first-letter:capitalize;
+    @apply px-4 py-2 mx-2 text-slate-100 bg-primary rounded hover:bg-slate-700 transition-colors first-letter:capitalize;
   }
   .link-btn {
-    @apply text-primary/60 hover:text-primary hover:underline underline-offset-8 decoration-2 decoration-primary/50 flex flex-col items-center;
+    @apply text-primary hover:text-slate-700 hover:underline underline-offset-8 decoration-2 decoration-slate-700 flex flex-col items-center;
   }
   .admin-dropdown > li {
-    @apply block text-center hover:bg-primary/10 text-gray-700 hover:text-black capitalize;
+    @apply block text-center hover:bg-primary-light text-gray-700 hover:text-black capitalize;
   }
   .admin-dropdown > li > a {
     @apply block w-full h-full py-3;
   }
   .admin-dropdown > li.active {
-    @apply bg-primary/20;
+    @apply bg-primary-light;
   }
   .icon-dropdown {
     @apply w-4 h-4 inline-block align-text-top;

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -4,8 +4,10 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        primary: '#85127e',
-        secondary: '#1b1f3b',
+        primary: 'var(--georchestra-primary)',
+        secondary: 'var(--georchestra-secondary)',
+        'primary-light': 'var(--georchestra-primary-light)',
+        'secondary-light': 'var(--georchestra-secondary-light)',
       },
     },
   },