From 1da6abb4616b4d0f1e9b18e209aac63e72a2838e Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 13 Dec 2018 01:18:17 +0900
Subject: [PATCH] :art:

---
 .../app/common/views/components/ui/button.vue | 76 ++++++++++---------
 .../desktop/views/components/post-form.vue    | 60 +--------------
 2 files changed, 45 insertions(+), 91 deletions(-)

diff --git a/src/client/app/common/views/components/ui/button.vue b/src/client/app/common/views/components/ui/button.vue
index 42bdc3171..7b443a1ac 100644
--- a/src/client/app/common/views/components/ui/button.vue
+++ b/src/client/app/common/views/components/ui/button.vue
@@ -1,7 +1,7 @@
 <template>
 <component class="dmtdnykelhudezerjlfpbhgovrgnqqgr"
 	:is="link ? 'a' : 'button'"
-	:class="[styl, { inline, primary }]"
+	:class="{ inline, primary, wait }"
 	:type="type"
 	@click="$emit('click')"
 	@mousedown="onMousedown"
@@ -48,11 +48,11 @@ export default Vue.extend({
 			required: false,
 			default: false
 		},
-	},
-	data() {
-		return {
-			styl: 'fill'
-		};
+		wait: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
 	},
 	mounted() {
 		if (this.autofocus) {
@@ -121,6 +121,24 @@ export default Vue.extend({
 	box-shadow none
 	text-decoration none
 	user-select none
+	color var(--text)
+	background var(--buttonBg)
+
+	&:not(:disabled):hover
+		background var(--buttonHoverBg)
+
+	&:not(:disabled):active
+		background var(--buttonActiveBg)
+
+	&.primary
+		color var(--primaryForeground)
+		background var(--primary)
+
+		&:not(:disabled):hover
+			background var(--primaryLighten5)
+
+		&:not(:disabled):active
+			background var(--primaryDarken5)
 
 	*
 		pointer-events none
@@ -152,35 +170,25 @@ export default Vue.extend({
 	&.primary
 		font-weight bold
 
-	&.fill
-		color var(--text)
-		background var(--buttonBg)
+	&.wait
+		background linear-gradient(
+			45deg,
+			var(--primaryDarken10) 25%,
+			var(--primary)              25%,
+			var(--primary)              50%,
+			var(--primaryDarken10) 50%,
+			var(--primaryDarken10) 75%,
+			var(--primary)              75%,
+			var(--primary)
+		)
+		background-size 32px 32px
+		animation stripe-bg 1.5s linear infinite
+		opacity 0.7
+		cursor wait
 
-		&:not(:disabled):hover
-			background var(--buttonHoverBg)
-
-		&:not(:disabled):active
-			background var(--buttonActiveBg)
-
-		&.primary
-			color var(--primaryForeground)
-			background var(--primary)
-
-			&:not(:disabled):hover
-				background var(--primaryLighten5)
-
-			&:not(:disabled):active
-				background var(--primaryDarken5)
-
-	&:not(.fill)
-		color var(--primary)
-		background none
-
-		&:not(:disabled):hover
-			color var(--primaryDarken5)
-
-		&:not(:disabled):active
-			background var(--primaryAlpha03)
+		@keyframes stripe-bg
+			from {background-position: 0 0;}
+			to   {background-position: -64px 32px;}
 
 	> .ripples
 		position absolute
diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index ef236e96b..c2f6a94f7 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -16,7 +16,7 @@
 			<b>{{ $t('recent-tags') }}:</b>
 			<a v-for="tag in recentHashtags.slice(0, 5)" @click="addTag(tag)" :title="$t('click-to-tagging')">#{{ tag }}</a>
 		</div>
-		<div class="local-only" v-if="this.localOnly == true">{{ $t('local-only-message') }}</div>
+		<div class="local-only" v-if="localOnly == true">{{ $t('local-only-message') }}</div>
 		<input v-show="useCw" ref="cw" v-model="cw" :placeholder="$t('annotations')" v-autocomplete="'cw'">
 		<div class="textarea">
 			<textarea :class="{ with: (files.length != 0 || poll) }"
@@ -54,9 +54,9 @@
 		<span v-if="visibility === 'private'"><fa icon="lock"/></span>
 	</button>
 	<p class="text-count" :class="{ over: trimmedLength(text) > maxNoteTextLength }">{{ maxNoteTextLength - trimmedLength(text) }}</p>
-	<button :class="{ posting }" class="submit" :disabled="!canPost" @click="post">
+	<ui-button primary :wait="posting" class="submit" :disabled="!canPost" @click="post">
 		{{ posting ? $t('posting') : submitText }}<mk-ellipsis v-if="posting"/>
-	</button>
+	</ui-button>
 	<input ref="file" type="file" multiple="multiple" tabindex="-1" @change="onChangeFile"/>
 	<div class="dropzone" v-if="draghover"></div>
 </div>
@@ -684,62 +684,8 @@ export default Vue.extend({
 		position absolute
 		bottom 16px
 		right 16px
-		cursor pointer
-		padding 0
-		margin 0
 		width 110px
 		height 40px
-		font-size 1em
-		color var(--primaryForeground)
-		background var(--primary)
-		outline none
-		border none
-		border-radius 4px
-
-		&:not(:disabled)
-			font-weight bold
-
-		&:hover:not(:disabled)
-			background var(--primaryLighten5)
-
-		&:active:not(:disabled)
-			background var(--primaryDarken5)
-
-		&:focus
-			&:after
-				content ""
-				pointer-events none
-				position absolute
-				top -5px
-				right -5px
-				bottom -5px
-				left -5px
-				border 2px solid var(--primaryAlpha03)
-				border-radius 8px
-
-		&:disabled
-			opacity 0.7
-			cursor default
-
-		&.wait
-			background linear-gradient(
-				45deg,
-				var(--primaryDarken10) 25%,
-				var(--primary)              25%,
-				var(--primary)              50%,
-				var(--primaryDarken10) 50%,
-				var(--primaryDarken10) 75%,
-				var(--primary)              75%,
-				var(--primary)
-			)
-			background-size 32px 32px
-			animation stripe-bg 1.5s linear infinite
-			opacity 0.7
-			cursor wait
-
-			@keyframes stripe-bg
-				from {background-position: 0 0;}
-				to   {background-position: -64px 32px;}
 
 	> .text-count
 		pointer-events none