diff --git a/README.md b/README.md
index da971e10ec74ab8ec2236c57f303636fba2a7118..db56f7a5f365c88c7e7ee18f8dd5d2946e4c2787 100644
--- a/README.md
+++ b/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.
diff --git a/src/dependencies.pug b/src/dependencies.pug
index 01f598fa85ccfb2d7a4fa69f972e71de2e7f465f..0198dc4c4a22c2e2f8f1ded6225a159b1cfa202f 100644
--- a/src/dependencies.pug
+++ b/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)
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 9022ae6823a6f132bf5662e26744b68e4a0155b9..3f5f2a1d53712c702e6bf614befaed48670fdc09 100644
--- a/src/locales/fr.json
+++ b/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..."
},
diff --git a/src/scripts/theme-checker.js b/src/scripts/theme-checker.js
new file mode 100644
index 0000000000000000000000000000000000000000..b6f2d67dffaa9a0e1bf62bf20e724e6fc63532c0
--- /dev/null
+++ b/src/scripts/theme-checker.js
@@ -0,0 +1,97 @@
+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();
+ });
+});
diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss
index cbc0b8f0a6b4f8ff2deb0e1ae33a88cbaf76d39c..15958a0c405c5b78324b1452253c4e42cbf2c4b9 100644
--- a/src/styles/base/header.scss
+++ b/src/styles/base/header.scss
@@ -71,6 +71,22 @@
solid-notifications-template[data-rdf-type='foaf:user'] {
position: absolute;
}
+
+ .selector {
+ display: flex;
+ width: 30%;
+ justify-content: space-around;
+
+ input {
+ height: 2em;
+ width: 2em;
+ padding: 0;
+ border: solid thin;
+ }
+ label {
+ text-align: center;
+ }
+ }
}
/* General styling for both notification and user's panel */
diff --git a/src/views/partials/header.pug b/src/views/partials/header.pug
index b49ad92e1408bc2241fcb5174f0bdbb2b7c18524..ae765db46b48db958bd868d28cff0bd180b00206 100644
--- a/src/views/partials/header.pug
+++ b/src/views/partials/header.pug
@@ -5,6 +5,16 @@
span.beta-tag(data-trans='header.beta')
+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"
+ )
+
+
solid-notifications.notLoggedIn(
nested-field="inbox"
bind-user
diff --git a/src/views/partials/project/page-project-profile.pug b/src/views/partials/project/page-project-profile.pug
index acf2dc8012c7b724a410a71fffba6fcce6ce7ff9..7b967b2a7b548a1bdab284ccf42e33aeb9a51d8f 100644
--- a/src/views/partials/project/page-project-profile.pug
+++ b/src/views/partials/project/page-project-profile.pug
@@ -84,7 +84,7 @@ solid-router(default-route='project-profile', hidden)
br
- h2(data-trans:'project.profile.subTitle')
+ h2(data-trans='project.profile.subTitle')
solid-widget(name='hubl-project-user-admin')
template ${value ? "Administrateur" : ""}