投稿の表示スタイルを選択できるように

This commit is contained in:
syuilo 2018-05-21 03:08:51 +09:00
parent 42c811a523
commit a53d786515
5 changed files with 42 additions and 6 deletions

View File

@ -841,6 +841,9 @@ mobile/views/pages/settings.vue:
show-reply-target: "リプライ先を表示する" show-reply-target: "リプライ先を表示する"
show-my-renotes: "自分の行ったRenoteを表示する" show-my-renotes: "自分の行ったRenoteを表示する"
show-renoted-my-notes: "Renoteされた自分の投稿を表示する" show-renoted-my-notes: "Renoteされた自分の投稿を表示する"
post-style: "投稿の表示スタイル"
post-style-standard: "標準"
post-style-smart: "スマート"
behavior: "動作" behavior: "動作"
fetch-on-scroll: "スクロールで自動読み込み" fetch-on-scroll: "スクロールで自動読み込み"
disable-via-mobile: "「モバイルからの投稿」フラグを付けない" disable-via-mobile: "「モバイルからの投稿」フラグを付けない"

View File

@ -5,7 +5,7 @@
import Vue from 'vue'; import Vue from 'vue';
import VueRouter from 'vue-router'; import VueRouter from 'vue-router';
import { MdCard, MdButton, MdField, MdMenu, MdList, MdSwitch, MdSubheader, MdDialog, MdDialogAlert } from 'vue-material/dist/components'; import { MdCard, MdButton, MdField, MdMenu, MdList, MdSwitch, MdSubheader, MdDialog, MdDialogAlert, MdRadio } from 'vue-material/dist/components';
import 'vue-material/dist/vue-material.min.css'; import 'vue-material/dist/vue-material.min.css';
import 'vue-material/dist/theme/default.css'; import 'vue-material/dist/theme/default.css';
@ -48,6 +48,7 @@ Vue.use(MdSwitch);
Vue.use(MdSubheader); Vue.use(MdSubheader);
Vue.use(MdDialog); Vue.use(MdDialog);
Vue.use(MdDialogAlert); Vue.use(MdDialogAlert);
Vue.use(MdRadio);
/** /**
* init * init

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="note" :class="{ renote: isRenote }"> <div class="note" :class="{ renote: isRenote, smart: $store.state.device.postStyle == 'smart' }">
<div class="reply-to" v-if="p.reply && (!os.isSignedIn || clientSettings.showReplyTarget)"> <div class="reply-to" v-if="p.reply && (!os.isSignedIn || clientSettings.showReplyTarget)">
<x-sub :note="p.reply"/> <x-sub :note="p.reply"/>
</div> </div>
@ -12,9 +12,10 @@
<mk-time :time="note.createdAt"/> <mk-time :time="note.createdAt"/>
</div> </div>
<article> <article>
<mk-avatar class="avatar" :user="p.user"/> <mk-avatar class="avatar" :user="p.user" v-if="$store.state.device.postStyle != 'smart'"/>
<div class="main"> <div class="main">
<header> <header>
<mk-avatar class="avatar" :user="p.user" v-if="$store.state.device.postStyle == 'smart'"/>
<router-link class="name" :to="p.user | userPage">{{ p.user | userName }}</router-link> <router-link class="name" :to="p.user | userPage">{{ p.user | userName }}</router-link>
<span class="is-bot" v-if="p.user.host === null && p.user.isBot">bot</span> <span class="is-bot" v-if="p.user.host === null && p.user.isBot">bot</span>
<span class="username"><mk-acct :user="p.user"/></span> <span class="username"><mk-acct :user="p.user"/></span>
@ -262,6 +263,15 @@ root(isDark)
@media (min-width 500px) @media (min-width 500px)
font-size 16px font-size 16px
&.smart
> article
> .main
width 100%
> header
align-items center
margin-bottom 4px
> .renote > .renote
display flex display flex
align-items center align-items center
@ -279,11 +289,15 @@ root(isDark)
.avatar .avatar
display inline-block display inline-block
width 28px width 20px
height 28px height 20px
margin 0 8px 0 0 margin 0 8px 0 0
border-radius 6px border-radius 6px
@media (min-width 500px)
width 28px
height 28px
[data-fa] [data-fa]
margin-right 4px margin-right 4px
@ -352,13 +366,18 @@ root(isDark)
@media (min-width 500px) @media (min-width 500px)
margin-bottom 2px margin-bottom 2px
> .avatar
margin-right 8px
width 20px
height 20px
border-radius 100%
> .name > .name
display block display block
margin 0 0.5em 0 0 margin 0 0.5em 0 0
padding 0 padding 0
overflow hidden overflow hidden
color isDark ? #fff : #627079 color isDark ? #fff : #627079
font-size 1em
font-weight bold font-weight bold
text-decoration none text-decoration none
text-overflow ellipsis text-overflow ellipsis

View File

@ -35,6 +35,13 @@
<md-switch v-model="clientSettings.showRenotedMyNotes" @change="onChangeShowRenotedMyNotes">%i18n:@show-renoted-my-notes%</md-switch> <md-switch v-model="clientSettings.showRenotedMyNotes" @change="onChangeShowRenotedMyNotes">%i18n:@show-renoted-my-notes%</md-switch>
</div> </div>
</div> </div>
<div>
<div class="md-body-2">%i18n:@post-style%</div>
<md-radio v-model="postStyle" value="standard">%i18n:@post-style-standard%</md-radio>
<md-radio v-model="postStyle" value="smart">%i18n:@post-style-smart%</md-radio>
</div>
</md-card-content> </md-card-content>
</md-card> </md-card>
@ -145,6 +152,11 @@ export default Vue.extend({
return Vue.filter('userName')((this as any).os.i); return Vue.filter('userName')((this as any).os.i);
}, },
postStyle: {
get() { return this.$store.state.device.postStyle; },
set(value) { this.$store.commit('device/set', { key: 'postStyle', 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 }); }

View File

@ -25,6 +25,7 @@ const defaultDeviceSettings = {
preventUpdate: false, preventUpdate: false,
debug: false, debug: false,
lightmode: false, lightmode: false,
postStyle: 'standard'
}; };
export default (os: MiOS) => new Vuex.Store({ export default (os: MiOS) => new Vuex.Store({