feature: Include theme checker tool in Hubl

This commit is contained in:
Fabien Quatravaux 2021-01-04 09:36:41 +00:00 committed by Jean-Baptiste Pasquier
parent fae3025cc2
commit aada18ac52
5 changed files with 134 additions and 0 deletions

View File

@ -87,6 +87,13 @@ Build with a custom config file:
CONFIG_PATH='config.customName.json' npm run build 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 ## Mandatory modules
By default, a Hubl includes only individual chat modules. By default, a Hubl includes only individual chat modules.

View File

@ -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="https://cdn.skypack.dev/@startinblox/component-notifications@0.9" defer)
//- script(type="module" src="/lib/sib-notifications/index.js" 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
if endpoints.get.events && endpoints.get.typeevents if endpoints.get.events && endpoints.get.typeevents
script(type="module" src="https://cdn.skypack.dev/@startinblox/component-event@1.4" defer) script(type="module" src="https://cdn.skypack.dev/@startinblox/component-event@1.4" defer)

View File

@ -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();
});
});

View File

@ -71,6 +71,22 @@
solid-notifications-template[data-rdf-type='foaf:user'] { solid-notifications-template[data-rdf-type='foaf:user'] {
position: absolute; 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 */ /* General styling for both notification and user's panel */

View File

@ -5,6 +5,16 @@
span.beta-tag(data-trans='header.beta') 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( solid-notifications.notLoggedIn(
nested-field="inbox" nested-field="inbox"
bind-user bind-user