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

Fix preferences design

This commit is contained in:
AkiraFukushima 2022-04-23 21:46:17 +09:00
parent dcaba2048e
commit d82bc7df05
No known key found for this signature in database
GPG Key ID: B6E51BAC4DE1A957
11 changed files with 171 additions and 364 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/renderer/components/Preferences.vue
View File

@ -5,7 +5,7 @@
<el-col :span="23">
<h1>{{ $t('preferences.title') }}</h1>
</el-col>
<el-col :span="1">
<el-col :span="1" class="close-area">
<el-button type="text" @click="close" class="close-button" role="button">
<font-awesome-icon icon="xmark" />
</el-button>
@ -87,8 +87,13 @@ export default {
border-bottom: 1px solid var(--theme-border-color);
user-select: none;
.close-button {
font-size: 28px;
.close-area {
display: flex;
align-items: center;
.close-button {
font-size: 28px;
}
}
}
@ -100,13 +105,13 @@ export default {
border-right: solid 1px var(--theme-border-color);
}
.setting-menu /deep/ {
.setting-menu {
height: 100%;
user-select: none;
}
.icon {
margin-right: 9px;
}
.setting-menu :deep(.icon) {
margin-right: 9px;
}
}
}

24
src/renderer/components/Preferences/Account.vue
View File

