refs #98 Set color from theme color in home

This commit is contained in:
AkiraFukushima 2018-04-13 09:09:51 +09:00
parent 79f336258b
commit 7de18166c3
8 changed files with 104 additions and 32 deletions

View File

@ -1,26 +1,41 @@
<template>
<div id="app">
<div id="app" :style="theme">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'Whalebird',
created () {
this.$store.dispatch('App/watchShortcutsEvents')
},
destroyed () {
this.$store.dispatch('App/removeShortcutsEvents')
}
import { mapState } from 'vuex'
export default {
name: 'Whalebird',
computed: {
...mapState({
theme: (state) => {
return {
'--theme-background-color': state.App.theme.background_color,
'--theme-primary-color': state.App.theme.primary_color
}
}
})
},
created () {
this.$store.dispatch('App/watchShortcutsEvents')
},
destroyed () {
this.$store.dispatch('App/removeShortcutsEvents')
}
}
</script>
<style lang="scss">
body { font-family: 'Noto Sans', sans-serif; }
html, body, #app {
background-color: #ffffff;
--theme-background-color: #ffffff;
--theme-primary-color: #303133;
background-color: var(--theme-background-color);
color: var(--theme-primary-color);
}
html, body, #app, #global_header {

View File

@ -5,7 +5,7 @@
class="el-menu-vertical account-menu"
:collapse="true"
:route="true"
background-color="#4a5664"
:background-color="themeColor"
text-color="#909399"
active-text-color="#ffffff">
<el-menu-item :index="index.toString()" v-for="(account, index) in accounts" v-bind:key="account._id" :route="{path: `/${account._id}/home`}" @click="select(account)">
@ -31,7 +31,8 @@ export default {
computed: {
...mapState({
defaultActive: state => state.GlobalHeader.defaultActive,
accounts: state => state.GlobalHeader.accounts
accounts: state => state.GlobalHeader.accounts,
themeColor: state => state.App.theme.global_header_color
})
},
created () {

View File

@ -2,7 +2,7 @@
<div id="timeline_space">
<side-menu></side-menu>
<div class="page">
<header class="header" style="-webkit-app-region: drag;">
<header class="header" style="-webkit-app-region: drag;" :style="theme">
<header-menu></header-menu>
</header>
<contents></contents>
@ -12,6 +12,7 @@
</template>
<script>
import { mapState } from 'vuex'
import SideMenu from './TimelineSpace/SideMenu'
import HeaderMenu from './TimelineSpace/HeaderMenu'
import Contents from './TimelineSpace/Contents'
@ -20,6 +21,15 @@ import Modals from './TimelineSpace/Modals'
export default {
name: 'timeline-space',
components: { SideMenu, HeaderMenu, Modals, Contents },
computed: {
...mapState({
theme: (state) => {
return {
'--theme-border-color': state.App.theme.border_color
}
}
})
},
created () {
const loading = this.$loading({
lock: true,
@ -95,12 +105,14 @@ export default {
box-sizing: border-box;
.header {
--theme-border-color: #dcdfe6;
width: 100%;
position: fixed;
top: 0;
left: 245px;
height: 48px;
border-bottom: solid 1px #dcdfe6;
border-bottom: solid 1px var(--theme-border-color);
}
}

View File

@ -1,5 +1,5 @@
<template>
<div class="toot" tabIndex="0">
<div class="toot" tabIndex="0" :style="theme">
<div class="icon">
<img :src="originalMessage(message).account.avatar" @click="openUser(originalMessage(message).account)"/>
</div>
@ -58,10 +58,22 @@
<script>
import moment from 'moment'
import { shell } from 'electron'
import { mapState } from 'vuex'
export default {
name: 'toot',
props: ['message'],
computed: {
...mapState({
theme: (state) => {
return {
'--theme-primary-color': state.App.theme.primary_color,
'--theme-selected-background-color': state.App.theme.selected_background_color,
'--theme-border-color': state.App.theme.border_color
}
}
})
},
methods: {
originalMessage (message) {
if (message.reblog !== null) {
@ -170,13 +182,11 @@ function findLink (target) {
</script>
<style lang="scss" scoped>
.fill-line {
height: 1px;
background-color: #ebeef5;
margin: 4px 0 0;
}
.toot {
--theme-primary-color: #303133;
--theme-border-color: #ebeef5;
padding: 4px 0 0 16px;
.icon {
@ -197,7 +207,7 @@ function findLink (target) {
.user {
float: left;
font-weight: 800;
color: #303133;
color: var(--theme-primary-color);
font-size: 14px;
cursor: pointer;
}
@ -212,7 +222,7 @@ function findLink (target) {
.content {
font-size: 14px;
color: #303133;
color: var(--theme-primary-color);
margin: 4px 0 8px;
word-wrap: break-word;
}
@ -292,10 +302,17 @@ function findLink (target) {
color: #409eff;
}
}
.fill-line {
height: 1px;
background-color: var(--theme-border-color);
margin: 4px 0 0;
}
}
.toot:focus {
background-color: #f2f6fc;
--theme-selected-background-color: #f2f6fc;
background-color: var(--theme-selected-background-color);
outline: 0;
}
</style>

View File

@ -3,7 +3,7 @@
<div class="home-timeline" v-for="(message, index) in timeline" v-bind:key="index">
<toot :message="message"></toot>
</div>
<div class="loading-card" v-loading="lazyLoading">
<div class="loading-card" v-loading="lazyLoading" :element-loading-background="backgroundColor">
</div>
</div>
</template>
@ -18,7 +18,8 @@ export default {
computed: {
...mapState({
timeline: state => state.TimelineSpace.homeTimeline,
lazyLoading: state => state.TimelineSpace.Contents.Home.lazyLoading
lazyLoading: state => state.TimelineSpace.Contents.Home.lazyLoading,
backgroundColor: state => state.App.theme.background_color
})
},
mounted () {

View File

@ -1,5 +1,5 @@
<template>
<div id="header_menu">
<div id="header_menu" :style="theme">
<div class="channel">{{ title }}</div>
</div>
</template>
@ -11,7 +11,12 @@ export default {
name: 'header-menu',
computed: {
...mapState({
title: state => state.TimelineSpace.HeaderMenu.title
title: state => state.TimelineSpace.HeaderMenu.title,
theme: (state) => {
return {
'--theme-background-color': state.App.theme.selected_background_color
}
}
})
},
created () {
@ -54,6 +59,9 @@ export default {
<style lang="scss" scoped>
#header_menu {
--theme-background-color: inherit;
background-color: var(--theme-background-color);
.channel {
padding: 12px 24px;
font-weight: bold;

View File

@ -1,5 +1,5 @@
<template>
<div id="side_menu">
<div id="side_menu" :style="theme">
<div class="profile-wrapper" style="-webkit-app-region: drag;">
<div class="profile">
<div>@{{ account.username }}</div>
@ -8,7 +8,7 @@
</div>
<el-menu
:default-active="$route.path"
background-color="#373d48"
:background-color="themeColor"
text-color="#909399"
active-text-color="#ffffff"
:router="true"
@ -60,7 +60,13 @@ export default {
account: state => state.TimelineSpace.account,
unreadHomeTimeline: state => state.TimelineSpace.SideMenu.unreadHomeTimeline,
unreadNotifications: state => state.TimelineSpace.SideMenu.unreadNotifications,
lists: state => state.TimelineSpace.SideMenu.lists
lists: state => state.TimelineSpace.SideMenu.lists,
themeColor: state => state.App.theme.side_menu_color,
theme: (state) => {
return {
'--theme-background-color': state.App.theme.side_menu_color
}
}
})
},
methods: {
@ -73,8 +79,10 @@ export default {
<style lang="scss" scoped>
#side_menu {
--theme-background-color: #373d48;
.profile-wrapper {
background-color: #373d48;
background-color: var(--theme-background-color);
position: fixed;
top: 0;
left: 65px;
@ -97,6 +105,7 @@ export default {
left: 65px;
height: 100%;
width: 180px;
border: none;
.el-badge__content {
background-color: #409eff;

View File

@ -3,7 +3,16 @@ import router from '../router'
const App = {
namespaced: true,
state: {},
state: {
theme: {
background_color: '#282c37', // #ffffff
selected_background_color: '#313543', // #f2f6fc
global_header_color: '#393f4f', // #4a5664
side_menu_color: '#191b22', // #373d48
primary_color: '#ffffff', // #303133
border_color: '#606266' // #ebeef5
}
},
mutations: {},
actions: {
watchShortcutsEvents () {