feat(client): make size of reaction picker configuable

This commit is contained in:
syuilo 2022-02-11 13:38:47 +09:00
parent 8dd7147888
commit cc019a217f
5 changed files with 36 additions and 7 deletions

View file

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

View file

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

View file

@ -1,5 +1,5 @@
<template> <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()"> <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"> <div ref="emojis" class="emojis">
<section class="result"> <section class="result">
@ -105,15 +105,16 @@ const emojis = ref<HTMLDivElement>();
const { const {
reactions: pinned, reactions: pinned,
reactionPickerSize,
reactionPickerWidth, reactionPickerWidth,
reactionPickerHeight, reactionPickerHeight,
disableShowingAnimatedImages, disableShowingAnimatedImages,
recentlyUsedEmojis, recentlyUsedEmojis,
} = defaultStore.reactiveState; } = defaultStore.reactiveState;
const size = computed(() => props.asReactionPicker ? reactionPickerSize.value : 1);
const width = computed(() => props.asReactionPicker ? reactionPickerWidth.value : 3); const width = computed(() => props.asReactionPicker ? reactionPickerWidth.value : 3);
const height = computed(() => props.asReactionPicker ? reactionPickerHeight.value : 2); const height = computed(() => props.asReactionPicker ? reactionPickerHeight.value : 2);
const big = props.asReactionPicker ? isTouchUsing : false;
const customEmojiCategories = emojiCategories; const customEmojiCategories = emojiCategories;
const customEmojis = instance.emojis; const customEmojis = instance.emojis;
const q = ref<string | null>(null); const q = ref<string | null>(null);
@ -345,13 +346,20 @@ defineExpose({
<style lang="scss" scoped> <style lang="scss" scoped>
.omfetrab { .omfetrab {
$pad: 8px; $pad: 8px;
--eachSize: 40px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
&.big { &.s1 {
--eachSize: 44px; --eachSize: 40px;
}
&.s2 {
--eachSize: 45px;
}
&.s3 {
--eachSize: 50px;
} }
&.w1 { &.w1 {

View file

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

View file

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