From cc7fec4b9fa92afc8e9253d01c64107a114c3fa7 Mon Sep 17 00:00:00 2001 From: syuilo Date: Mon, 4 Nov 2019 20:44:01 +0900 Subject: [PATCH] Improve reaction setting Fix #5577 --- locales/ja-JP.yml | 1 + src/client/app/common/scripts/note-mixin.ts | 13 +++++++--- .../views/components/reaction-picker.vue | 19 +++----------- .../views/components/settings/settings.vue | 25 +++++++++++++------ 4 files changed, 32 insertions(+), 26 deletions(-) diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 1ef397a2e..b1fe0be4d 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -312,6 +312,7 @@ common: sync: "同期" save: "保存" saved: "保存しました" + preview: "プレビュー" home-profile: "ホームのプロファイル" deck-profile: "デッキのプロファイル" room: "ルーム" diff --git a/src/client/app/common/scripts/note-mixin.ts b/src/client/app/common/scripts/note-mixin.ts index 43fb4fd51..84e134cc3 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 17a92c72e..f363fe977 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 @@

{{ title }}

- +
@@ -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 49239a597..3a0ba561a 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 @@ {{ $t('@._settings.reactions') }} + + {{ $t('@._settings.save') }} + {{ $t('@._settings.preview') }} +
@@ -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(); + }); + } } });