Improve reaction setting

Fix #5577
This commit is contained in:
syuilo 2019-11-04 20:44:01 +09:00
parent 88ec15d4c7
commit cc7fec4b9f
4 changed files with 32 additions and 26 deletions

View file

@ -312,6 +312,7 @@ common:
sync: "同期" sync: "同期"
save: "保存" save: "保存"
saved: "保存しました" saved: "保存しました"
preview: "プレビュー"
home-profile: "ホームのプロファイル" home-profile: "ホームのプロファイル"
deck-profile: "デッキのプロファイル" deck-profile: "デッキのプロファイル"
room: "ルーム" room: "ルーム"

View file

@ -145,13 +145,18 @@ export default (opts: Opts = {}) => ({
this.blur(); this.blur();
const w = this.$root.new(MkReactionPicker, { const w = this.$root.new(MkReactionPicker, {
source: this.$refs.reactButton, source: this.$refs.reactButton,
note: this.appearNote,
showFocus: viaKeyboard, showFocus: viaKeyboard,
animation: !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) { reactDirectly(reaction) {

View file

@ -4,7 +4,7 @@
<div class="popover" :class="{ isMobile: $root.isMobile }" ref="popover"> <div class="popover" :class="{ isMobile: $root.isMobile }" ref="popover">
<p v-if="!$root.isMobile">{{ title }}</p> <p v-if="!$root.isMobile">{{ title }}</p>
<div class="buttons" ref="buttons" :class="{ showFocus }"> <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>
<div v-if="enableEmojiReaction" class="text"> <div v-if="enableEmojiReaction" class="text">
<input v-model="text" :placeholder="$t('input-reaction-placeholder')" @keyup.enter="reactText" @input="tryReactText" v-autocomplete="{ model: '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({ export default Vue.extend({
i18n: i18n('common/views/components/reaction-picker.vue'), i18n: i18n('common/views/components/reaction-picker.vue'),
props: { props: {
note: {
type: Object,
required: true
},
source: { source: {
required: true required: true
}, },
cb: { reactions: {
required: false required: false
}, },
@ -50,6 +45,7 @@ export default Vue.extend({
data() { data() {
return { return {
rs: this.reactions || this.$store.state.settings.reactions,
title: this.$t('choose-reaction'), title: this.$t('choose-reaction'),
text: null, text: null,
enableEmojiReaction: false, enableEmojiReaction: false,
@ -134,14 +130,7 @@ export default Vue.extend({
methods: { methods: {
react(reaction) { react(reaction) {
this.$root.api('notes/reactions/create', { this.$emit('chosen', reaction);
noteId: this.note.id,
reaction: reaction
}).then(() => {
if (this.cb) this.cb();
this.$emit('closed');
this.destroyDom();
});
}, },
reactText() { reactText() {

View file

@ -113,6 +113,10 @@
<ui-textarea v-model="reactions"> <ui-textarea v-model="reactions">
{{ $t('@._settings.reactions') }}<template #desc>{{ $t('@._settings.reactions-description') }}</template> {{ $t('@._settings.reactions') }}<template #desc>{{ $t('@._settings.reactions-description') }}</template>
</ui-textarea> </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>
<section> <section>
@ -311,11 +315,12 @@ import XApi from './api.vue';
import XLanguage from './language.vue'; import XLanguage from './language.vue';
import XAppType from './app-type.vue'; import XAppType from './app-type.vue';
import XNotification from './notification.vue'; import XNotification from './notification.vue';
import MkReactionPicker from '../reaction-picker.vue';
import { url, version } from '../../../../config'; import { url, version } from '../../../../config';
import checkForUpdate from '../../../scripts/check-for-update'; import checkForUpdate from '../../../scripts/check-for-update';
import { formatTimeString } from '../../../../../../misc/format-time-string'; 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({ export default Vue.extend({
i18n: i18n(), i18n: i18n(),
@ -346,11 +351,12 @@ export default Vue.extend({
return { return {
meta: null, meta: null,
version, version,
reactions: this.$store.state.settings.reactions.join('\n'),
webSearchEngine: this.$store.state.settings.webSearchEngine, webSearchEngine: this.$store.state.settings.webSearchEngine,
pastedFileName : this.$store.state.settings.pastedFileName, pastedFileName : this.$store.state.settings.pastedFileName,
latestVersion: undefined, latestVersion: undefined,
checkingForUpdate: false, checkingForUpdate: false,
faSave faSave, faEye
}; };
}, },
computed: { computed: {
@ -414,11 +420,6 @@ export default Vue.extend({
set(value) { this.$store.dispatch('settings/set', { key: 'disableViaMobile', value }); } 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: { useShadow: {
get() { return this.$store.state.device.useShadow; }, get() { return this.$store.state.device.useShadow; },
set(value) { this.$store.commit('device/set', { key: 'useShadow', value }); } set(value) { this.$store.commit('device/set', { key: 'useShadow', value }); }
@ -655,6 +656,16 @@ export default Vue.extend({
pastedFileNamePreview() { pastedFileNamePreview() {
return `${formatTimeString(new Date(), this.pastedFileName).replace(/{{number}}/g, `1`)}.png` 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> </script>