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

View File

@ -1,6 +1,6 @@
<template>
<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()">
<div class="emojis">
<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 Particle from '@/components/particle.vue';
import * as os from '@/os';
import { isDeviceTouch } from '../scripts/is-device-touch';
export default defineComponent({
components: {
@ -113,7 +114,7 @@ export default defineComponent({
required: false,
default: true
},
compact: {
asReactionPicker: {
required: false
},
},
@ -125,6 +126,9 @@ export default defineComponent({
emojilist: markRaw(emojilist),
getStaticImageUrl,
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'],
customEmojis: this.$store.state.instance.meta.emojis,
visibleCategories: {},
@ -385,18 +389,39 @@ export default defineComponent({
<style lang="scss" scoped>
.omfetrab {
$eachSize: 40px;
$pad: 8px;
--eachSize: 40px;
display: flex;
flex-direction: column;
width: ($eachSize * 7) + ($pad * 2);
contain: content;
--height: 300px;
&.compact {
width: ($eachSize * 5) + ($pad * 2);
--height: 210px;
&.big {
--eachSize: 44px;
}
&.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 {
@ -460,8 +485,8 @@ export default defineComponent({
> button {
position: relative;
padding: 0;
width: $eachSize;
height: $eachSize;
width: var(--eachSize);
height: var(--eachSize);
border-radius: 4px;
&:focus {

View File

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

View File

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

View File

@ -13,7 +13,18 @@
</template>
</XDraggable>
<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 class="_footer">
<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 MkButton from '@/components/ui/button.vue';
import MkSwitch from '@/components/ui/switch.vue';
import MkRadios from '@/components/ui/radios.vue';
import { emojiRegexWithCustom } from '../../../misc/emoji-regex';
import { defaultSettings } from '@/store';
import * as os from '@/os';
@ -40,6 +52,7 @@ export default defineComponent({
MkInput,
MkButton,
MkSwitch,
MkRadios,
XDraggable: VueDraggableNext,
},
@ -61,6 +74,14 @@ export default defineComponent({
get() { return this.$store.state.device.useFullReactionPicker; },
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: {
@ -92,7 +113,7 @@ export default defineComponent({
preview(ev) {
os.popup(import('@/components/emoji-picker.vue'), {
compact: !this.$store.state.device.useFullReactionPicker,
asReactionPicker: true,
src: ev.currentTarget || ev.target,
}, {}, 'closed');
},

View File

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