From 03b2366f7358d8cdae49c8bafa83002ec761399c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?=
 <root@acid-chicken.com>
Date: Sat, 21 Jul 2018 01:21:27 +0900
Subject: [PATCH 1/3] =?UTF-8?q?=E5=9B=9E=E8=BB=A2=E5=AF=BF=E5=8F=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../desktop/views/components/post-form.vue    | 50 ++++++++++++++++++-
 .../app/mobile/views/components/post-form.vue | 49 ++++++++++++++++--
 2 files changed, 93 insertions(+), 6 deletions(-)

diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index aaec36ed3..ecb703818 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -11,7 +11,7 @@
 			<a @click="addVisibleUser">+ユーザーを追加</a>
 		</div>
 		<div class="hashtags" v-if="recentHashtags.length > 0">
-			<a v-for="tag in recentHashtags" @click="addTag(tag)">#{{ tag }}</a>
+			<a class="hashtag" v-for="tag in recentHashtags" @click="addTag(tag)">%fa:hashtag%{{ tag }}</a>
 		</div>
 		<input v-show="useCw" v-model="cw" placeholder="内容への注釈 (オプション)">
 		<textarea :class="{ with: (files.length != 0 || poll) }"
@@ -184,6 +184,22 @@ export default Vue.extend({
 			}
 
 			this.$nextTick(() => this.watch());
+
+			const hashtags = [...document.getElementsByClassName('hashtag')];
+			const hashtagsContainer = hashtags.parentElement;
+			let offsetX = 0
+			const update = () => {
+				if (hashtags[0].getBoundingClientRect().right <= hashtagsContainer.getBoundingClientRect().left) {
+					hashtags.push(hashtags.shift());
+					offsetX = 0;
+					hashtags.map(x => x.style.transform = 'translateX(0)');
+				} else {
+					offsetX--;
+					hashtags.map(x => x.style.transform = `translateX(${offsetX}px)`);
+				}
+				requestAnimationFrame(update);
+			};
+			update()
 		});
 	},
 
@@ -494,8 +510,38 @@ root(isDark)
 				color isDark ? #fff : #666
 
 		> .hashtags
+			margin 0 -16px 8px
+			overflow-x hidden
+			white-space nowrap
 			> *
-				margin-right 8px
+				background $theme-color
+				border-radius: 0 4px 4px 0
+				color isDark ? #282c37 : #fff8f6
+				margin-left 28px
+				white-space nowrap
+				&:hover
+					text-decoration none
+					background darken($theme-color, 10%)
+				&::before
+					background inherit
+					border-radius 4px 0
+					content ''
+					display inline-block
+					height 17.677669529663688110021109052621225982120898442212px
+					position absolute
+					right 100%
+					top 50%
+					transform translateY(-50%) translateX(50%) rotate(-45deg)
+					width 17.677669529663688110021109052621225982120898442212px
+				&::after
+					background isDark ? #282c37 : #fff8f6
+					border-radius 50%
+					content ''
+					height 4px
+					left -6.25px
+					position absolute
+					top 10px
+					width 4px
 
 		> .medias
 			margin 0
diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index b04a1968d..b8edd57f7 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -40,7 +40,7 @@
 		</div>
 	</div>
 	<div class="hashtags" v-if="recentHashtags.length > 0">
-		<a v-for="tag in recentHashtags" @click="addTag(tag)">#{{ tag }}</a>
+		<a class="hashtag" v-for="tag in recentHashtags" @click="addTag(tag)">%fa:hashtag%{{ tag }}</a>
 	</div>
 </div>
 </template>
