add logo box, improved slew logos

public/template_logo.svg

@@ -1,109 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="210mm"
-   height="297mm"
-   viewBox="0 0 210 297"
-   version="1.1"
-   id="svg8"
-   inkscape:version="0.92.3 (2405546, 2018-03-11)">
-  <defs
-     id="defs2" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="0.35"
-     inkscape:cx="400"
-     inkscape:cy="560"
-     inkscape:document-units="mm"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     inkscape:window-width="1853"
-     inkscape:window-height="921"
-     inkscape:window-x="67"
-     inkscape:window-y="27"
-     inkscape:window-maximized="1" />
-  <metadata
-     id="metadata5">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1">
-    <ellipse
-       id="path3713"
-       cx="107.34524"
-       cy="152.6131"
-       rx="93.738091"
-       ry="90.714287"
-       style="fill:#ffb380;stroke-width:0.46149299" />
-    <path
-       style="fill:#d45500;stroke-width:0.46149299"
-       id="path3717"
-       sodipodi:type="arc"
-       sodipodi:cx="108.74432"
-       sodipodi:cy="175.60233"
-       sodipodi:rx="30.779675"
-       sodipodi:ry="24.231895"
-       sodipodi:start="0"
-       sodipodi:end="0.17905702"
-       sodipodi:open="true"
-       d="m 139.524,175.60233 a 30.779675,24.231895 0 0 1 -0.4921,4.31574" />
-    <ellipse
-       style="fill:#d45500;stroke-width:0.46149299"
-       id="path3722"
-       cx="108.74432"
-       cy="178.08763"
-       rx="33.577824"
-       ry="26.71722" />
-    <ellipse
-       style="fill:#008080;stroke-width:0.46149299"
-       id="path3729"
-       cx="76.565552"
-       cy="128.38118"
-       rx="9.7935324"
-       ry="10.562623" />
-    <ellipse
-       style="fill:#008080;stroke-width:0.46149299"
-       id="path3729-3"
-       cx="135.32677"
-       cy="127.75985"
-       rx="9.7935324"
-       ry="10.562623" />
-    <ellipse
-       style="fill:#552200;stroke-width:0.46149299"
-       id="path3748"
-       cx="96.152611"
-       cy="183.0583"
-       rx="4.197228"
-       ry="5.5919766" />
-    <ellipse
-       style="fill:#552200;stroke-width:0.46149299"
-       id="path3748-6"
-       cx="117.1388"
-       cy="183.67961"
-       rx="4.197228"
-       ry="5.5919766" />
-  </g>
-</svg>

src/branding/branding.js

