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

locales/ja.yml

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

src/client/app/mobile/script.ts

@@ -5,7 +5,7 @@
 import Vue from 'vue';
 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/theme/default.css';
 
@@ -48,6 +48,7 @@ Vue.use(MdSwitch);
 Vue.use(MdSubheader);
 Vue.use(MdDialog);
 Vue.use(MdDialogAlert);
+Vue.use(MdRadio);
 
 /**
  * init

src/client/app/mobile/views/components/note.vue

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

src/client/app/mobile/views/pages/settings.vue

@@ -35,6 +35,13 @@
 							<md-switch v-model="clientSettings.showRenotedMyNotes" @change="onChangeShowRenotedMyNotes">%i18n:@show-renoted-my-notes%</md-switch>
 						</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>
 
@@ -145,6 +152,11 @@ export default Vue.extend({
 			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: {
 			get() { return this.$store.state.device.lightmode; },
 			set(value) { this.$store.commit('device/set', { key: 'lightmode', value }); }

src/client/app/store.ts

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