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

Merge remote-tracking branch 'origin/master' into release/solid-directory-12

This commit is contained in:
Jean-Baptiste Pasquier 2021-01-13 17:12:47 +01:00
parent 3d4dbd5258 b5de873823
commit 86aa231b2d
7 changed files with 136 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
README.md
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.

4
src/dependencies.pug
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)

2
src/locales/fr.json
View File

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

97
src/scripts/theme-checker.js Normal file
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();
});
});

16
src/styles/base/header.scss
View File

@ -71,6 +71,22 @@
solid-notifications-template[data-rdf-type='foaf:user'] {
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 */

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

@ -5,6 +5,16 @@
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(
nested-field="inbox"
bind-user

2
src/views/partials/project/page-project-profile.pug
View File

@ -84,7 +84,7 @@ solid-router(default-route='project-profile', hidden)
br
h2(data-trans:'project.profile.subTitle')
h2(data-trans='project.profile.subTitle')
solid-widget(name='hubl-project-user-admin')
template ${value ? "Administrateur" : ""}