From bd8052fedb59ced318c5d59b1551c287267e1dce Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 16 Oct 2021 01:34:23 +0900
Subject: [PATCH] =?UTF-8?q?refactor(client):=20=E3=83=80=E3=83=9F=E3=83=BC?=
 =?UTF-8?q?=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88?=
 =?UTF-8?q?=E3=82=92=E4=BD=BF=E3=81=A3=E3=81=A6=E3=83=8E=E3=83=BC=E3=83=88?=
 =?UTF-8?q?=E3=83=97=E3=83=AC=E3=83=93=E3=83=A5=E3=83=BC=E3=81=99=E3=82=8B?=
 =?UTF-8?q?=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-JP.yml                      |  2 +-
 src/client/components/note-preview.vue | 98 ++++++++++++++++++++++++++
 src/client/components/post-form.vue    | 18 ++---
 3 files changed, 103 insertions(+), 15 deletions(-)
 create mode 100644 src/client/components/note-preview.vue

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 3111768189..358da897d0 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -766,7 +766,7 @@ middle: "中"
 low: "低"
 emailNotConfiguredWarning: "メールアドレスの設定がされていません。"
 ratio: "比率"
-notePreview: "ノートをプレビュー"
+previewNoteText: "本文をプレビュー"
 customCss: "カスタムCSS"
 customCssWarn: "この設定は必ず知識のある方が行ってください。不適切な設定を行うとクライアントが正常に使用できなくなる恐れがあります。"
 global: "グローバル"
diff --git a/src/client/components/note-preview.vue b/src/client/components/note-preview.vue
new file mode 100644
index 0000000000..a474a01341
--- /dev/null
+++ b/src/client/components/note-preview.vue
@@ -0,0 +1,98 @@
+<template>
+<div class="fefdfafb" v-size="{ min: [350, 500] }">
+	<MkAvatar class="avatar" :user="$i"/>
+	<div class="main">
+		<div class="header">
+			<MkUserName :user="$i"/>
+		</div>
+		<div class="body">
+			<div class="content">
+				<Mfm :text="text" :author="$i" :i="$i"/>
+			</div>
+		</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+	components: {
+	},
+
+	props: {
+		text: {
+			type: String,
+			required: true
+		}
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.fefdfafb {
+	display: flex;
+	margin: 0;
+	padding: 0;
+	overflow: clip;
+	font-size: 0.95em;
+
+	&.min-width_350px {
+		> .avatar {
+			margin: 0 10px 0 0;
+			width: 44px;
+			height: 44px;
+		}
+	}
+
+	&.min-width_500px {
+		> .avatar {
+			margin: 0 12px 0 0;
+			width: 48px;
+			height: 48px;
+		}
+	}
+
+	> .avatar {
+		flex-shrink: 0;
+		display: block;
+		margin: 0 10px 0 0;
+		width: 40px;
+		height: 40px;
+		border-radius: 8px;
+	}
+
+	> .main {
+		flex: 1;
+		min-width: 0;
+
+		> .header {
+			margin-bottom: 2px;
+		}
+
+		> .body {
+
+			> .cw {
+				cursor: default;
+				display: block;
+				margin: 0;
+				padding: 0;
+				overflow-wrap: break-word;
+
+				> .text {
+					margin-right: 8px;
+				}
+			}
+
+			> .content {
+				> .text {
+					cursor: default;
+					margin: 0;
+					padding: 0;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/client/components/post-form.vue b/src/client/components/post-form.vue
index 3b8db21099..7b4c5db46b 100644
--- a/src/client/components/post-form.vue
+++ b/src/client/components/post-form.vue
@@ -17,7 +17,7 @@
 				<span v-if="visibility === 'followers'"><i class="fas fa-unlock"></i></span>
 				<span v-if="visibility === 'specified'"><i class="fas fa-envelope"></i></span>
 			</button>
-			<button class="_button preview" @click="showPreview = !showPreview" :class="{ active: showPreview }" v-tooltip="$ts.notePreview"><i class="fas fa-file-code"></i></button>
+			<button class="_button preview" @click="showPreview = !showPreview" :class="{ active: showPreview }" v-tooltip="$ts.previewNoteText"><i class="fas fa-file-code"></i></button>
 			<button class="submit _buttonPrimary" :disabled="!canPost" @click="post" data-cy-open-post-form-submit>{{ submitText }}<i :class="reply ? 'fas fa-reply' : renote ? 'fas fa-quote-right' : 'fas fa-paper-plane'"></i></button>
 		</div>
 	</header>
@@ -41,7 +41,7 @@
 		<input v-show="withHashtags" ref="hashtags" class="hashtags" v-model="hashtags" :placeholder="$ts.hashtags" list="hashtags">
 		<XPostFormAttaches class="attaches" :files="files" @updated="updateFiles" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName"/>
 		<XPollEditor v-if="poll" :poll="poll" @destroyed="poll = null" @updated="onPollUpdate"/>
-		<XNoteSimple class="preview" v-if="showPreview" :note="draftedNote"/>
+		<XNotePreview class="preview" v-if="showPreview" :text="text"/>
 		<footer>
 			<button class="_button" @click="chooseFileFrom" v-tooltip="$ts.attachFile"><i class="fas fa-photo-video"></i></button>
 			<button class="_button" @click="togglePoll" :class="{ active: poll }" v-tooltip="$ts.poll"><i class="fas fa-poll-h"></i></button>
@@ -64,6 +64,7 @@ import insertTextAtCursor from 'insert-text-at-cursor';
 import { length } from 'stringz';
 import { toASCII } from 'punycode/';
 import XNoteSimple from './note-simple.vue';
+import XNotePreview from './note-preview.vue';
 import * as mfm from 'mfm-js';
 import { host, url } from '@client/config';
 import { erase, unique } from '../../prelude/array';
@@ -83,6 +84,7 @@ import { defaultStore } from '@client/store';
 export default defineComponent({
 	components: {
 		XNoteSimple,
+		XNotePreview,
 		XPostFormAttaches: defineAsyncComponent(() => import('./post-form-attaches.vue')),
 		XPollEditor: defineAsyncComponent(() => import('./poll-editor.vue')),
 		MkInfo,
@@ -223,18 +225,6 @@ export default defineComponent({
 			return this.$instance ? this.$instance.maxNoteTextLength : 1000;
 		},
 
-		draftedNote(): object {
-			return {
-				user: this.$i,
-				createdAt: new Date(),
-				visibility: this.visibility,
-				localOnly: this.localOnly,
-				cw: this.useCw ? this.cw : null,
-				text: this.text,
-				files: this.files,
-				poll: this.poll,
-			};
-		}
 		withHashtags: defaultStore.makeGetterSetter('postFormWithHashtags'),
 		hashtags: defaultStore.makeGetterSetter('postFormHashtags'),
 	},