2018-04-01 05:00:58 +02:00
|
|
|
<template>
|
2018-04-14 09:24:56 +02:00
|
|
|
<div id="general" v-loading="loading" :style="theme">
|
2018-04-07 15:40:57 +02:00
|
|
|
<h2>General</h2>
|
2018-04-14 09:24:56 +02:00
|
|
|
<div class="theme">
|
|
|
|
<h3>Theme color</h3>
|
2018-04-14 12:07:47 +02:00
|
|
|
<el-radio v-model="theme" label="white">White</el-radio>
|
|
|
|
<el-radio v-model="theme" label="dark">Dark</el-radio>
|
2018-04-14 09:24:56 +02:00
|
|
|
</div>
|
2018-04-07 15:40:57 +02:00
|
|
|
<div class="sounds">
|
|
|
|
<h3>Sounds</h3>
|
|
|
|
<table class="sounds">
|
|
|
|
<tbody>
|
|
|
|
<tr>
|
|
|
|
<td class="title">Favourite, Reblog action sound:</td>
|
|
|
|
<td class="status">
|
|
|
|
<el-switch
|
|
|
|
v-model="sound_fav_rb"
|
|
|
|
active-color="#13ce66">
|
|
|
|
</el-switch>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td class="title">Toot action sound:</td>
|
|
|
|
<td class="status">
|
|
|
|
<el-switch
|
|
|
|
v-model="sound_toot"
|
|
|
|
active-color="#13ce66">
|
|
|
|
</el-switch>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
2018-04-01 05:00:58 +02:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2018-04-07 15:40:57 +02:00
|
|
|
import { mapState } from 'vuex'
|
|
|
|
|
2018-04-01 05:00:58 +02:00
|
|
|
export default {
|
2018-04-07 15:40:57 +02:00
|
|
|
name: 'general',
|
|
|
|
computed: {
|
|
|
|
...mapState({
|
2018-04-14 09:24:56 +02:00
|
|
|
loading: state => state.Preferences.General.loading,
|
|
|
|
theme: (state) => {
|
|
|
|
return {
|
|
|
|
'--theme-secondary-color': state.App.theme.secondary_color
|
|
|
|
}
|
|
|
|
}
|
2018-04-07 15:40:57 +02:00
|
|
|
}),
|
2018-04-14 12:07:47 +02:00
|
|
|
theme: {
|
|
|
|
get () {
|
|
|
|
return this.$store.state.Preferences.General.general.theme || 'white'
|
|
|
|
},
|
|
|
|
set (value) {
|
|
|
|
this.$store.dispatch('Preferences/General/updateTheme', value)
|
|
|
|
}
|
|
|
|
},
|
2018-04-07 15:40:57 +02:00
|
|
|
sound_fav_rb: {
|
|
|
|
get () {
|
|
|
|
return this.$store.state.Preferences.General.general.sound.fav_rb
|
|
|
|
},
|
|
|
|
set (value) {
|
|
|
|
this.$store.dispatch('Preferences/General/updateSound', {
|
|
|
|
fav_rb: value
|
|
|
|
})
|
|
|
|
}
|
|
|
|
},
|
|
|
|
sound_toot: {
|
|
|
|
get () {
|
|
|
|
return this.$store.state.Preferences.General.general.sound.toot
|
|
|
|
},
|
|
|
|
set (value) {
|
|
|
|
this.$store.dispatch('Preferences/General/updateSound', {
|
|
|
|
toot: value
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
created () {
|
|
|
|
this.$store.dispatch('Preferences/General/loadGeneral')
|
|
|
|
.catch(() => {
|
|
|
|
this.$message({
|
|
|
|
message: 'Failed to load preferences',
|
|
|
|
type: 'error'
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
2018-04-01 05:00:58 +02:00
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
2018-04-14 09:24:56 +02:00
|
|
|
#general {
|
|
|
|
--theme-secondary-color: #909399;
|
2018-04-07 15:40:57 +02:00
|
|
|
|
2018-04-14 09:24:56 +02:00
|
|
|
.theme {
|
|
|
|
color: var(--theme-secondary-color);
|
2018-04-07 15:40:57 +02:00
|
|
|
}
|
|
|
|
|
2018-04-14 09:24:56 +02:00
|
|
|
.sounds {
|
|
|
|
color: var(--theme-secondary-color);
|
|
|
|
width: 100%;
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
td {
|
|
|
|
padding: 16px 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.title {
|
|
|
|
text-align: right;
|
|
|
|
width: 50%;
|
|
|
|
}
|
2018-04-07 15:40:57 +02:00
|
|
|
|
2018-04-14 09:24:56 +02:00
|
|
|
.status {
|
|
|
|
width: 50%;
|
|
|
|
text-align: center;
|
|
|
|
}
|
2018-04-07 15:40:57 +02:00
|
|
|
}
|
|
|
|
}
|
2018-04-01 05:00:58 +02:00
|
|
|
</style>
|