added option for logo in navbar to follow color scheme of the rest of the site

also fixed potential mess-up between api/static configs

src/App.js

@@ -18,7 +18,14 @@ export default {
     ChatPanel
   },
   data: () => ({
-    mobileActivePanel: 'timeline'
+    mobileActivePanel: 'timeline',
+    supportsMask: window.CSS && window.CSS.supports && (
+      window.CSS.supports('mask-size', 'contain') ||
+        window.CSS.supports('-webkit-mask-size', 'contain') ||
+        window.CSS.supports('-moz-mask-size', 'contain') ||
+        window.CSS.supports('-ms-mask-size', 'contain') ||
+        window.CSS.supports('-o-mask-size', 'contain')
+    )
   }),
   created () {
     // Load the locale from the storage
@@ -29,7 +36,27 @@ export default {
     background () {
       return this.currentUser.background_image || this.$store.state.config.background
     },
-    logoStyle () { return { 'background-image': `url(${this.$store.state.config.logo})` } },
+    enableMask () { return this.supportsMask && this.$store.state.config.logoMask },
+    logoStyle () {
+      return {
+        'visibility': this.enableMask ? 'hidden' : 'visible'
+      }
+    },
+    logoMaskStyle () {
+      return this.enableMask ? {
+        'mask-image': `url(${this.$store.state.config.logo})`
+      } : {
+        'background-color': this.enableMask ? '' : 'transparent'
+      }
+    },
+    logoBgStyle () {
+      return Object.assign({
+        'margin': `${this.$store.state.config.logoMargin} 0`
+      }, this.enableMask ? {} : {
+        'background-color': this.enableMask ? '' : 'transparent'
+      })
+    },
+    logo () { return this.$store.state.config.logo },
     style () { return { 'background-image': `url(${this.background})` } },
     sitename () { return this.$store.state.config.name },
     chat () { return this.$store.state.chat.channel.state === 'joined' },

src/App.scss

@@ -236,6 +236,36 @@ nav {
   position: fixed;
   height: 50px;
 
+  .logo {
+    display: flex;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    align-items: stretch;
+    justify-content: center;
+    flex: 0 0 auto;
+    z-index: -1;
+    .mask {
+      mask-repeat: no-repeat;
+      mask-position: center;
+      mask-size: contain;
+      background-color: $fallback--fg;
+      background-color: var(--fg, $fallback--fg);
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+    }
+    img {
+      display: block;
+      flex: 0;
+    }
+  }
+
   .inner-nav {
     padding-left: 20px;
     padding-right: 20px;
@@ -244,9 +274,6 @@ nav {
     flex-basis: 970px;
     margin: auto;
     height: 50px;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: auto 80%;
 
     a i {
       color: $fallback--link;

src/App.vue

 <template>
   <div id="app" v-bind:style="style">
     <nav class='container' @click="scrollToTop()" id="nav">
-      <div class='inner-nav' :style="logoStyle">
+      <div class='logo' :style='logoBgStyle'>
+        <div class='mask' :style='logoMaskStyle'></div>
+        <img :src='logo' :style='logoStyle'>
+      </div>
+      <div class='inner-nav'>
         <div class='item'>
           <router-link :to="{ name: 'root'}">{{sitename}}</router-link>
         </div>

src/main.js

@@ -103,23 +103,29 @@ window.fetch('/api/statusnet/config.json')
     .then((res) => res.json())
     .then((data) => {
       var staticConfig = data
-
-      var theme = (apiConfig.theme || staticConfig.theme)
-      var background = (apiConfig.background || staticConfig.background)
-      var logo = (apiConfig.logo || staticConfig.logo)
-      var redirectRootNoLogin = (apiConfig.redirectRootNoLogin || staticConfig.redirectRootNoLogin)
-      var redirectRootLogin = (apiConfig.redirectRootLogin || staticConfig.redirectRootLogin)
-      var chatDisabled = (apiConfig.chatDisabled || staticConfig.chatDisabled)
-      var showWhoToFollowPanel = (apiConfig.showWhoToFollowPanel || staticConfig.showWhoToFollowPanel)
-      var whoToFollowProvider = (apiConfig.whoToFollowProvider || staticConfig.whoToFollowProvider)
-      var whoToFollowLink = (apiConfig.whoToFollowLink || staticConfig.whoToFollowLink)
-      var showInstanceSpecificPanel = (apiConfig.showInstanceSpecificPanel || staticConfig.showInstanceSpecificPanel)
-      var scopeOptionsEnabled = (apiConfig.scopeOptionsEnabled || staticConfig.scopeOptionsEnabled)
-      var collapseMessageWithSubject = (apiConfig.collapseMessageWithSubject || staticConfig.collapseMessageWithSubject)
+      // This takes static config and overrides properties that are present in apiConfig
+      var config = Object.assign({}, staticConfig, apiConfig)
+
+      var theme = (config.theme)
+      var background = (config.background)
+      var logo = (config.logo)
+      var logoMask = (typeof config.logoMask === 'undefined' ? true : config.logoMask)
+      var logoMargin = (typeof config.logoMargin === 'undefined' ? 0 : config.logoMargin)
+      var redirectRootNoLogin = (config.redirectRootNoLogin)
+      var redirectRootLogin = (config.redirectRootLogin)
+      var chatDisabled = (config.chatDisabled)
+      var showWhoToFollowPanel = (config.showWhoToFollowPanel)
+      var whoToFollowProvider = (config.whoToFollowProvider)
+      var whoToFollowLink = (config.whoToFollowLink)
+      var showInstanceSpecificPanel = (config.showInstanceSpecificPanel)
+      var scopeOptionsEnabled = (config.scopeOptionsEnabled)
+      var collapseMessageWithSubject = (config.collapseMessageWithSubject)
 
       store.dispatch('setOption', { name: 'theme', value: theme })
       store.dispatch('setOption', { name: 'background', value: background })
       store.dispatch('setOption', { name: 'logo', value: logo })
+      store.dispatch('setOption', { name: 'logoMask', value: logoMask })
+      store.dispatch('setOption', { name: 'logoMargin', value: logoMargin })
       store.dispatch('setOption', { name: 'showWhoToFollowPanel', value: showWhoToFollowPanel })
       store.dispatch('setOption', { name: 'whoToFollowProvider', value: whoToFollowProvider })
       store.dispatch('setOption', { name: 'whoToFollowLink', value: whoToFollowLink })

static/config.json

@@ -2,6 +2,8 @@
   "theme": "pleroma-dark",
   "background": "/static/aurora_borealis.jpg",
   "logo": "/static/logo.png",
+  "logoMask": true,
+  "logoMargin": ".1em",
   "redirectRootNoLogin": "/main/all",
   "redirectRootLogin": "/main/friends",
   "chatDisabled": false,