mirrors/akkoma-fe
1
0
Fork 1
mirror of https://akkoma.dev/AkkomaGang/akkoma-fe.git synced 2024-11-08 09:29:10 +00:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
also fixed potential mess-up between api/static configs
This commit is contained in:
Henry Jameson 2018-08-31 04:06:00 +03:00
parent 63fdad8703
commit e99534ef71
5 changed files with 84 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/App.js
View file

@ -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
View file

@ -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;

6
src/App.vue
View file

@ -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
View file

@ -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
static/config.json
View file

@ -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,