autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: theme checker

Browse Source
This commit is contained in:
Jean-Baptiste Pasquier
2021-01-25 14:52:34 +01:00
parent d6de86a74b
commit e0429f523b
4 changed files with 25 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/scripts/theme-checker.js
View File

@ -26,7 +26,7 @@ document.addEventListener("DOMContentLoaded", () => {
cP.applyColor();
});
const currentSecondary = getComputedStyle(document.documentElement).getPropertyValue('--color-secondary')
const defaultSecondary = params.has('s') ? "#" + params.get('s') : currentSecondary ? currentSecondary.trim() : "#314560";
const defaultSecondary = params.has('s') ? "#" + params.get('s') : currentSecondary ? currentSecondary.trim() : "#0068FF";
document.documentElement.style.setProperty('--color-secondary', defaultSecondary);
const cS = Pickr.create({
el: '.input-color#color-secondary',
@ -48,13 +48,13 @@ document.addEventListener("DOMContentLoaded", () => {
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 currentThird = getComputedStyle(document.documentElement).getPropertyValue('--color-third')
const defaultThird = params.has('c') ? "#" + params.get('c') : currentThird ? currentThird.trim() : "#00E3B4";
document.documentElement.style.setProperty('--color-third', defaultThird);
const cC = Pickr.create({
el: '.input-color#color-complementary',
el: '.input-color#color-third',
theme: 'nano',
default: defaultComplementary,
default: defaultThird,
defaultRepresentation: 'HEX',
swatches: null,
components: {
@ -67,17 +67,17 @@ document.addEventListener("DOMContentLoaded", () => {
}
});
cC.on('change', (color, evt) => {
document.documentElement.style.setProperty('--color-complementary', color.toHEXA());
document.documentElement.style.setProperty('--color-third', 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 currentHeading = getComputedStyle(document.documentElement).getPropertyValue('--color-heading')
const defaultHeading = params.has('cd') ? "#" + params.get('cd') : currentHeading ? currentHeading.trim() : "#2E3F58";
document.documentElement.style.setProperty('--color-heading', defaultHeading);
const cCd = Pickr.create({
el: '.input-color#color-complementary-darken',
el: '.input-color#color-heading',
theme: 'nano',
default: defaultComplementaryDarken,
default: defaultHeading,
defaultRepresentation: 'HEX',
swatches: null,
components: {
@ -90,7 +90,7 @@ document.addEventListener("DOMContentLoaded", () => {
}
});
cCd.on('change', (color, evt) => {
document.documentElement.style.setProperty('--color-complementary-darken', color.toHEXA());
document.documentElement.style.setProperty('--color-heading', color.toHEXA());
params.set('cd', String(color.toHEXA()).substr(1));
cCd.applyColor();
});

16
src/views/partials/header.pug
View File

@ -9,20 +9,20 @@ div
span.tag.reversed.text-semibold(data-trans='header.beta')
div
solid-notifications.segment.sm-margin-right-xlarge(
nested-field="inbox"
bind-user
)
if themeChecker
div.selector
each val, index in ['primary', 'secondary', 'complementary', 'complementary-darken']
label= 'Couleur ' + (index+1)
div.selector.text-center
each val, index in ['primary', 'secondary', 'third', 'heading']
label.segment.margin-right-medium.margin-top-xsmall= 'Couleur ' + (index+1)
input.input-color(
id='color-'+val
type="text"
)
solid-notifications.segment.sm-margin-right-xlarge(
nested-field="inbox"
bind-user
)
//- User menu visible on large screens
details.segment.sm-hidden.user-controls
summary.text-right