diff --git a/src/app.js b/src/app.js index bf4d491..6f55fdc 100644 --- a/src/app.js +++ b/src/app.js @@ -20,7 +20,6 @@ import { DndProvider } from 'react-dnd'; import HTML5Backend from 'react-dnd-html5-backend'; import NotificationSystem from 'react-notification-system'; import { Redirect, Route } from 'react-router-dom'; -import { Hidden } from 'react-grid-system' import AppDispatcher from './common/app-dispatcher'; import NotificationsDataManager from './common/data-managers/notifications-data-manager'; @@ -39,7 +38,6 @@ import User from './user/user'; import APIBrowser from './common/api-browser'; import './styles/app.css'; -//import './branding/slew/slew.css' import Branding from './branding/branding'; @@ -62,13 +60,13 @@ class App extends React.Component { console.log("default branding"); return; } - document.title = Branding.instance.brand.title + " " + Branding.instance.brand.subtitle; + document.title = Branding.instance.values.title + " " + Branding.instance.values.subtitle; var oldlink = document.getElementById('dynamic-favicon'); var link = document.createElement('link'); link.id = 'dynamic-favicon'; link.rel = 'shortcut icon' - link.href = Branding.instance.brand.icon; + link.href = Branding.instance.values.icon; if (oldlink) { document.head.removeChild(oldlink); @@ -98,7 +96,7 @@ class App extends React.Component { let secondary = Branding.instance.getSecondaryTextColor(); if (secondary) { - rootEl.style.setProperty('--secondary', secondary); + rootEl.style.setProperty('--secondarytext', secondary); } let font = Branding.instance.getFont(); diff --git a/src/branding/branding.js b/src/branding/branding.js index 0d5f4c2..d243160 100644 --- a/src/branding/branding.js +++ b/src/branding/branding.js @@ -15,16 +15,15 @@ * along with VILLASweb. If not, see . ******************************************************************************/ -import brands from './brands' -import config from '../config' -import _ from 'lodash'; - import { villasweb_home } from './villasweb/villasweb-home'; -import { slew_home } from './slew/slew_home'; +import villasweb_values from './villasweb/villasweb-values'; +import { slew_home } from './slew/slew-home'; +import slew_values from './slew/slew-values'; class Branding { constructor(chosenbrand) { + /* // TODO: simplify; error only for "wrong" brand, not for missing brand var brand = _.get(brands, [chosenbrand]); if (!brand) { @@ -37,21 +36,36 @@ class Branding { } else { this.default = false; } + *****/ - this.brand = brand; - this.name = chosenbrand; + this.brand = chosenbrand; + this.setValues(); } - static instance = Branding.instance || new Branding(config.branding); + static instance = Branding.instance || new Branding(process.env.REACT_APP_BRAND); + + setValues() { + switch(this.brand) { + case 'villasweb': + this.values = villasweb_values; + break; + case 'slew': + this.values = slew_values; + break; + default: + this.values = villasweb_values; + break; + } + } getHome(username = '', userid = '', role = '') { var homepage = ''; - switch (this.name) { + switch (this.brand) { case 'villasweb': - homepage = villasweb_home(this.brand.title, username, userid, role); + homepage = villasweb_home(this.values.title, username, userid, role); break; case 'slew': - homepage = slew_home(this.brand.title); + homepage = slew_home(this.values.title); break; default: homepage = villasweb_home(); @@ -61,36 +75,36 @@ class Branding { } getBackgroundColor() { - if (this.brand.style && this.brand.style.bgcolor) { - return this.brand.style.bgcolor; + if (this.values.style && this.values.style.bgcolor) { + return this.values.style.bgcolor; } return null; } getHighlightColor() { - if (this.brand.style && this.brand.style.highlights) { - return this.brand.style.highlights; + if (this.values.style && this.values.style.highlights) { + return this.values.style.highlights; } return null; } getPrimaryTextColor() { - if (this.brand.style && this.brand.style.primarytext) { - return this.brand.style.primarytext; + if (this.values.style && this.values.style.primarytext) { + return this.values.style.primarytext; } return null; } getSecondaryTextColor() { - if (this.brand.style && this.brand.style.secondarytext) { - return this.brand.style.secondarytext; + if (this.values.style && this.values.style.secondarytext) { + return this.values.style.secondarytext; } return null; } getFont() { - if (this.brand.style && this.brand.style.font) { - return this.brand.style.secondarytext; + if (this.values.style && this.values.style.font) { + return this.values.style.secondarytext; } return null; } diff --git a/src/branding/slew/slew_home.js b/src/branding/slew/slew-home.js similarity index 100% rename from src/branding/slew/slew_home.js rename to src/branding/slew/slew-home.js diff --git a/src/branding/slew/slew-values.js b/src/branding/slew/slew-values.js new file mode 100644 index 0000000..70f4582 --- /dev/null +++ b/src/branding/slew/slew-values.js @@ -0,0 +1,44 @@ +/** + * This file is part of VILLASweb. + * + * VILLASweb is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * VILLASweb is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with VILLASweb. If not, see . + ******************************************************************************/ + +const slew_values = { + title: 'SLEW', + subtitle: 'Second Life for Energiewende', + logo: "slew-logo.png", + icon: "/slew_icon.png", + pages: { + home: true, + scenarios: true, + infrastructure: false, + users: false, + account: false, + api: false + }, + links: { + "DPsim Simulator": "https://dpsim.fein-aachen.org", + "VILLASframework": "https://villas.fein-aachen.org/doc" + }, + style: { + bgcolor: 'rgba(107,29,26, 0.8)', + highlights: '#610C04', + primarytext: '#472120', + secondarytext: '#472120', + font: "16px Roboto, sans-serif", + } +} + +export default slew_values; \ No newline at end of file diff --git a/src/branding/villasweb/villasweb-values.js b/src/branding/villasweb/villasweb-values.js new file mode 100644 index 0000000..f4b2dd9 --- /dev/null +++ b/src/branding/villasweb/villasweb-values.js @@ -0,0 +1,38 @@ +/** + * This file is part of VILLASweb. + * + * VILLASweb is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * VILLASweb is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with VILLASweb. If not, see . + ******************************************************************************/ + +const villasweb_values = { + title: 'VILLASweb', + subtitle: 'ACS', + logo: 'villas_web.svg', + pages: { + home: true, + scenarios: true, + infrastructure: true, + users: true, + account: true, + api: true, + }, + style: { + bgcolor: '#6EA2B0', + highlights: '#527984', + primarytext: '#4d4d4d', + secondarytext: '#818181', + } +} + +export default villasweb_values; \ No newline at end of file diff --git a/src/common/header.js b/src/common/header.js index 2889202..1da77db 100644 --- a/src/common/header.js +++ b/src/common/header.js @@ -22,7 +22,7 @@ class Header extends React.Component { render() { return (
-

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

