From 03b072b894b6be5ca8b94bb0ab73134705b45145 Mon Sep 17 00:00:00 2001 From: syuilo Date: Sat, 14 Nov 2020 14:32:01 +0900 Subject: [PATCH] Resolve #6704 --- locales/ja-JP.yml | 1 + src/client/components/emoji-picker.vue | 9 ++-- src/client/os.ts | 5 +- src/client/pages/settings/reaction.vue | 72 +++++++++++++++++++------- 4 files changed, 62 insertions(+), 25 deletions(-) diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 6dcae50182..62da82b91c 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -214,6 +214,7 @@ imageUrl: "画像URL" remove: "削除" removed: "削除しました" removeAreYouSure: "「{x}」を削除しますか？" +resetAreYouSure: "リセットしますか？" saved: "保存しました" messaging: "チャット" upload: "アップロード" diff --git a/src/client/components/emoji-picker.vue b/src/client/components/emoji-picker.vue index 5d60f2eb51..5cfd97e374 100644 --- a/src/client/components/emoji-picker.vue +++ b/src/client/components/emoji-picker.vue @@ -30,7 +30,7 @@
-
+
+ + +
{{ $t('reactionSettingDescription') }}
{{ $t('useFullReactionPicker') }}
- {{ $t('save') }} {{ $t('preview') }} + {{ $t('default') }}
@@ -21,6 +26,7 @@ import { defineComponent } from 'vue'; import { faLaugh, faSave, faEye } from '@fortawesome/free-regular-svg-icons'; import { faUndo } from '@fortawesome/free-solid-svg-icons'; +import { VueDraggableNext } from 'vue-draggable-next'; import MkInput from '@/components/ui/input.vue'; import MkButton from '@/components/ui/button.vue'; import MkSwitch from '@/components/ui/switch.vue'; @@ -33,6 +39,7 @@ export default defineComponent({ MkInput, MkButton, MkSwitch, + XDraggable: VueDraggableNext, }, emits: ['info'], @@ -43,17 +50,12 @@ export default defineComponent({ title: this.$t('reaction'), icon: faLaugh }, - reactions: this.$store.state.settings.reactions.join(''), - changed: false, + reactions: JSON.parse(JSON.stringify(this.$store.state.settings.reactions)), faLaugh, faSave, faEye, faUndo } }, computed: { - splited(): any { - return this.reactions.match(emojiRegexWithCustom); - }, - useFullReactionPicker: { get() { return this.$store.state.device.useFullReactionPicker; }, set(value) { this.$store.commit('device/set', { key: 'useFullReactionPicker', value: value }); } @@ -63,7 +65,7 @@ export default defineComponent({ watch: { reactions: { handler() { - this.changed = true; + this.save(); }, deep: true } @@ -75,27 +77,59 @@ export default defineComponent({ methods: { save() { - this.$store.dispatch('settings/set', { key: 'reactions', value: this.splited }); - this.changed = false; + this.$store.dispatch('settings/set', { key: 'reactions', value: this.reactions }); + }, + + remove(reaction, ev) { + os.modalMenu([{ + text: this.$t('remove'), + action: () => { + this.reactions = this.reactions.filter(x => x !== reaction) + } + }], ev.currentTarget || ev.target); }, preview(ev) { os.popup(import('@/components/emoji-picker.vue'), { - overridePinned: this.splited, compact: !this.$store.state.device.useFullReactionPicker, src: ev.currentTarget || ev.target, }, {}, 'closed'); }, - setDefault() { - this.reactions = defaultSettings.reactions.join(''); + async setDefault() { + const { canceled } = await os.dialog({ + type: 'warning', + text: this.$t('resetAreYouSure'), + showCancelButton: true + }); + if (canceled) return; + + this.reactions = JSON.parse(JSON.stringify(defaultSettings.reactions)); }, chooseEmoji(ev) { - os.pickEmoji(ev.currentTarget || ev.target).then(emoji => { - this.reactions += emoji; + os.pickEmoji(ev.currentTarget || ev.target, { + showPinned: false + }).then(emoji => { + if (!this.reactions.includes(emoji)) { + this.reactions.push(emoji); + } }); } } }); + +