natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

nanka iroiro

This commit is contained in:
syuilo 2018-09-05 13:47:26 +09:00
parent f77eaaa08a
commit 6fea2f52f1
8 changed files with 155 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
locales/ja-JP.yml
View File

@ -1355,6 +1355,9 @@ mobile/views/pages/settings.vue:
post-style: "投稿の表示スタイル" post-style: "投稿の表示スタイル"
post-style-standard: "標準" post-style-standard: "標準"
post-style-smart: "スマート" post-style-smart: "スマート"
notification-position: "通知の表示"
notification-position-bottom: "下"
notification-position-top: "上"
behavior: "動作" behavior: "動作"
fetch-on-scroll: "スクロールで自動読み込み" fetch-on-scroll: "スクロールで自動読み込み"
disable-via-mobile: "「モバイルからの投稿」フラグを付けない" disable-via-mobile: "「モバイルからの投稿」フラグを付けない"

27
src/client/app/common/views/components/ui/card.vue
View File

@ -24,19 +24,34 @@ export default Vue.extend({
root(isDark) root(isDark)
margin 16px margin 16px
padding 16px
color isDark ? #fff : #000 color isDark ? #fff : #000
background isDark ? #282C37 : #fff 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) 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)
@media (min-width 500px)
padding 32px
> header > header
font-weight normal padding 16px
font-size 24px font-weight bold
font-size 20px
color isDark ? #fff : #444 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
margin-bottom 16px
font-weight bold
color isDark ? #fff : #444
.ui-card[data-darkmode] .ui-card[data-darkmode]
root(true) root(true)

2
src/client/app/common/views/components/ui/radio.vue
View File

@ -55,7 +55,7 @@ export default Vue.extend({
root(isDark) root(isDark)
display inline-block display inline-block
margin 32px 32px 32px 0 margin 0 32px 0 0
cursor pointer cursor pointer
transition all 0.3s transition all 0.3s

7
src/client/app/common/views/components/ui/switch.vue
View File

@ -64,6 +64,12 @@ root(isDark)
cursor pointer cursor pointer
transition all 0.3s transition all 0.3s
&:first-child
margin-top 0
&:last-child
margin-bottom 0
> * > *
user-select none user-select none
@ -89,6 +95,7 @@ root(isDark)
> .button > .button
display inline-block display inline-block
flex-shrink 0
margin 3px 0 0 0 margin 3px 0 0 0
width 34px width 34px
height 14px height 14px

18
src/client/app/mobile/views/components/notify.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="mk-notify"> <div class="mk-notify" :class="pos">
<div> <div>
<mk-notification-preview :notification="notification"/> <mk-notification-preview :notification="notification"/>
</div> </div>
@ -12,11 +12,16 @@ import * as anime from 'animejs';
export default Vue.extend({ export default Vue.extend({
props: ['notification'], props: ['notification'],
computed: {
pos() {
return this.$store.state.device.mobileNotificationPosition;
}
},
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
anime({ anime({
targets: this.$el, targets: this.$el,
bottom: '0px', [this.pos]: '0px',
duration: 500, duration: 500,
easing: 'easeOutQuad' easing: 'easeOutQuad'
}); });
@ -24,7 +29,7 @@ export default Vue.extend({
setTimeout(() => { setTimeout(() => {
anime({ anime({
targets: this.$el, targets: this.$el,
bottom: `-${this.$el.offsetHeight}px`, [this.pos]: `-${this.$el.offsetHeight}px`,
duration: 500, duration: 500,
easing: 'easeOutQuad', easing: 'easeOutQuad',
complete: () => this.$destroy() complete: () => this.$destroy()
@ -41,7 +46,6 @@ export default Vue.extend({
position fixed position fixed
z-index 1024 z-index 1024
bottom -($height)
left 0 left 0
right 0 right 0
width 100% width 100%
@ -52,6 +56,12 @@ export default Vue.extend({
pointer-events none pointer-events none
font-size 80% font-size 80%
&.bottom
bottom -($height)
&.top
top -($height)
> div > div
height 100% height 100%
-webkit-backdrop-filter blur(2px) -webkit-backdrop-filter blur(2px)

118
src/client/app/mobile/views/pages/settings.vue
View File

@ -10,80 +10,101 @@
<ui-card> <ui-card>
<div slot="title">%fa:palette% %i18n:@design%</div> <div slot="title">%fa:palette% %i18n:@design%</div>
<ui-switch v-model="darkmode">%i18n:@dark-mode%</ui-switch> <section>
<ui-switch v-model="$store.state.settings.circleIcons" @change="onChangeCircleIcons">%i18n:@circle-icons%</ui-switch> <ui-switch v-model="darkmode">%i18n:@dark-mode%</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.circleIcons" @change="onChangeCircleIcons">%i18n:@circle-icons%</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.iLikeSushi" @change="onChangeILikeSushi">%i18n:common.i-like-sushi%</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.disableAnimatedMfm" @change="onChangeDisableAnimatedMfm">%i18n:common.disable-animated-mfm%</ui-switch>
<ui-switch v-model="$store.state.settings.games.reversi.useContrastStones" @change="onChangeUseContrastReversiStones">%i18n:common.use-contrast-reversi-stones%</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>
<div> <section>
<div>%i18n:@timeline%</div> <header>%i18n:@timeline%</header>
<ui-switch v-model="$store.state.settings.showReplyTarget" @change="onChangeShowReplyTarget">%i18n:@show-reply-target%</ui-switch> <div>
<ui-switch v-model="$store.state.settings.showMyRenotes" @change="onChangeShowMyRenotes">%i18n:@show-my-renotes%</ui-switch> <ui-switch v-model="$store.state.settings.showReplyTarget" @change="onChangeShowReplyTarget">%i18n:@show-reply-target%</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.showMyRenotes" @change="onChangeShowMyRenotes">%i18n:@show-my-renotes%</ui-switch>
<ui-switch v-model="$store.state.settings.showLocalRenotes" @change="onChangeShowLocalRenotes">%i18n:@show-local-renotes%</ui-switch> <ui-switch v-model="$store.state.settings.showRenotedMyNotes" @change="onChangeShowRenotedMyNotes">%i18n:@show-renoted-my-notes%</ui-switch>
</div> <ui-switch v-model="$store.state.settings.showLocalRenotes" @change="onChangeShowLocalRenotes">%i18n:@show-local-renotes%</ui-switch>
</div>
</section>
<div> <section>
<div>%i18n:@post-style%</div> <header>%i18n:@post-style%</header>
<ui-radio v-model="postStyle" value="standard">%i18n:@post-style-standard%</ui-radio> <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> <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>
<ui-card> <ui-card>
<div slot="title">%fa:cog% %i18n:@behavior%</div> <div slot="title">%fa:cog% %i18n:@behavior%</div>
<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> <section>
<ui-switch v-model="loadRawImages">%i18n:@load-raw-images%</ui-switch> <ui-switch v-model="$store.state.settings.fetchOnScroll" @change="onChangeFetchOnScroll">%i18n:@fetch-on-scroll%</ui-switch>
<ui-switch v-model="$store.state.settings.loadRemoteMedia" @change="onChangeLoadRemoteMedia">%i18n:@load-remote-media%</ui-switch> <ui-switch v-model="$store.state.settings.disableViaMobile" @change="onChangeDisableViaMobile">%i18n:@disable-via-mobile%</ui-switch>
<ui-switch v-model="lightmode">%i18n:@i-am-under-limited-internet%</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>
<ui-card> <ui-card>
<div slot="title">%fa:volume-up% %i18n:@sound%</div> <div slot="title">%fa:volume-up% %i18n:@sound%</div>
<ui-switch v-model="enableSounds">%i18n:@enable-sounds%</ui-switch> <section>
<ui-switch v-model="enableSounds">%i18n:@enable-sounds%</ui-switch>
</section>
</ui-card> </ui-card>
<ui-card> <ui-card>
<div slot="title">%fa:language% %i18n:@lang%</div> <div slot="title">%fa:language% %i18n:@lang%</div>
<ui-select v-model="lang" placeholder="%i18n:@auto%"> <section class="fit-top">
<optgroup label="%i18n:@recommended%"> <ui-select v-model="lang" placeholder="%i18n:@auto%">
<option value="">%i18n:@auto%</option> <optgroup label="%i18n:@recommended%">
</optgroup> <option value="">%i18n:@auto%</option>
</optgroup>
<optgroup label="%i18n:@specify-language%"> <optgroup label="%i18n:@specify-language%">
<option v-for="x in langs" :value="x[0]" :key="x[0]">{{ x[1] }}</option> <option v-for="x in langs" :value="x[0]" :key="x[0]">{{ x[1] }}</option>
</optgroup> </optgroup>
</ui-select> </ui-select>
<span>%fa:info-circle% %i18n:@lang-tip%</span> <span>%fa:info-circle% %i18n:@lang-tip%</span>
</section>
</ui-card> </ui-card>
<ui-card> <ui-card>
<div slot="title">%fa:B twitter% %i18n:@twitter%</div> <div slot="title">%fa:B twitter% %i18n:@twitter%</div>
<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> <section>
<p> <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>
<a :href="`${apiUrl}/connect/twitter`" target="_blank">{{ $store.state.i.twitter ? '%i18n:@twitter-reconnect%' : '%i18n:@twitter-connect%' }}</a> <p>
<span v-if="$store.state.i.twitter"> or </span> <a :href="`${apiUrl}/connect/twitter`" target="_blank">{{ $store.state.i.twitter ? '%i18n:@twitter-reconnect%' : '%i18n:@twitter-connect%' }}</a>
<a :href="`${apiUrl}/disconnect/twitter`" target="_blank" v-if="$store.state.i.twitter">%i18n:@twitter-disconnect%</a> <span v-if="$store.state.i.twitter"> or </span>
</p> <a :href="`${apiUrl}/disconnect/twitter`" target="_blank" v-if="$store.state.i.twitter">%i18n:@twitter-disconnect%</a>
</p>
</section>
</ui-card> </ui-card>
<ui-card> <ui-card>
<div slot="title">%fa:sync-alt% %i18n:@update%</div> <div slot="title">%fa:sync-alt% %i18n:@update%</div>
<div>%i18n:@version% <i>{{ version }}</i></div> <section>
<template v-if="latestVersion !== undefined"> <div>%i18n:@version% <i>{{ version }}</i></div>
<div>%i18n:@latest-version% <i>{{ latestVersion ? latestVersion : version }}</i></div> <template v-if="latestVersion !== undefined">
</template> <div>%i18n:@latest-version% <i>{{ latestVersion ? latestVersion : version }}</i></div>
<ui-button @click="checkForUpdate" :disabled="checkingForUpdate"> </template>
<template v-if="checkingForUpdate">%i18n:@update-checking%<mk-ellipsis/></template> <ui-button @click="checkForUpdate" :disabled="checkingForUpdate">
<template v-else>%i18n:@check-for-updates%</template> <template v-if="checkingForUpdate">%i18n:@update-checking%<mk-ellipsis/></template>
</ui-button> <template v-else>%i18n:@check-for-updates%</template>
</ui-button>
</section>
</ui-card> </ui-card>
</div> </div>
@ -134,6 +155,11 @@ export default Vue.extend({
set(value) { this.$store.commit('device/set', { key: 'postStyle', value }); } 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: { lightmode: {
get() { return this.$store.state.device.lightmode; }, get() { return this.$store.state.device.lightmode; },
set(value) { this.$store.commit('device/set', { key: 'lightmode', value }); } set(value) { this.$store.commit('device/set', { key: 'lightmode', value }); }
@ -273,7 +299,7 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) root(isDark)
margin 0 auto margin 0 auto
max-width 500px max-width 600px
width 100% width 100%
> .signin-as > .signin-as

68
src/client/app/mobile/views/pages/settings/settings.profile.vue
View File

@ -2,47 +2,49 @@
<ui-card> <ui-card>
<div slot="title">%fa:user% %i18n:@title%</div> <div slot="title">%fa:user% %i18n:@title%</div>
<ui-form :disabled="saving"> <section class="fit-top">
<ui-input v-model="name" :max="30"> <ui-form :disabled="saving">
<span>%i18n:@name%</span> <ui-input v-model="name" :max="30">
</ui-input> <span>%i18n:@name%</span>
</ui-input>
<ui-input v-model="username" readonly> <ui-input v-model="username" readonly>
<span>%i18n:@account%</span> <span>%i18n:@account%</span>
<span slot="prefix">@</span> <span slot="prefix">@</span>
<span slot="suffix">@{{ host }}</span> <span slot="suffix">@{{ host }}</span>
</ui-input> </ui-input>
<ui-input v-model="location"> <ui-input v-model="location">
<span>%i18n:@location%</span> <span>%i18n:@location%</span>
<span slot="prefix">%fa:map-marker-alt%</span> <span slot="prefix">%fa:map-marker-alt%</span>
</ui-input> </ui-input>
<ui-input v-model="birthday" type="date"> <ui-input v-model="birthday" type="date">
<span>%i18n:@birthday%</span> <span>%i18n:@birthday%</span>
<span slot="prefix">%fa:birthday-cake%</span> <span slot="prefix">%fa:birthday-cake%</span>
</ui-input> </ui-input>
<ui-textarea v-model="description" :max="500"> <ui-textarea v-model="description" :max="500">
<span>%i18n:@description%</span> <span>%i18n:@description%</span>
</ui-textarea> </ui-textarea>
<ui-input type="file" @change="onAvatarChange"> <ui-input type="file" @change="onAvatarChange">
<span>%i18n:@avatar%</span> <span>%i18n:@avatar%</span>
<span slot="icon">%fa:image%</span> <span slot="icon">%fa:image%</span>
<span slot="text" v-if="avatarUploading">%i18n:@uploading%<mk-ellipsis/></span> <span slot="text" v-if="avatarUploading">%i18n:@uploading%<mk-ellipsis/></span>
</ui-input> </ui-input>
<ui-input type="file" @change="onBannerChange"> <ui-input type="file" @change="onBannerChange">
<span>%i18n:@banner%</span> <span>%i18n:@banner%</span>
<span slot="icon">%fa:image%</span> <span slot="icon">%fa:image%</span>
<span slot="text" v-if="bannerUploading">%i18n:@uploading%<mk-ellipsis/></span> <span slot="text" v-if="bannerUploading">%i18n:@uploading%<mk-ellipsis/></span>
</ui-input> </ui-input>
<ui-switch v-model="isCat">%i18n:@is-cat%</ui-switch> <ui-switch v-model="isCat">%i18n:@is-cat%</ui-switch>
<ui-button @click="save">%i18n:@save%</ui-button> <ui-button @click="save">%i18n:@save%</ui-button>
</ui-form> </ui-form>
</section>
</ui-card> </ui-card>
</template> </template>

3
src/client/app/store.ts
View File

@ -43,7 +43,8 @@ const defaultDeviceSettings = {
debug: false, debug: false,
lightmode: false, lightmode: false,
loadRawImages: false, loadRawImages: false,
postStyle: 'standard' postStyle: 'standard',
mobileNotificationPosition: 'bottom'
}; };
export default (os: MiOS) => new Vuex.Store({ export default (os: MiOS) => new Vuex.Store({