forked from AkkomaGang/akkoma-fe
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
This commit is contained in:
Henry Jameson
parent
63fdad8703
commit
e99534ef71
5 changed files with 84 additions and 18 deletions
31
src/App.js
31
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' },
|
||||
|
|
|
|||
33
src/App.scss
33
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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
30
src/main.js
30
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 })
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in a new issue