feature: conflicts resolved

README.md

@@ -87,6 +87,13 @@ Build with a custom config file:
 CONFIG_PATH='config.customName.json' npm run build
 ```
 
+### Theme checker
+
+The [Hubl theme manager](https://cdn.startinblox.com/hubl/theme/) is very handy for customer to easily customize the main colors they want to use.
+But developers should verify that their development use those colors to fit the customer wishes. The theme checker make this task easier :
+just add `"themeChecker": true` to the config.json to display the color picker tool in the header bar. Changing the color will set them on the
+whole app so that you can verify that your development take them into account correctly.
+
 ## Mandatory modules
 
 By default, a Hubl includes only individual chat modules.

src/dependencies.pug

@@ -10,6 +10,10 @@ script(type="module" src="https://cdn.skypack.dev/@startinblox/router@0.11" defe
 script(type="module" src="https://cdn.skypack.dev/@startinblox/component-notifications@0.9" defer)
 //- script(type="module" src="/lib/sib-notifications/index.js" defer)
 
+if themeChecker
+    script(src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js")
+    link(rel='stylesheet', href='https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/nano.min.css')
+
 if endpoints.get
   if endpoints.get.events && endpoints.get.typeevents
       script(type="module" src="https://cdn.skypack.dev/@startinblox/component-event@1.4" defer)

src/locales/fr.json

@@ -27,7 +27,7 @@
     "jobBoard": "Offres de mission",
     "profileDirectory": "Annuaire des membres",
     "projects": "Projets",
-    "circles": "Circles",
+    "circles": "Cercles",
     "messages": "Messages",
     "search": "Rechercher..."
   },

src/scripts/theme-checker.js

+document.addEventListener("DOMContentLoaded", () => {
+
+    if( !document.querySelector('.input-color') ) return
+    const params = new URLSearchParams(window.location.search);
+    const currentPrimary = getComputedStyle(document.documentElement).getPropertyValue('--color-primary')
+    const defaultPrimary = params.has('p') ? "#" + params.get('p') : currentPrimary ? currentPrimary.trim() : "#FF0055";
+    document.documentElement.style.setProperty('--color-primary', defaultPrimary);
+    const cP = Pickr.create({
+        el: '.input-color#color-primary',
+        theme: 'nano',
+        default: defaultPrimary,
+        defaultRepresentation: 'HEX',
+        swatches: null,
+        components: {
+            hue: true,
+            preview: true,
+            palette: true,
+            interaction: {
+                input: true
+            }
+        }
+    });
+    cP.on('change', (color, evt) => {
+        document.documentElement.style.setProperty('--color-primary', color.toHEXA());
+        params.set('p', String(color.toHEXA()).substr(1));
+        cP.applyColor();
+    });
+    const currentSecondary = getComputedStyle(document.documentElement).getPropertyValue('--color-secondary')
+    const defaultSecondary = params.has('s') ? "#" + params.get('s') : currentSecondary ? currentSecondary.trim() : "#314560";
+    document.documentElement.style.setProperty('--color-secondary', defaultSecondary);
+    const cS = Pickr.create({
+        el: '.input-color#color-secondary',
+        theme: 'nano',
+        default: defaultSecondary,
+        defaultRepresentation: 'HEX',
+        swatches: null,
+        components: {
+            hue: true,
+            preview: true,
+            palette: true,
+            interaction: {
+                input: true
+            }
+        }
+    });
+    cS.on('change', (color, evt) => {
+        document.documentElement.style.setProperty('--color-secondary', color.toHEXA());
+        params.set('s', String(color.toHEXA()).substr(1));
+        cS.applyColor();
+    });
+    const currentComplementary = getComputedStyle(document.documentElement).getPropertyValue('--color-complementary')
+    const defaultComplementary = params.has('c') ? "#" + params.get('c') : currentComplementary ? currentComplementary.trim() : "#00E3B4";
+    document.documentElement.style.setProperty('--color-complementary', defaultComplementary);
+    const cC = Pickr.create({
+        el: '.input-color#color-complementary',
+        theme: 'nano',
+        default: defaultComplementary,
+        defaultRepresentation: 'HEX',
+        swatches: null,
+        components: {
+            hue: true,
+            preview: true,
+            palette: true,
+            interaction: {
+                input: true
+            }
+        }
+    });
+    cC.on('change', (color, evt) => {
+        document.documentElement.style.setProperty('--color-complementary', color.toHEXA());
+        params.set('c', String(color.toHEXA()).substr(1));
+        cC.applyColor();
+    });
+    const currentComplementaryDarken = getComputedStyle(document.documentElement).getPropertyValue('--color-complementary-darken')
+    const defaultComplementaryDarken = params.has('cd') ? "#" + params.get('cd') : currentComplementaryDarken ? currentComplementaryDarken.trim() : "#0068FF";
+    document.documentElement.style.setProperty('--color-complementary-darken', defaultComplementaryDarken);
+    const cCd = Pickr.create({
+        el: '.input-color#color-complementary-darken',
+        theme: 'nano',
+        default: defaultComplementaryDarken,
+        defaultRepresentation: 'HEX',
+        swatches: null,
+        components: {
+            hue: true,
+            preview: true,
+            palette: true,
+            interaction: {
+                input: true
+            }
+        }
+    });
+    cCd.on('change', (color, evt) => {
+        document.documentElement.style.setProperty('--color-complementary-darken', color.toHEXA());
+        params.set('cd', String(color.toHEXA()).substr(1));
+        cCd.applyColor();
+    });
+});

src/views/partials/header.pug

@@ -2,7 +2,7 @@
 div
 
   solid-link(next='dashboard')
-    img.logo(src=`${clientLogo || '/images/logo.png'}`)
+    img.logo(src=`${clientLogo || '/images/logo.webp'}`)
 
 
   span.tag.reversed.text-semibold(data-trans='header.beta')
@@ -13,6 +13,15 @@ div
       bind-user
     )
 
+    if themeChecker
+      div.selector
+        each val, index in ['primary', 'secondary', 'complementary', 'complementary-darken']
+          label= 'Couleur ' + (index+1)
+            input.input-color(
+              id='color-'+val
+              type="text"
+            )
+
     details.segment.notLoggedIn
       summary.text-right
         solid-display.labelled-avatar(