feat(client): make size of reaction picker configuable
This commit is contained in:
parent
8dd7147888
commit
cc019a217f
5 changed files with 36 additions and 7 deletions
|
@ -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
|
||||
|
|
|
@ -831,6 +831,8 @@ smartphone: "スマートフォン"
|
|||
tablet: "タブレット"
|
||||
auto: "自動"
|
||||
themeColor: "テーマカラー"
|
||||
size: "サイズ"
|
||||
numberOfColumn: "列の数"
|
||||
|
||||
_emailUnavailable:
|
||||
used: "既に使用されています"
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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'));
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue