Improve reaction picker

5 files changed, 62 insertions, 14 deletions

diff --git a/src/client/components/emoji-picker.vue b/src/client/components/emoji-picker.vue
index 2cf8add506..30d0e060ba 100644
--- a/src/client/components/emoji-picker.vue
+++ b/src/client/components/emoji-picker.vue
@@ -1,6 +1,6 @@
 <template>
 <MkModal ref="modal" :src="src" @click="$refs.modal.close()" @closed="$emit('closed')">
-	<div class="omfetrab _popup" :class="{ compact }">
+	<div class="omfetrab _popup" :class="['w' + width, 'h' + height, { big }]">
 		<input ref="search" class="search" :class="{ filled: q != null && q != '' }" v-model.trim="q" :placeholder="$t('search')" @paste.stop="paste" @keyup.enter="done()">
 		<div class="emojis">
 			<section class="result">
@@ -99,6 +99,7 @@ import { faHeart, faFlag, faLaugh } from '@fortawesome/free-regular-svg-icons';
 import MkModal from '@/components/ui/modal.vue';
 import Particle from '@/components/particle.vue';
 import * as os from '@/os';
+import { isDeviceTouch } from '../scripts/is-device-touch';
 
 export default defineComponent({
 	components: {
@@ -113,7 +114,7 @@ export default defineComponent({
 			required: false,
 			default: true
 		},
-		compact: {
+		asReactionPicker: {
 			required: false
 		},
 	},
@@ -125,6 +126,9 @@ export default defineComponent({
 			emojilist: markRaw(emojilist),
 			getStaticImageUrl,
 			pinned: this.$store.state.settings.reactions,
+			width: this.asReactionPicker ? this.$store.state.device.reactionPickerWidth : 3,
+			height: this.asReactionPicker ? this.$store.state.device.reactionPickerHeight : 2,
+			big: this.asReactionPicker ? isDeviceTouch : false,
 			customEmojiCategories: this.$store.getters['instance/emojiCategories'],
 			customEmojis: this.$store.state.instance.meta.emojis,
 			visibleCategories: {},
@@ -385,18 +389,39 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .omfetrab {
-	$eachSize: 40px;
 	$pad: 8px;
+	--eachSize: 40px;
 
 	display: flex;
 	flex-direction: column;
-	width: ($eachSize * 7) + ($pad * 2);
 	contain: content;
-	--height: 300px;
 
-	&.compact {
-		width: ($eachSize * 5) + ($pad * 2);
-		--height: 210px;
+	&.big {
+		--eachSize: 44px;
+	}
+
+	&.w1 {
+		width: calc((var(--eachSize) * 5) + (#{$pad} * 2));
+	}
+
+	&.w2 {
+		width: calc((var(--eachSize) * 6) + (#{$pad} * 2));
+	}
+
+	&.w3 {
+		width: calc((var(--eachSize) * 7) + (#{$pad} * 2));
+	}
+
+	&.h1 {
+		--height: calc((var(--eachSize) * 4) + (#{$pad} * 2));
+	}
+
+	&.h2 {
+		--height: calc((var(--eachSize) * 6) + (#{$pad} * 2));
+	}
+
+	&.h3 {
+		--height: calc((var(--eachSize) * 8) + (#{$pad} * 2));
 	}
 
 	> .search {
@@ -460,8 +485,8 @@ export default defineComponent({
 				> button {
 					position: relative;
 					padding: 0;
-					width: $eachSize;
-					height: $eachSize;
+					width: var(--eachSize);
+					height: var(--eachSize);
 					border-radius: 4px;
 
 					&:focus {
diff --git a/src/client/components/note.vue b/src/client/components/note.vue
index 3f3e0c30be..071acf7c90 100644
--- a/src/client/components/note.vue
+++ b/src/client/components/note.vue
@@ -500,7 +500,7 @@ export default defineComponent({
 			this.blur();
 			os.popup(import('@/components/emoji-picker.vue'), {
 				src: this.$refs.reactButton,
-				compact: !this.$store.state.device.useFullReactionPicker
+				asReactionPicker: true
 			}, {
 				done: reaction => {
 					if (reaction) {
diff --git a/src/client/components/ui/radios.vue b/src/client/components/ui/radios.vue
index ea2d983afe..556790dafd 100644
--- a/src/client/components/ui/radios.vue
+++ b/src/client/components/ui/radios.vue
@@ -43,7 +43,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .novjtcto {
 	margin: 32px 0;
 
diff --git a/src/client/pages/settings/reaction.vue b/src/client/pages/settings/reaction.vue
index f67ad8fa4c..88de091441 100644
--- a/src/client/pages/settings/reaction.vue
+++ b/src/client/pages/settings/reaction.vue
@@ -13,7 +13,18 @@
 				</template>
 			</XDraggable>
 			<div class="_caption" style="padding: 8px;">{{ $t('reactionSettingDescription2') }} <button class="_textButton" @click="chooseEmoji">{{ $t('chooseEmoji') }}</button></div>
-			<MkSwitch v-model:value="useFullReactionPicker">{{ $t('useFullReactionPicker') }}</MkSwitch>
+			<MkRadios v-model="reactionPickerWidth">
+				<template #desc>{{ $t('width') }}</template>
+				<option :value="1">{{ $t('small') }}</option>
+				<option :value="2">{{ $t('medium') }}</option>
+				<option :value="3">{{ $t('large') }}</option>
+			</MkRadios>
+			<MkRadios v-model="reactionPickerHeight">
+				<template #desc>{{ $t('height') }}</template>
+				<option :value="1">{{ $t('small') }}</option>
+				<option :value="2">{{ $t('medium') }}</option>
+				<option :value="3">{{ $t('large') }}</option>
+			</MkRadios>
 		</div>
 		<div class="_footer">
 			<MkButton inline @click="preview"><Fa :icon="faEye"/> {{ $t('preview') }}</MkButton>
@@ -31,6 +42,7 @@ import { VueDraggableNext } from 'vue-draggable-next';
 import MkInput from '@/components/ui/input.vue';
 import MkButton from '@/components/ui/button.vue';
 import MkSwitch from '@/components/ui/switch.vue';
+import MkRadios from '@/components/ui/radios.vue';
 import { emojiRegexWithCustom } from '../../../misc/emoji-regex';
 import { defaultSettings } from '@/store';
 import * as os from '@/os';
@@ -40,6 +52,7 @@ export default defineComponent({
 		MkInput,
 		MkButton,
 		MkSwitch,
+		MkRadios,
 		XDraggable: VueDraggableNext,
 	},
 
@@ -61,6 +74,14 @@ export default defineComponent({
 			get() { return this.$store.state.device.useFullReactionPicker; },
 			set(value) { this.$store.commit('device/set', { key: 'useFullReactionPicker', value: value }); }
 		},
+		reactionPickerWidth: {
+			get() { return this.$store.state.device.reactionPickerWidth; },
+			set(value) { this.$store.commit('device/set', { key: 'reactionPickerWidth', value: value }); }
+		},
+		reactionPickerHeight: {
+			get() { return this.$store.state.device.reactionPickerHeight; },
+			set(value) { this.$store.commit('device/set', { key: 'reactionPickerHeight', value: value }); }
+		},
 	},
 
 	watch: {
@@ -92,7 +113,7 @@ export default defineComponent({
 
 		preview(ev) {
 			os.popup(import('@/components/emoji-picker.vue'), {
-				compact: !this.$store.state.device.useFullReactionPicker,
+				asReactionPicker: true,
 				src: ev.currentTarget || ev.target,
 			}, {}, 'closed');
 		},
diff --git a/src/client/store.ts b/src/client/store.ts
index 76295e5489..cb7f993378 100644
--- a/src/client/store.ts
+++ b/src/client/store.ts
@@ -78,6 +78,8 @@ export const defaultDeviceSettings = {
 	enableInfiniteScroll: true,
 	useBlurEffectForModal: true,
 	useFullReactionPicker: false,
+	reactionPickerWidth: 1,
+	reactionPickerHeight: 1,
 	sidebarDisplay: 'full', // full, icon, hide
 	instanceTicker: 'remote', // none, remote, always
 	roomGraphicsQuality: 'medium',