Mirrors/VILLASweb
1
0
Fork 0
mirror of https://git.rwth-aachen.de/acs/public/villas/web/ synced 2025-03-09 00:00:01 +01:00
Code Issues Releases Wiki Activity

allow setting arbitrary custom CSS properties for branding themes

Browse source 
Signed-off-by: Steffen Vogel <steffen.vogel@opal-rt.com>
This commit is contained in:
Steffen Vogel 2023-05-02 15:45:37 +02:00
parent 533bb09e8f
commit 2a6259a477
5 changed files with 35 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
src/branding/branding.js
View file

@ -172,36 +172,8 @@ class Branding {
const rootEl = document.querySelector(':root');
let background = this.getBackgroundColor();
if (background) {
rootEl.style.setProperty('--bg', background);
} else {
console.log(document.body.style.backgroundColor)
}
let maincolor = this.getMainColor();
if (maincolor) {
rootEl.style.setProperty('--maincolor', maincolor);
}
let highlight = this.getHighlightColor();
if (highlight) {
rootEl.style.setProperty('--highlights', highlight);
}
let secondary = this.getSecondaryTextColor();
if (secondary) {
rootEl.style.setProperty('--secondarytext', secondary);
}
let font = this.getFont();
if (font) {
rootEl.style.setProperty('--mainfont', font);
}
let borderradius = this.getBorderRadius();
if (borderradius) {
rootEl.style.setProperty('--borderradius', borderradius);
for (const [key, value] of Object.entries(this.values.style)) {
rootEl.style.setProperty('--' + key, value);
}
}
@ -213,51 +185,11 @@ class Branding {
} catch (err) {
console.error("cannot find './" + this.brand + '/img/' + this.values.logo + "'");
}
return image;
}
getBackgroundColor() {
if (this.values.style && this.values.style.background) {
return this.values.style.background;
}
return null;
}
getMainColor() {
if (this.values.style && this.values.style.maincolor) {
return this.values.style.maincolor;
}
return null;
}
getHighlightColor() {
if (this.values.style && this.values.style.highlights) {
return this.values.style.highlights;
}
return null;
}
getSecondaryTextColor() {
if (this.values.style && this.values.style.secondarytext) {
return this.values.style.secondarytext;
}
return null;
}
getFont() {
if (this.values.style && this.values.style.font) {
return this.values.style.secondarytext;
}
return null;
}
getBorderRadius() {
if (this.values.style && this.values.style.borderradius) {
return this.values.style.borderradius;
}
return null;
}
getTitle() {
return this.values.title ? this.values.title : "No Title!";
@ -270,4 +202,4 @@ class Branding {
var branding = new Branding(process.env.REACT_APP_BRAND);
export default branding;
export default branding;

10
src/branding/slew/slew-values.js
View file

@ -34,11 +34,11 @@ const slew_values = {
style: {
background: 'rgba(207,209,210, 1)',
highlights: 'rgba(0,84,159, 0.75)',
maincolor: 'rgba(80,80,80, 1)',
secondarytext: 'rgba(80,80,80, 0.9)',
font: "16px Roboto, sans-serif",
borderradius: "10px"
main: 'rgba(80,80,80, 1)',
secondaryText: 'rgba(80,80,80, 0.9)',
fontFamily: "Roboto, sans-serif",
borderRadius: "10px"
}
}
export default slew_values;
export default slew_values;

12
src/branding/template/template-values.js
View file

@ -34,11 +34,11 @@
style: {
background: 'rgba(50,30,90, 0.6)',
highlights: 'rgba(0,230,5, 0.75)',
maincolor: 'rgba(255,0,0, 1)',
secondarytext: 'rgba(0,0,100, 0.8)',
font: "16px Comic Sans, sans-serif",
borderradius: "60px"
main: 'rgba(255,0,0, 1)',
secondaryText: 'rgba(0,0,100, 0.8)',
fontFamily: "Comic Sans, sans-serif",
borderRadius: "60px"
}
}
export default template_values;
export default template_values;

6
src/branding/villasweb/villasweb-values.js
View file

@ -29,9 +29,9 @@ const villasweb_values = {
style: {
background: '#6EA2B0',
highlights: '#527984',
maincolor: '#4d4d4d',
secondarytext: '#818181',
main: '#4d4d4d',
secondaryText: '#818181',
}
}
export default villasweb_values;
export default villasweb_values;

33
src/styles/app.css
View file

@ -20,30 +20,31 @@
*/
:root {
--bg: #eceded;
--main: #4d4d4d;
--background: #eceded;
--highlights: #527984;
--secondarytext: #818181;
--borderradius: 0px;
--mainfont: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
--maincolor: #4d4d4d;
--bgtext:#fff;
--secondaryText: #818181;
--borderRadius: 0px;
--fontFamily: 'Helvetica Neue', Helvetica, Arial, sans-serif;
--backgroundText:#fff;
}
* {
color: var(--maincolor);
color: var(--main);
}
body {
background-color: var(--bg) !important;
background-color: var(--background) !important;
font-family: var(--fontFamily) !important;
}
.app {
height: 100vh;
color: var(--maincolor);
border-radius: var(--borderradius);
color: var(--main);
border-radius: var(--borderRadius);
font: var(--mainfont);
font: 16px;
hyphens: auto;
}
@ -91,13 +92,13 @@ a:active {
margin-top: 2em;
padding-bottom: 2em;
color: var(--bgtext);
color: var(--backgroundText);
text-align: center;
}
.app-footer a {
text-decoration: underline;
color: var(--bgtext);
color: var(--backgroundText);
}
.app-body-spacing {
@ -110,7 +111,7 @@ a:active {
.app-content {
padding: 15px 20px 20px 20px;
border-radius: var(--borderradius);
border-radius: var(--borderRadius);
width: auto;
@ -145,7 +146,7 @@ a:active {
padding: 20px;
margin-bottom: 20px;
width: 160px;
border-radius: var(--borderradius);
border-radius: var(--borderRadius);
background-color: #fff;
@ -159,7 +160,7 @@ a:active {
text-align: center;
margin-bottom: 20px;
width: 160px;
border-radius: var(--borderradius);
border-radius: var(--borderRadius);
background-color: #fff;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),