Introducing Themability & Vuetify

.gitignore

@@ -1,5 +1,6 @@
 core/js/*
 core/css/*
+core/fonts/*
 
 **/l10n/locale
 **/l10n/template.pot
@@ -21,4 +22,4 @@ package-lock.json
 node_modules
 build
 
-*.log
+*.log

Makefile.release

@@ -10,7 +10,7 @@ endif
 app_name=phoenix
 build_dir=$(CURDIR)/build
 dist_dir=$(build_dir)/dist
-src_files=README.md CHANGELOG.md LICENSE index.html core/css/uikit.owncloud.css core/js/core.bundle.js node_modules/requirejs/require.js sw.js apps/files/js/files.bundle.js core/gfx/cloud-logo-invert.svg
+src_files=README.md CHANGELOG.md LICENSE index.html core/fonts themes/* core/css/core.css core/js/core.bundle.js node_modules/requirejs/require.js sw.js apps/files/js/files.bundle.js core/gfx/cloud-logo-invert.svg
 src_dirs=appinfo img
 all_src=$(src_dirs) $(src_files)
 

index.html

@@ -6,9 +6,7 @@
 	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
 	<meta name="theme-color" content="#375f7E"/>
 	<link rel="manifest" href="manifest.json">
-	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-	<link rel="stylesheet" href="core/css/uikit.owncloud.css" />
-	<link rel="stylesheet" href="core/css/uikit.core.css" />
+	<link rel="stylesheet" href="core/css/core.css" />
 	<noscript>
 		<style>
 			#enable-js-banner {

package.json

@@ -39,12 +39,15 @@
     "eslint-plugin-promise": "^4.0.1",
     "eslint-plugin-standard": "^4.0.0",
     "eslint-plugin-vue": "^5.0.0-beta.3",
+    "file-loader": "^2.0.0",
     "less": "^3.8.1",
     "less-loader": "^4.1.0",
     "mini-css-extract-plugin": "^0.4.4",
     "nightwatch": "^1.0.11",
     "nightwatch-api": "^0.4.0",
+    "node-sass": "^4.10.0",
     "parse-json": "^4.0.0",
+    "sass-loader": "^7.1.0",
     "start-server-and-test": "^1.7.9",
     "style-loader": "^0.23.1",
     "vue-loader": "15.4.2",
@@ -58,6 +61,7 @@
     "axios": "^0.18.0",
     "js-owncloud-client": "github:owncloud/js-owncloud-client#master",
     "lodash": "^4.17.11",
+    "material-design-icons-iconfont": "^4.0.2",
     "requirejs": "^2.3.6",
     "uikit": "^3.0.0-rc.9",
     "vue": "^2.5.16",
@@ -67,6 +71,7 @@
     "vue-events": "^3.1.0",
     "vue-gettext": "^2.1.1",
     "vue-router": "^3.0.1",
+    "vuetify": "^1.3.7",
     "vuex": "^3.0.1",
     "vuex-persist": "^2.0.0"
   }

src/Phoenix.vue

@@ -1,5 +1,5 @@
 <template>
-	<div id="Phoenix">
+	<v-app id="Phoenix">
 		<header  v-if="showHeader">
 			<top-bar></top-bar>
 		</header>
@@ -9,7 +9,7 @@
 		<main id="oc-content" class="uk-offcanvas-content">
 			<router-view></router-view>
 		</main>
-	</div>
+	</v-app>
 </template>
 <script>
 import TopBar from './components/Top-Bar.vue';

src/default.js

@@ -12,6 +12,7 @@ import Phoenix   from './Phoenix.vue';
 // --- Adding global libraries ---
 
 import UIkit  from 'uikit';
+import Vuetify from 'vuetify';
 import Client from 'js-owncloud-client';
 import Axios  from 'axios';
 
@@ -30,7 +31,8 @@ import VueAxios from 'vue-axios';
 
 Vue.use(VueEvents);
 Vue.use(VueRouter);
-Vue.use(VueAxios, Axios)
+Vue.use(VueAxios, Axios);
+Vue.use(Vuetify);
 
 // --- Gettext ----
 
@@ -93,8 +95,14 @@ Vue.component('drop', Drop);
                 router,
                 render: h => h(Phoenix)
             });
-            // inject custom config into vuex base state
+            // inject custom config into vuex
             store.dispatch('loadConfig', config.data)
+            // inject custom theme config into vuex
+            let theme = Axios.get(`themes/${config.data.theme}.json`).then(res => {
+              store.dispatch('loadTheme', res.data)
+              // TODO FOUC happens here; this color init is too late.
+              OC.$vuetify.theme = res.data.colors
+            })
         });
     }
     catch (err) {

src/pages/error.vue

@@ -1,28 +1,31 @@
 <template>
-    <div class="background uk-background-primary">
-
-        <div>
-            <img src="core/gfx/cloud-logo-invert.svg" width="50%">
-        </div>
-        <div>
-            <div class="uk-position-center uk-background-muted uk-border-rounded uk-padding">
-                <h2 v-translate>
-                    Could not Authenticate
-                </h2>
-                <div v-translate class="uk-text-small">
-                    Please click the button below again to authenticate with ownCloud and get access to your data.
-                </div>
-                <div class="uk-padding">
-                    <button class="uk-button uk-button-primary" @click="authenticate" v-translate>Authenticate</button>
-                </div>
-            </div>
-        </div>
-    </div>
+  <div>
+    <v-layout class="background primary">
+      <v-flex class="pa-0" xs12>
+        <v-img
+        v-if="configuration.theme.logo.big"
+        :src="configuration.theme.logo.big"
+        :aspect-ratio="1"
+        height="100vh">
+        <v-flex class="grey lighten-2 pa-4 ma-auto elevation-5 center-dialog" md4 xs8>
+          <h2>
+            <span v-translate>Welcome to</span> {{ configuration.theme.general.name }}
+          </h2>
+          <v-flex v-translate>
+            Please click the button below again to authenticate with {{ configuration.theme.general.name }} and get access to your data.
+          </v-flex>
+          <v-btn color="primary" id="authenticate" @click="authenticate"><span v-translate>Authenticate</span></v-btn>
+        </v-flex>
+      </v-img>
+    </v-flex>
+  </v-layout>
+  </div>
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 export default {
-  name: 'errorPage',
+  name: 'loginPage',
 
   data () {
     return {
@@ -31,19 +34,29 @@ export default {
       password: ''
     }
   },
-
+  computed: {
+    ...mapGetters(['configuration'])
+  },
   methods: {
     authenticate () {
-      this.$store.dispatch('authenticate', { provider: 'oauth2' }).then(() => {
-        this.$router.push('/')
-      })
+      this.$store.dispatch('authenticate', { provider: 'oauth2' })
+        .then(() => {
+          this.$router.push({ path: '/' })
+        })
+        .catch(() => {
+          this.$router.push('/error')
+        })
     }
   }
 }
 </script>
 
 <style scoped="true">
-    .background {
-        height: 100%;
-    }
+  .v-btn, h2, .flex{
+    padding: 8px 8px;
+  }
+  .center-dialog {
+    /* FIXME: use justify-center and align-center */
+    margin-top: 32vh!important;
+  }
 </style>

