From 1c4e1af7c3951bf935f7d9e7ce607a77faabe441 Mon Sep 17 00:00:00 2001
From: Satsuki Yanagi <17376330+u1-liquid@users.noreply.github.com>
Date: Sun, 25 Aug 2019 16:12:01 +0900
Subject: Improve post form (#5326)

* Improve post form

* Remove local icon from button
---
 .../app/mobile/views/components/post-form.vue      | 55 ++++++++++++++++------
 1 file changed, 41 insertions(+), 14 deletions(-)

(limited to 'src/client/app/mobile/views/components')

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
-- 
cgit v1.2.3-freya