Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

#2930 (#2933)

Browse source 
* wip

* wip

* Clean up

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* 🎨

* wip

* wip
This commit is contained in:
syuilo 2018-10-19 06:18:33 +09:00 • committed by GitHub
parent c1a929022f
commit fef4f7fce8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
29 changed files with 824 additions and 833 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/client/app/desktop/views/components/note-detail.vue
View file

@ -91,7 +91,7 @@ import MkPostFormWindow from './post-form-window.vue';
import MkRenoteFormWindow from './renote-form-window.vue';
import MkNoteMenu from '../../../common/views/components/note-menu.vue';
import MkReactionPicker from '../../../common/views/components/reaction-picker.vue';
import XSub from './notes.note.sub.vue';
import XSub from './note.sub.vue';
import { sum } from '../../../../../prelude/array';
import noteSubscriber from '../../../common/scripts/note-subscriber';

17
src/client/app/desktop/views/components/notes.note.sub.vue → src/client/app/desktop/views/components/note.sub.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="tkfdzaxtkdeianobciwadajxzbddorql" :title="title">
<div class="tkfdzaxtkdeianobciwadajxzbddorql" :class="{ mini }" :title="title">
<mk-avatar class="avatar" :user="note.user"/>
<div class="main">
<mk-note-header class="header" :note="note"/>
@ -24,6 +24,11 @@ export default Vue.extend({
note: {
type: Object,
required: true
},
mini: {
type: Boolean,
required: false,
default: false
}
},
@ -44,11 +49,19 @@ export default Vue.extend({
<style lang="stylus" scoped>
.tkfdzaxtkdeianobciwadajxzbddorql
display flex
margin 0
padding 16px 32px
font-size 0.9em
background var(--subNoteBg)
&.mini
padding 16px
font-size 10px
> .avatar
margin 0 8px 0 0
width 38px
height 38px
> .avatar
flex-shrink 0
display block

86
src/client/app/desktop/views/components/notes.note.vue → src/client/app/desktop/views/components/note.vue
View file

@ -1,7 +1,17 @@
<template>
<div class="note" v-show="appearNote.deletedAt == null" :tabindex="appearNote.deletedAt == null ? '-1' : null" v-hotkey="keymap" :title="title">
<div
class="note"
:class="{ mini }"
v-show="appearNote.deletedAt == null"
:tabindex="appearNote.deletedAt == null ? '-1' : null"
v-hotkey="keymap"
:title="title"
>
<div class="conversation" v-if="detail && conversation.length > 0">
<x-sub v-for="note in conversation" :key="note.id" :note="note" :mini="mini"/>
</div>
<div class="reply-to" v-if="appearNote.reply && (!$store.getters.isSignedIn || $store.state.settings.showReplyTarget)">
<x-sub :note="appearNote.reply"/>
<x-sub :note="appearNote.reply" :mini="mini"/>
</div>
<div class="renote" v-if="isRenote">
<mk-avatar class="avatar" :user="note.user"/>
@ -32,8 +42,8 @@
</div>
<mk-poll v-if="appearNote.poll" :note="appearNote" ref="pollViewer"/>
<a class="location" v-if="appearNote.geo" :href="`https://maps.google.com/maps?q=${appearNote.geo.coordinates[1]},${appearNote.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% 位置情報</a>
<div class="renote" v-if="appearNote.renote"><mk-note-preview :note="appearNote.renote"/></div>
<mk-url-preview v-for="url in urls" :url="url" :key="url"/>
<div class="renote" v-if="appearNote.renote"><mk-note-preview :note="appearNote.renote" :mini="mini"/></div>
<mk-url-preview v-for="url in urls" :url="url" :key="url" :mini="mini"/>
</div>
</div>
<footer>
@ -55,15 +65,16 @@
</footer>
</div>
</article>
<div class="replies" v-if="detail && replies.length > 0">
<x-sub v-for="note in replies" :key="note.id" :note="note" :mini="mini"/>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import MkPostFormWindow from './post-form-window.vue';
import MkRenoteFormWindow from './renote-form-window.vue';
import XSub from './notes.note.sub.vue';
import XSub from './note.sub.vue';
import noteMixin from '../../../common/scripts/note-mixin';
import noteSubscriber from '../../../common/scripts/note-subscriber';
@ -81,6 +92,40 @@ export default Vue.extend({
note: {
type: Object,
required: true
},
detail: {
type: Boolean,
required: false,
default: false
},
mini: {
type: Boolean,
required: false,
default: false
}
},
data() {
return {
conversation: [],
replies: []
};
},
created() {
if (this.detail) {
(this as any).api('notes/replies', {
noteId: this.appearNote.id,
limit: 8
}).then(replies => {
this.replies = replies;
});
(this as any).api('notes/conversation', {
noteId: this.appearNote.replyId
}).then(conversation => {
this.conversation = conversation.reverse();
});
}
}
});
@ -93,14 +138,23 @@ export default Vue.extend({
background var(--face)
border-bottom solid 1px var(--faceDivider)
&[data-round]
&:first-child
border-top-left-radius 6px
border-top-right-radius 6px
&.mini
font-size 13px
> .renote
border-top-left-radius 6px
border-top-right-radius 6px
> .renote
padding 8px 16px 0 16px
.avatar
width 20px
height 20px
> article
padding 16px 16px 4px
> .avatar
margin 0 10px 8px 0
width 42px
height 42px
&:last-of-type
border-bottom none
@ -129,6 +183,7 @@ export default Vue.extend({
background linear-gradient(to bottom, var(--renoteGradient) 0%, var(--face) 100%)
.avatar
flex-shrink 0
display inline-block
width 28px
height 28px
@ -273,6 +328,9 @@ export default Vue.extend({
border none
cursor pointer
&:last-child
margin-right 0
&:hover
color var(--noteActionsHover)

2
src/client/app/desktop/views/components/notes.vue
View file

@ -40,7 +40,7 @@ import Vue from 'vue';
import * as config from '../../../config';
import getNoteSummary from '../../../../../misc/get-note-summary';
import XNote from './notes.note.vue';
import XNote from './note.vue';
const displayLimit = 30;

6
src/client/app/desktop/views/components/settings.2fa.vue
View file

@ -2,10 +2,10 @@
<div class="2fa">
<p>%i18n:@intro%<a href="%i18n:@url%" target="_blank">%i18n:@detail%</a></p>
<div class="ui info warn"><p>%fa:exclamation-triangle%%i18n:@caution%</p></div>
<p v-if="!data && !$store.state.i.twoFactorEnabled"><button @click="register" class="ui primary">%i18n:@register%</button></p>
<p v-if="!data && !$store.state.i.twoFactorEnabled"><ui-button @click="register">%i18n:@register%</ui-button></p>
<template v-if="$store.state.i.twoFactorEnabled">
<p>%i18n:@already-registered%</p>
<button @click="unregister" class="ui">%i18n:@unregister%</button>
<ui-button @click="unregister">%i18n:@unregister%</ui-button>
</template>
<div v-if="data">
<ol>
@ -13,7 +13,7 @@
<li>%i18n:@scan%<br><img :src="data.qr"></li>
<li>%i18n:@done%<br>
<input type="number" v-model="token" class="ui">
<button @click="submit" class="ui primary">%i18n:@submit%</button>
<ui-button primary @click="submit">%i18n:@submit%</ui-button>
</li>
</ol>
<div class="ui info"><p>%fa:info-circle%%i18n:@info%</p></div>

6
src/client/app/desktop/views/components/settings.api.vue
View file

@ -1,10 +1,12 @@
<template>
<div class="root api">
<p>%i18n:@token% <code>{{ $store.state.i.token }}</code></p>
<ui-input :value="$store.state.i.token" readonly>
<span>%i18n:@token%</span>
</ui-input>
<p>%i18n:@intro%</p>
<div class="ui info warn"><p>%fa:exclamation-triangle%%i18n:@caution%</p></div>
<p>%i18n:@regeneration-of-token%</p>
<button class="ui" @click="regenerateToken">%i18n:@regenerate-token%</button>
<ui-button @click="regenerateToken">%i18n:@regenerate-token%</ui-button>
</div>
</template>

2
src/client/app/desktop/views/components/settings.password.vue
View file

@ -1,6 +1,6 @@
<template>
<div>
<button @click="reset" class="ui primary">%i18n:@reset%</button>
<ui-button @click="reset">%i18n:@reset%</ui-button>
</div>
</template>

106
src/client/app/desktop/views/components/settings.profile.vue
View file

@ -1,106 +0,0 @@
<template>
<div class="profile">
<label class="avatar ui from group">
<p>%i18n:@avatar%</p>
<img class="avatar" :src="$store.state.i.avatarUrl" alt="avatar"/>
<button class="ui" @click="updateAvatar">%i18n:@choice-avatar%</button>
</label>
<label class="ui from group">
<ui-input v-model="name" type="text">%i18n:@name%</ui-input>
</label>
<label class="ui from group">
<ui-input v-model="location" type="text">%i18n:@location%</ui-input>
</label>
<label class="ui from group">
<ui-textarea v-model="description">%i18n:@description%</ui-textarea>
</label>
<label class="ui from group">
<p>%i18n:@birthday%</p>
<input type="date" v-model="birthday"/>
</label>
<ui-button primary @click="save">%i18n:@save%</ui-button>
<section>
<h2>%i18n:@locked-account%</h2>
<ui-switch v-model="isLocked" @change="save(false)">%i18n:@is-locked%</ui-switch>
<ui-switch v-model="carefulBot" @change="save(false)">%i18n:@careful-bot%</ui-switch>
</section>
<section>
<h2>%i18n:@other%</h2>
<ui-switch v-model="isBot" @change="save(false)">%i18n:@is-bot%</ui-switch>
<ui-switch v-model="isCat" @change="save(false)">%i18n:@is-cat%</ui-switch>
<ui-switch v-model="alwaysMarkNsfw">%i18n:common.always-mark-nsfw%</ui-switch>
</section>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
data() {
return {
name: null,
location: null,
description: null,
birthday: null,
isBot: false,
isCat: false,
isLocked: false,
carefulBot: false,
};
},
computed: {
alwaysMarkNsfw: {
get() { return this.$store.state.i.settings.alwaysMarkNsfw; },
set(value) { (this as any).api('i/update', { alwaysMarkNsfw: value }); }
},
},
created() {
this.name = this.$store.state.i.name || '';
this.location = this.$store.state.i.profile.location;
this.description = this.$store.state.i.description;
this.birthday = this.$store.state.i.profile.birthday;
this.isCat = this.$store.state.i.isCat;
this.isBot = this.$store.state.i.isBot;
this.isLocked = this.$store.state.i.isLocked;
this.carefulBot = this.$store.state.i.carefulBot;
},
methods: {
updateAvatar() {
(this as any).apis.updateAvatar();
},
save(notify) {
(this as any).api('i/update', {
name: this.name || null,
location: this.location || null,
description: this.description || null,
birthday: this.birthday || null,
isCat: this.isCat,
isBot: this.isBot,
isLocked: this.isLocked,
carefulBot: this.carefulBot
}).then(() => {
if (notify) {
(this as any).apis.notify('%i18n:@profile-updated%');
}
});
}
}
});
</script>
<style lang="stylus" scoped>
.profile
> .avatar
> img
display inline-block
vertical-align top
width 64px
height 64px
border-radius 4px
> button
margin-left 8px
</style>

455
src/client/app/desktop/views/components/settings.vue
View file

@ -2,38 +2,59 @@
<div class="mk-settings">
<div class="nav">
<p :class="{ active: page == 'profile' }" @mousedown="page = 'profile'">%fa:user .fw%%i18n:@profile%</p>
<p :class="{ active: page == 'theme' }" @mousedown="page = 'theme'">%fa:palette .fw%%i18n:@theme%</p>
<p :class="{ active: page == 'web' }" @mousedown="page = 'web'">%fa:desktop .fw%Web</p>
<p :class="{ active: page == 'notification' }" @mousedown="page = 'notification'">%fa:R bell .fw%%i18n:@notification%</p>
<p :class="{ active: page == 'drive' }" @mousedown="page = 'drive'">%fa:cloud .fw%%i18n:@drive%</p>
<p :class="{ active: page == 'hashtags' }" @mousedown="page = 'hashtags'">%fa:hashtag .fw%%i18n:@tags%</p>
<p :class="{ active: page == 'mute' }" @mousedown="page = 'mute'">%fa:ban .fw%%i18n:@mute%</p>
<p :class="{ active: page == 'apps' }" @mousedown="page = 'apps'">%fa:puzzle-piece .fw%%i18n:@apps%</p>
<p :class="{ active: page == 'twitter' }" @mousedown="page = 'twitter'">%fa:B twitter .fw%Twitter</p>
<p :class="{ active: page == 'security' }" @mousedown="page = 'security'">%fa:unlock-alt .fw%%i18n:@security%</p>
<p :class="{ active: page == 'api' }" @mousedown="page = 'api'">%fa:key .fw%API</p>
<p :class="{ active: page == 'other' }" @mousedown="page = 'other'">%fa:cogs .fw%%i18n:@other%</p>
</div>
<div class="pages">
<section class="profile" v-show="page == 'profile'">
<h1>%i18n:@profile%</h1>
<x-profile/>
</section>
<div class="profile" v-show="page == 'profile'">
<mk-profile-editor/>
<section class="web" v-show="page == 'web'">
<h1>%i18n:@theme%</h1>
<mk-theme/>
</section>
<ui-card>
<div slot="title">%fa:B twitter% %i18n:@twitter%</div>
<section>
<mk-twitter-setting/>
</section>
</ui-card>
</div>
<section class="web" v-show="page == 'web'">
<h1>%i18n:@behaviour%</h1>
<ui-switch v-model="fetchOnScroll">
%i18n:@fetch-on-scroll%
<span slot="desc">%i18n:@fetch-on-scroll-desc%</span>
</ui-switch>
<ui-switch v-model="autoPopout">
%i18n:@auto-popout%
<span slot="desc">%i18n:@auto-popout-desc%</span>
</ui-switch>
<ui-card class="theme" v-show="page == 'theme'">
<div slot="title">%fa:palette% %i18n:@theme%</div>
<section>
<mk-theme/>
</section>
</ui-card>
<ui-card class="web" v-show="page == 'web'">
<div slot="title">%fa:sliders-h% %i18n:@behaviour%</div>
<section>
<ui-switch v-model="fetchOnScroll">
%i18n:@fetch-on-scroll%
<span slot="desc">%i18n:@fetch-on-scroll-desc%</span>
</ui-switch>
<ui-switch v-model="autoPopout">
%i18n:@auto-popout%
<span slot="desc">%i18n:@auto-popout-desc%</span>
</ui-switch>
<ui-switch v-model="deckNav">%i18n:@deck-nav%<span slot="desc">%i18n:@deck-nav-desc%</span></ui-switch>
<details>
<summary>%i18n:@advanced%</summary>
<ui-switch v-model="apiViaStream">
%i18n:@api-via-stream%
<span slot="desc">%i18n:@api-via-stream-desc%</span>
</ui-switch>
</details>
</section>
<section>
<header>%i18n:@note-visibility%</header>
@ -49,24 +70,26 @@
</ui-select>
</section>
</section>
</ui-card>
<details>
<summary>%i18n:@advanced%</summary>
<ui-switch v-model="apiViaStream">
%i18n:@api-via-stream%
<span slot="desc">%i18n:@api-via-stream-desc%</span>
</ui-switch>
</details>
</section>
<ui-card class="web" v-show="page == 'web'">
<div slot="title">%fa:desktop% %i18n:@display%</div>
<section class="web" v-show="page == 'web'">
<h1>%i18n:@display%</h1>
<div class="div">
<button class="ui button" @click="customizeHome" style="margin-bottom: 16px">%i18n:@customize%</button>
</div>
<div class="div">
<button class="ui" @click="updateWallpaper">%i18n:@choose-wallpaper%</button>
<button class="ui" @click="deleteWallpaper">%i18n:@delete-wallpaper%</button>
<section>
<ui-button @click="customizeHome">%i18n:@customize%</ui-button>
</section>
<section>
<header>%i18n:@wallpaper%</header>
<ui-button @click="updateWallpaper">%i18n:@choose-wallpaper%</ui-button>
<ui-button @click="deleteWallpaper">%i18n:@delete-wallpaper%</ui-button>
</section>
<section>
<header>%i18n:@navbar-position%</header>
<ui-radio v-model="navbar" value="top">%i18n:@navbar-position-top%</ui-radio>
<ui-radio v-model="navbar" value="left">%i18n:@navbar-position-left%</ui-radio>
<ui-radio v-model="navbar" value="right">%i18n:@navbar-position-right%</ui-radio>
</section>
<section>
<ui-switch v-model="darkmode">%i18n:@dark-mode%</ui-switch>
<ui-switch v-model="useShadow">%i18n:@use-shadow%</ui-switch>
<ui-switch v-model="roundedCorners">%i18n:@rounded-corners%</ui-switch>
@ -75,171 +98,186 @@
<ui-switch v-model="contrastedAcct">%i18n:@contrasted-acct%</ui-switch>
<ui-switch v-model="showFullAcct">%i18n:common.show-full-acct%</ui-switch>
<ui-switch v-model="iLikeSushi">%i18n:common.i-like-sushi%</ui-switch>
</div>
<ui-switch v-model="showPostFormOnTopOfTl">%i18n:@post-form-on-timeline%</ui-switch>
<ui-switch v-model="suggestRecentHashtags">%i18n:@suggest-recent-hashtags%</ui-switch>
<ui-switch v-model="showClockOnHeader">%i18n:@show-clock-on-header%</ui-switch>
<ui-switch v-model="alwaysShowNsfw">%i18n:common.always-show-nsfw%</ui-switch>
<ui-switch v-model="showReplyTarget">%i18n:@show-reply-target%</ui-switch>
<ui-switch v-model="showMyRenotes">%i18n:@show-my-renotes%</ui-switch>
<ui-switch v-model="showRenotedMyNotes">%i18n:@show-renoted-my-notes%</ui-switch>
<ui-switch v-model="showLocalRenotes">%i18n:@show-local-renotes%</ui-switch>
<ui-switch v-model="showMaps">%i18n:@show-maps%</ui-switch>
<ui-switch v-model="disableAnimatedMfm">%i18n:common.disable-animated-mfm%</ui-switch>
<ui-switch v-model="games_reversi_showBoardLabels">%i18n:common.show-reversi-board-labels%</ui-switch>
<ui-switch v-model="games_reversi_useContrastStones">%i18n:common.use-contrast-reversi-stones%</ui-switch>
</section>
<section>
<ui-switch v-model="showPostFormOnTopOfTl">%i18n:@post-form-on-timeline%</ui-switch>
<ui-switch v-model="suggestRecentHashtags">%i18n:@suggest-recent-hashtags%</ui-switch>
<ui-switch v-model="showClockOnHeader">%i18n:@show-clock-on-header%</ui-switch>
<ui-switch v-model="alwaysShowNsfw">%i18n:common.always-show-nsfw%</ui-switch>
<ui-switch v-model="showReplyTarget">%i18n:@show-reply-target%</ui-switch>
<ui-switch v-model="showMyRenotes">%i18n:@show-my-renotes%</ui-switch>
<ui-switch v-model="showRenotedMyNotes">%i18n:@show-renoted-my-notes%</ui-switch>
<ui-switch v-model="showLocalRenotes">%i18n:@show-local-renotes%</ui-switch>
<ui-switch v-model="showMaps">%i18n:@show-maps%</ui-switch>
<ui-switch v-model="disableAnimatedMfm">%i18n:common.disable-animated-mfm%</ui-switch>
<ui-switch v-model="games_reversi_showBoardLabels">%i18n:common.show-reversi-board-labels%</ui-switch>
<ui-switch v-model="games_reversi_useContrastStones">%i18n:common.use-contrast-reversi-stones%</ui-switch>
</section>
</ui-card>
<ui-card class="web" v-show="page == 'web'">
<div slot="title">%fa:volume-up% %i18n:@sound%</div>
<section>
<header>%i18n:@navbar-position%</header>
<ui-radio v-model="navbar" value="top">%i18n:@navbar-position-top%</ui-radio>
<ui-radio v-model="navbar" value="left">%i18n:@navbar-position-left%</ui-radio>
<ui-radio v-model="navbar" value="right">%i18n:@navbar-position-right%</ui-radio>
</section>
</section>
<section class="web" v-show="page == 'web'">
<h1>%i18n:@sound%</h1>
<ui-switch v-model="enableSounds">
%i18n:@enable-sounds%
<span slot="desc">%i18n:@enable-sounds-desc%</span>
</ui-switch>
<label>%i18n:@volume%</label>
<input type="range"
v-model="soundVolume"
:disabled="!enableSounds"
max="1"
step="0.1"
/>
<button class="ui button" @click="soundTest">%fa:volume-up% %i18n:@test%</button>
</section>
<section class="web" v-show="page == 'web'">
<h1>%i18n:@mobile%</h1>
<ui-switch v-model="disableViaMobile">%i18n:@disable-via-mobile%</ui-switch>
</section>
<section class="web" v-show="page == 'web'">
<h1>%i18n:@language%</h1>
<select v-model="lang" placeholder="%i18n:@pick-language%">
<optgroup label="%i18n:@recommended%">
<option value="">%i18n:@auto%</option>
</optgroup>
<optgroup label="%i18n:@specify-language%">
<option v-for="x in langs" :value="x[0]" :key="x[0]">{{ x[1] }}</option>
</optgroup>
</select>
<div class="none ui info">
<p>%fa:info-circle%%i18n:@language-desc%</p>
</div>
</section>
<section class="web" v-show="page == 'web'">
<h1>%i18n:@cache%</h1>
<button class="ui button" @click="clean">%i18n:@clean-cache%</button>
<div class="none ui info warn">
<p>%fa:exclamation-triangle%%i18n:@cache-warn%</p>
</div>
</section>
<section class="notification" v-show="page == 'notification'">
<h1>%i18n:@notification%</h1>
<ui-switch v-model="$store.state.i.settings.autoWatch" @change="onChangeAutoWatch">
%i18n:@auto-watch%
<span slot="desc">%i18n:@auto-watch-desc%</span>
</ui-switch>
</section>
<section class="drive" v-show="page == 'drive'">
<h1>%i18n:@drive%</h1>
<x-drive/>
</section>
<section class="hashtags" v-show="page == 'hashtags'">
<h1>%i18n:@tags%</h1>
<x-tags/>
</section>
<section class="mute" v-show="page == 'mute'">
<h1>%i18n:@mute%</h1>
<x-mute/>
</section>
<section class="apps" v-show="page == 'apps'">
<h1>%i18n:@apps%</h1>
<x-apps/>
</section>
<section class="twitter" v-show="page == 'twitter'">
<h1>Twitter</h1>
<mk-twitter-setting/>
</section>
<section class="password" v-show="page == 'security'">
<h1>%i18n:@password%</h1>
<x-password/>
</section>
<section class="2fa" v-show="page == 'security'">
<h1>%i18n:@2fa%</h1>
<x-2fa/>
</section>
<section class="signin" v-show="page == 'security'">
<h1>%i18n:@signin%</h1>
<x-signins/>
</section>
<section class="api" v-show="page == 'api'">
<h1>API</h1>
<x-api/>
</section>
<section class="other" v-show="page == 'other'">
<h1>%i18n:@about%</h1>
<p v-if="meta">%i18n:@operator%: <i><a :href="meta.maintainer.url" target="_blank">{{ meta.maintainer.name }}</a></i></p>
</section>
<section class="other" v-show="page == 'other'">
<h1>%i18n:@update%</h1>
<p>
<span>%i18n:@version% <i>{{ version }}</i></span>
<template v-if="latestVersion !== undefined">
<br>
<span>%i18n:@latest-version% <i>{{ latestVersion ? latestVersion : version }}</i></span>
</template>
</p>
<button class="ui button block" @click="checkForUpdate" :disabled="checkingForUpdate">
<template v-if="checkingForUpdate">%i18n:@update-checking%<mk-ellipsis/></template>
<template v-else>%i18n:@do-update%</template>
</button>
<details>
<summary>%i18n:@update-settings%</summary>
<ui-switch v-model="preventUpdate">
%i18n:@prevent-update%
<span slot="desc">%i18n:@prevent-update-desc%</span>
<ui-switch v-model="enableSounds">
%i18n:@enable-sounds%
<span slot="desc">%i18n:@enable-sounds-desc%</span>
</ui-switch>
</details>
</section>
<label>%i18n:@volume%</label>
<input type="range"
v-model="soundVolume"
:disabled="!enableSounds"
max="1"
step="0.1"
/>
<ui-button @click="soundTest">%fa:volume-up% %i18n:@test%</ui-button>
</section>
</ui-card>
<section class="other" v-show="page == 'other'">
<h1>%i18n:@advanced-settings%</h1>
<ui-switch v-model="debug">
%i18n:@debug-mode%
<span slot="desc">%i18n:@debug-mode-desc%</span>
</ui-switch>
<ui-switch v-model="enableExperimentalFeatures">
%i18n:@experimental%
<span slot="desc">%i18n:@experimental-desc%</span>
</ui-switch>
</section>
<ui-card class="web" v-show="page == 'web'">
<div slot="title">%fa:language% %i18n:@language%</div>
<section class="fit-top">
<ui-select v-model="lang" placeholder="%i18n:@pick-language%">
<optgroup label="%i18n:@recommended%">
<option value="">%i18n:@auto%</option>
</optgroup>
<optgroup label="%i18n:@specify-language%">
<option v-for="x in langs" :value="x[0]" :key="x[0]">{{ x[1] }}</option>
</optgroup>
</ui-select>
<div class="none ui info">
<p>%fa:info-circle%%i18n:@language-desc%</p>
</div>
</section>
</ui-card>
<ui-card class="web" v-show="page == 'web'">
<div slot="title">%fa:trash-alt R% %i18n:@cache%</div>
<section>
<ui-button @click="clean">%i18n:@clean-cache%</ui-button>
<div class="none ui info warn">
<p>%fa:exclamation-triangle%%i18n:@cache-warn%</p>
</div>
</section>
</ui-card>
<ui-card class="notification" v-show="page == 'notification'">
<div slot="title">%fa:bell R% %i18n:@notification%</div>
<section>
<ui-switch v-model="$store.state.i.settings.autoWatch" @change="onChangeAutoWatch">
%i18n:@auto-watch%
<span slot="desc">%i18n:@auto-watch-desc%</span>
</ui-switch>
</section>
</ui-card>
<ui-card class="drive" v-show="page == 'drive'">
<div slot="title">%fa:cloud% %i18n:@drive%</div>
<section>
<x-drive/>
</section>
</ui-card>
<ui-card class="hashtags" v-show="page == 'hashtags'">
<div slot="title">%fa:hashtag% %i18n:@tags%</div>
<section>
<x-tags/>
</section>
</ui-card>
<ui-card class="mute" v-show="page == 'mute'">
<div slot="title">%fa:ban% %i18n:@mute%</div>
<section>
<x-mute/>
</section>
</ui-card>
<ui-card class="apps" v-show="page == 'apps'">
<div slot="title">%fa:puzzle-piece% %i18n:@apps%</div>
<section>
<x-apps/>
</section>
</ui-card>
<ui-card class="password" v-show="page == 'security'">
<div slot="title">%fa:unlock-alt% %i18n:@password%</div>
<section>
<x-password/>
</section>
</ui-card>
<ui-card class="2fa" v-show="page == 'security'">
<div slot="title">%fa:mobile-alt% %i18n:@2fa%</div>
<section>
<x-2fa/>
</section>
</ui-card>
<ui-card class="signin" v-show="page == 'security'">
<div slot="title">%fa:sign-in-alt% %i18n:@signin%</div>
<section>
<x-signins/>
</section>
</ui-card>
<ui-card class="api" v-show="page == 'api'">
<div slot="title">%fa:key% API</div>
<section class="fit-top">
<x-api/>
</section>
</ui-card>
<ui-card class="other" v-show="page == 'other'">
<div slot="title">%fa:info-circle% %i18n:@about%</div>
<section>
<p v-if="meta">%i18n:@operator%: <i><a :href="meta.maintainer.url" target="_blank">{{ meta.maintainer.name }}</a></i></p>
</section>
</ui-card>
<ui-card class="other" v-show="page == 'other'">
<div slot="title">%fa:sync-alt% %i18n:@update%</div>
<section>
<p>
<span>%i18n:@version% <i>{{ version }}</i></span>
<template v-if="latestVersion !== undefined">
<br>
<span>%i18n:@latest-version% <i>{{ latestVersion ? latestVersion : version }}</i></span>
</template>
</p>
<button class="ui button block" @click="checkForUpdate" :disabled="checkingForUpdate">
<template v-if="checkingForUpdate">%i18n:@update-checking%<mk-ellipsis/></template>
<template v-else>%i18n:@do-update%</template>
</button>
<details>
<summary>%i18n:@update-settings%</summary>
<ui-switch v-model="preventUpdate">
%i18n:@prevent-update%
<span slot="desc">%i18n:@prevent-update-desc%</span>
</ui-switch>
</details>
</section>
</ui-card>
<ui-card class="other" v-show="page == 'other'">
<div slot="title">%fa:cogs% %i18n:@advanced-settings%</div>
<section>
<ui-switch v-model="debug">
%i18n:@debug-mode%
<span slot="desc">%i18n:@debug-mode-desc%</span>
</ui-switch>
<ui-switch v-model="enableExperimentalFeatures">
%i18n:@experimental%
<span slot="desc">%i18n:@experimental-desc%</span>
</ui-switch>
</section>
</ui-card>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import XProfile from './settings.profile.vue';
import XMute from './settings.mute.vue';
import XPassword from './settings.password.vue';
import X2fa from './settings.2fa.vue';
@ -253,7 +291,6 @@ import checkForUpdate from '../../../common/scripts/check-for-update';
export default Vue.extend({
components: {
XProfile,
XMute,
XPassword,
X2fa,
@ -295,6 +332,11 @@ export default Vue.extend({
set(value) { this.$store.commit('device/set', { key: 'autoPopout', value }); }
},
deckNav: {
get() { return this.$store.state.settings.deckNav; },
set(value) { this.$store.commit('settings/set', { key: 'deckNav', value }); }
},
darkmode: {
get() { return this.$store.state.device.darkmode; },
set(value) { this.$store.commit('device/set', { key: 'darkmode', value }); }
@ -438,11 +480,6 @@ export default Vue.extend({
disableAnimatedMfm: {
get() { return this.$store.state.settings.disableAnimatedMfm; },
set(value) { this.$store.dispatch('settings/set', { key: 'disableAnimatedMfm', value }); }
},
disableViaMobile: {
get() { return this.$store.state.settings.disableViaMobile; },
set(value) { this.$store.dispatch('settings/set', { key: 'disableViaMobile', value }); }
}
},
created() {
@ -546,34 +583,10 @@ export default Vue.extend({
height 100%
flex auto
overflow auto
background var(--bg)
> section
margin 32px
color var(--text)
> h1
margin 0 0 1em 0
padding 0 0 8px 0
font-size 1em
border-bottom solid 1px var(--faceDivider)
&, >>> *
.ui.button.block
margin 16px 0
> section
margin 32px 0
> h2
margin 0 0 1em 0
padding 0 0 8px 0
font-size 1em
color var(--text)
border-bottom solid 1px var(--faceDivider)
> .web
> .div
border-bottom solid 1px var(--faceDivider)
margin 16px 0
</style>