feature: conflicts resolved

This commit is contained in:
gaelle morin 2021-01-12 09:50:48 +01:00
commit 8a9838a37f
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
5 changed files with 119 additions and 2 deletions

View File

@ -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.

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="/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)

View File

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

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

@ -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(