@@ -165,6 +165,22 @@ export default Vue.extend({
 		this.$nextTick(() => {
 			this.focus();
 		});
+
+		const hashtags = [...document.getElementsByClassName('hashtag')];
+		const hashtagsContainer = hashtags.parentElement;
+		let offsetX = 0
+		const update = () => {
+			if (hashtags[0].getBoundingClientRect().right <= hashtagsContainer.getBoundingClientRect().left) {
+				hashtags.push(hashtags.shift());
+				offsetX = 0;
+				hashtags.map(x => x.style.transform = 'translateX(0)');
+			} else {
+				offsetX -= .25;
+				hashtags.map(x => x.style.transform = `translateX(${offsetX}px)`);
+			}
+			requestAnimationFrame(update);
+		};
+		update()
 	},
 
 	methods: {
@@ -465,10 +481,35 @@ root(isDark)
 					box-shadow none
 
 	> .hashtags
-		margin 8px
-
+		margin 0 -16px 8px
+		overflow-x hidden
+		white-space nowrap
 		> *
-			margin-right 8px
+			background $theme-color
+			border-radius: 0 4px 4px 0
+			color isDark ? #282c37 : #fff8f6
+			margin-left 28px
+			white-space nowrap
+			&::before
+				background inherit
+				border-radius 4px 0
+				content ''
+				display inline-block
+				height 17.677669529663688110021109052621225982120898442212px
+				position absolute
+				right 100%
+				top 50%
+				transform translateY(-50%) translateX(50%) rotate(-45deg)
+				width 17.677669529663688110021109052621225982120898442212px
+			&::after
+				background isDark ? #282c37 : #fff8f6
+				border-radius 50%
+				content ''
+				height 4px
+				left -6.25px
+				position absolute
+				top 10px
+				width 4px
 
 .mk-post-form[data-darkmode]
 	root(true)

From 22a1b0c8f03b77aa5f06ccacd14c8dc94a9bfe1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?=
 <root@acid-chicken.com>
Date: Sat, 21 Jul 2018 01:24:12 +0900
Subject: [PATCH 2/3] =?UTF-8?q?=E4=BF=9D=E5=AD=98=E3=81=97=E5=BF=98?=
 =?UTF-8?q?=E3=82=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/app/mobile/views/components/post-form.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index b8edd57f7..d728eb15e 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -175,7 +175,7 @@ export default Vue.extend({
 				offsetX = 0;
 				hashtags.map(x => x.style.transform = 'translateX(0)');
 			} else {
-				offsetX -= .25;
+				offsetX--;
 				hashtags.map(x => x.style.transform = `translateX(${offsetX}px)`);
 			}
 			requestAnimationFrame(update);

From 2c68f95ff3938d06c49007ba1e929d7e9f19b82c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?=
 <root@acid-chicken.com>
Date: Sat, 21 Jul 2018 01:25:55 +0900
Subject: [PATCH 3/3] =?UTF-8?q?=E3=82=A4=E3=83=B3=E3=83=87=E3=82=AF?=
 =?UTF-8?q?=E3=82=B5=E3=83=BC=E3=82=92=E5=BF=98=E3=82=8C=E3=81=A6=E3=81=84?=
 =?UTF-8?q?=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/client/app/desktop/views/components/post-form.vue | 2 +-
 src/client/app/mobile/views/components/post-form.vue  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue
index ecb703818..343328434 100644
--- a/src/client/app/desktop/views/components/post-form.vue
+++ b/src/client/app/desktop/views/components/post-form.vue
@@ -186,7 +186,7 @@ export default Vue.extend({
 			this.$nextTick(() => this.watch());
 
 			const hashtags = [...document.getElementsByClassName('hashtag')];
-			const hashtagsContainer = hashtags.parentElement;
+			const hashtagsContainer = hashtags[0].parentElement;
 			let offsetX = 0
 			const update = () => {
 				if (hashtags[0].getBoundingClientRect().right <= hashtagsContainer.getBoundingClientRect().left) {
diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index d728eb15e..62ec54a09 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -167,7 +167,7 @@ export default Vue.extend({
 		});
 
 		const hashtags = [...document.getElementsByClassName('hashtag')];
-		const hashtagsContainer = hashtags.parentElement;
+		const hashtagsContainer = hashtags[0].parentElement;
 		let offsetX = 0
 		const update = () => {
 			if (hashtags[0].getBoundingClientRect().right <= hashtagsContainer.getBoundingClientRect().left) {