src/pages/login.vue

@@ -1,26 +1,29 @@
 <template>
-    <div class="background uk-background-primary">
-
-        <div>
-            <img src="core/gfx/cloud-logo-invert.svg" width="50%">
-        </div>
-        <div>
-            <div class="uk-position-center uk-background-muted uk-border-rounded uk-padding">
-                <h2 v-translate>
-                    Welcome to ownCloud
-                </h2>
-                <div v-translate class="uk-text-small">
-                    Please click the button below to authenticate with ownCloud and get access to your data.
-                </div>
-                <div class="uk-padding">
-                    <button id="authenticate" class="uk-button uk-button-primary" @click="authenticate" v-translate>Authenticate</button>
-                </div>
-            </div>
-        </div>
-    </div>
+  <div>
+    <v-layout class="background primary">
+      <v-flex class="pa-0" xs12>
+        <v-img
+        v-if="configuration.theme.logo.big"
+        :src="configuration.theme.logo.big"
+        :aspect-ratio="1"
+        height="100vh">
+        <v-flex class="grey lighten-2 pa-4 ma-auto elevation-5 center-dialog" md4 xs8>
+          <h2>
+            <span v-translate>Welcome to</span> {{ configuration.theme.general.name }}
+          </h2>
+          <v-flex v-translate>
+            Please click the button below to authenticate with {{ configuration.theme.general.name }} and get access to your data.
+          </v-flex>
+          <v-btn color="primary" id="authenticate" @click="authenticate"><span v-translate>Authenticate</span></v-btn>
+        </v-flex>
+      </v-img>
+    </v-flex>
+  </v-layout>
+  </div>
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
 export default {
   name: 'loginPage',
 
@@ -31,6 +34,9 @@ export default {
       password: ''
     }
   },
+  computed: {
+    ...mapGetters(['configuration'])
+  },
   methods: {
     authenticate () {
       this.$store.dispatch('authenticate', { provider: 'oauth2' })
@@ -46,7 +52,11 @@ export default {
 </script>
 
 <style scoped="true">
-    .background {
-        height: 100%;
-    }
+  .v-btn, h2, .flex{
+    padding: 8px 8px;
+  }
+  .center-dialog {
+    /* FIXME: use justify-center and align-center */
+    margin-top: 32vh!important;
+  }
 </style>

src/store/config.js

@@ -5,18 +5,44 @@ const state = {
     clientId: null,
     apiUrl: null,
     authUrl: null
+  },
+  theme: {
+    general: {
+      name: null,
+      slogan: null
+    },
+    colors: {
+      primary: null,
+      secondary: null,
+      accent: null,
+      info: null,
+      success: null,
+      warning: null,
+      error: null
+    },
+    logo: {
+      mini: null,
+      small: null,
+      big: null
+    }
   }
 }
 
 const actions = {
   loadConfig (context, config) {
     context.commit('LOAD_CONFIG', config)
+  },
+  loadTheme (context, theme) {
+    context.commit('LOAD_THEME', theme)
   }
 }
 
 const mutations = {
   LOAD_CONFIG (state, config) {
     state.auth = config.auth
+  },
+  LOAD_THEME (state, theme) {
+    state.theme = theme
   }
 }
 

themes/owncloud.json

@@ -0,0 +1,20 @@
+{
+  "general": {
+    "name": "ownCloud",
+    "slogan": "ownCloud – A safe home for all your data"
+  },
+  "colors": {
+    "primary": "#1D2D44",
+    "secondary": "#8C9EFF",
+    "accent": "#F5F7F9",
+    "info": "#6A9EFF",
+    "success": "#32D296",
+    "warning": "#FAA05A",
+    "error": "#F0506E"
+  },
+  "logo": {
+    "mini": "core/gfx/cloud-logo-invert.svg",
+    "small": "core/gfx/cloud-logo-invert.svg",
+    "big": "core/gfx/cloud-logo-invert.svg"
+  }
+}