@@ -26,10 +26,6 @@ import template_values from './template/template-values';
 
 class Branding {
     constructor(chosenbrand) {
-        if (Branding.branding) {
-            return Branding.branding;
-        }
-
         this.brand = chosenbrand;
         this.setValues();
         this.checkValues();
@@ -175,9 +171,7 @@ class Branding {
 
         let background = this.getBackgroundColor();
         if (background) {
-            console.log(background)
             rootEl.style.setProperty('--bg', background);
-            //document.body.style.backgroundColor = background;
         } else {
             console.log(document.body.style.backgroundColor)
         }
@@ -208,6 +202,18 @@ class Branding {
         }
     }
 
+    getLogo(style) {
+        let image = null;
+
+        try {
+            image =  <img style={style} src={require('./' + this.brand + '/img/' + this.values.logo).default} alt={'Logo ' + this.values.title} />
+        } 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;
@@ -259,7 +265,6 @@ class Branding {
     }
 };
 
-const branding = new Branding(process.env.REACT_APP_BRAND);
+var branding = new Branding(process.env.REACT_APP_BRAND);
-Object.freeze(branding);
 
 export default branding;

src/branding/slew/slew-functions.js

@@ -21,12 +21,11 @@ import './slew.css'
 export function slew_home() {
     return (
         <div className="home-container">
-            <img style={{ height: 120, float: 'right' }} src={require('./img/slew-logo-draft.png').default} alt="Logo VILLASweb" />
             <h1>Home</h1>
             <p>
                 Welcome to <b>SLEW</b>!
             </p>
-            <p>SLEW is a learning platform for running experiments in a virtual power engineering world.
+            <p>SLEW is a learng platform for running experiments in a virtual power engineering world.
                 The platform enables to interact with the experiments in real time and perform analyses on the experimental results.</p>
 
             <p>The motivation behind is the ongoing transformation of the energy system, which is making the system more and more complex.

src/branding/slew/slew-values.js

@@ -18,7 +18,8 @@
 const slew_values = {
    title: 'SLEW',
    subtitle: 'Second Life for Energiewende',
-   icon: "slew-icon-draft.png",
+   icon: "slew_magenta.png",
+   logo: "slew_magenta.svg",
    pages: {
       home: true,
       scenarios: true,

src/common/menu.js

@@ -74,44 +74,56 @@ class SidebarMenu extends React.Component {
         links.push(<li key={key}><a href={values.links[key]} title={key}>{key}</a></li>);
       })
     }
+    var logoStyle = { height: 110, float: 'center' };
+    var logo = branding.getLogo(logoStyle);
 
     return (
-      <div className="menu">
+      <div className="menucontainer">
-        <h2>Menu</h2>
+        { logo ?
-
+          <div className="menu">
-        {this.state.externalAuth ?
+            {logo}
-          <ul>
+          </div>
-            <li hidden={!values.pages.home}><NavLink to="/home" activeClassName="active" title="Home">Home</NavLink></li>
+          : ''
-            <li hidden={!values.pages.scenarios}><NavLink to="/scenarios" activeClassName="active" title="Scenarios">Scenarios</NavLink></li>
-            <li hidden={!values.pages.infrastructure}><NavLink to="/infrastructure" activeClassName="active" title="Infrastructure">Infrastructure</NavLink></li>
-            {this.props.currentRole === 'Admin' ?
-              <li><NavLink to="/users" activeClassName="active" title="Users">Users</NavLink></li> : ''
-            }
-            <li hidden={!values.pages.account}><NavLink to="/account" title="Account">Account</NavLink></li>
-            <a onClick={this.logout.bind(this)} href={this.state.logoutLink}>Logout</a>
-            <li hidden={!values.pages.api}><NavLink to="/api" title="API Browser">API Browser</NavLink></li>
-          </ul>
-          : <ul>
-            <li hidden={!values.pages.home}><NavLink to="/home" activeClassName="active" title="Home">Home</NavLink></li>
-            <li hidden={!values.pages.scenarios}><NavLink to="/scenarios" activeClassName="active" title="Scenarios">Scenarios</NavLink></li>
-            <li hidden={!values.pages.infrastructure}><NavLink to="/infrastructure" activeClassName="active" title="Infrastructure">Infrastructure</NavLink></li>
-            {this.props.currentRole === 'Admin' ?
-              <li><NavLink to="/users" activeClassName="active" title="Users">Users</NavLink></li> : ''
-            }
-            <li hidden={!values.pages.account}><NavLink to="/account" title="Account">Account</NavLink></li>
-            <li><NavLink to={this.state.logoutLink} title="Logout">Logout</NavLink></li>
-            <li hidden={!values.pages.api}> <NavLink to="/api" title="API Browser">API Browser</NavLink></li >
-          </ul >}
-
-        {
-          links.length > 0 ?
-            <div>
-              <br></br>
-              <h4> Links</h4>
-              <ul> {links} </ul>
-            </div>
-            : ''
         }
+        <div className="menu">
+          <h2>Menu</h2>
+
+          {this.state.externalAuth ?
+            <ul>
+              <li hidden={!values.pages.home}><NavLink to="/home" activeClassName="active" title="Home">Home</NavLink></li>
+              <li hidden={!values.pages.scenarios}><NavLink to="/scenarios" activeClassName="active" title="Scenarios">Scenarios</NavLink></li>
+              <li hidden={!values.pages.infrastructure}><NavLink to="/infrastructure" activeClassName="active" title="Infrastructure">Infrastructure</NavLink></li>
+              {this.props.currentRole === 'Admin' ?
+                <li><NavLink to="/users" activeClassName="active" title="Users">Users</NavLink></li> : ''
+              }
+              <li hidden={!values.pages.account}><NavLink to="/account" title="Account">Account</NavLink></li>
+              <a onClick={this.logout.bind(this)} href={this.state.logoutLink}>Logout</a>
+              <li hidden={!values.pages.api}><NavLink to="/api" title="API Browser">API Browser</NavLink></li>
+            </ul>
+            : <ul>
+              <li hidden={!values.pages.home}><NavLink to="/home" activeClassName="active" title="Home">Home</NavLink></li>
+              <li hidden={!values.pages.scenarios}><NavLink to="/scenarios" activeClassName="active" title="Scenarios">Scenarios</NavLink></li>
+              <li hidden={!values.pages.infrastructure}><NavLink to="/infrastructure" activeClassName="active" title="Infrastructure">Infrastructure</NavLink></li>
+              {this.props.currentRole === 'Admin' ?
+                <li><NavLink to="/users" activeClassName="active" title="Users">Users</NavLink></li> : ''
+              }
+              <li hidden={!values.pages.account}><NavLink to="/account" title="Account">Account</NavLink></li>
+              <li><NavLink to={this.state.logoutLink} title="Logout">Logout</NavLink></li>
+              <li hidden={!values.pages.api}> <NavLink to="/api" title="API Browser">API Browser</NavLink></li >
+            </ul >}
+
+          {
+            links.length > 0 ?
+              <div>
+                <br></br>
+                <h4> Links</h4>
+                <ul> {links} </ul>
+              </div>
+              : ''
+          }
+        </div>
+
+
       </div>
     );
   }

src/styles/app.css

@@ -111,10 +111,15 @@ body {
 /**
  * Menus
  */
+.menucontainer {
+  float: left;
+  flex-direction: column;
+}
+
 .menu {
   padding: 20px;
+  margin-bottom: 20px;
   width: 160px;
-  float: left;
   border-radius: var(--borderradius);