Changeable logo, configurable primary color #154

Open-EO · Jul 9, 2021 · 0e95821 · 0e95821
1 parent ead81af
commit 0e95821
Show file tree

Hide file tree

Showing 11 changed files with 122 additions and 80 deletions.
diff --git a/config.js b/config.js
@@ -7,6 +7,9 @@ export default {
 	// A message shown on the login page
 	loginMessage: '',
 
+	// The logo to show
+	logo: './logo.png',
+
 	// Defaults for notifications
 	snotifyDefaults: {
 		timeout: 10000,

diff --git a/package.json b/package.json
@@ -44,7 +44,7 @@
     "@openeo/js-client": "^2.0.0",
     "@openeo/js-commons": "^1.3.0",
     "@openeo/js-processgraphs": "^1.2.0",
-    "@openeo/vue-components": "^2.3.0",
+    "@openeo/vue-components": "^2.3.1",
     "ajv": "^6.12.6",
     "axios": "^0.21.1",
     "codemirror": "^5.58.2",

diff --git a/src/assets/logo.png → public/logo.png b/src/assets/logo.png → public/logo.png
diff --git a/src/Page.vue b/src/Page.vue
@@ -80,8 +80,9 @@ export default {
 }
 </script>
 
-<style>
-@import url('https://fonts.googleapis.com/css?family=Ubuntu&display=swap');
+<style lang="scss">
+@import 'https://fonts.googleapis.com/css?family=Ubuntu&display=swap';
+@import '../theme.scss';
 
 html, body, .container {
 	height: 100%;
@@ -95,7 +96,7 @@ body {
 	margin: 0;
 }
 a {
-	color: #1665B6;
+	color: $linkColor;
 	text-decoration: none;
 	cursor: pointer;
 }
@@ -142,33 +143,6 @@ button:disabled i {
     margin-left: 0.5em;
 }
 
-.logo img {
-	height: 60px;
-	vertical-align: middle;
-}
-.logo h2 {
-	display: inline-block;
-	margin: 0;
-	margin-left: 15px;
-	font-size: 40px;
-	vertical-align: middle;
-	color: #152558;
-	font-weight: normal;
-}
-.logo .version {
-	position: relative;
-	top: -26px;
-	font-size: 11px;
-	background-color: #152558;
-	color: white;
-	padding: 3px;
-	border-radius: 5px;
-	cursor: pointer;
-}
-.logo .version:hover {
-	background-color: #65421F;
-}
-
 .boolean .fa-check-circle {
 	color: green;
 }

diff --git a/src/components/ConnectForm.vue b/src/components/ConnectForm.vue
@@ -1,10 +1,7 @@
 <template>
 	<div class="connectPage">
+		<Logo />
 		<div class="connectContainer">
-			<header class="logo">
-				<img src="../assets/logo.png" alt="openEO" />
-				<h2>Web Editor <span class="version" @click="showWebEditorInfo">{{ version }}</span></h2>
-			</header>
 			<div v-if="httpsUrl" class="message error">
 				<i class="fas fa-shield-alt"></i>
 				<span>You are using an <strong>insecure</strong> HTTP connection, which is not encrypted. Please use HTTPS if possible.<br />
@@ -94,8 +91,8 @@
 </template>
 
 <script>
-import Package from '../../package.json';
 import EventBusMixin from './EventBusMixin.vue';
+import Logo from './Logo.vue';
 import Tabs from '@openeo/vue-components/components/Tabs.vue';
 import Tab from '@openeo/vue-components/components/Tab.vue';
 import TermsOfServiceConsent from './TermsOfServiceConsent.vue';
@@ -106,6 +103,7 @@ export default {
 	name: 'ConnectForm',
 	mixins: [EventBusMixin],
 	components: {
+		Logo,
 		Tabs,
 		Tab,
 		TermsOfServiceConsent
@@ -170,7 +168,6 @@ export default {
 			password: '',
 			provider: null,
 			loading: false,
-			version: Package.version,
 			message: this.$config.loginMessage,
 			oidcClientId: '',
 			oidcOptions: {
@@ -351,10 +348,6 @@ export default {
 			}
 		},
 
-		showWebEditorInfo() {
-			this.emit('showWebEditorInfo');
-		},
-
 		showServerSelector() {
 			this.emit(
 				'showListModal', 
@@ -379,22 +372,32 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+@import '../../theme.scss';
+
 .connectPage {
-	background-color: #1665B6;
+	background-color: $mainColor;
 	align-items: center;
+	justify-content: center;
 	display: flex;
+	flex-direction: column;
 	overflow: auto;
 	width: 100%;
 	height: 100%;
 }
+.connectPage .logo {
+	max-width: 500px;
+	margin-bottom: 1rem;
+}
+.connectPage .logo img {
+	max-height: 150px;
+}
 .connectContainer {
 	width: 500px;
-	background-color: #fff;
-	border: 1px solid #152558;
+	background-color: white;
+	border: 1px solid black;
 	border-radius: 3em;
 	padding: 2.5em 3em;
-	margin: auto;
 	font-family: 'Ubuntu', sans-serif;
 }
 header {

diff --git a/src/components/DiscoveryToolbar.vue b/src/components/DiscoveryToolbar.vue
@@ -203,7 +203,9 @@ export default {
 }
 </style>
 
-<style scoped>
+<style lang="scss" scoped>
+@import '../../theme.scss';
+
 .discovery-toolbar {
 	width: 100%;
 	height: 100%;
@@ -252,7 +254,7 @@ export default {
 	width: 100%;
 	overflow: hidden; 
 	text-overflow: ellipsis;
-	color: #1665B6;
+	color: $linkColor;
 }
 .discovery-info:hover strong {
 	color: #000;

diff --git a/src/components/IDE.vue b/src/components/IDE.vue
@@ -2,10 +2,7 @@
 	<div id="wrapper">
 		<div id="ide" @mouseup="stopMovingSeparator($event)" @mousemove="moveSeparator($event)">
 			<header class="navbar">
-				<div class="logo">
-					<img src="../assets/logo.png" alt="openEO" />
-					<h2>Web Editor <span class="version" @click="showWebEditorInfo">{{ version }}</span></h2>
-				</div>
+				<Logo />
 				<ul id="menu">
 					<li><div class="menuItem" @click="showServerInfo" title="Get server information"><i class="fas fa-info fa-fw"></i> Server</div></li>
 					<li><UserMenu /></li>
@@ -44,13 +41,13 @@
 </template>
 
 <script>
-import Package from '../../package.json';
 import EventBusMixin from './EventBusMixin.vue';
 import Utils from '../utils.js';
 import UserMenu from './UserMenu.vue';
 import UserWorkspace from './UserWorkspace.vue';
 import Viewer from './Viewer.vue';
 import Editor from './Editor.vue';
+import Logo from './Logo.vue';
 import DiscoveryToolbar from './DiscoveryToolbar.vue';
 import { ProcessParameter } from '@openeo/js-commons';
 import { Job, Service, UserProcess } from '@openeo/js-client';
@@ -61,6 +58,7 @@ export default {
 	components: {
 		DiscoveryToolbar,
 		Editor,
+		Logo,
 		Viewer,
 		UserMenu,
 		UserWorkspace,
@@ -93,7 +91,6 @@ export default {
 					width: '30%'
 				}
 			],
-			version: Package.version,
 			resizeListener: null,
 			userInfoUpdater: null
 		};
@@ -285,10 +282,6 @@ export default {
 			this.$refs.serverInfoModal.show();
 		},
 
-		showWebEditorInfo() {
-			this.emit('showWebEditorInfo');
-		},
-
 		showDataForm(title, fields, saveCallback = null, closeCallback = null) {
 			var editable = typeof saveCallback === 'function';
 			var values = {};
@@ -307,7 +300,9 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss">
+@import '../../theme.scss';
+
 #ide {
 	margin-top: 80px;
 	height: calc(100% - 80px);
@@ -349,16 +344,16 @@ export default {
 	border: 0;
 	padding: 3px;
 	margin: 0;
-	border-right: 1px dotted #65421F;
-	border-left: 1px dotted #65421F;
+	border-right: 1px dotted #aaa;
+	border-left: 1px dotted #aaa;
 	cursor: e-resize;
 }
 .infoViewer {
 	height: 450px;
 }
 #ide header.navbar {
 	width: 100%;
-	background-color: #1665B6;
+	background-color: $mainColor;
 	color: white;
 	height: 80px;
 	position: fixed;
@@ -371,21 +366,12 @@ export default {
 	display: flex;
 }
 #ide .logo {
-	margin: 10px 1em;
-	display: inline-block;
+	flex-grow: 1;
 	align-content: flex-start;
+	white-space: nowrap;
 	overflow: hidden;
-}
-#ide .logo h2 {
-	color: white;
-}
-#ide .logo .version {
-	background-color: #1665B6;
-	color: white;
-}
-#ide .logo .version:hover {
-	background-color: white;
-	color: #1665B6;
+	justify-content: left;
+	padding-left: 1em;
 }
 #menu {
 	list-style-type: none;
@@ -401,7 +387,7 @@ export default {
 }
 #menu li:hover {
 	background-color: white;
-	color: #1665B6;
+	color: $mainColor;
 }
 #menu li:hover .dropdown {
 	display: block;

diff --git a/src/components/Logo.vue b/src/components/Logo.vue
@@ -0,0 +1,68 @@
+<template>
+	<div class="logo">
+		<img v-if="$config.logo" :src="$config.logo" alt="Logo" />
+		<h2>Web Editor <span class="version" @click="showWebEditorInfo">{{ version }}</span></h2>
+	</div>
+</template>
+
+<script>
+import EventBusMixin from './EventBusMixin.vue';
+import { version } from '../../package.json';
+
+export default {
+	name: 'Logo',
+	mixins: [EventBusMixin],
+	data() {
+		return {
+			version
+		}
+	},
+	methods: {
+		showWebEditorInfo() {
+			this.emit('showWebEditorInfo');
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../theme.scss';
+
+.logo {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 10px;
+	box-sizing: border-box;
+	flex-wrap: wrap;
+
+	img {
+		display: inline-block;
+		max-height: 100%;
+		max-width: 100%;
+	}
+	h2 {
+		display: inline-block;
+		margin: 0.5rem 1rem;
+		font-size: 40px;
+		color: white;
+		font-weight: normal;
+		white-space: nowrap;
+	}
+	.version {
+		position: relative;
+		top: -26px;
+		font-size: 11px;
+		background-color: $mainColor;
+		color: white;
+		padding: 3px;
+		border-radius: 5px;
+		cursor: pointer;
+		
+		&:hover {
+			background-color: white;
+			color: $mainColor;
+		}
+	}
+}
+</style>
diff --git a/src/components/modals/Modal.vue b/src/components/modals/Modal.vue
@@ -189,7 +189,9 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss">
+@import '../../../theme.scss';
+
 .modal {
     position: fixed;
     z-index: 1000; /* Snotify has 9999 and is intentionally above the modals */
@@ -213,7 +215,7 @@ export default {
 }
 
 .modal .modal-header {
-	background-color: #1665B6;
+	background-color: $mainColor;
 	color: white;
 	margin: 0;
 	height: 1.5rem;