+

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

); } diff --git a/src/common/menu.js b/src/common/menu.js index b82a78b..712b99d 100644 --- a/src/common/menu.js +++ b/src/common/menu.js @@ -66,11 +66,11 @@ class SidebarMenu extends React.Component { } render() { - const brand = Branding.instance.brand; + const values = Branding.instance.values; let links = [] - if (brand.links) { - Object.keys(brand.links).forEach(key => { - links.push(
  • {key}
    • ); + if (values.links) { + Object.keys(values.links).forEach(key => { + links.push(
  • {key}
    • ); }) } @@ -80,26 +80,26 @@ class SidebarMenu extends React.Component { {this.state.externalAuth ?
      - - - + + + {this.props.currentRole === 'Admin' ?
    • Users
      • : '' } - + Logout - +
    :
      - - - + + + {this.props.currentRole === 'Admin' ?
    • Users
      • : '' } - +
    • Logout
      • - +
    } { diff --git a/src/config.js b/src/config.js index 6835213..72b222d 100644 --- a/src/config.js +++ b/src/config.js @@ -20,7 +20,6 @@ const config = { name: 'Institute for Automation of Complex Power Systems (ACS), RWTH Aachen University, Germany', mail: 'stvogel@eonerc.rwth-aachen.de' }, - branding: 'slew', } export default config \ No newline at end of file diff --git a/src/styles/app.css b/src/styles/app.css index 00cccbf..16a0245 100644 --- a/src/styles/app.css +++ b/src/styles/app.css @@ -62,13 +62,11 @@ body { margin-top: 20px; padding-bottom: 10px; - + color: var(--secondarytext); text-align: center; } .app-footer a { - color: var(--primarytext); - text-decoration: underline; } @@ -116,7 +114,7 @@ body { } .menu a { - color: var(--primarytext); + color: var(--secondarytext); text-decoration:none; }