@ -1,7 +1,7 @@
<template>
<div id="account">
<h2>{{ $t('preferences.account.title') }}</h2>
<el-form class="connected-account section" size="small">
<el-form class="connected-account section">
<h3>{{ $t('preferences.account.connected') }}</h3>
<el-form-item>
<el-table
@ -42,10 +42,12 @@
<el-popover placement="top" width="160" v-model="deletePopoverVisible">
<p>{{ $t('preferences.account.confirm_message') }}</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="deletePopoverVisible = false">{{ $t('preferences.account.cancel') }}</el-button>
<el-button type="danger" size="mini" @click="removeAllAssociations">{{ $t('preferences.account.confirm') }}</el-button>
<el-button size="small" type="text" @click="deletePopoverVisible = false">{{ $t('preferences.account.cancel') }}</el-button>
<el-button type="danger" size="small" @click="removeAllAssociations">{{ $t('preferences.account.confirm') }}</el-button>
</div>
<el-button slot="reference" type="danger">{{ $t('preferences.account.remove_all_associations') }}</el-button>
<template #reference>
<el-button type="danger">{{ $t('preferences.account.remove_all_associations') }}</el-button>
</template>
</el-popover>
</el-form-item>
</el-form>
@ -124,16 +126,16 @@ export default {
<style lang="scss" scoped>
#account {
.section /deep/ {
.section {
margin-bottom: 40px;
}
.el-form-item__label {
color: var(--theme-primary-color);
}
.section :deep(.el-form-item__label) {
color: var(--theme-primary-color);
}
.connected-account {
.el-table /deep/ {
.el-table :deep() {
tr,
th,
td {
@ -156,5 +158,9 @@ export default {
font-size: var(--base-font-size);
}
}
.action :deep(.svg-inline--fa) {
padding-right: 4px;
}
}
</style>

152
src/renderer/components/Preferences/Appearance.vue
View File

@ -1,102 +1,47 @@
<template>
<div id="appearance">
<h2>{{ $t('preferences.appearance.title') }}</h2>
<el-form class="theme section" size="small" label-position="top">
<el-form class="theme section" label-position="top">
<div class="left">
<el-form-item
for="theme"
:label="$t('preferences.appearance.theme_color')"
>
<el-form-item for="theme" :label="$t('preferences.appearance.theme_color')">
<el-select id="theme" v-model="theme" placeholder="theme">
<el-option
v-for="t in themes"
:key="t.key"
:label="$t(t.name)"
:value="t.key"
>
</el-option>
<el-option v-for="t in themes" :key="t.key" :label="$t(t.name)" :value="t.key"> </el-option>
</el-select>
</el-form-item>
</div>
<div class="right">
<Toot
:displayNameStyle="displayNameStyle"
:timeFormat="timeFormat"
></Toot>
<Toot :displayNameStyle="displayNameStyle" :timeFormat="timeFormat"></Toot>
</div>
</el-form>
<div class="color-pallet section" v-if="customizeThemeColor">
<color-pallet></color-pallet>
</div>
<el-form class="font section" size="small" label-position="top">
<el-form-item
for="font-family"
:label="$t('preferences.appearance.font_family')"
>
<el-form class="font section" label-position="top">
<el-form-item for="font-family" :label="$t('preferences.appearance.font_family')">
<el-select id="font-family" v-model="font" placeholder="fonts">
<el-option v-for="f in fontList" :key="f" :label="f" :value="f" />
</el-select>
</el-form-item>
<el-form-item
for="font-size"
:label="$t('preferences.appearance.font_size')"
>
<el-input-number
id="font-size"
:model-value="fontSize"
:min="9"
:max="72"
@change="updateFontSize"
></el-input-number>
<el-form-item for="font-size" :label="$t('preferences.appearance.font_size')">
<el-input-number id="font-size" :model-value="fontSize" :min="9" :max="72" @change="updateFontSize"></el-input-number>
</el-form-item>
</el-form>
<el-form class="toot-padding section" size="small" label-position="top">
<el-form-item
for="toot-padding"
:label="$t('preferences.appearance.toot_padding')"
>
<el-input-number
id="toot-padding"
:model-value="tootPadding"
:min="0"
:max="24"
@change="updateTootPadding"
></el-input-number>
<el-form class="toot-padding section" label-position="top">
<el-form-item for="toot-padding" :label="$t('preferences.appearance.toot_padding')">
<el-input-number id="toot-padding" :model-value="tootPadding" :min="0" :max="24" @change="updateTootPadding"></el-input-number>
</el-form-item>
</el-form>
<el-form class="display-style section" size="small" label-position="top">
<el-form-item
for="display-style"
:label="$t('preferences.appearance.display_style.title')"
>
<el-select
id="display-style"
v-model="displayNameStyle"
placeholder="style"
>
<el-option
v-for="style in nameStyles"
:key="style.value"
:label="$t(style.name)"
:value="style.value"
>
</el-option>
<el-form class="display-style section" label-position="top">
<el-form-item for="display-style" :label="$t('preferences.appearance.display_style.title')">
<el-select id="display-style" v-model="displayNameStyle" placeholder="style">
<el-option v-for="style in nameStyles" :key="style.value" :label="$t(style.name)" :value="style.value"> </el-option>
</el-select>
</el-form-item>
</el-form>
<el-form class="time-format section" size="small" label-position="top">
<el-form-item
for="time-format"
:label="$t('preferences.appearance.time_format.title')"
>
<el-form class="time-format section" label-position="top">
<el-form-item for="time-format" :label="$t('preferences.appearance.time_format.title')">
<el-select id="time-format" 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-option v-for="format in timeFormats" :key="format.value" :label="$t(format.name)" :value="format.value"> </el-option>
</el-select>
</el-form-item>
</el-form>
@ -115,32 +60,20 @@ export default {
name: 'appearance',
components: {
Toot,
ColorPallet,
ColorPallet
},
data() {
return {
nameStyles: [
DisplayStyle.DisplayNameAndUsername,
DisplayStyle.DisplayName,
DisplayStyle.Username,
],
themes: [
Theme.System,
Theme.Light,
Theme.Dark,
Theme.SolarizedLight,
Theme.SolarizedDark,
Theme.KimbieDark,
Theme.Custom,
],
timeFormats: [TimeFormat.Absolute, TimeFormat.Relative],
nameStyles: [DisplayStyle.DisplayNameAndUsername, DisplayStyle.DisplayName, DisplayStyle.Username],
themes: [Theme.System, Theme.Light, Theme.Dark, Theme.SolarizedLight, Theme.SolarizedDark, Theme.KimbieDark, Theme.Custom],
timeFormats: [TimeFormat.Absolute, TimeFormat.Relative]
}
},
computed: {
...mapState('Preferences/Appearance', {
fontSize: (state) => state.appearance.fontSize,
fontList: (state) => state.fonts,
tootPadding: (state) => state.appearance.tootPadding,
fontSize: state => state.appearance.fontSize,
fontList: state => state.fonts,
tootPadding: state => state.appearance.tootPadding
}),
theme: {
get() {
@ -148,19 +81,15 @@ export default {
},
set(value) {
this.$store.dispatch('Preferences/Appearance/updateTheme', value)
},
}
},
displayNameStyle: {
get() {
return this.$store.state.Preferences.Appearance.appearance
.displayNameStyle
return this.$store.state.Preferences.Appearance.appearance.displayNameStyle
},
set(value) {
this.$store.dispatch(
'Preferences/Appearance/updateDisplayNameStyle',
value
)
},
this.$store.dispatch('Preferences/Appearance/updateDisplayNameStyle', value)
}
},
timeFormat: {
get() {
@ -168,7 +97,7 @@ export default {
},
set(value) {
this.$store.dispatch('Preferences/Appearance/updateTimeFormat', value)
},
}
},
customizeThemeColor() {
return this.theme === Theme.Custom.key
@ -179,8 +108,8 @@ export default {
},
set(value) {
this.$store.dispatch('Preferences/Appearance/updateFont', value)
},
},
}
}
},
created() {
this.$store.dispatch('Preferences/Appearance/loadAppearance')
@ -191,12 +120,9 @@ export default {
await this.$store.dispatch('Preferences/Appearance/updateFontSize', value)
},
async updateTootPadding(value) {
await this.$store.dispatch(
'Preferences/Appearance/updateTootPadding',
value
)
},
},
await this.$store.dispatch('Preferences/Appearance/updateTootPadding', value)
}
}
}
</script>
@ -214,12 +140,12 @@ export default {
}
}
.section /deep/ {
.section {
margin-bottom: 40px;
}
.el-form-item__label {
color: var(--theme-primary-color);
}
.section :deep(.el-form-item__label) {
color: var(--theme-primary-color);
}
}
</style>

