From 969cd16638698a19dc707c01b48270871b5e2f6d Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 27 Feb 2020 07:04:28 +0900
Subject: [PATCH] Resolve #6091

---
 locales/ja-JP.yml                         |  1 +
 src/client/pages/my-settings/reaction.vue | 13 +++++++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 4813f6f91..27609ef52 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -433,6 +433,7 @@ listen: "聴く"
 none: "なし"
 volume: "音量"
 details: "詳細"
+chooseEmoji: "絵文字を選択"
 
 _sfx:
   note: "ノート"
diff --git a/src/client/pages/my-settings/reaction.vue b/src/client/pages/my-settings/reaction.vue
index 7ce39380f..b2df3f023 100644
--- a/src/client/pages/my-settings/reaction.vue
+++ b/src/client/pages/my-settings/reaction.vue
@@ -3,13 +3,13 @@
 	<div class="_title"><fa :icon="faLaugh"/> {{ $t('reaction') }}</div>
 	<div class="_content">
 		<mk-input v-model="reactions" style="font-family: 'Segoe UI Emoji', 'Noto Color Emoji', Roboto, HelveticaNeue, Arial, sans-serif">
-			{{ $t('reaction') }}<template #desc>{{ $t('reactionSettingDescription') }}</template>
+			{{ $t('reaction') }}<template #desc>{{ $t('reactionSettingDescription') }} <button class="_textButton" @click="chooseEmoji">{{ $t('chooseEmoji') }}</button></template>
 		</mk-input>
+		<mk-button inline @click="setDefault"><fa :icon="faUndo"/> {{ $t('default') }}</mk-button>
 	</div>
 	<div class="_footer">
 		<mk-button @click="save()" primary inline :disabled="!changed"><fa :icon="faSave"/> {{ $t('save') }}</mk-button>
 		<mk-button inline @click="preview"><fa :icon="faEye"/> {{ $t('preview') }}</mk-button>
-		<mk-button inline @click="setDefault"><fa :icon="faUndo"/> {{ $t('default') }}</mk-button>
 	</div>
 </section>
 </template>
@@ -72,6 +72,15 @@ export default Vue.extend({
 		setDefault() {
 			this.reactions = '👍❤😆🤔😮🎉💢😥😇🍮';
 		},
+
+		async chooseEmoji(ev) {
+			const vm = this.$root.new(await import('../../components/emoji-picker.vue').then(m => m.default), {
+				source: ev.currentTarget || ev.target
+			}).$once('chosen', emoji => {
+				this.reactions += emoji;
+				vm.close();
+			});
+		}
 	}
 });
 </script>