refs #98 Set color from theme color in preferences
This commit is contained in:
parent
e12b19815b
commit
dcf9a6452e
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<el-container id="preferences">
|
<el-container id="preferences" :style="theme">
|
||||||
<el-header class="header">
|
<el-header class="header">
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="23">
|
<el-col :span="23">
|
||||||
|
@ -15,6 +15,8 @@
|
||||||
<el-menu
|
<el-menu
|
||||||
:default-active="defaultActive"
|
:default-active="defaultActive"
|
||||||
class="setting-menu"
|
class="setting-menu"
|
||||||
|
:text-color="primaryColor"
|
||||||
|
:background-color="backgroundColor"
|
||||||
:route="true">
|
:route="true">
|
||||||
<el-menu-item index="1" :route="{path: '/preferences/general'}" @click="general">
|
<el-menu-item index="1" :route="{path: '/preferences/general'}" @click="general">
|
||||||
<icon name="cog" class="icon" scale="1.3"></icon>
|
<icon name="cog" class="icon" scale="1.3"></icon>
|
||||||
|
@ -40,7 +42,15 @@ export default {
|
||||||
name: 'preferences',
|
name: 'preferences',
|
||||||
computed: {
|
computed: {
|
||||||
...mapState({
|
...mapState({
|
||||||
defaultActive: state => state.Preferences.defaultActive
|
defaultActive: state => state.Preferences.defaultActive,
|
||||||
|
primaryColor: state => state.App.theme.primary_color,
|
||||||
|
backgroundColor: state => state.App.theme.background_color,
|
||||||
|
theme: (state) => {
|
||||||
|
return {
|
||||||
|
'--theme-border-color': state.App.theme.border_color,
|
||||||
|
'--theme-secondary-color': state.App.theme.secondary_color
|
||||||
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -59,41 +69,46 @@ export default {
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
#preferences {
|
#preferences {
|
||||||
|
--theme-border-color: #ebeef5;
|
||||||
|
--theme-secondary-color: #909399;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-bottom: 1px solid #dcdfe6;
|
border-bottom: 1px solid var(--theme-border-color);
|
||||||
|
|
||||||
.close-button {
|
.close-button {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu {
|
|
||||||
text-align: right;
|
|
||||||
padding-left: 24px;
|
|
||||||
|
|
||||||
.setting-menu /deep/ {
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
margin-right: 9px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-menu-item {
|
|
||||||
.icon {
|
|
||||||
color: #909399;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.is-active {
|
|
||||||
.icon {
|
|
||||||
color: #409eff;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.menu {
|
||||||
|
text-align: right;
|
||||||
|
padding-left: 24px;
|
||||||
|
|
||||||
|
.el-menu {
|
||||||
|
border-right: solid 1px var(--theme-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-menu /deep/ {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
margin-right: 9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-menu-item {
|
||||||
|
.icon {
|
||||||
|
color: var(--theme-secondary-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-active {
|
||||||
|
.icon {
|
||||||
|
color: #409eff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,12 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="account">
|
<div id="account" :style="theme">
|
||||||
<h2>Account</h2>
|
<h2>Account</h2>
|
||||||
<div class="connected-account">
|
<div class="connected-account">
|
||||||
<h3>Connected Accounts</h3>
|
<h3>Connected Accounts</h3>
|
||||||
<template>
|
<template>
|
||||||
<el-table
|
<el-table
|
||||||
:data="accounts"
|
:data="accounts"
|
||||||
stripe
|
tooltip-effect="dark"
|
||||||
empty-text="No accounts"
|
empty-text="No accounts"
|
||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
v-loading="accountLoading">
|
v-loading="accountLoading">
|
||||||
|
@ -59,7 +59,14 @@ export default {
|
||||||
computed: {
|
computed: {
|
||||||
...mapState({
|
...mapState({
|
||||||
accounts: state => state.Preferences.Account.accounts,
|
accounts: state => state.Preferences.Account.accounts,
|
||||||
accountLoading: state => state.Preferences.Account.accountLoading
|
accountLoading: state => state.Preferences.Account.accountLoading,
|
||||||
|
theme: (state) => {
|
||||||
|
return {
|
||||||
|
'--theme-secondary-color': state.App.theme.secondary_color,
|
||||||
|
'--theme-background-color': state.App.theme.background_color,
|
||||||
|
'--theme-border-color': state.App.theme.border_color
|
||||||
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
created () {
|
created () {
|
||||||
|
@ -109,6 +116,27 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
#account {
|
||||||
|
--theme-secondary-color: #909399;
|
||||||
|
--theme-bacgrkound-color: #ffffff;
|
||||||
|
--theme-border-color: #ebeef5;
|
||||||
|
|
||||||
|
.el-table /deep/ {
|
||||||
|
tr,
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
background-color: var(--theme-background-color);
|
||||||
|
color: var(--theme-secondary-color);
|
||||||
|
border-bottom: 1px solid var(--theme-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-table::before {
|
||||||
|
background-color: var(--theme-border-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.allow-up {
|
.allow-up {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="general" v-loading="loading">
|
<div id="general" v-loading="loading" :style="theme">
|
||||||
<h2>General</h2>
|
<h2>General</h2>
|
||||||
|
<div class="theme">
|
||||||
|
<h3>Theme color</h3>
|
||||||
|
</div>
|
||||||
<div class="sounds">
|
<div class="sounds">
|
||||||
<h3>Sounds</h3>
|
<h3>Sounds</h3>
|
||||||
<table class="sounds">
|
<table class="sounds">
|
||||||
|
@ -36,7 +39,12 @@ export default {
|
||||||
name: 'general',
|
name: 'general',
|
||||||
computed: {
|
computed: {
|
||||||
...mapState({
|
...mapState({
|
||||||
loading: state => state.Preferences.General.loading
|
loading: state => state.Preferences.General.loading,
|
||||||
|
theme: (state) => {
|
||||||
|
return {
|
||||||
|
'--theme-secondary-color': state.App.theme.secondary_color
|
||||||
|
}
|
||||||
|
}
|
||||||
}),
|
}),
|
||||||
sound_fav_rb: {
|
sound_fav_rb: {
|
||||||
get () {
|
get () {
|
||||||
|
@ -72,23 +80,31 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.sounds {
|
#general {
|
||||||
color: #606266;
|
--theme-secondary-color: #909399;
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
td {
|
.theme {
|
||||||
padding: 16px 0;
|
color: var(--theme-secondary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.sounds {
|
||||||
text-align: right;
|
color: var(--theme-secondary-color);
|
||||||
width: 50%;
|
width: 100%;
|
||||||
}
|
box-sizing: border-box;
|
||||||
|
|
||||||
.status {
|
td {
|
||||||
width: 50%;
|
padding: 16px 0;
|
||||||
text-align: center;
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
text-align: right;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
width: 50%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -10,6 +10,8 @@ const App = {
|
||||||
global_header_color: '#393f4f', // #4a5664
|
global_header_color: '#393f4f', // #4a5664
|
||||||
side_menu_color: '#191b22', // #373d48
|
side_menu_color: '#191b22', // #373d48
|
||||||
primary_color: '#ffffff', // #303133
|
primary_color: '#ffffff', // #303133
|
||||||
|
regular_color: '#ebeef5', // #606266
|
||||||
|
secondary_color: '#e4e7ed', // #909399
|
||||||
border_color: '#606266', // #ebeef5
|
border_color: '#606266', // #ebeef5
|
||||||
header_menu_color: '#444b5d', // #ffffff
|
header_menu_color: '#444b5d', // #ffffff
|
||||||
wrapper_mask_color: 'rgba(0, 0, 0, 0.7)' // rgba(255, 255, 255, 0.7)
|
wrapper_mask_color: 'rgba(0, 0, 0, 0.7)' // rgba(255, 255, 255, 0.7)
|
||||||
|
|
Loading…
Reference in New Issue