7
src/renderer/components/Preferences/Appearance/Toot.vue
View File

@ -153,7 +153,7 @@ export default {
}
}
.content-wrapper /deep/ {
.content-wrapper {
font-size: var(--base-font-size);
color: var(--theme-primary-color);
@ -161,11 +161,6 @@ export default {
margin: var(--toot-padding) 0;
word-wrap: break-word;
}
.emojione {
width: 20px;
height: 20px;
}
}
.tool-box {

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

@ -1,7 +1,7 @@
<template>
<div id="general" v-loading="loading" :element-loading-background="backgroundColor">
<h2>{{ $t('preferences.general.title') }}</h2>
<el-form class="sounds section" label-position="right" label-width="250px" size="small">
<el-form class="sounds section" label-position="right" label-width="250px">
<h3>{{ $t('preferences.general.sounds.title') }}</h3>
<p class="description">
{{ $t('preferences.general.sounds.description') }}
@ -13,7 +13,7 @@
<el-switch id="sound_toot" v-model="sound_toot" active-color="#13ce66"> </el-switch>
</el-form-item>
</el-form>
<el-form class="timeline section" label-potision="right" label-width="302px" size="samll">
<el-form class="timeline section" label-potision="right" label-width="302px">
<h3>{{ $t('preferences.general.timeline.title') }}</h3>
<p class="description">
{{ $t('preferences.general.timeline.description') }}
@ -28,7 +28,7 @@
<el-switch id="hideAllAttachments" v-model="timeline_hide_attachments" active-color="#13ce66"> </el-switch>
</el-form-item>
</el-form>
<el-form class="other section" label-position="right" label-width="250px" size="small" v-if="notDarwin">
<el-form class="other section" label-position="right" label-width="250px" v-if="notDarwin">
<h3>{{ $t('preferences.general.other.title') }}</h3>
<el-form-item for="launch" :label="$t('preferences.general.other.launch')">
<el-switch id="launch" v-model="other_launch" active-color="#13ce66"> </el-switch>

4
src/renderer/components/Preferences/Language.vue
View File

@ -1,7 +1,7 @@
<template>
<div id="language">
<h2>{{ $t('preferences.language.title') }}</h2>
<el-form class="display-language section" label-position="top" size="small">
<el-form class="display-language section" label-position="top">
<h3>{{ $t('preferences.language.language.title') }}</h3>
<el-form-item for="language" :label="$t('preferences.language.language.description')">
<el-select id="language" v-model="displayLanguage" placeholder="style">
@ -9,7 +9,7 @@
</el-select>
</el-form-item>
</el-form>
<el-form class="spellchecker section" label-position="top" size="small">
<el-form class="spellchecker section" label-position="top">
<h3>{{ $t('preferences.language.spellchecker.title') }}</h3>
<el-form-item for="spellcheck" :label="$t('preferences.language.spellchecker.enabled')">
<el-switch id="spellcheck" v-model="spellcheck" active-color="#13ce66"> </el-switch>

136
src/renderer/components/Preferences/Network.vue
View File

@ -1,102 +1,40 @@
<template>
<div id="network">
<h2>{{ $t('preferences.network.proxy.title') }}</h2>
<el-form class="network section" size="small" label-width="120px">
<el-form class="network section" label-width="120px">
<div class="proxy-source">
<el-radio v-model="source" label="no">{{
$t('preferences.network.proxy.no')
}}</el-radio>
<el-radio v-model="source" label="no">{{ $t('preferences.network.proxy.no') }}</el-radio>
</div>
<div class="proxy-source">
<el-radio v-model="source" label="system">{{
$t('preferences.network.proxy.system')
}}</el-radio>
<el-radio v-model="source" label="system">{{ $t('preferences.network.proxy.system') }}</el-radio>
</div>
<div class="proxy-source">
<el-radio v-model="source" label="manual">{{
$t('preferences.network.proxy.manual')
}}</el-radio>
<el-radio v-model="source" label="manual">{{ $t('preferences.network.proxy.manual') }}</el-radio>
</div>
<el-form-item
for="proxyProtocol"
:label="$t('preferences.network.proxy.protocol')"
>
<el-select
v-model="proxyProtocol"
placeholder="Select protocol"
:disabled="!manualProxyConfiguration"
>
<el-option
:label="$t('preferences.network.proxy.protocol_list.http')"
value="http"
></el-option>
<el-option
:label="$t('preferences.network.proxy.protocol_list.https')"
value="https"
></el-option>
<el-option
:label="$t('preferences.network.proxy.protocol_list.socks4')"
value="socks4"
></el-option>
<el-option
:label="$t('preferences.network.proxy.protocol_list.socks4a')"
value="socks4a"
></el-option>
<el-option
:label="$t('preferences.network.proxy.protocol_list.socks5')"
value="socks5"
></el-option>
<el-option
:label="$t('preferences.network.proxy.protocol_list.socks5h')"
value="socks5h"
></el-option>
<el-form-item for="proxyProtocol" :label="$t('preferences.network.proxy.protocol')">
<el-select v-model="proxyProtocol" placeholder="Select protocol" :disabled="!manualProxyConfiguration">
<el-option :label="$t('preferences.network.proxy.protocol_list.http')" value="http"></el-option>
<el-option :label="$t('preferences.network.proxy.protocol_list.https')" value="https"></el-option>
<el-option :label="$t('preferences.network.proxy.protocol_list.socks4')" value="socks4"></el-option>
<el-option :label="$t('preferences.network.proxy.protocol_list.socks4a')" value="socks4a"></el-option>
<el-option :label="$t('preferences.network.proxy.protocol_list.socks5')" value="socks5"></el-option>
<el-option :label="$t('preferences.network.proxy.protocol_list.socks5h')" value="socks5h"></el-option>
</el-select>
</el-form-item>
<el-form-item
for="proxyHost"
:label="$t('preferences.network.proxy.host')"
>
<el-input
v-model="proxyHost"
:disabled="!manualProxyConfiguration"
placeholder="proxy.example.com"
></el-input>
<el-form-item for="proxyHost" :label="$t('preferences.network.proxy.host')">
<el-input v-model="proxyHost" :disabled="!manualProxyConfiguration" placeholder="proxy.example.com"></el-input>
</el-form-item>
<el-form-item
for="proxyPort"
:label="$t('preferences.network.proxy.port')"
>
<el-input
v-model="proxyPort"
:disabled="!manualProxyConfiguration"
placeholder="8080"
></el-input>
<el-form-item for="proxyPort" :label="$t('preferences.network.proxy.port')">
<el-input v-model="proxyPort" :disabled="!manualProxyConfiguration" placeholder="8080"></el-input>
</el-form-item>
<el-form-item
for="proxyUsername"
:label="$t('preferences.network.proxy.username')"
>
<el-input
v-model="proxyUsername"
:disabled="!manualProxyConfiguration"
placeholder="username"
></el-input>
<el-form-item for="proxyUsername" :label="$t('preferences.network.proxy.username')">
<el-input v-model="proxyUsername" :disabled="!manualProxyConfiguration" placeholder="username"></el-input>
</el-form-item>
<el-form-item
for="proxyPassword"
:label="$t('preferences.network.proxy.password')"
>
<el-input
v-model="proxyPassword"
:disabled="!manualProxyConfiguration"
placeholder="password"
show-password
></el-input>
<el-form-item for="proxyPassword" :label="$t('preferences.network.proxy.password')">
<el-input v-model="proxyPassword" :disabled="!manualProxyConfiguration" placeholder="password" show-password></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSave">{{
$t('preferences.network.save')
}}</el-button>
<el-button type="primary" @click="onSave">{{ $t('preferences.network.save') }}</el-button>
</el-form-item>
</el-form>
</div>
@ -115,7 +53,7 @@ export default {
},
set(value) {
this.$store.dispatch('Preferences/Network/changeSource', value)
},
}
},
proxyProtocol: {
get() {
@ -123,7 +61,7 @@ export default {
},
set(value) {
this.$store.dispatch('Preferences/Network/updateProtocol', value)
},
}
},
proxyHost: {
get() {
@ -131,7 +69,7 @@ export default {
},
set(value) {
this.$store.dispatch('Preferences/Network/updateHost', value)
},
}
},
proxyPort: {
get() {
@ -139,7 +77,7 @@ export default {
},
set(value) {
this.$store.dispatch('Preferences/Network/updatePort', value)
},
}
},
proxyUsername: {
get() {
@ -147,7 +85,7 @@ export default {
},
set(value) {
this.$store.dispatch('Preferences/Network/updateUsername', value)
},
}
},
proxyPassword: {
get() {
@ -155,41 +93,41 @@ export default {
},
set(value) {
this.$store.dispatch('Preferences/Network/updatePassword', value)
},
},
}
}
},
created() {
this.$store.dispatch('Preferences/Network/loadProxy').catch(() => {
this.$message({
message: this.$t('message.preferences_load_error'),
type: 'error',
type: 'error'
})
})
},
methods: {
onSave() {
this.$store.dispatch('Preferences/Network/saveProxyConfig')
},
},
}
}
}
</script>
<style lang="scss" scoped>
.network /deep/ {
.network {
max-width: 720px;
.proxy-source {
line-height: 32px;
margin: 12px 8px;
font-size: 14px;
.el-radio {
color: var(--theme-primary-color);
}
}
.el-form-item__label {
.proxy-source :deep(.el-radio) {
color: var(--theme-primary-color);
}
}
.network :deep(.el-form-item__label) {
color: var(--theme-primary-color);
}
</style>

165
src/renderer/components/Preferences/Notification.vue
View File

@ -1,90 +1,36 @@
<template>
<div id="notification">
<h2>{{ $t('preferences.notification.title') }}</h2>
<el-form
class="section"
label-position="right"
label-width="360px"
size="small"
>
<el-form class="section" label-position="right" label-width="360px">
<p class="description">
{{ $t('preferences.notification.enable.description') }}
</p>
<el-form-item
for="notifyReply"
:label="$t('preferences.notification.enable.reply')"
>
<el-switch
id="notifyReply"
v-model="notifyReply"
active-color="#13ce66"
>
</el-switch>
<el-form-item for="notifyReply" :label="$t('preferences.notification.enable.reply')">
<el-switch id="notifyReply" v-model="notifyReply" active-color="#13ce66"> </el-switch>
</el-form-item>
<el-form-item
for="notifyReblog"
:label="$t('preferences.notification.enable.reblog')"
>
<el-switch
id="notifyReblog"
v-model="notifyReblog"
active-color="#13ce66"
>
</el-switch>
<el-form-item for="notifyReblog" :label="$t('preferences.notification.enable.reblog')">
<el-switch id="notifyReblog" v-model="notifyReblog" active-color="#13ce66"> </el-switch>
</el-form-item>
<el-form-item
for="notifyReaction"
:label="$t('preferences.notification.enable.reaction')"
>
<el-switch
id="notifyReaction"
v-model="notifyReaction"
active-color="#13ce66"
>
</el-switch>
<el-form-item for="notifyReaction" :label="$t('preferences.notification.enable.reaction')">
<el-switch id="notifyReaction" v-model="notifyReaction" active-color="#13ce66"> </el-switch>
</el-form-item>
<el-form-item
for="notifyFavourite"
:label="$t('preferences.notification.enable.favourite')"
>
<el-switch
id="notifyFavourite"
v-model="notifyFavourite"
active-color="#13ce66"
>
</el-switch>
<el-form-item for="notifyFavourite" :label="$t('preferences.notification.enable.favourite')">
<el-switch id="notifyFavourite" v-model="notifyFavourite" active-color="#13ce66"> </el-switch>
</el-form-item>
<el-form-item
for="notifyFollow"
:label="$t('preferences.notification.enable.follow')"
>
<el-form-item for="notifyFollow" :label="$t('preferences.notification.enable.follow')">
<el-switch v-model="notifyFollow" active-color="#13ce66"> </el-switch>
</el-form-item>
<el-form-item
for="notifyFollowRequest"
:label="$t('preferences.notification.enable.follow_request')"
>
<el-switch v-model="notifyFollowRequest" active-color="#13ce66">
</el-switch>
<el-form-item for="notifyFollowRequest" :label="$t('preferences.notification.enable.follow_request')">
<el-switch v-model="notifyFollowRequest" active-color="#13ce66"> </el-switch>
</el-form-item>
<el-form-item
for="notifyStatus"
:label="$t('preferences.notification.enable.status')"
>
<el-form-item for="notifyStatus" :label="$t('preferences.notification.enable.status')">
<el-switch v-model="notifyStatus" active-color="#13ce66"> </el-switch>
</el-form-item>
<el-form-item
for="notifyPollVote"
:label="$t('preferences.notification.enable.poll_vote')"
>
<el-form-item for="notifyPollVote" :label="$t('preferences.notification.enable.poll_vote')">
<el-switch v-model="notifyPollVote" active-color="#13ce66"> </el-switch>
</el-form-item>
<el-form-item
for="notifyPollExpired"
:label="$t('preferences.notification.enable.poll_expired')"
>
<el-switch v-model="notifyPollExpired" active-color="#13ce66">
</el-switch>
<el-form-item for="notifyPollExpired" :label="$t('preferences.notification.enable.poll_expired')">
<el-switch v-model="notifyPollExpired" active-color="#13ce66"> </el-switch>
</el-form-item>
</el-form>
</div>
@ -96,114 +42,103 @@ export default {
computed: {
notifyReply: {
get() {
return this.$store.state.Preferences.Notification.notification.notify
.reply
return this.$store.state.Preferences.Notification.notification.notify.reply
},
set(value) {
this.$store.dispatch('Preferences/Notification/updateNotify', {
reply: value,
reply: value
})
},
}
},
notifyReblog: {
get() {
return this.$store.state.Preferences.Notification.notification.notify
.reblog
return this.$store.state.Preferences.Notification.notification.notify.reblog
},
set(value) {
this.$store.dispatch('Preferences/Notification/updateNotify', {
reblog: value,
reblog: value
})
},
}
},
notifyFavourite: {
get() {
return this.$store.state.Preferences.Notification.notification.notify
.favourite
return this.$store.state.Preferences.Notification.notification.notify.favourite
},
set(value) {
this.$store.dispatch('Preferences/Notification/updateNotify', {
favourite: value,
favourite: value
})
},
}
},
notifyFollow: {
get() {
return this.$store.state.Preferences.Notification.notification.notify
.follow
return this.$store.state.Preferences.Notification.notification.notify.follow
},
set(value) {
this.$store.dispatch('Preferences/Notification/updateNotify', {
follow: value,
follow: value
})
},
}
},
notifyFollowRequest: {
get() {
return this.$store.state.Preferences.Notification.notification.notify
.follow_request
return this.$store.state.Preferences.Notification.notification.notify.follow_request
},
set(value) {
this.$store.dispatch('Preferences/Notification/updateNotify', {
follow_request: value,
follow_request: value
})
},
}
},
notifyReaction: {
get() {
return this.$store.state.Preferences.Notification.notification.notify
.reaction
return this.$store.state.Preferences.Notification.notification.notify.reaction
},
set(value) {
this.$store.dispatch('Preferences/Notification/updateNotify', {
reaction: value,
reaction: value
})
},
}
},
notifyStatus: {
get() {
return this.$store.state.Preferences.Notification.notification.notify
.status
return this.$store.state.Preferences.Notification.notification.notify.status
},
set(value) {
this.$store.dispatch('Preferences/Notification/updateNotify', {
status: value,
status: value
})
},
}
},
notifyPollVote: {
get() {
return this.$store.state.Preferences.Notification.notification.notify
.poll_vote
return this.$store.state.Preferences.Notification.notification.notify.poll_vote
},
set(value) {
this.$store.dispatch('Preferences/Notification/updateNotify', {
poll_vote: value,
poll_vote: value
})
},
}
},
notifyPollExpired: {
get() {
return this.$store.state.Preferences.Notification.notification.notify
.poll_expired
return this.$store.state.Preferences.Notification.notification.notify.poll_expired
},
set(value) {
this.$store.dispatch('Preferences/Notification/updateNotify', {
poll_expired: value,
poll_expired: value
})
},
},
}
}
},
created() {
this.$store
.dispatch('Preferences/Notification/loadNotification')
.catch(() => {
this.$message({
message: this.$t('message.preferences_load_error'),
type: 'error',
})
this.$store.dispatch('Preferences/Notification/loadNotification').catch(() => {
this.$message({
message: this.$t('message.preferences_load_error'),
type: 'error'
})
},
})
}
}
</script>

