Browse Source

fix: theme checker

webpushnotifications
Jean-Baptiste Pasquier 9 months ago
parent
commit
e0429f523b
  1. 12
      client.sample.css
  2. 40
      configtest.json
  3. 26
      src/scripts/theme-checker.js
  4. 16
      src/views/partials/header.pug

12
client.sample.css

@ -1,10 +1,6 @@
:root {
--color-primary: #FF6765;
--color-secondary: #46271B;
--color-complementary: #5BB4CE;
--color-complementary-darken: #35A0C0;
--color-black-s: 45%;
--color-black-h: 16;
--color-black-l: 6%;
--color-primary: #FF0055;
--color-secondary: #0068FF;
--color-third: #00E3B4;
--color-heading: #2E3F58;
}

40
configtest.json

@ -1,40 +0,0 @@
{
"xmpp": "https://jabber.happy-dev.fr/http-bind/",
"authority": "https://api.community.startinblox.com/",
"authorityName": "test3",
"clientName": "patate",
"clientLogo": "https://cdn.startinblox.com/logos/webp/startinblox.webp",
"publicDirectory": true,
/*"clientCSS": "client.css",*/
"endpoints": {
"get": {
"circles": "https://api.community.startinblox.com/circles/",
"dashboards": "https://api.community.startinblox.com/dashboards/",
"projects": "https://api.community.startinblox.com/projects/",
"businessproviders": "https://api.community.startinblox.com/businessproviders/",
"customers": "https://api.community.startinblox.com/customers/",
"groups": "https://api.community.startinblox.com/groups/",
"joboffers": "https://api.community.startinblox.com/job-offers/",
"users": "https://api.community.startinblox.com/users/",
"skills": "https://api.community.startinblox.com/skills/",
"uploads": "https://api.community.startinblox.com/upload/"
},
"post": {
"circles": "https://api.community.startinblox.com/circles/",
"dashboards": "https://api.community.startinblox.com/dashboards/",
"projects": "https://api.community.startinblox.com/projects/",
"businessproviders": "https://api.community.startinblox.com/businessproviders/",
"customers": "https://api.community.startinblox.com/customers/",
"groups": "https://api.community.startinblox.com/groups/",
"joboffers": "https://api.community.startinblox.com/job-offers/",
"users": "https://api.community.startinblox.com/users/",
"skills": "https://api.community.startinblox.com/skills/",
"uploads": "https://api.community.startinblox.com/upload/"
}
},
"analytics": [{
"type": "matomo",
"url": "https://matomo.startinblox.com/",
"id": "2"
}]
}

26
src/scripts/theme-checker.js

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

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

Loading…
Cancel
Save