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: "同期"
save: "保存"
saved: "保存しました"
preview: "プレビュー"
home-profile: "ホームのプロファイル"
deck-profile: "デッキのプロファイル"
room: "ルーム"

View file

@ -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) {

View file

@ -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() {

View file

@ -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>