6
src/renderer/components/organisms/Toot.vue
View File

@ -75,9 +75,9 @@
:title="media.description"
:readExif="true"
/>
<el-tag class="media-label" size="mini" v-if="media.type === 'gifv'">GIF</el-tag>
<el-tag class="media-label" size="mini" v-else-if="media.type === 'video'">VIDEO</el-tag>
<el-tag class="media-label" size="mini" v-else-if="media.type === 'audio'">AUDIO</el-tag>
<el-tag class="media-label" size="small" v-if="media.type === 'gifv'">GIF</el-tag>
<el-tag class="media-label" size="small" v-else-if="media.type === 'video'">VIDEO</el-tag>
<el-tag class="media-label" size="small" v-else-if="media.type === 'audio'">AUDIO</el-tag>
</div>
</div>
<div class="clearfix"></div>

7
src/renderer/store/Preferences/Account.ts
View File

@ -1,9 +1,10 @@
import { Module, MutationTree, ActionTree } from 'vuex'
import { toRaw } from 'vue'
import { LocalAccount } from '~/src/types/localAccount'
import { RootState } from '@/store'
import { MyWindow } from '~/src/types/global'
const win = (window as any) as MyWindow
const win = window as any as MyWindow
export type AccountState = {
accounts: Array<LocalAccount>
@ -39,10 +40,10 @@ const actions: ActionTree<AccountState, RootState> = {
await win.ipcRenderer.invoke('remove-account', account._id)
},
forwardAccount: async (_, account: LocalAccount) => {
await win.ipcRenderer.invoke('forward-account', account)
await win.ipcRenderer.invoke('forward-account', toRaw(account))
},
backwardAccount: async (_, account: LocalAccount) => {
await win.ipcRenderer.invoke('backward-account', account)
await win.ipcRenderer.invoke('backward-account', toRaw(account))
},
removeAllAccounts: async () => {
await win.ipcRenderer.invoke('remove-all-accounts')

9
src/renderer/store/Preferences/General.ts
View File

@ -1,11 +1,12 @@
import { Module, MutationTree, ActionTree, GetterTree } from 'vuex'
import { toRaw } from 'vue'
import { RootState } from '@/store'
import { Sound } from '~/src/types/sound'
import { Timeline } from '~/src/types/timeline'
import { BaseConfig, General, Other } from '~/src/types/preference'
import { MyWindow } from '~/src/types/global'
const win = (window as any) as MyWindow
const win = window as any as MyWindow
export type GeneralState = {
general: General
@ -55,7 +56,7 @@ const actions: ActionTree<GeneralState, RootState> = {
updateSound: async ({ commit, state }, sound: object) => {
commit(MUTATION_TYPES.CHANGE_LOADING, true)
const newSound: Sound = Object.assign({}, state.general.sound, sound)
const newGeneral: General = Object.assign({}, state.general, {
const newGeneral: General = Object.assign({}, toRaw(state.general), {
sound: newSound
})
const config = {
@ -69,7 +70,7 @@ const actions: ActionTree<GeneralState, RootState> = {
updateTimeline: async ({ commit, state, dispatch }, timeline: object) => {
commit(MUTATION_TYPES.CHANGE_LOADING, true)
const newTimeline: Timeline = Object.assign({}, state.general.timeline, timeline)
const newGeneral: General = Object.assign({}, state.general, {
const newGeneral: General = Object.assign({}, toRaw(state.general), {
timeline: newTimeline
})
const config = {
@ -84,7 +85,7 @@ const actions: ActionTree<GeneralState, RootState> = {
updateOther: async ({ commit, state, dispatch }, other: {}) => {
commit(MUTATION_TYPES.CHANGE_LOADING, true)
const newOther: Other = Object.assign({}, state.general.other, other)
const newGeneral: General = Object.assign({}, state.general, {
const newGeneral: General = Object.assign({}, toRaw(state.general), {
other: newOther
})
const config = {