Mastodon
/
Whalebird-desktop-client-mac-linux-windows
mirror of https://github.com/h3poteto/whalebird-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

refs #251 Fix design of general setting

This commit is contained in:
AkiraFukushima 2018-09-21 08:39:27 +09:00
parent c58a5a74e8
commit 72e6073f21
2 changed files with 52 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/config/locales/en/translation.json
View File

@ -74,7 +74,10 @@
"title": "Preferences",
"general": {
"title": "General",
"toot": "Toot",
"toot": {
"title": "Toot",
"description": "Customize default visibility of toot."
},
"visibility": {
"title": "Default visibility:",
"public": "Public",
@ -82,9 +85,12 @@
"private": "Private",
"direct": "Direct"
},
"sounds": "Sounds",
"fav_rb_sound": "Favorite and Boost:",
"toot_sound": "Toot:"
"sounds": {
"title": "Sounds",
"description": "Please set feedback sounds.",
"fav_rb": "When you favorite or boost the toot",
"toot": "When you post toot"
}
},
"appearance": {
"title": "Appearance",

108
src/renderer/components/Preferences/General.vue
View File

@ -1,50 +1,39 @@
<template>
<div id="general" v-loading="loading">
<h2>{{ $t('preferences.general.title') }}</h2>
<div class="toot">
<h3>{{ $t('preferences.general.toot') }}</h3>
<table>
<tbody>
<tr>
<td class="title">{{ $t('preferences.general.visibility.title') }}</td>
<td class="status">
<el-select v-model="tootVisibility" placeholder="visibility">
<el-option
v-for="v in visibilities"
:key="v.value"
:label="$t(v.name)"
:value="v.value">
</el-option>
</el-select>
</td>
</tr>
</tbody>
</table>
<div class="toot section">
<h3>{{ $t('preferences.general.toot.title') }}</h3>
<p class="description">{{ $t('preferences.general.toot.description') }}</p>
<el-select v-model="tootVisibility" placeholder="visibility">
<el-option
v-for="v in visibilities"
:key="v.value"
:label="$t(v.name)"
:value="v.value">
</el-option>
</el-select>
</div>
<div class="sounds">
<h3>{{ $t('preferences.general.sounds') }}</h3>
<table>
<tbody>
<tr>
<td class="title">{{ $t('preferences.general.fav_rb_sound') }}</td>
<td class="status">
<el-switch
v-model="sound_fav_rb"
active-color="#13ce66">
</el-switch>
</td>
</tr>
<tr>
<td class="title">{{ $t('preferences.general.toot_sound') }}</td>
<td class="status">
<el-switch
v-model="sound_toot"
active-color="#13ce66">
</el-switch>
</td>
</tr>
</tbody>
</table>
<div class="sounds section">
<h3>{{ $t('preferences.general.sounds.title') }}</h3>
<p class="description">{{ $t('preferences.general.sounds.description') }}</p>
<div class="selection">
<span class="value">
<el-switch
v-model="sound_fav_rb"
active-color="#13ce66">
</el-switch>
</span>
<span class="title">{{ $t('preferences.general.sounds.fav_rb') }}</span>
</div>
<div class="selection">
<span class="value">
<el-switch
v-model="sound_toot"
active-color="#13ce66">
</el-switch>
</span>
<span class="title">{{ $t('preferences.general.sounds.toot') }}</span>
</div>
</div>
</div>
</template>
@ -111,34 +100,21 @@ export default {
<style lang="scss" scoped>
#general {
table {
width: 100%;
.description {
margin: 24px 0 20px;
}
td {
padding: 16px 0;
.section {
margin-bottom: 48px;
}
.title {
text-align: right;
width: 50%;
}
.selection {
margin: 12px 0;
.status {
width: 50%;
text-align: center;
}
.toot {
color: var(--theme-secondary-color);
width: 100%;
box-sizing: border-box;
}
.sounds {
color: var(--theme-secondary-color);
width: 100%;
box-sizing: border-box;
.title {
margin-left: 12px;
font-weight: 800;
}
}
}
</style>