laoxong/misskey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

enhance(client): リアクションピッカーの表示方法を選択できるように

Browse Source
This commit is contained in:
syuilo 2021-12-17 16:14:31 +09:00
parent 2f8e3559b5
commit f7c90b58d6
4 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
locales/ja-JP.yml
View File

@ -815,6 +815,7 @@ voteConfirm: "「{choice}」に投票しますか？"
hide: "隠す" hide: "隠す"
leaveGroup: "グループから抜ける" leaveGroup: "グループから抜ける"
leaveGroupConfirm: "「{name}」から抜けますか？" leaveGroupConfirm: "「{name}」から抜けますか？"
useDrawerReactionPickerForMobile: "モバイルデバイスのときドロワーで表示"
_emailUnavailable: _emailUnavailable:
used: "既に使用されています" used: "既に使用されています"

2
packages/client/src/components/emoji-picker-dialog.vue
View File

@ -1,5 +1,5 @@
<template> <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"/> <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> </MkModal>
</template> </template>

14
packages/client/src/pages/settings/reaction.vue
View File

@ -29,11 +29,14 @@
<option :value="2">{{ $ts.medium }}</option> <option :value="2">{{ $ts.medium }}</option>
<option :value="3">{{ $ts.large }}</option> <option :value="3">{{ $ts.large }}</option>
</FormRadios> </FormRadios>
<FormSwitch v-model="reactionPickerUseDrawerForMobile" class="_formBlock">{{ $ts.useDrawerReactionPickerForMobile }}</FormSwitch>
<FormSection> <FormSection>
<FormButton @click="preview"><i class="fas fa-eye"></i> {{ $ts.preview }}</FormButton> <div style="display: flex; gap: var(--margin); flex-wrap: wrap;">
</FormSection> <FormButton inline @click="preview"><i class="fas fa-eye"></i> {{ $ts.preview }}</FormButton>
<FormSection> <FormButton inline danger @click="setDefault"><i class="fas fa-undo"></i> {{ $ts.default }}</FormButton>
<FormButton danger @click="setDefault"><i class="fas fa-undo"></i> {{ $ts.default }}</FormButton> </div>
</FormSection> </FormSection>
</div> </div>
</template> </template>
@ -46,6 +49,7 @@ import FormRadios from '@/components/form/radios.vue';
import FromSlot from '@/components/form/slot.vue'; import FromSlot from '@/components/form/slot.vue';
import FormButton from '@/components/ui/button.vue'; import FormButton from '@/components/ui/button.vue';
import FormSection from '@/components/form/section.vue'; import FormSection from '@/components/form/section.vue';
import FormSwitch from '@/components/form/switch.vue';
import * as os from '@/os'; import * as os from '@/os';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
import * as symbols from '@/symbols'; import * as symbols from '@/symbols';
@ -57,6 +61,7 @@ export default defineComponent({
FromSlot, FromSlot,
FormRadios, FormRadios,
FormSection, FormSection,
FormSwitch,
XDraggable, XDraggable,
}, },
@ -80,6 +85,7 @@ export default defineComponent({
computed: { computed: {
reactionPickerWidth: defaultStore.makeGetterSetter('reactionPickerWidth'), reactionPickerWidth: defaultStore.makeGetterSetter('reactionPickerWidth'),
reactionPickerHeight: defaultStore.makeGetterSetter('reactionPickerHeight'), reactionPickerHeight: defaultStore.makeGetterSetter('reactionPickerHeight'),
reactionPickerUseDrawerForMobile: defaultStore.makeGetterSetter('reactionPickerUseDrawerForMobile'),
}, },
watch: { watch: {

4
packages/client/src/store.ts
View File

@ -178,6 +178,10 @@ export const defaultStore = markRaw(new Storage('base', {
where: 'device', where: 'device',
default: 1 default: 1
}, },
reactionPickerUseDrawerForMobile: {
where: 'device',
default: true,
},
recentlyUsedEmojis: { recentlyUsedEmojis: {
where: 'device', where: 'device',
default: [] as string[] default: [] as string[]