From 985bac405e2a351fc27b1988a7434e0f1099dae0 Mon Sep 17 00:00:00 2001 From: irismarie Date: Tue, 16 Mar 2021 11:23:11 +0100 Subject: [PATCH] changed the singleton implementation of branding, added borderradius --- src/app.js | 4 +-- src/branding/branding.js | 60 +++++++++++++++++++++----------- src/branding/slew/slew-values.js | 2 +- src/common/header.js | 4 +-- src/common/home.js | 4 +-- src/common/menu.js | 4 +-- src/styles/app.css | 11 ++++-- src/user/login.js | 8 ++--- 8 files changed, 60 insertions(+), 37 deletions(-) diff --git a/src/app.js b/src/app.js index a39196f..1b2b4ce 100644 --- a/src/app.js +++ b/src/app.js @@ -38,7 +38,7 @@ import User from './user/user'; import APIBrowser from './common/api-browser'; import './styles/app.css'; -import Branding from './branding/branding'; +import branding from './branding/branding'; @@ -51,7 +51,7 @@ class App extends React.Component { type: 'config/load', }); - Branding.instance.applyBranding(); + branding.applyBranding(); this.state = {} } diff --git a/src/branding/branding.js b/src/branding/branding.js index 04611ee..3ee4000 100644 --- a/src/branding/branding.js +++ b/src/branding/branding.js @@ -24,6 +24,17 @@ import slew_values from './slew/slew-values'; class Branding { constructor(chosenbrand) { + if (!Branding.branding) { + if (chosenbrand === undefined) { + chosenbrand = "villasweb" + } + this.brand = chosenbrand; + + this.setValues(); + this.isSet = true; + + Branding.branding = this; + } /* // TODO: simplify; error only for "wrong" brand, not for missing brand var brand = _.get(brands, [chosenbrand]); @@ -38,16 +49,11 @@ class Branding { this.default = false; } *****/ - - this.brand = chosenbrand; - this.isSet = false; - this.setValues(); + return Branding.branding; } - static instance = Branding.instance || new Branding(process.env.REACT_APP_BRAND); - setValues() { - switch(this.brand) { + switch (this.brand) { case 'villasweb': this.values = villasweb_values; break; @@ -93,10 +99,10 @@ class Branding { return (

Welcome!

); } + // TODO: error handling if icon cannot be found changeHead() { - if (this.default) { - console.log("default branding"); - return; + if (!this.values.icon) { + return; } document.title = this.values.title + " " + this.values.subtitle; var oldlink = document.getElementById('dynamic-favicon'); @@ -107,19 +113,19 @@ class Branding { link.href = '/' + this.values.icon; if (oldlink) { - document.head.removeChild(oldlink); + document.head.removeChild(oldlink); } document.head.appendChild(link); - } + } - applyBranding() { + applyBranding() { this.changeHead(); const rootEl = document.querySelector(':root'); let background = this.getBackgroundColor(); if (background) { - document.body.style.backgroundColor = background; + document.body.style.backgroundColor = background; } let maincolor = this.getMainColor(); @@ -129,26 +135,29 @@ class Branding { let highlight = this.getHighlightColor(); if (highlight) { - rootEl.style.setProperty('--highlights', highlight); + rootEl.style.setProperty('--highlights', highlight); } let primary = this.getPrimaryTextColor(); if (primary) { - rootEl.style.setProperty('--primarytext', primary); + rootEl.style.setProperty('--primarytext', primary); } let secondary = this.getSecondaryTextColor(); if (secondary) { - rootEl.style.setProperty('--secondarytext', secondary); + rootEl.style.setProperty('--secondarytext', secondary); } let font = this.getFont(); if (font) { - rootEl.style.setProperty('--mainfont', font); + rootEl.style.setProperty('--mainfont', font); } - this.isSet = false; - } + let borderradius = this.getBorderRadius(); + if (borderradius) { + rootEl.style.setProperty('--borderradius', borderradius); + } + } getBackgroundColor() { if (this.values.style && this.values.style.bgcolor) { @@ -191,7 +200,16 @@ class Branding { } return null; } + + getBorderRadius() { + if (this.values.style && this.values.style.borderradius) { + return this.values.style.borderradius; + } + return null; + } }; +const branding = new Branding(process.env.REACT_APP_BRAND); +Object.freeze(branding); -export default Branding; \ No newline at end of file +export default branding; \ No newline at end of file diff --git a/src/branding/slew/slew-values.js b/src/branding/slew/slew-values.js index 574f595..0c5b06e 100644 --- a/src/branding/slew/slew-values.js +++ b/src/branding/slew/slew-values.js @@ -38,7 +38,7 @@ const slew_values = { primarytext: '#472120', secondarytext: '#472120', font: "16px Roboto, sans-serif", - borderradius: "8px" + borderradius: "10px" } } diff --git a/src/common/header.js b/src/common/header.js index 1da77db..97d094b 100644 --- a/src/common/header.js +++ b/src/common/header.js @@ -16,13 +16,13 @@ ******************************************************************************/ import React from 'react'; -import Branding from '../branding/branding'; +import branding from '../branding/branding'; class Header extends React.Component { render() { return (
-

{Branding.instance.values.title} - {Branding.instance.values.subtitle}

+

{branding.values.title} - {branding.values.subtitle}

); } diff --git a/src/common/home.js b/src/common/home.js index 6d920fd..1abc7be 100644 --- a/src/common/home.js +++ b/src/common/home.js @@ -18,7 +18,7 @@ import React from 'react'; import { Redirect } from "react-router-dom"; -import Branding from '../branding/branding'; +import branding from '../branding/branding'; class Home extends React.Component { @@ -37,8 +37,6 @@ class Home extends React.Component { return (); } - const branding = Branding.instance; - return (
{branding.getHome(currentUser.username, currentUser.id, currentUser.role)} diff --git a/src/common/menu.js b/src/common/menu.js index 712b99d..e32c81d 100644 --- a/src/common/menu.js +++ b/src/common/menu.js @@ -17,7 +17,7 @@ import React from 'react'; import { NavLink } from 'react-router-dom'; -import Branding from '../branding/branding'; +import branding from '../branding/branding'; import { Container } from 'flux/utils'; import LoginStore from '../user/login-store'; import AppDispatcher from './app-dispatcher'; @@ -66,7 +66,7 @@ class SidebarMenu extends React.Component { } render() { - const values = Branding.instance.values; + const values = branding.values; let links = [] if (values.links) { Object.keys(values.links).forEach(key => { diff --git a/src/styles/app.css b/src/styles/app.css index 3cd2277..9a4b9b5 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -24,6 +24,7 @@ --highlights: #527984; --primarytext: #4d4d4d; --secondarytext: #818181; + --borderradius: 0px; --mainfont: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif; } @@ -38,6 +39,8 @@ body { .app { height: 100vh; color: var(--primarytext); + border-radius: var(--borderradius); + font: var(--mainfont); hyphens: auto; @@ -83,6 +86,8 @@ body { .app-content { padding: 15px 20px 20px 20px; + border-radius: var(--borderradius); + width: auto; min-height: 300px; @@ -110,6 +115,8 @@ body { padding: 20px; width: 160px; float: left; + border-radius: var(--borderradius); + background-color: #fff; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), @@ -227,7 +234,7 @@ body { float: right; max-width: 400px; padding: 15px 20px; - /*++++++++++++ border-radius: 8px 0px 0px 8px;****/ + border-radius: var(--borderradius) 0px 0px var(--borderradius); background-color: #fff; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), @@ -237,7 +244,7 @@ body { .login-container { float: left; max-width: 400px; - /* border-radius: 0px 8px 8px 0px;*/ + border-radius: 0px var(--borderradius) var(--borderradius) 0px; padding: 15px 20px; background-color: #fff; diff --git a/src/user/login.js b/src/user/login.js index 0ad75f5..b8cd52d 100644 --- a/src/user/login.js +++ b/src/user/login.js @@ -27,7 +27,7 @@ import Footer from '../common/footer'; import NotificationsDataManager from '../common/data-managers/notifications-data-manager'; import LoginStore from './login-store' import AppDispatcher from '../common/app-dispatcher'; -import Branding from '../branding/branding'; +import branding from '../branding/branding'; class Login extends Component { @@ -41,8 +41,8 @@ class Login extends Component { }); // set branding in case the login page gets refreshed - if (!Branding.instance.isSet) { - Branding.instance.applyBranding(); + if (!branding.isSet) { + branding.applyBranding(); } } @@ -78,7 +78,7 @@ class Login extends Component {
- {Branding.instance.getWelcome()} + {branding.getWelcome()}