From a53d786515151303adc4000da063ed9657483189 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Mon, 21 May 2018 03:08:51 +0900
Subject: [PATCH] =?UTF-8?q?=E6=8A=95=E7=A8=BF=E3=81=AE=E8=A1=A8=E7=A4=BA?=
 =?UTF-8?q?=E3=82=B9=E3=82=BF=E3=82=A4=E3=83=AB=E3=82=92=E9=81=B8=E6=8A=9E?=
 =?UTF-8?q?=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 locales/ja.yml                                |  3 ++
 src/client/app/mobile/script.ts               |  3 +-
 .../app/mobile/views/components/note.vue      | 29 +++++++++++++++----
 .../app/mobile/views/pages/settings.vue       | 12 ++++++++
 src/client/app/store.ts                       |  1 +
 5 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/locales/ja.yml b/locales/ja.yml
index 953556eed..645dec909 100644
--- a/locales/ja.yml
+++ b/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: "「モバイルからの投稿」フラグを付けない"
diff --git a/src/client/app/mobile/script.ts b/src/client/app/mobile/script.ts
index be82ee862..c73c0097c 100644
--- a/src/client/app/mobile/script.ts
+++ b/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
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index 37b032886..b940b6b20 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/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
-			height 28px
+			width 20px
+			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
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index 3b0df8754..034e8525a 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/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 }); }
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index dceb51f2f..972a994fb 100644
--- a/src/client/app/store.ts
+++ b/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({