Improve reaction picker

3 files changed, 37 insertions, 12 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;