feat(client): make size of reaction picker configuable

CHANGELOG.md

@@ -10,6 +10,14 @@
 You should also include the user name that made the change.
 -->
 
+## 12.x.x (unreleased)
+
+### Improvements
+- クライアント: リアクションピッカーのサイズを設定できるように @syuilo
+
+### Bugfixes
+- 
+
 ## 12.105.0 (2022/02/09)
 
 ### Improvements

locales/ja-JP.yml

@@ -831,6 +831,8 @@ smartphone: "スマートフォン"
 tablet: "タブレット"
 auto: "自動"
 themeColor: "テーマカラー"
+size: "サイズ"
+numberOfColumn: "列の数"
 
 _emailUnavailable:
   used: "既に使用されています"

packages/client/src/components/emoji-picker.vue

@@ -1,5 +1,5 @@
 <template>
-<div class="omfetrab" :class="['w' + width, 'h' + height, { big, asDrawer }]" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }">
+<div class="omfetrab" :class="['s' + size, 'w' + width, 'h' + height, { asDrawer }]" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }">
 	<input ref="search" v-model.trim="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="i18n.ts.search" @paste.stop="paste" @keyup.enter="done()">
 	<div ref="emojis" class="emojis">
 		<section class="result">
@@ -105,15 +105,16 @@ const emojis = ref<HTMLDivElement>();
 
 const {
 	reactions: pinned,
+	reactionPickerSize,
 	reactionPickerWidth,
 	reactionPickerHeight,
 	disableShowingAnimatedImages,
 	recentlyUsedEmojis,
 } = defaultStore.reactiveState;
 
+const size = computed(() => props.asReactionPicker ? reactionPickerSize.value : 1);
 const width = computed(() => props.asReactionPicker ? reactionPickerWidth.value : 3);
 const height = computed(() => props.asReactionPicker ? reactionPickerHeight.value : 2);
-const big = props.asReactionPicker ? isTouchUsing : false;
 const customEmojiCategories = emojiCategories;
 const customEmojis = instance.emojis;
 const q = ref<string | null>(null);
@@ -345,13 +346,20 @@ defineExpose({
 <style lang="scss" scoped>
 .omfetrab {
 	$pad: 8px;
-	--eachSize: 40px;
 
 	display: flex;
 	flex-direction: column;
 
-	&.big {
+	&.s1 {
-		--eachSize: 44px;
+		--eachSize: 40px;
+	}
+
+	&.s2 {
+		--eachSize: 45px;
+	}
+
+	&.s3 {
+		--eachSize: 50px;
 	}
 
 	&.w1 {

packages/client/src/pages/settings/reaction.vue

@@ -17,12 +17,18 @@
 		<template #caption>{{ $ts.reactionSettingDescription2 }} <button class="_textButton" @click="preview">{{ $ts.preview }}</button></template>
 	</FromSlot>
 
-	<FormRadios v-model="reactionPickerWidth" class="_formBlock">
+	<FormRadios v-model="reactionPickerSize" class="_formBlock">
-		<template #label>{{ $ts.width }}</template>
+		<template #label>{{ $ts.size }}</template>
 		<option :value="1">{{ $ts.small }}</option>
 		<option :value="2">{{ $ts.medium }}</option>
 		<option :value="3">{{ $ts.large }}</option>
 	</FormRadios>
+	<FormRadios v-model="reactionPickerWidth" class="_formBlock">
+		<template #label>{{ $ts.numberOfColumn }}</template>
+		<option :value="1">5</option>
+		<option :value="2">6</option>
+		<option :value="3">7</option>
+	</FormRadios>
 	<FormRadios v-model="reactionPickerHeight" class="_formBlock">
 		<template #label>{{ $ts.height }}</template>
 		<option :value="1">{{ $ts.small }}</option>
@@ -60,6 +66,7 @@ import { i18n } from '@/i18n';
 
 let reactions = $ref(JSON.parse(JSON.stringify(defaultStore.state.reactions)));
 
+const reactionPickerSize = $computed(defaultStore.makeGetterSetter('reactionPickerSize'));
 const reactionPickerWidth = $computed(defaultStore.makeGetterSetter('reactionPickerWidth'));
 const reactionPickerHeight = $computed(defaultStore.makeGetterSetter('reactionPickerHeight'));
 const reactionPickerUseDrawerForMobile = $computed(defaultStore.makeGetterSetter('reactionPickerUseDrawerForMobile'));

packages/client/src/store.ts

@@ -182,6 +182,10 @@ export const defaultStore = markRaw(new Storage('base', {
 		where: 'device',
 		default: 'remote' as 'none' | 'remote' | 'always'
 	},
+	reactionPickerSize: {
+		where: 'device',
+		default: 1
+	},
 	reactionPickerWidth: {
 		where: 'device',
 		default: 1