Improve post form (#5326)

* Improve post form

* Remove local icon from button

3 files changed, 95 insertions, 35 deletions

diff --git a/src/client/app/common/scripts/post-form.ts b/src/client/app/common/scripts/post-form.ts
index 2b591ac659..9b155f7fcb 100644
--- a/src/client/app/common/scripts/post-form.ts
+++ b/src/client/app/common/scripts/post-form.ts
@@ -153,6 +153,10 @@ export default (opts) => ({
 		// デフォルト公開範囲
 		this.applyVisibility(this.$store.state.settings.rememberNoteVisibility ? (this.$store.state.device.visibility || this.$store.state.settings.defaultNoteVisibility) : this.$store.state.settings.defaultNoteVisibility);
 
+		if (this.reply && this.reply.localOnly) {
+			this.localOnly = true;
+		}
+
 		// 公開以外へのリプライ時は元の公開範囲を引き継ぐ
 		if (this.reply && ['home', 'followers', 'specified'].includes(this.reply.visibility)) {
 			this.visibility = this.reply.visibility;
@@ -162,13 +166,13 @@ export default (opts) => ({
 				}).then(users => {
 					this.visibleUsers.push(...users);
 				});
-			}
-		}
 
-		if (this.reply && this.reply.userId !== this.$store.state.i.id) {
-			this.$root.api('users/show', { userId: this.reply.userId }).then(user => {
-				this.visibleUsers.push(user);
-			});
+				if (this.reply.userId !== this.$store.state.i.id) {
+					this.$root.api('users/show', { userId: this.reply.userId }).then(user => {
+						this.visibleUsers.push(user);
+					});
+				}
+			}
 		}
 
 		// keep cw when reply
@@ -199,8 +203,9 @@ export default (opts) => ({
 					this.$emit('change-attached-files', this.files);
 				}
 			}
+
+			// 削除して編集
 			if (this.initialNote) {
-				// 削除して編集
 				const init = this.initialNote;
 				this.text = init.text ? init.text : '';
 				this.files = init.files;
@@ -318,7 +323,7 @@ export default (opts) => ({
 		setVisibility() {
 			const w = this.$root.new(MkVisibilityChooser, {
 				source: this.$refs.visibilityButton,
-				currentVisibility: this.visibility
+				currentVisibility: this.localOnly ? `local-${this.visibility}` : this.visibility
 			});
 			w.$once('chosen', v => {
 				this.applyVisibility(v);
diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index 5ce5eba730..b9c0624bd7 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -10,14 +10,18 @@
 			<b>{{ $t('@.post-form.recent-tags') }}:</b>
 			<a v-for="tag in recentHashtags.slice(0, 5)" @click="addTag(tag)" :title="$t('@.post-form.click-to-tagging')">#{{ tag }}</a>
 		</div>
-		<div class="with-quote" v-if="quoteId">{{ $t('@.post-form.quote-attached') }} <a @click="quoteId = null">[x]</a></div>
-		<div v-if="visibility === 'specified'" class="visibleUsers">
-			<span v-for="u in visibleUsers">
-				<mk-user-name :user="u"/><a @click="removeVisibleUser(u)">[x]</a>
-			</span>
-			<a @click="addVisibleUser">{{ $t('@.post-form.add-visible-user') }}</a>
+		<div class="with-quote" v-if="quoteId"><fa icon="quote-left"/> {{ $t('@.post-form.quote-attached') }}<button @click="quoteId = null"><fa icon="times"/></button></div>
+		<div v-if="visibility === 'specified'" class="to-specified">
+			<fa icon="envelope"/> {{ $t('@.post-form.specified-recipient') }}
+			<div class="visibleUsers">
+				<span v-for="u in visibleUsers">
+					<mk-user-name :user="u"/>
+					<button @click="removeVisibleUser(u)"><fa icon="times"/></button>
+				</span>
+				<button @click="addVisibleUser">{{ $t('@.post-form.add-visible-user') }}</button>
+			</div>
 		</div>
-		<div class="local-only" v-if="localOnly === true">{{ $t('@.post-form.local-only-message') }}</div>
+		<div class="local-only" v-if="localOnly === true"><fa icon="heart"/> {{ $t('@.post-form.local-only-message') }}</div>
 		<input v-show="useCw" ref="cw" v-model="cw" :placeholder="$t('@.post-form.cw-placeholder')" v-autocomplete="{ model: 'cw' }">
 		<div class="textarea">
 			<textarea :class="{ with: (files.length != 0 || poll) }"
@@ -207,13 +211,37 @@ export default Vue.extend({
 			margin 0 0 8px 0
 			color var(--primary)
 
-		> .visibleUsers
-			margin-bottom 8px
-			font-size 14px
+			> button
+				padding 4px 8px
+				color var(--primaryAlpha04)
 
-			> span
-				margin-right 16px
-				color var(--primary)
+				&:hover
+					color var(--primaryAlpha06)
+
+				&:active
+					color var(--primaryDarken30)
+
+		> .to-specified
+			margin 0 0 8px 0
+			color var(--primary)
+
+			> .visibleUsers
+				display inline
+				top -1px
+				font-size 14px
+
+				> span
+					margin-left 14px
+
+					> button
+						padding 4px 8px
+						color var(--primaryAlpha04)
+
+						&:hover
+							color var(--primaryAlpha06)
+
+						&:active
+							color var(--primaryDarken30)
 
 		> .local-only
 			margin 0 0 8px 0
diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index 9828430446..38c6a42dd5 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -17,15 +17,18 @@
 		<div class="form">
 			<mk-note-preview class="preview" v-if="reply" :note="reply"/>
 			<mk-note-preview class="preview" v-if="renote" :note="renote"/>
-			<div class="with-quote" v-if="quoteId">{{ $t('@.post-form.quote-attached') }} <a @click="quoteId = null">[x]</a></div>
-			<div v-if="visibility === 'specified'" class="visibleUsers">
-				<span v-for="u in visibleUsers">
-					<mk-user-name :user="u"/>
-					<a @click="removeVisibleUser(u)">[x]</a>
-				</span>
-				<a @click="addVisibleUser">+{{ $t('@.post-form.add-visible-user') }}</a>
+			<div class="with-quote" v-if="quoteId"><fa icon="quote-left"/> {{ $t('@.post-form.quote-attached') }}<button @click="quoteId = null"><fa icon="times"/></button></div>
+			<div v-if="visibility === 'specified'" class="to-specified">
+				<fa icon="envelope"/> {{ $t('@.post-form.specified-recipient') }}
+				<div class="visibleUsers">
+					<span v-for="u in visibleUsers">
+						<mk-user-name :user="u"/>
+						<button @click="removeVisibleUser(u)"><fa icon="times"/></button>
+					</span>
+					<button @click="addVisibleUser">{{ $t('@.post-form.add-visible-user') }}</button>
+				</div>
 			</div>
-			<div class="local-only" v-if="localOnly === true">{{ $t('@.post-form.local-only-message') }}</div>
+			<div class="local-only" v-if="localOnly === true"><fa icon="heart"/> {{ $t('@.post-form.local-only-message') }}</div>
 			<input v-show="useCw" ref="cw" v-model="cw" :placeholder="$t('@.post-form.cw-placeholder')" v-autocomplete="{ model: 'cw' }">
 			<textarea v-model="text" ref="text" :disabled="posting" :placeholder="placeholder" v-autocomplete="{ model: 'text' }" @paste="onPaste"></textarea>
 			<x-post-form-attaches class="attaches" :files="files"/>
@@ -145,13 +148,37 @@ export default Vue.extend({
 				margin 0 0 8px 0
 				color var(--primary)
 
-			> .visibleUsers
-				margin 5px
-				font-size 14px
+				> button
+					padding 4px 8px
+					color var(--primaryAlpha04)
 
-				> span
-					margin-right 16px
-					color var(--text)
+					&:hover
+						color var(--primaryAlpha06)
+
+					&:active
+						color var(--primaryDarken30)
+
+			> .to-specified
+				margin 0 0 8px 0
+				color var(--primary)
+
+				> .visibleUsers
+					display inline
+					top -1px
+					font-size 14px
+
+					> span
+						margin-left 14px
+
+						> button
+							padding 4px 8px
+							color var(--primaryAlpha04)
+
+							&:hover
+								color var(--primaryAlpha06)
+
+							&:active
+								color var(--primaryDarken30)
 
 			> .local-only
 				margin 0 0 8px 0