Improve reaction picker

This commit is contained in:
syuilo 2020-11-18 12:09:14 +09:00
parent 0739ae006d
commit c4f7e6659f
6 changed files with 67 additions and 14 deletions

View File

@ -546,6 +546,11 @@ deck: "デッキ"
undeck: "デッキ解除" undeck: "デッキ解除"
useBlurEffectForModal: "モーダルにぼかし効果を使用" useBlurEffectForModal: "モーダルにぼかし効果を使用"
useFullReactionPicker: "フル機能リアクションピッカーを使用" useFullReactionPicker: "フル機能リアクションピッカーを使用"
width: "幅"
height: "高さ"
large: "大"
medium: "中"
small: "小"
generateAccessToken: "アクセストークンの発行" generateAccessToken: "アクセストークンの発行"
permission: "権限" permission: "権限"
enableAll: "全て有効にする" enableAll: "全て有効にする"

View File

@ -1,6 +1,6 @@
<template> <template>
<MkModal ref="modal" :src="src" @click="$refs.modal.close()" @closed="$emit('closed')"> <MkModal ref="modal" :src="src" @click="$refs.modal.close()" @closed="$emit('closed')">
<div class="omfetrab _popup" :class="{ compact }"> <div class="omfetrab _popup" :class="['w' + width, 'h' + height, { big }]">
<input ref="search" class="search" :class="{ filled: q != null && q != '' }" v-model.trim="q" :placeholder="$t('search')" @paste.stop="paste" @keyup.enter="done()"> <input ref="search" class="search" :class="{ filled: q != null && q != '' }" v-model.trim="q" :placeholder="$t('search')" @paste.stop="paste" @keyup.enter="done()">
<div class="emojis"> <div class="emojis">
<section class="result"> <section class="result">
@ -99,6 +99,7 @@ import { faHeart, faFlag, faLaugh } from '@fortawesome/free-regular-svg-icons';
import MkModal from '@/components/ui/modal.vue'; import MkModal from '@/components/ui/modal.vue';
import Particle from '@/components/particle.vue'; import Particle from '@/components/particle.vue';
import * as os from '@/os'; import * as os from '@/os';
import { isDeviceTouch } from '../scripts/is-device-touch';
export default defineComponent({ export default defineComponent({
components: { components: {
@ -113,7 +114,7 @@ export default defineComponent({
required: false, required: false,
default: true default: true
}, },
compact: { asReactionPicker: {
required: false required: false
}, },
}, },
@ -125,6 +126,9 @@ export default defineComponent({
emojilist: markRaw(emojilist), emojilist: markRaw(emojilist),
getStaticImageUrl, getStaticImageUrl,
pinned: this.$store.state.settings.reactions, pinned: this.$store.state.settings.reactions,
width: this.asReactionPicker ? this.$store.state.device.reactionPickerWidth : 3,
height: this.asReactionPicker ? this.$store.state.device.reactionPickerHeight : 2,
big: this.asReactionPicker ? isDeviceTouch : false,
customEmojiCategories: this.$store.getters['instance/emojiCategories'], customEmojiCategories: this.$store.getters['instance/emojiCategories'],
customEmojis: this.$store.state.instance.meta.emojis, customEmojis: this.$store.state.instance.meta.emojis,
visibleCategories: {}, visibleCategories: {},
@ -385,18 +389,39 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
.omfetrab { .omfetrab {
$eachSize: 40px;
$pad: 8px; $pad: 8px;
--eachSize: 40px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: ($eachSize * 7) + ($pad * 2);
contain: content; contain: content;
--height: 300px;
&.compact { &.big {
width: ($eachSize * 5) + ($pad * 2); --eachSize: 44px;
--height: 210px; }
&.w1 {
width: calc((var(--eachSize) * 5) + (#{$pad} * 2));
}
&.w2 {
width: calc((var(--eachSize) * 6) + (#{$pad} * 2));
}
&.w3 {
width: calc((var(--eachSize) * 7) + (#{$pad} * 2));
}
&.h1 {
--height: calc((var(--eachSize) * 4) + (#{$pad} * 2));
}
&.h2 {
--height: calc((var(--eachSize) * 6) + (#{$pad} * 2));
}
&.h3 {
--height: calc((var(--eachSize) * 8) + (#{$pad} * 2));
} }
> .search { > .search {
@ -460,8 +485,8 @@ export default defineComponent({
> button { > button {
position: relative; position: relative;
padding: 0; padding: 0;
width: $eachSize; width: var(--eachSize);
height: $eachSize; height: var(--eachSize);
border-radius: 4px; border-radius: 4px;
&:focus { &:focus {

View File

@ -500,7 +500,7 @@ export default defineComponent({
this.blur(); this.blur();
os.popup(import('@/components/emoji-picker.vue'), { os.popup(import('@/components/emoji-picker.vue'), {
src: this.$refs.reactButton, src: this.$refs.reactButton,
compact: !this.$store.state.device.useFullReactionPicker asReactionPicker: true
}, { }, {
done: reaction => { done: reaction => {
if (reaction) { if (reaction) {

View File

@ -43,7 +43,7 @@ export default defineComponent({
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss">
.novjtcto { .novjtcto {
margin: 32px 0; margin: 32px 0;

View File

@ -13,7 +13,18 @@
</template> </template>
</XDraggable> </XDraggable>
<div class="_caption" style="padding: 8px;">{{ $t('reactionSettingDescription2') }} <button class="_textButton" @click="chooseEmoji">{{ $t('chooseEmoji') }}</button></div> <div class="_caption" style="padding: 8px;">{{ $t('reactionSettingDescription2') }} <button class="_textButton" @click="chooseEmoji">{{ $t('chooseEmoji') }}</button></div>
<MkSwitch v-model:value="useFullReactionPicker">{{ $t('useFullReactionPicker') }}</MkSwitch> <MkRadios v-model="reactionPickerWidth">
<template #desc>{{ $t('width') }}</template>
<option :value="1">{{ $t('small') }}</option>
<option :value="2">{{ $t('medium') }}</option>
<option :value="3">{{ $t('large') }}</option>
</MkRadios>
<MkRadios v-model="reactionPickerHeight">
<template #desc>{{ $t('height') }}</template>
<option :value="1">{{ $t('small') }}</option>
<option :value="2">{{ $t('medium') }}</option>
<option :value="3">{{ $t('large') }}</option>
</MkRadios>
</div> </div>
<div class="_footer"> <div class="_footer">
<MkButton inline @click="preview"><Fa :icon="faEye"/> {{ $t('preview') }}</MkButton> <MkButton inline @click="preview"><Fa :icon="faEye"/> {{ $t('preview') }}</MkButton>
@ -31,6 +42,7 @@ import { VueDraggableNext } from 'vue-draggable-next';
import MkInput from '@/components/ui/input.vue'; import MkInput from '@/components/ui/input.vue';
import MkButton from '@/components/ui/button.vue'; import MkButton from '@/components/ui/button.vue';
import MkSwitch from '@/components/ui/switch.vue'; import MkSwitch from '@/components/ui/switch.vue';
import MkRadios from '@/components/ui/radios.vue';
import { emojiRegexWithCustom } from '../../../misc/emoji-regex'; import { emojiRegexWithCustom } from '../../../misc/emoji-regex';
import { defaultSettings } from '@/store'; import { defaultSettings } from '@/store';
import * as os from '@/os'; import * as os from '@/os';
@ -40,6 +52,7 @@ export default defineComponent({
MkInput, MkInput,
MkButton, MkButton,
MkSwitch, MkSwitch,
MkRadios,
XDraggable: VueDraggableNext, XDraggable: VueDraggableNext,
}, },
@ -61,6 +74,14 @@ export default defineComponent({
get() { return this.$store.state.device.useFullReactionPicker; }, get() { return this.$store.state.device.useFullReactionPicker; },
set(value) { this.$store.commit('device/set', { key: 'useFullReactionPicker', value: value }); } set(value) { this.$store.commit('device/set', { key: 'useFullReactionPicker', value: value }); }
}, },
reactionPickerWidth: {
get() { return this.$store.state.device.reactionPickerWidth; },
set(value) { this.$store.commit('device/set', { key: 'reactionPickerWidth', value: value }); }
},
reactionPickerHeight: {
get() { return this.$store.state.device.reactionPickerHeight; },
set(value) { this.$store.commit('device/set', { key: 'reactionPickerHeight', value: value }); }
},
}, },
watch: { watch: {
@ -92,7 +113,7 @@ export default defineComponent({
preview(ev) { preview(ev) {
os.popup(import('@/components/emoji-picker.vue'), { os.popup(import('@/components/emoji-picker.vue'), {
compact: !this.$store.state.device.useFullReactionPicker, asReactionPicker: true,
src: ev.currentTarget || ev.target, src: ev.currentTarget || ev.target,
}, {}, 'closed'); }, {}, 'closed');
}, },

View File

@ -78,6 +78,8 @@ export const defaultDeviceSettings = {
enableInfiniteScroll: true, enableInfiniteScroll: true,
useBlurEffectForModal: true, useBlurEffectForModal: true,
useFullReactionPicker: false, useFullReactionPicker: false,
reactionPickerWidth: 1,
reactionPickerHeight: 1,
sidebarDisplay: 'full', // full, icon, hide sidebarDisplay: 'full', // full, icon, hide
instanceTicker: 'remote', // none, remote, always instanceTicker: 'remote', // none, remote, always
roomGraphicsQuality: 'medium', roomGraphicsQuality: 'medium',