From e0429f523bb212cbcd565410f788f99b97ea33e4 Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Pasquier Date: Mon, 25 Jan 2021 14:52:34 +0100 Subject: [PATCH] fix: theme checker --- client.sample.css | 12 ++++------- configtest.json | 40 ----------------------------------- src/scripts/theme-checker.js | 26 +++++++++++------------ src/views/partials/header.pug | 16 +++++++------- 4 files changed, 25 insertions(+), 69 deletions(-) delete mode 100644 configtest.json diff --git a/client.sample.css b/client.sample.css index f18502d..10c09ce 100644 --- a/client.sample.css +++ b/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; } diff --git a/configtest.json b/configtest.json deleted file mode 100644 index 699ed66..0000000 --- a/configtest.json +++ /dev/null @@ -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" - }] -} \ No newline at end of file diff --git a/src/scripts/theme-checker.js b/src/scripts/theme-checker.js index b6f2d67..a8ec3a1 100644 --- a/src/scripts/theme-checker.js +++ b/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(); }); diff --git a/src/views/partials/header.pug b/src/views/partials/header.pug index 7f779b2..f983f3d 100644 --- a/src/views/partials/header.pug +++ b/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