From 832019b2c26f7b219db75e47060ab95251c14c26 Mon Sep 17 00:00:00 2001
From: Alexander Tumin <iamtakingiteasy@eientei.org>
Date: Thu, 2 Mar 2023 11:13:05 +0300
Subject: Hide custom emoji in reaction picker when BE does not advertise
 pleroma_custom_emoji_reactions

---
 src/modules/instance.js | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src/modules')

diff --git a/src/modules/instance.js b/src/modules/instance.js
index 938ca64d..bb0292da 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -123,6 +123,7 @@ const defaultState = {
   // Feature-set, apparently, not everything here is reported...
   shoutAvailable: false,
   pleromaChatMessagesAvailable: false,
+  pleromaCustomEmojiReactionsAvailable: false,
   gopherAvailable: false,
   mediaProxyAvailable: false,
   suggestionsEnabled: false,
-- 
cgit v1.2.3-70-g09d2


From 3403f6a1ed5388291244487ae7eb3190d7c4353e Mon Sep 17 00:00:00 2001
From: Alexander Tumin <iamtakingiteasy@eientei.org>
Date: Fri, 17 Mar 2023 23:30:46 +0300
Subject: Allow custom emoji reactions: add option to scale reaction buttons

---
 src/components/emoji_reactions/emoji_reactions.vue | 27 ++++++++++++++--------
 src/components/settings_modal/tabs/general_tab.vue |  9 ++++++++
 src/i18n/en.json                                   |  1 +
 src/modules/config.js                              |  2 ++
 src/services/style_setter/style_setter.js          |  4 ++--
 5 files changed, 32 insertions(+), 11 deletions(-)

(limited to 'src/modules')

diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index 12783114..eb46018e 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -12,20 +12,20 @@
         @mouseenter="fetchEmojiReactionsByIfMissing()"
       >
         <span
-          v-if="reaction.url"
           class="reaction-emoji"
         >
           <img
+            v-if="reaction.url"
             :src="reaction.url"
             :title="reaction.name"
             class="reaction-emoji-content"
             width="1em"
           >
+          <span
+            v-else
+            class="reaction-emoji reaction-emoji-content"
+          >{{ reaction.name }}</span>
         </span>
-        <span
-          v-else
-          class="reaction-emoji reaction-emoji-content"
-        >{{ reaction.name }}</span>
         <span>{{ reaction.count }}</span>
       </button>
     </UserListPopover>
@@ -49,6 +49,8 @@
   margin-top: 0.25em;
   flex-wrap: wrap;
 
+  --emoji-size: calc(1.25em * var(--emojiReactionsScale, 1));
+
   .emoji-reaction {
     padding: 0 0.5em;
     margin-right: 0.5em;
@@ -59,17 +61,24 @@
     box-sizing: border-box;
 
     .reaction-emoji {
-      width: 1.25em;
-      height: 1.25em;
+      width: var(--emoji-size);
+      height: var(--emoji-size);
       margin-right: 0.25em;
+      line-height: var(--emoji-size);
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
 
     .reaction-emoji-content {
-      max-width: 1.25em;
-      max-height: 1.25em;
+      max-width: 100%;
+      max-height: 100%;
       width: auto;
       height: auto;
+      line-height: inherit;
       overflow: hidden;
+      font-size: calc(var(--emoji-size) * 0.8);
+      margin: 0;
     }
 
     &:focus {
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 65248ac1..17afc5ba 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -271,6 +271,15 @@
             {{ $t('settings.no_rich_text_description') }}
           </BooleanSetting>
         </li>
+        <li>
+          <IntegerSetting
+            v-if="user"
+            path="emojiReactionsScale"
+            expert="1"
+          >
+            {{ $t('settings.emoji_reactions_scale') }}
+          </IntegerSetting>
+        </li>
         <h3>{{ $t('settings.attachments') }}</h3>
         <li>
           <BooleanSetting
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 6c9bc8e2..10ba2ef8 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -467,6 +467,7 @@
     "pad_emoji": "Pad emoji with spaces when adding from picker",
     "autocomplete_select_first": "Automatically select the first candidate when autocomplete results are available",
     "emoji_reactions_on_timeline": "Show emoji reactions on timeline",
+    "emoji_reactions_scale": "Reactions scale factor",
     "export_theme": "Save preset",
     "filtering": "Filtering",
     "wordfilter": "Wordfilter",
diff --git a/src/modules/config.js b/src/modules/config.js
index 3d9cf591..7597886e 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -97,6 +97,7 @@ export const defaultState = {
   sidebarColumnWidth: '25rem',
   contentColumnWidth: '45rem',
   notifsColumnWidth: '25rem',
+  emojiReactionsScale: 1.0,
   navbarColumnStretch: false,
   greentext: undefined, // instance default
   useAtIcon: undefined, // instance default
@@ -185,6 +186,7 @@ const config = {
         case 'sidebarColumnWidth':
         case 'contentColumnWidth':
         case 'notifsColumnWidth':
+        case 'emojiReactionsScale':
           applyConfig(state)
           break
         case 'customTheme':
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index d6e973a1..43fe3c73 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -21,8 +21,8 @@ export const applyTheme = (input) => {
   body.classList.remove('hidden')
 }
 
-const configColumns = ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth }) =>
-  ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth })
+const configColumns = ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth, emojiReactionsScale }) =>
+  ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth, emojiReactionsScale })
 
 const defaultConfigColumns = configColumns(defaultState)
 
-- 
cgit v1.2.3-70-g09d2