add logo box, improved slew logos
Before Width: | Height: | Size: 14 KiB |
BIN
public/slew_blue.png
Normal file
After Width: | Height: | Size: 4 KiB |
Before Width: | Height: | Size: 27 KiB |
BIN
public/slew_magenta.png
Normal file
After Width: | Height: | Size: 6.3 KiB |
BIN
public/template_logo.png
Normal file
After Width: | Height: | Size: 2.1 KiB |
|
@ -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>
|
|
Before Width: | Height: | Size: 2.9 KiB |
|
@ -26,10 +26,6 @@ import template_values from './template/template-values';
|
||||||
|
|
||||||
class Branding {
|
class Branding {
|
||||||
constructor(chosenbrand) {
|
constructor(chosenbrand) {
|
||||||
if (Branding.branding) {
|
|
||||||
return Branding.branding;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.brand = chosenbrand;
|
this.brand = chosenbrand;
|
||||||
this.setValues();
|
this.setValues();
|
||||||
this.checkValues();
|
this.checkValues();
|
||||||
|
@ -175,9 +171,7 @@ class Branding {
|
||||||
|
|
||||||
let background = this.getBackgroundColor();
|
let background = this.getBackgroundColor();
|
||||||
if (background) {
|
if (background) {
|
||||||
console.log(background)
|
|
||||||
rootEl.style.setProperty('--bg', background);
|
rootEl.style.setProperty('--bg', background);
|
||||||
//document.body.style.backgroundColor = background;
|
|
||||||
} else {
|
} else {
|
||||||
console.log(document.body.style.backgroundColor)
|
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() {
|
getBackgroundColor() {
|
||||||
if (this.values.style && this.values.style.background) {
|
if (this.values.style && this.values.style.background) {
|
||||||
return 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;
|
export default branding;
|
Before Width: | Height: | Size: 23 KiB |
Before Width: | Height: | Size: 3.8 KiB |
1032
src/branding/slew/img/slew_blue.svg
Normal file
After Width: | Height: | Size: 94 KiB |
1057
src/branding/slew/img/slew_magenta.svg
Normal file
After Width: | Height: | Size: 94 KiB |
|
@ -21,12 +21,11 @@ import './slew.css'
|
||||||
export function slew_home() {
|
export function slew_home() {
|
||||||
return (
|
return (
|
||||||
<div className="home-container">
|
<div className="home-container">
|
||||||
<img style={{ height: 120, float: 'right' }} src={require('./img/slew-logo-draft.png').default} alt="Logo VILLASweb" />
|
|
||||||
<h1>Home</h1>
|
<h1>Home</h1>
|
||||||
<p>
|
<p>
|
||||||
Welcome to <b>SLEW</b>!
|
Welcome to <b>SLEW</b>!
|
||||||
</p>
|
</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>
|
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.
|
<p>The motivation behind is the ongoing transformation of the energy system, which is making the system more and more complex.
|
||||||
|
|
|
@ -18,7 +18,8 @@
|
||||||
const slew_values = {
|
const slew_values = {
|
||||||
title: 'SLEW',
|
title: 'SLEW',
|
||||||
subtitle: 'Second Life for Energiewende',
|
subtitle: 'Second Life for Energiewende',
|
||||||
icon: "slew-icon-draft.png",
|
icon: "slew_magenta.png",
|
||||||
|
logo: "slew_magenta.svg",
|
||||||
pages: {
|
pages: {
|
||||||
home: true,
|
home: true,
|
||||||
scenarios: true,
|
scenarios: true,
|
||||||
|
|
|
@ -74,44 +74,56 @@ class SidebarMenu extends React.Component {
|
||||||
links.push(<li key={key}><a href={values.links[key]} title={key}>{key}</a></li>);
|
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 (
|
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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -111,10 +111,15 @@ body {
|
||||||
/**
|
/**
|
||||||
* Menus
|
* Menus
|
||||||
*/
|
*/
|
||||||
|
.menucontainer {
|
||||||
|
float: left;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
.menu {
|
.menu {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
width: 160px;
|
width: 160px;
|
||||||
float: left;
|
|
||||||
border-radius: var(--borderradius);
|
border-radius: var(--borderradius);
|
||||||
|
|
||||||
|
|
||||||
|
|