nanka iroiro
This commit is contained in:
syuilo
parent
f77eaaa08a
commit
6fea2f52f1
|
|
@ -1355,6 +1355,9 @@ mobile/views/pages/settings.vue:
|
|||
post-style: "投稿の表示スタイル"
|
||||
post-style-standard: "標準"
|
||||
post-style-smart: "スマート"
|
||||
notification-position: "通知の表示"
|
||||
notification-position-bottom: "下"
|
||||
notification-position-top: "上"
|
||||
behavior: "動作"
|
||||
fetch-on-scroll: "スクロールで自動読み込み"
|
||||
disable-via-mobile: "「モバイルからの投稿」フラグを付けない"
|
||||
|
|
|
|||
|
|
@ -24,17 +24,32 @@ export default Vue.extend({
|
|||
|
||||
root(isDark)
|
||||
margin 16px
|
||||
padding 16px
|
||||
color isDark ? #fff : #000
|
||||
background isDark ? #282C37 : #fff
|
||||
box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
|
||||
|
||||
> header
|
||||
padding 16px
|
||||
font-weight bold
|
||||
font-size 20px
|
||||
color isDark ? #fff : #444
|
||||
|
||||
@media (min-width 500px)
|
||||
padding 24px 32px
|
||||
|
||||
> section
|
||||
padding 20px 16px
|
||||
border-top solid 1px isDark ? rgba(#000, 0.3) : rgba(#000, 0.1)
|
||||
|
||||
@media (min-width 500px)
|
||||
padding 32px
|
||||
|
||||
&.fit-top
|
||||
padding-top 0
|
||||
|
||||
> header
|
||||
font-weight normal
|
||||
font-size 24px
|
||||
margin-bottom 16px
|
||||
font-weight bold
|
||||
color isDark ? #fff : #444
|
||||
|
||||
.ui-card[data-darkmode]
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ export default Vue.extend({
|
|||
|
||||
root(isDark)
|
||||
display inline-block
|
||||
margin 32px 32px 32px 0
|
||||
margin 0 32px 0 0
|
||||
cursor pointer
|
||||
transition all 0.3s
|
||||
|
||||
|
|
|
|||
|
|
@ -64,6 +64,12 @@ root(isDark)
|
|||
cursor pointer
|
||||
transition all 0.3s
|
||||
|
||||
&:first-child
|
||||
margin-top 0
|
||||
|
||||
&:last-child
|
||||
margin-bottom 0
|
||||
|
||||
> *
|
||||
user-select none
|
||||
|
||||
|
|
@ -89,6 +95,7 @@ root(isDark)
|
|||
|
||||
> .button
|
||||
display inline-block
|
||||
flex-shrink 0
|
||||
margin 3px 0 0 0
|
||||
width 34px
|
||||
height 14px
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="mk-notify">
|
||||
<div class="mk-notify" :class="pos">
|
||||
<div>
|
||||
<mk-notification-preview :notification="notification"/>
|
||||
</div>
|
||||
|
|
@ -12,11 +12,16 @@ import * as anime from 'animejs';
|
|||
|
||||
export default Vue.extend({
|
||||
props: ['notification'],
|
||||
computed: {
|
||||
pos() {
|
||||
return this.$store.state.device.mobileNotificationPosition;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
anime({
|
||||
targets: this.$el,
|
||||
bottom: '0px',
|
||||
[this.pos]: '0px',
|
||||
duration: 500,
|
||||
easing: 'easeOutQuad'
|
||||
});
|
||||
|
|
@ -24,7 +29,7 @@ export default Vue.extend({
|
|||
setTimeout(() => {
|
||||
anime({
|
||||
targets: this.$el,
|
||||
bottom: `-${this.$el.offsetHeight}px`,
|
||||
[this.pos]: `-${this.$el.offsetHeight}px`,
|
||||
duration: 500,
|
||||
easing: 'easeOutQuad',
|
||||
complete: () => this.$destroy()
|
||||
|
|
@ -41,7 +46,6 @@ export default Vue.extend({
|
|||
|
||||
position fixed
|
||||
z-index 1024
|
||||
bottom -($height)
|
||||
left 0
|
||||
right 0
|
||||
width 100%
|
||||
|
|
@ -52,6 +56,12 @@ export default Vue.extend({
|
|||
pointer-events none
|
||||
font-size 80%
|
||||
|
||||
&.bottom
|
||||
bottom -($height)
|
||||
|
||||
&.top
|
||||
top -($height)
|
||||
|
||||
> div
|
||||
height 100%
|
||||
-webkit-backdrop-filter blur(2px)
|
||||
|
|
|
|||
|
|
@ -10,46 +10,62 @@
|
|||
<ui-card>
|
||||
<div slot="title">%fa:palette% %i18n:@design%</div>
|
||||
|
||||
<section>
|
||||
<ui-switch v-model="darkmode">%i18n:@dark-mode%</ui-switch>
|
||||
<ui-switch v-model="$store.state.settings.circleIcons" @change="onChangeCircleIcons">%i18n:@circle-icons%</ui-switch>
|
||||
<ui-switch v-model="$store.state.settings.iLikeSushi" @change="onChangeILikeSushi">%i18n:common.i-like-sushi%</ui-switch>
|
||||
<ui-switch v-model="$store.state.settings.disableAnimatedMfm" @change="onChangeDisableAnimatedMfm">%i18n:common.disable-animated-mfm%</ui-switch>
|
||||
<ui-switch v-model="$store.state.settings.games.reversi.showBoardLabels" @change="onChangeReversiBoardLabels">%i18n:common.show-reversi-board-labels%</ui-switch>
|
||||
<ui-switch v-model="$store.state.settings.games.reversi.useContrastStones" @change="onChangeUseContrastReversiStones">%i18n:common.use-contrast-reversi-stones%</ui-switch>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<header>%i18n:@timeline%</header>
|
||||
<div>
|
||||
<div>%i18n:@timeline%</div>
|
||||
<ui-switch v-model="$store.state.settings.showReplyTarget" @change="onChangeShowReplyTarget">%i18n:@show-reply-target%</ui-switch>
|
||||
<ui-switch v-model="$store.state.settings.showMyRenotes" @change="onChangeShowMyRenotes">%i18n:@show-my-renotes%</ui-switch>
|
||||
<ui-switch v-model="$store.state.settings.showRenotedMyNotes" @change="onChangeShowRenotedMyNotes">%i18n:@show-renoted-my-notes%</ui-switch>
|
||||
<ui-switch v-model="$store.state.settings.showLocalRenotes" @change="onChangeShowLocalRenotes">%i18n:@show-local-renotes%</ui-switch>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div>
|
||||
<div>%i18n:@post-style%</div>
|
||||
<section>
|
||||
<header>%i18n:@post-style%</header>
|
||||
<ui-radio v-model="postStyle" value="standard">%i18n:@post-style-standard%</ui-radio>
|
||||
<ui-radio v-model="postStyle" value="smart">%i18n:@post-style-smart%</ui-radio>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<header>%i18n:@notification-position%</header>
|
||||
<ui-radio v-model="mobileNotificationPosition" value="bottom">%i18n:@notification-position-bottom%</ui-radio>
|
||||
<ui-radio v-model="mobileNotificationPosition" value="top">%i18n:@notification-position-top%</ui-radio>
|
||||
</section>
|
||||
</ui-card>
|
||||
|
||||
<ui-card>
|
||||
<div slot="title">%fa:cog% %i18n:@behavior%</div>
|
||||
|
||||
<section>
|
||||
<ui-switch v-model="$store.state.settings.fetchOnScroll" @change="onChangeFetchOnScroll">%i18n:@fetch-on-scroll%</ui-switch>
|
||||
<ui-switch v-model="$store.state.settings.disableViaMobile" @change="onChangeDisableViaMobile">%i18n:@disable-via-mobile%</ui-switch>
|
||||
<ui-switch v-model="loadRawImages">%i18n:@load-raw-images%</ui-switch>
|
||||
<ui-switch v-model="$store.state.settings.loadRemoteMedia" @change="onChangeLoadRemoteMedia">%i18n:@load-remote-media%</ui-switch>
|
||||
<ui-switch v-model="lightmode">%i18n:@i-am-under-limited-internet%</ui-switch>
|
||||
</section>
|
||||
</ui-card>
|
||||
|
||||
<ui-card>
|
||||
<div slot="title">%fa:volume-up% %i18n:@sound%</div>
|
||||
|
||||
<section>
|
||||
<ui-switch v-model="enableSounds">%i18n:@enable-sounds%</ui-switch>
|
||||
</section>
|
||||
</ui-card>
|
||||
|
||||
<ui-card>
|
||||
<div slot="title">%fa:language% %i18n:@lang%</div>
|
||||
|
||||
<section class="fit-top">
|
||||
<ui-select v-model="lang" placeholder="%i18n:@auto%">
|
||||
<optgroup label="%i18n:@recommended%">
|
||||
<option value="">%i18n:@auto%</option>
|
||||
|
|
@ -60,22 +76,26 @@
|
|||
</optgroup>
|
||||
</ui-select>
|
||||
<span>%fa:info-circle% %i18n:@lang-tip%</span>
|
||||
</section>
|
||||
</ui-card>
|
||||
|
||||
<ui-card>
|
||||
<div slot="title">%fa:B twitter% %i18n:@twitter%</div>
|
||||
|
||||
<section>
|
||||
<p class="account" v-if="$store.state.i.twitter"><a :href="`https://twitter.com/${$store.state.i.twitter.screenName}`" target="_blank">@{{ $store.state.i.twitter.screenName }}</a></p>
|
||||
<p>
|
||||
<a :href="`${apiUrl}/connect/twitter`" target="_blank">{{ $store.state.i.twitter ? '%i18n:@twitter-reconnect%' : '%i18n:@twitter-connect%' }}</a>
|
||||
<span v-if="$store.state.i.twitter"> or </span>
|
||||
<a :href="`${apiUrl}/disconnect/twitter`" target="_blank" v-if="$store.state.i.twitter">%i18n:@twitter-disconnect%</a>
|
||||
</p>
|
||||
</section>
|
||||
</ui-card>
|
||||
|
||||
<ui-card>
|
||||
<div slot="title">%fa:sync-alt% %i18n:@update%</div>
|
||||
|
||||
<section>
|
||||
<div>%i18n:@version% <i>{{ version }}</i></div>
|
||||
<template v-if="latestVersion !== undefined">
|
||||
<div>%i18n:@latest-version% <i>{{ latestVersion ? latestVersion : version }}</i></div>
|
||||
|
|
@ -84,6 +104,7 @@
|
|||
<template v-if="checkingForUpdate">%i18n:@update-checking%<mk-ellipsis/></template>
|
||||
<template v-else>%i18n:@check-for-updates%</template>
|
||||
</ui-button>
|
||||
</section>
|
||||
</ui-card>
|
||||
</div>
|
||||
|
||||
|
|
@ -134,6 +155,11 @@ export default Vue.extend({
|
|||
set(value) { this.$store.commit('device/set', { key: 'postStyle', value }); }
|
||||
},
|
||||
|
||||
mobileNotificationPosition: {
|
||||
get() { return this.$store.state.device.mobileNotificationPosition; },
|
||||
set(value) { this.$store.commit('device/set', { key: 'mobileNotificationPosition', value }); }
|
||||
},
|
||||
|
||||
lightmode: {
|
||||
get() { return this.$store.state.device.lightmode; },
|
||||
set(value) { this.$store.commit('device/set', { key: 'lightmode', value }); }
|
||||
|
|
@ -273,7 +299,7 @@ export default Vue.extend({
|
|||
<style lang="stylus" scoped>
|
||||
root(isDark)
|
||||
margin 0 auto
|
||||
max-width 500px
|
||||
max-width 600px
|
||||
width 100%
|
||||
|
||||
> .signin-as
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<ui-card>
|
||||
<div slot="title">%fa:user% %i18n:@title%</div>
|
||||
|
||||
<section class="fit-top">
|
||||
<ui-form :disabled="saving">
|
||||
<ui-input v-model="name" :max="30">
|
||||
<span>%i18n:@name%</span>
|
||||
|
|
@ -43,6 +44,7 @@
|
|||
|
||||
<ui-button @click="save">%i18n:@save%</ui-button>
|
||||
</ui-form>
|
||||
</section>
|
||||
</ui-card>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -43,7 +43,8 @@ const defaultDeviceSettings = {
|
|||
debug: false,
|
||||
lightmode: false,
|
||||
loadRawImages: false,
|
||||
postStyle: 'standard'
|
||||
postStyle: 'standard',
|
||||
mobileNotificationPosition: 'bottom'
|
||||
};
|
||||
|
||||
export default (os: MiOS) => new Vuex.Store({
|
||||
|
|
|
|||
Loading…
Reference in New Issue