Mirrors
/
VILLASweb
mirror of https://git.rwth-aachen.de/acs/public/villas/web/
1
0
Fork 0
Code Issues Releases Wiki Activity

add logo box, improved slew logos

This commit is contained in:
irismarie 2021-03-25 11:27:55 +01:00
parent ac3fa5dced
commit a2fc68ee5e
15 changed files with 2158 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/slew-icon-draft.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 14 KiB

BIN
public/slew_blue.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

BIN
public/slew_icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 27 KiB

BIN
public/slew_magenta.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
public/template_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

109
public/template_logo.svg
View File

@ -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>
Side by Side

Before

Width:  |  Height:  |  Size: 2.9 KiB

21
src/branding/branding.js
View File

@ -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);
Object.freeze(branding);
var branding = new Branding(process.env.REACT_APP_BRAND);
export default branding;

BIN
src/branding/slew/img/slew-logo-draft.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 23 KiB

BIN
src/branding/slew/img/slew-logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.8 KiB

1032
src/branding/slew/img/slew_blue.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

1057
src/branding/slew/img/slew_magenta.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

3
src/branding/slew/slew-functions.js
View File

@ -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.

3
src/branding/slew/slew-values.js
View File

@ -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,

82
src/common/menu.js
View File

@ -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">
<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 className="menucontainer">
{ logo ?
<div className="menu">
{logo}
</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>
);
}

7
src/styles/app.css
View File

@ -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);