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