2018-04-01 05:00:58 +02:00
|
|
|
<template>
|
2018-04-18 01:18:50 +02:00
|
|
|
<div id="general" v-loading="loading">
|
2018-08-10 17:40:06 +02:00
|
|
|
<h2>{{ $t('preferences.general.title') }}</h2>
|
2018-04-18 16:35:35 +02:00
|
|
|
<div class="appearance">
|
2018-08-10 17:40:06 +02:00
|
|
|
<h3>{{ $t('preferences.general.appearance') }}</h3>
|
2018-04-18 16:35:35 +02:00
|
|
|
<table class="theme">
|
|
|
|
<tbody>
|
|
|
|
<tr>
|
2018-08-10 17:40:06 +02:00
|
|
|
<td class="title">{{ $t('preferences.general.theme_color') }}</td>
|
2018-04-18 16:35:35 +02:00
|
|
|
<td class="status">
|
2018-08-14 02:03:52 +02:00
|
|
|
<el-radio v-for="t in themes" :key="t.key" v-model="theme" :label="t.key">{{ $t(t.name) }}</el-radio>
|
2018-04-18 16:35:35 +02:00
|
|
|
</td>
|
|
|
|
</tr>
|
2018-04-21 11:59:34 +02:00
|
|
|
<tr>
|
2018-08-10 17:40:06 +02:00
|
|
|
<td class="title">{{ $t('preferences.general.font_size') }}</td>
|
2018-04-21 11:59:34 +02:00
|
|
|
<td class="status">
|
|
|
|
<el-input-number :value="fontSize" :min="9" :max="18" @change="updateFontSize"></el-input-number>
|
|
|
|
</td>
|
|
|
|
</tr>
|
2018-04-18 16:35:35 +02:00
|
|
|
<tr>
|
2018-08-10 17:40:06 +02:00
|
|
|
<td class="title">{{ $t('preferences.general.display_style.title') }}</td>
|
2018-04-18 16:35:35 +02:00
|
|
|
<td class="status">
|
|
|
|
<el-select v-model="displayNameStyle" placeholder="style">
|
|
|
|
<el-option
|
|
|
|
v-for="style in nameStyles"
|
|
|
|
:key="style.value"
|
2018-08-14 02:03:52 +02:00
|
|
|
:label="$t(style.name)"
|
2018-04-18 16:35:35 +02:00
|
|
|
:value="style.value">
|
|
|
|
</el-option>
|
|
|
|
</el-select>
|
|
|
|
</td>
|
|
|
|
</tr>
|
2018-08-30 17:28:06 +02:00
|
|
|
<tr>
|
|
|
|
<td class="title">{{ $t('preferences.general.time_format.title') }}</td>
|
|
|
|
<td class="status">
|
|
|
|
<el-select v-model="timeFormat" placeholder="format">
|
|
|
|
<el-option
|
|
|
|
v-for="format in timeFormats"
|
|
|
|
:key="format.value"
|
|
|
|
:label="$t(format.name)"
|
|
|
|
:value="format.value">
|
|
|
|
</el-option>
|
|
|
|
</el-select>
|
|
|
|
</td>
|
|
|
|
</tr>
|
2018-04-18 16:35:35 +02:00
|
|
|
</tbody>
|
|
|
|
</table>
|
2018-04-14 09:24:56 +02:00
|
|
|
</div>
|
2018-08-01 16:09:36 +02:00
|
|
|
<div class="toot">
|
2018-08-10 17:40:06 +02:00
|
|
|
<h3>{{ $t('preferences.general.toot') }}</h3>
|
2018-08-01 16:09:36 +02:00
|
|
|
<table>
|
|
|
|
<tbody>
|
|
|
|
<tr>
|
2018-08-10 17:40:06 +02:00
|
|
|
<td class="title">{{ $t('preferences.general.visibility.title') }}</td>
|
2018-08-01 16:09:36 +02:00
|
|
|
<td class="status">
|
|
|
|
<el-select v-model="tootVisibility" placeholder="visibility">
|
|
|
|
<el-option
|
|
|
|
v-for="v in visibilities"
|
|
|
|
:key="v.value"
|
2018-08-14 02:03:52 +02:00
|
|
|
:label="$t(v.name)"
|
2018-08-01 16:09:36 +02:00
|
|
|
:value="v.value">
|
|
|
|
</el-option>
|
|
|
|
</el-select>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
2018-04-07 15:40:57 +02:00
|
|
|
<div class="sounds">
|
2018-08-10 17:40:06 +02:00
|
|
|
<h3>{{ $t('preferences.general.sounds') }}</h3>
|
2018-04-18 16:35:35 +02:00
|
|
|
<table>
|
2018-04-07 15:40:57 +02:00
|
|
|
<tbody>
|
|
|
|
<tr>
|
2018-08-10 17:40:06 +02:00
|
|
|
<td class="title">{{ $t('preferences.general.fav_rb_sound') }}</td>
|
2018-04-07 15:40:57 +02:00
|
|
|
<td class="status">
|
|
|
|
<el-switch
|
|
|
|
v-model="sound_fav_rb"
|
|
|
|
active-color="#13ce66">
|
|
|
|
</el-switch>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
2018-08-10 17:40:06 +02:00
|
|
|
<td class="title">{{ $t('preferences.general.toot_sound') }}</td>
|
2018-04-07 15:40:57 +02:00
|
|
|
<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-08-12 16:17:57 +02:00
|
|
|
import Visibility from '~/src/constants/visibility'
|
|
|
|
import DisplayStyle from '~/src/constants/displayStyle'
|
|
|
|
import Theme from '~/src/constants/theme'
|
2018-08-30 17:28:06 +02:00
|
|
|
import TimeFormat from '~/src/constants/timeFormat'
|
2018-04-07 15:40:57 +02:00
|
|
|
|
2018-04-01 05:00:58 +02:00
|
|
|
export default {
|
2018-04-07 15:40:57 +02:00
|
|
|
name: 'general',
|
2018-04-18 16:35:35 +02:00
|
|
|
data () {
|
|
|
|
return {
|
2018-08-01 16:09:36 +02:00
|
|
|
visibilities: [
|
2018-08-01 16:41:05 +02:00
|
|
|
Visibility.Public,
|
|
|
|
Visibility.Unlisted,
|
|
|
|
Visibility.Private
|
2018-08-11 04:44:13 +02:00
|
|
|
],
|
|
|
|
nameStyles: [
|
|
|
|
DisplayStyle.DisplayNameAndUsername,
|
|
|
|
DisplayStyle.DisplayName,
|
|
|
|
DisplayStyle.Username
|
2018-08-11 05:01:10 +02:00
|
|
|
],
|
|
|
|
themes: [
|
|
|
|
Theme.Light,
|
|
|
|
Theme.Dark
|
2018-08-30 17:28:06 +02:00
|
|
|
],
|
|
|
|
timeFormats: [
|
|
|
|
TimeFormat.Absolute,
|
|
|
|
TimeFormat.Relative
|
2018-04-18 16:35:35 +02:00
|
|
|
]
|
|
|
|
}
|
|
|
|
},
|
2018-04-07 15:40:57 +02:00
|
|
|
computed: {
|
|
|
|
...mapState({
|
2018-04-21 11:59:34 +02:00
|
|
|
loading: state => state.Preferences.General.loading,
|
|
|
|
fontSize: state => state.Preferences.General.general.fontSize
|
2018-04-07 15:40:57 +02:00
|
|
|
}),
|
2018-04-14 12:07:47 +02:00
|
|
|
theme: {
|
|
|
|
get () {
|
2018-08-11 05:01:10 +02:00
|
|
|
return this.$store.state.Preferences.General.general.theme
|
2018-04-14 12:07:47 +02:00
|
|
|
},
|
|
|
|
set (value) {
|
|
|
|
this.$store.dispatch('Preferences/General/updateTheme', value)
|
|
|
|
}
|
|
|
|
},
|
2018-04-18 16:35:35 +02:00
|
|
|
displayNameStyle: {
|
|
|
|
get () {
|
|
|
|
return this.$store.state.Preferences.General.general.displayNameStyle
|
|
|
|
},
|
|
|
|
set (value) {
|
|
|
|
this.$store.dispatch('Preferences/General/updateDisplayNameStyle', value)
|
|
|
|
}
|
|
|
|
},
|
2018-08-30 17:28:06 +02:00
|
|
|
timeFormat: {
|
|
|
|
get () {
|
|
|
|
return this.$store.state.Preferences.General.general.timeFormat
|
|
|
|
},
|
|
|
|
set (value) {
|
|
|
|
this.$store.dispatch('Preferences/General/updateTimeFormat', value)
|
|
|
|
}
|
|
|
|
},
|
2018-08-01 16:09:36 +02:00
|
|
|
tootVisibility: {
|
|
|
|
get () {
|
|
|
|
return this.$store.state.Preferences.General.general.tootVisibility
|
|
|
|
},
|
|
|
|
set (value) {
|
|
|
|
this.$store.dispatch('Preferences/General/updateTootVisibility', 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({
|
2018-08-13 08:27:53 +02:00
|
|
|
message: this.$t('message.preferences_load_error'),
|
2018-04-07 15:40:57 +02:00
|
|
|
type: 'error'
|
|
|
|
})
|
|
|
|
})
|
2018-04-21 11:59:34 +02:00
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
updateFontSize (value) {
|
|
|
|
this.$store.dispatch('Preferences/General/updateFontSize', value)
|
|
|
|
}
|
2018-04-07 15:40:57 +02:00
|
|
|
}
|
2018-04-01 05:00:58 +02:00
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
2018-04-14 09:24:56 +02:00
|
|
|
#general {
|
2018-08-01 16:09:36 +02:00
|
|
|
table {
|
2018-04-18 16:35:35 +02:00
|
|
|
width: 100%;
|
2018-08-01 16:09:36 +02:00
|
|
|
}
|
2018-04-18 16:35:35 +02:00
|
|
|
|
2018-08-01 16:09:36 +02:00
|
|
|
td {
|
|
|
|
padding: 16px 0;
|
|
|
|
}
|
2018-04-18 16:35:35 +02:00
|
|
|
|
2018-08-01 16:09:36 +02:00
|
|
|
.title {
|
|
|
|
text-align: right;
|
|
|
|
width: 50%;
|
|
|
|
}
|
2018-04-18 16:35:35 +02:00
|
|
|
|
2018-08-01 16:09:36 +02:00
|
|
|
.status {
|
|
|
|
width: 50%;
|
|
|
|
text-align: center;
|
2018-04-07 15:40:57 +02:00
|
|
|
}
|
|
|
|
|
2018-08-01 16:09:36 +02:00
|
|
|
.appearance {
|
2018-04-14 09:24:56 +02:00
|
|
|
color: var(--theme-secondary-color);
|
|
|
|
width: 100%;
|
|
|
|
box-sizing: border-box;
|
2018-08-01 16:09:36 +02:00
|
|
|
}
|
2018-04-14 09:24:56 +02:00
|
|
|
|
2018-08-01 16:09:36 +02:00
|
|
|
.toot {
|
|
|
|
color: var(--theme-secondary-color);
|
|
|
|
width: 100%;
|
|
|
|
box-sizing: border-box;
|
|
|
|
}
|
2018-04-07 15:40:57 +02:00
|
|
|
|
2018-08-01 16:09:36 +02:00
|
|
|
.sounds {
|
|
|
|
color: var(--theme-secondary-color);
|
|
|
|
width: 100%;
|
|
|
|
box-sizing: border-box;
|
2018-04-07 15:40:57 +02:00
|
|
|
}
|
|
|
|
}
|
2018-04-01 05:00:58 +02:00
|
|
|
</style>
|