diff options
Diffstat (limited to 'packages/client/src')
| -rw-r--r-- | packages/client/src/components/emoji-picker-dialog.vue | 2 | ||||
| -rw-r--r-- | packages/client/src/pages/settings/reaction.vue | 14 | ||||
| -rw-r--r-- | packages/client/src/store.ts | 4 |
3 files changed, 15 insertions, 5 deletions
diff --git a/packages/client/src/components/emoji-picker-dialog.vue b/packages/client/src/components/emoji-picker-dialog.vue index 703b27a3e2..d2a405ef5a 100644 --- a/packages/client/src/components/emoji-picker-dialog.vue +++ b/packages/client/src/components/emoji-picker-dialog.vue @@ -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> diff --git a/packages/client/src/pages/settings/reaction.vue b/packages/client/src/pages/settings/reaction.vue index 4d500f5b47..1df61ac471 100644 --- a/packages/client/src/pages/settings/reaction.vue +++ b/packages/client/src/pages/settings/reaction.vue @@ -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: { diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts index 955d94a074..2290a21778 100644 --- a/packages/client/src/store.ts +++ b/packages/client/src/store.ts @@ -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[] |