enhance(client): リアクションピッカーの表示方法を選択できるように
This commit is contained in:
parent
2f8e3559b5
commit
f7c90b58d6
|
@ -815,6 +815,7 @@ voteConfirm: "「{choice}」に投票しますか?"
|
|||
hide: "隠す"
|
||||
leaveGroup: "グループから抜ける"
|
||||
leaveGroupConfirm: "「{name}」から抜けますか?"
|
||||
useDrawerReactionPickerForMobile: "モバイルデバイスのときドロワーで表示"
|
||||
|
||||
_emailUnavailable:
|
||||
used: "既に使用されています"
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<MkModal ref="modal" v-slot="{ type, maxHeight }" :transparent-bg="true" :manual-showing="manualShowing" :src="src" :front="true" @click="$refs.modal.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')">
|
||||
<MkModal ref="modal" v-slot="{ type, maxHeight }" :prefer-type="asReactionPicker && $store.state.reactionPickerUseDrawerForMobile === false ? 'popup' : 'auto'" :transparent-bg="true" :manual-showing="manualShowing" :src="src" :front="true" @click="$refs.modal.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')">
|
||||
<MkEmojiPicker ref="picker" class="ryghynhb _popup _shadow" :class="{ drawer: type === 'drawer' }" :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" :as-drawer="type === 'drawer'" :max-height="maxHeight" @chosen="chosen"/>
|
||||
</MkModal>
|
||||
</template>
|
||||
|
|
|
@ -29,11 +29,14 @@
|
|||
<option :value="2">{{ $ts.medium }}</option>
|
||||
<option :value="3">{{ $ts.large }}</option>
|
||||
</FormRadios>
|
||||
|
||||
<FormSwitch v-model="reactionPickerUseDrawerForMobile" class="_formBlock">{{ $ts.useDrawerReactionPickerForMobile }}</FormSwitch>
|
||||
|
||||
<FormSection>
|
||||
<FormButton @click="preview"><i class="fas fa-eye"></i> {{ $ts.preview }}</FormButton>
|
||||
</FormSection>
|
||||
<FormSection>
|
||||
<FormButton danger @click="setDefault"><i class="fas fa-undo"></i> {{ $ts.default }}</FormButton>
|
||||
<div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
|
||||
<FormButton inline @click="preview"><i class="fas fa-eye"></i> {{ $ts.preview }}</FormButton>
|
||||
<FormButton inline danger @click="setDefault"><i class="fas fa-undo"></i> {{ $ts.default }}</FormButton>
|
||||
</div>
|
||||
</FormSection>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -46,6 +49,7 @@ import FormRadios from '@/components/form/radios.vue';
|
|||
import FromSlot from '@/components/form/slot.vue';
|
||||
import FormButton from '@/components/ui/button.vue';
|
||||
import FormSection from '@/components/form/section.vue';
|
||||
import FormSwitch from '@/components/form/switch.vue';
|
||||
import * as os from '@/os';
|
||||
import { defaultStore } from '@/store';
|
||||
import * as symbols from '@/symbols';
|
||||
|
@ -57,6 +61,7 @@ export default defineComponent({
|
|||
FromSlot,
|
||||
FormRadios,
|
||||
FormSection,
|
||||
FormSwitch,
|
||||
XDraggable,
|
||||
},
|
||||
|
||||
|
@ -80,6 +85,7 @@ export default defineComponent({
|
|||
computed: {
|
||||
reactionPickerWidth: defaultStore.makeGetterSetter('reactionPickerWidth'),
|
||||
reactionPickerHeight: defaultStore.makeGetterSetter('reactionPickerHeight'),
|
||||
reactionPickerUseDrawerForMobile: defaultStore.makeGetterSetter('reactionPickerUseDrawerForMobile'),
|
||||
},
|
||||
|
||||
watch: {
|
||||
|
|
|
@ -178,6 +178,10 @@ export const defaultStore = markRaw(new Storage('base', {
|
|||
where: 'device',
|
||||
default: 1
|
||||
},
|
||||
reactionPickerUseDrawerForMobile: {
|
||||
where: 'device',
|
||||
default: true,
|
||||
},
|
||||
recentlyUsedEmojis: {
|
||||
where: 'device',
|
||||
default: [] as string[]
|
||||
|
|
Loading…
Reference in New Issue