Merge pull request #1939 from acid-chicken/sushi

🍣回転寿司🍣

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 8b1fd3b8ca..c763101352 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[0].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 b04a1968dc..62ec54a093 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[0].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()
 	},
 
 	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)