Merge branch 'logo-and-accentcolor-runtime-config' into 'dev'

Allow logo and accentColor to be set in config/runtimeConfig

See merge request keanuapp/keanuapp-weblite!177

src/App.vue

@@ -145,10 +145,10 @@ export default {
     },
 
     favicon() {
-      var favicon = 'favicon.ico';
+      var favicon = this.$config.logo ? this.$config.logo : 'favicon.ico';
       if (this.$route.meta.includeFavicon) {
         if (this.$matrix.currentRoom) {
-          favicon = this.$matrix.currentRoom.avatar || 'favicon.ico';
+          favicon = this.$matrix.currentRoom.avatar || favicon;
         }
       }
       return favicon;

src/assets/config.json

@@ -10,6 +10,8 @@
     "defaultServer": "https://neo.keanu.im",
     "identityServer_unset": "",
     "rtl": false,
+    "accentColor_unset": "",
+    "logo_unset": "",
     "analytics": [
         {
             "enabled": true,

src/components/Home.vue

@@ -4,7 +4,7 @@
     <v-container fluid class="text-center mt-8">
       <v-row align="center" justify="center">
         <v-col class="text-center" cols="auto">
-          <v-img contain src="@/assets/logo.svg" width="64" height="64" />
+          <v-img contain :src="logotype" width="64" height="64" />
         </v-col>
       </v-row>
     </v-container>
@@ -42,12 +42,13 @@
 <script>
 import RoomList from "../components/RoomList";
 import YouAre from "../components/YouAre.vue";
-
+import logoMixin from "../components/logoMixin";
 export default {
   components: {
     RoomList,
     YouAre,
   },
+  mixins: [logoMixin],
   computed: {
     loading() {
       return !this.$matrix.ready;

src/components/Join.vue

@@ -123,7 +123,7 @@
 
     <div class="d-flex justify-center align-center mt-9">
       <div class="mr-2">
-        <img src="@/assets/logo.svg" width="32" height="32" contain class="d-inline" />
+        <img :src="logotype" width="32" height="32" contain class="d-inline" />
       </div>
       <div>
         <strong>{{ $t("project.name") }}</strong>
@@ -138,12 +138,12 @@ import util from "../plugins/utils";
 import InteractiveAuth from './InteractiveAuth.vue';
 import LanguageMixin from "./languageMixin";
 import rememberMeMixin from "./rememberMeMixin";
-
+import logoMixin from "./logoMixin";
 import SelectLanguageDialog from "./SelectLanguageDialog.vue";
 
 export default {
   name: "Join",
-  mixins: [LanguageMixin, rememberMeMixin],
+  mixins: [LanguageMixin, rememberMeMixin, logoMixin],
   components: {
     SelectLanguageDialog,
     InteractiveAuth

src/components/Login.vue

@@ -5,7 +5,7 @@
         <v-row no-gutters>
           <v-col>
             <v-img
-              src="@/assets/logo.svg"
+              :src="logotype"
               width="32"
               height="32"
               contain
@@ -106,10 +106,11 @@ import User from "../models/user";
 import util from "../plugins/utils";
 import rememberMeMixin from "./rememberMeMixin";
 import * as sdk from "matrix-js-sdk";
+import logoMixin from "./logoMixin";
 
 export default {
   name: "Login",
-  mixins:[rememberMeMixin],
+  mixins:[rememberMeMixin, logoMixin],
   data() {
     return {
       user: new User(this.$config.defaultServer, "", ""),

src/components/logoMixin.js

@@ -0,0 +1,10 @@
+export default {
+  computed: {
+    logotype() {
+      if (this.$config.logo) {
+        return this.$config.logo;
+      }
+      return require("@/assets/logo.svg");
+    }
+  }
+}

src/main.js

@@ -1,6 +1,5 @@
 import Vue from 'vue'
 import App from './App.vue'
-import vuetify from './plugins/vuetify';
 import store from './store'
 import i18n from './plugins/lang';
 import router from './router'
@@ -15,6 +14,7 @@ import VueResize from 'vue-resize';
 import 'vue-resize/dist/vue-resize.css';
 import VueClipboard from 'vue-clipboard2'
 import VueSanitize from "vue-sanitize";
+import createVuetify from './plugins/vuetify';
 
 var defaultOptions = VueSanitize.defaults;
 defaultOptions.disallowedTagsMode = "recursiveEscape";
@@ -26,11 +26,18 @@ Vue.config.productionTip = false
 Vue.use(VueResize);
 Vue.use(VEmojiPicker);
 Vue.use(matrix, { store: store, i18n: i18n });
-// eslint-disable-next-line
-Vue.use(config, globalThis.window.location.origin); // Use this before cleaninsights below, it depends on config!
+
+const configLoadedPromise = new Promise((resolve, ignoredreject) => {
+  // eslint-disable-next-line
+  Vue.use(config, globalThis.window.location.origin, (config) => {
+    resolve(config);
+  }); // Use this before cleaninsights below, it depends on config!  
+});
 Vue.use(analytics);
 Vue.use(VueClipboard);
 
+const vuetify = createVuetify(config);
+
 // Add bubble functionality to custom events.
 // From here: https://stackoverflow.com/questions/41993508/vuejs-bubbling-custom-events
 Vue.use((Vue) => {
@@ -161,7 +168,7 @@ Vue.directive('longTap', {
 
 Vue.use(navigation, router);
 
-new Vue({
+const vueInstance = new Vue({
   vuetify,
   store,
   i18n,
@@ -170,4 +177,10 @@ new Vue({
   config,
   analytics,
   render: h => h(App)
-}).$mount('#app');
+});
+vueInstance.$vuetify.theme.themes.light.primary = vueInstance.$config.accentColor;
+configLoadedPromise.then((config) => {
+  vueInstance.$vuetify.theme.themes.light.primary = config.accentColor;
+  vueInstance.$mount('#app');
+});
+

src/plugins/vuetify.js

@@ -14,12 +14,22 @@ function importAll(r) {
 }
 importAll(require.context('@/assets/icons/', true, /\.vue$/));
 
-
 Vue.use(Vuetify);
 
-export default new Vuetify({
-  icons: {
-    iconfont: 'md',
-    values: icons,
-  },
-});
+export default function(ignoredconfig) {
+    return new Vuetify({
+      icons: {
+        iconfont: 'md',
+        values: icons,
+      },
+      options: {
+        customProperties: true
+      },
+      theme: {
+        options: {
+          customProperties: true,
+        },
+        dark: false,
+      }
+    });
+}

src/services/config.service.js

@@ -1,13 +1,14 @@
 export default {
-    install(Vue, defaultServerFromLocation) {
+    install(Vue, defaultServerFromLocation, onloaded) {
         var config = Vue.observable(require('@/assets/config.json'));
-        const getRuntimeConfig = async () => {
-            const runtimeConfig = await fetch('./config.json');
-            return await runtimeConfig.json()
+        const getRuntimeConfig = () => {
+            return fetch('./config.json').then((res) => res.json()).catch(err => {
+                console.error("Failed to get config:", err);
+                return {};
+            });
         }
 
-        config.promise = getRuntimeConfig();
-        config.promise.then(function (json) {
+        config.promise = getRuntimeConfig().then((json) => {
             // Reactively use all the config values
             for (const key of Object.keys(json)) {
                 Vue.set(config, key, json[key]);
@@ -16,6 +17,12 @@ export default {
             if (!json.defaultServer) {
                 Vue.set(config, "defaultServer", defaultServerFromLocation);
             }
+
+            // Tell callback we are done loading runtime config
+            if (onloaded) {
+                onloaded(config);
+            }
+            return config;
         });
         Vue.prototype.$config = config;
     }