From f13bef4ac88dd0f1b379f88af1bf30c887543578 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] =?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)