From aada18ac5285cb73f7778dd2a21c0537bc771aeb Mon Sep 17 00:00:00 2001 From: Fabien Quatravaux Date: Mon, 4 Jan 2021 09:36:41 +0000 Subject: [PATCH 1/3] feature: Include theme checker tool in Hubl --- README.md | 7 +++ src/dependencies.pug | 4 ++ src/scripts/theme-checker.js | 97 +++++++++++++++++++++++++++++++++++ src/styles/base/header.scss | 16 ++++++ src/views/partials/header.pug | 10 ++++ 5 files changed, 134 insertions(+) create mode 100644 src/scripts/theme-checker.js diff --git a/README.md b/README.md index da971e1..db56f7a 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 88d7a8f..a02ed06 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/scripts/theme-checker.js b/src/scripts/theme-checker.js new file mode 100644 index 0000000..b6f2d67 --- /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 cbc0b8f..15958a0 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 b49ad92..ae765db 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 From 2667f4a09c4f25528395711202255cc507ef219f Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Wed, 6 Jan 2021 16:08:33 +0000 Subject: [PATCH 2/3] i18n: fr - Cercles in menu --- src/locales/fr.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/locales/fr.json b/src/locales/fr.json index 9022ae6..3f5f2a1 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..." }, From b5de8738237bd182cc5136cdb304d232ca3b6794 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Thu, 7 Jan 2021 10:25:49 +0000 Subject: [PATCH 3/3] i18n: data-trans syntax on project info --- src/views/partials/project/page-project-profile.pug | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/partials/project/page-project-profile.pug b/src/views/partials/project/page-project-profile.pug index acf2dc8..7b967b2 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" : ""}