diff --git a/src/App.js b/src/App.js index a9a46fad..c455c18c 100644 --- a/src/App.js +++ b/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' }, diff --git a/src/App.scss b/src/App.scss index 21279f15..09014c15 100644 --- a/src/App.scss +++ b/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; diff --git a/src/App.vue b/src/App.vue index 71e90289..fc446c57 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,7 +1,11 @@ <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> diff --git a/src/main.js b/src/main.js index 6c9bf36e..72806d10 100644 --- a/src/main.js +++ b/src/main.js @@ -103,23 +103,29 @@ window.fetch('/api/statusnet/config.json') .then((res) => res.json()) .then((data) => { var staticConfig = data + // This takes static config and overrides properties that are present in apiConfig + var config = Object.assign({}, staticConfig, apiConfig) - 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) + 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 }) diff --git a/static/config.json b/static/config.json index afcb0163..ccc4aebd 100644 --- a/static/config.json +++ b/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,