From 998aa8f732bbf9d074abeb5916ceb5effd8afe5c Mon Sep 17 00:00:00 2001 From: Alexander Tumin Date: Sun, 18 Dec 2022 22:04:58 +0300 Subject: Allow custom emoji reactions --- src/components/emoji_reactions/emoji_reactions.vue | 27 ++++++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) (limited to 'src/components/emoji_reactions/emoji_reactions.vue') diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue index a63daa97..12783114 100644 --- a/src/components/emoji_reactions/emoji_reactions.vue +++ b/src/components/emoji_reactions/emoji_reactions.vue @@ -2,7 +2,7 @@
@@ -46,9 +60,18 @@ .reaction-emoji { width: 1.25em; + height: 1.25em; margin-right: 0.25em; } + .reaction-emoji-content { + max-width: 1.25em; + max-height: 1.25em; + width: auto; + height: auto; + overflow: hidden; + } + &:focus { outline: none; } -- cgit v1.2.3-70-g09d2 From 3403f6a1ed5388291244487ae7eb3190d7c4353e Mon Sep 17 00:00:00 2001 From: Alexander Tumin 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/components/emoji_reactions/emoji_reactions.vue') 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()" > + {{ reaction.name }} - {{ reaction.name }} {{ reaction.count }} @@ -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') }} +
  • + + {{ $t('settings.emoji_reactions_scale') }} + +
  • {{ $t('settings.attachments') }}

  • { 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 From ed23f51838477dc04fb5daedb6bf1bdf96f2ca65 Mon Sep 17 00:00:00 2001 From: tusooa Date: Mon, 22 May 2023 22:02:22 -0400 Subject: Make reaction button accessible --- src/components/emoji_reactions/emoji_reactions.js | 12 +++ src/components/emoji_reactions/emoji_reactions.vue | 104 +++++++++++++++++++-- 2 files changed, 108 insertions(+), 8 deletions(-) (limited to 'src/components/emoji_reactions/emoji_reactions.vue') diff --git a/src/components/emoji_reactions/emoji_reactions.js b/src/components/emoji_reactions/emoji_reactions.js index bb11b840..b3520a55 100644 --- a/src/components/emoji_reactions/emoji_reactions.js +++ b/src/components/emoji_reactions/emoji_reactions.js @@ -1,5 +1,17 @@ import UserAvatar from '../user_avatar/user_avatar.vue' import UserListPopover from '../user_list_popover/user_list_popover.vue' +import { library } from '@fortawesome/fontawesome-svg-core' +import { + faPlus, + faMinus, + faCheck +} from '@fortawesome/free-solid-svg-icons' + +library.add( + faPlus, + faMinus, + faCheck +) const EMOJI_REACTION_COUNT_CUTOFF = 12 diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue index eb46018e..3171785b 100644 --- a/src/components/emoji_reactions/emoji_reactions.vue +++ b/src/components/emoji_reactions/emoji_reactions.vue @@ -1,15 +1,14 @@