changed the singleton implementation of branding, added borderradius

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 = {} 
   }
 

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 (<h1>Welcome!</h1>);
     }
 
+    // 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;
+export default branding;

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"
    }
 }
 

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 (
       <header className="app-header">
-        <h1>{Branding.instance.values.title} - {Branding.instance.values.subtitle}</h1>
+        <h1>{branding.values.title} - {branding.values.subtitle}</h1>
       </header>
     );
   }

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 (<Redirect to="/logout" />);
     }
 
-    const branding = Branding.instance;
-
     return (
       <div>
         {branding.getHome(currentUser.username, currentUser.id, currentUser.role)}

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 => {

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;

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 {
         <Header />
         <div className="login-parent">
           <div className="login-welcome">
-            {Branding.instance.getWelcome()}
+            {branding.getWelcome()}
           </div>
 
           <div className="login-container">