diff --git a/CHANGELOG.md b/CHANGELOG.md index 10a3941423..48ac66646c 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 6caa3e3778..f4c9d19981 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -831,6 +831,8 @@ smartphone: "スマートフォン" tablet: "タブレット" auto: "自動" themeColor: "テーマカラー" +size: "サイズ" +numberOfColumn: "列の数" _emailUnavailable: used: "既に使用されています" diff --git a/packages/client/src/components/emoji-picker.vue b/packages/client/src/components/emoji-picker.vue index 3e1208979f..4e589b1619 100644 --- a/packages/client/src/components/emoji-picker.vue +++ b/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 { - --eachSize: 44px; + &.s1 { + --eachSize: 40px; + } + + &.s2 { + --eachSize: 45px; + } + + &.s3 { + --eachSize: 50px; } &.w1 { diff --git a/packages/client/src/pages/settings/reaction.vue b/packages/client/src/pages/settings/reaction.vue index ae3e1a1187..a6b1f31308 100644 --- a/packages/client/src/pages/settings/reaction.vue +++ b/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"> - <template #label>{{ $ts.width }}</template> + <FormRadios v-model="reactionPickerSize" class="_formBlock"> + <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')); diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts index 0e71060cda..fad54924ad 100644 --- a/packages/client/src/store.ts +++ b/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