Improve reaction setting

Fix #5577

3 files changed, 31 insertions, 26 deletions

diff --git a/src/client/app/common/scripts/note-mixin.ts b/src/client/app/common/scripts/note-mixin.ts
index 43fb4fd51e..84e134cc32 100644
--- a/src/client/app/common/scripts/note-mixin.ts
+++ b/src/client/app/common/scripts/note-mixin.ts
@@ -145,13 +145,18 @@ export default (opts: Opts = {}) => ({
 			this.blur();
 			const w = this.$root.new(MkReactionPicker, {
 				source: this.$refs.reactButton,
-				note: this.appearNote,
 				showFocus: viaKeyboard,
 				animation: !viaKeyboard
-			}).$once('closed', this.focus);
-			this.$once('hook:beforeDestroy', () => {
-				w.close();
 			});
+			w.$once('chosen', reaction => {
+				this.$root.api('notes/reactions/create', {
+					noteId: this.appearNote.id,
+					reaction: reaction
+				}).then(() => {
+					w.close();
+				});
+			});
+			w.$once('closed', this.focus);
 		},
 
 		reactDirectly(reaction) {
diff --git a/src/client/app/common/views/components/reaction-picker.vue b/src/client/app/common/views/components/reaction-picker.vue
index 17a92c72e3..f363fe9779 100644
--- a/src/client/app/common/views/components/reaction-picker.vue
+++ b/src/client/app/common/views/components/reaction-picker.vue
@@ -4,7 +4,7 @@
 	<div class="popover" :class="{ isMobile: $root.isMobile }" ref="popover">
 		<p v-if="!$root.isMobile">{{ title }}</p>
 		<div class="buttons" ref="buttons" :class="{ showFocus }">
-			<button v-for="(reaction, i) in $store.state.settings.reactions" :key="reaction" @click="react(reaction)" @mouseover="onMouseover" @mouseout="onMouseout" :tabindex="i + 1" :title="/^[a-z]+$/.test(reaction) ? $t('@.reactions.' + reaction) : reaction" v-particle><mk-reaction-icon :reaction="reaction"/></button>
+			<button v-for="(reaction, i) in rs" :key="reaction" @click="react(reaction)" @mouseover="onMouseover" @mouseout="onMouseout" :tabindex="i + 1" :title="/^[a-z]+$/.test(reaction) ? $t('@.reactions.' + reaction) : reaction" v-particle><mk-reaction-icon :reaction="reaction"/></button>
 		</div>
 		<div v-if="enableEmojiReaction" class="text">
 			<input v-model="text" :placeholder="$t('input-reaction-placeholder')" @keyup.enter="reactText" @input="tryReactText" v-autocomplete="{ model: 'text' }">
@@ -22,16 +22,11 @@ import { emojiRegex } from '../../../../../misc/emoji-regex';
 export default Vue.extend({
 	i18n: i18n('common/views/components/reaction-picker.vue'),
 	props: {
-		note: {
-			type: Object,
-			required: true
-		},
-
 		source: {
 			required: true
 		},
 
-		cb: {
+		reactions: {
 			required: false
 		},
 
@@ -50,6 +45,7 @@ export default Vue.extend({
 
 	data() {
 		return {
+			rs: this.reactions || this.$store.state.settings.reactions,
 			title: this.$t('choose-reaction'),
 			text: null,
 			enableEmojiReaction: false,
@@ -134,14 +130,7 @@ export default Vue.extend({
 
 	methods: {
 		react(reaction) {
-			this.$root.api('notes/reactions/create', {
-				noteId: this.note.id,
-				reaction: reaction
-			}).then(() => {
-				if (this.cb) this.cb();
-				this.$emit('closed');
-				this.destroyDom();
-			});
+			this.$emit('chosen', reaction);
 		},
 
 		reactText() {
diff --git a/src/client/app/common/views/components/settings/settings.vue b/src/client/app/common/views/components/settings/settings.vue
index 49239a597b..3a0ba561af 100644
--- a/src/client/app/common/views/components/settings/settings.vue
+++ b/src/client/app/common/views/components/settings/settings.vue
@@ -113,6 +113,10 @@
 				<ui-textarea v-model="reactions">
 					{{ $t('@._settings.reactions') }}<template #desc>{{ $t('@._settings.reactions-description') }}</template>
 				</ui-textarea>
+				<ui-horizon-group>
+					<ui-button @click="save('reactions', reactions.trim().split('\n'))" primary><fa :icon="faSave"/> {{ $t('@._settings.save') }}</ui-button>
+					<ui-button @click="previewReaction()" ref="reactionsPreviewButton"><fa :icon="faEye"/> {{ $t('@._settings.preview') }}</ui-button>
+				</ui-horizon-group>
 			</section>
 
 			<section>
@@ -311,11 +315,12 @@ import XApi from './api.vue';
 import XLanguage from './language.vue';
 import XAppType from './app-type.vue';
 import XNotification from './notification.vue';
+import MkReactionPicker from '../reaction-picker.vue';
 
 import { url, version } from '../../../../config';
 import checkForUpdate from '../../../scripts/check-for-update';
 import { formatTimeString } from '../../../../../../misc/format-time-string';
-import { faSave } from '@fortawesome/free-regular-svg-icons';
+import { faSave, faEye } from '@fortawesome/free-regular-svg-icons';
 
 export default Vue.extend({
 	i18n: i18n(),
@@ -346,11 +351,12 @@ export default Vue.extend({
 		return {
 			meta: null,
 			version,
+			reactions: this.$store.state.settings.reactions.join('\n'),
 			webSearchEngine: this.$store.state.settings.webSearchEngine,
 			pastedFileName : this.$store.state.settings.pastedFileName,
 			latestVersion: undefined,
 			checkingForUpdate: false,
-			faSave
+			faSave, faEye
 		};
 	},
 	computed: {
@@ -414,11 +420,6 @@ export default Vue.extend({
 			set(value) { this.$store.dispatch('settings/set', { key: 'disableViaMobile', value }); }
 		},
 
-		reactions: {
-			get() { return this.$store.state.settings.reactions.join('\n'); },
-			set(value: string) { this.$store.dispatch('settings/set', { key: 'reactions', value: value.trim().split('\n') }); }
-		},
-
 		useShadow: {
 			get() { return this.$store.state.device.useShadow; },
 			set(value) { this.$store.commit('device/set', { key: 'useShadow', value }); }
@@ -655,6 +656,16 @@ export default Vue.extend({
 		pastedFileNamePreview() {
 			return `${formatTimeString(new Date(), this.pastedFileName).replace(/{{number}}/g, `1`)}.png`
 		},
+		previewReaction() {
+			const picker = this.$root.new(MkReactionPicker, {
+				source: this.$refs.reactionsPreviewButton.$el,
+				reactions: this.reactions.trim().split('\n'),
+				showFocus: false,
+			});
+			picker.$once('chosen', reaction => {
+				picker.close();
+			});
+		}
 	}
 });
 </script>