From 0ccaad63753562029d283f8ea03ce2d432083a09 Mon Sep 17 00:00:00 2001
From: Harshil Patel <harshilpatel1973@gmail.com>
Date: Sat, 20 Aug 2022 14:28:50 +0530
Subject: [PATCH] room-history: Make text reactions smaller
 data/resources/style.css: Added class for font on applying reaction
 src/session/content/room_history/message_row/reaction.rs: Added check if
 reaction contains text or not src/utils.rs: Added regex function for general
 purpose

Even if it's their primary use in clients is to send emoji reactions, reactions can actually contain any text.
We have to make sure that we ellipsize long texts, and we need to fix the font as it's currently too big.

To fix this issue, I used regex function to check whether reaction contains text or not.

https://gitlab.gnome.org/GNOME/fractal/-/issues/1044

Part-of: <https://gitlab.gnome.org/GNOME/fractal/-/merge_requests/1134>
---
 data/resources/style.css                      |  3 +++
 data/resources/ui/content-message-reaction.ui |  2 ++
 .../room_history/message_row/reaction.rs      |  9 +++++++-
 .../content/room_history/message_row/text.rs  | 18 +---------------
 src/utils.rs                                  | 21 +++++++++++++++++--
 5 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/data/resources/style.css b/data/resources/style.css
index 08f3d628..43f83b24 100644
--- a/data/resources/style.css
+++ b/data/resources/style.css
@@ -444,6 +444,9 @@ message-reactions .toggle:checked {
 }
 
 message-reactions .reaction-key {
+  font-size: 0.8em;
+}
+message-reactions .reaction-key.emoji{
   font-size: 1.1em;
 }
 
diff --git a/data/resources/ui/content-message-reaction.ui b/data/resources/ui/content-message-reaction.ui
index ed36d551..b677cbf6 100644
--- a/data/resources/ui/content-message-reaction.ui
+++ b/data/resources/ui/content-message-reaction.ui
@@ -12,6 +12,8 @@
           <object class="GtkBox">
             <child>
               <object class="GtkLabel" id="reaction_key">
+                <property name="max-width-chars">23</property>
+                <property name="ellipsize">end</property>
                 <style>
                   <class name="reaction-key"/>
                 </style>
diff --git a/src/session/content/room_history/message_row/reaction.rs b/src/session/content/room_history/message_row/reaction.rs
index b67e54c2..3a3f2781 100644
--- a/src/session/content/room_history/message_row/reaction.rs
+++ b/src/session/content/room_history/message_row/reaction.rs
@@ -1,7 +1,7 @@
 use adw::subclass::prelude::*;
 use gtk::{glib, prelude::*, CompositeTemplate};
 
-use crate::session::room::ReactionGroup;
+use crate::{session::room::ReactionGroup, utils::EMOJI_REGEX};
 
 mod imp {
     use glib::subclass::InitializingObject;
@@ -95,6 +95,13 @@ impl MessageReaction {
         let priv_ = self.imp();
         let key = group.key();
         priv_.reaction_key.set_label(key);
+
+        if EMOJI_REGEX.is_match(key) {
+            priv_.reaction_key.add_css_class("emoji");
+        } else {
+            priv_.reaction_key.remove_css_class("emoji");
+        }
+
         priv_
             .button
             .set_action_target_value(Some(&key.to_variant()));
diff --git a/src/session/content/room_history/message_row/text.rs b/src/session/content/room_history/message_row/text.rs
index 7b067e88..6bc88831 100644
--- a/src/session/content/room_history/message_row/text.rs
+++ b/src/session/content/room_history/message_row/text.rs
@@ -10,30 +10,14 @@ use matrix_sdk::ruma::{
     matrix_uri::MatrixId,
     MatrixToUri, MatrixUri,
 };
-use once_cell::sync::Lazy;
-use regex::Regex;
 use sourceview::prelude::*;
 
 use crate::{
     components::{LabelWithWidgets, Pill, DEFAULT_PLACEHOLDER},
     session::{room::Member, Room, UserExt},
+    utils::EMOJI_REGEX,
 };
 
-static EMOJI_REGEX: Lazy<Regex> = Lazy::new(|| {
-    Regex::new(
-        r"(?x)
-        ^
-        [\p{White_Space}\p{Emoji_Component}]*
-        [\p{Emoji}--\p{Decimal_Number}]+
-        [\p{White_Space}\p{Emoji}\p{Emoji_Component}--\p{Decimal_Number}]*
-        $
-        # That string is made of at least one emoji, except digits, possibly more,
-        # possibly with modifiers, possibly with spaces, but nothing else
-        ",
-    )
-    .unwrap()
-});
-
 enum WithMentions<'a> {
     Yes(&'a Room),
     No,
diff --git a/src/utils.rs b/src/utils.rs
index c17feba8..15263924 100644
--- a/src/utils.rs
+++ b/src/utils.rs
@@ -1,5 +1,3 @@
-use sourceview::prelude::BufferExt;
-
 /// Spawn a future on the default `MainContext`
 ///
 /// This was taken from `gtk-macros`
@@ -180,6 +178,9 @@ use matrix_sdk::ruma::{
     events::room::MediaSource, EventId, OwnedEventId, OwnedTransactionId, TransactionId, UInt,
 };
 use mime::Mime;
+use once_cell::sync::Lazy;
+use regex::Regex;
+use sourceview::prelude::*;
 
 // Returns an expression that is the and’ed result of the given boolean
 // expressions.
@@ -462,3 +463,19 @@ pub async fn check_if_reachable(hostname: &impl AsRef<str>) -> bool {
         }
     }
 }
+
+/// Regex that matches a string that only includes emojis.
+pub static EMOJI_REGEX: Lazy<Regex> = Lazy::new(|| {
+    Regex::new(
+        r"(?x)
+        ^
+        [\p{White_Space}\p{Emoji_Component}]*
+        [\p{Emoji}--\p{Decimal_Number}]+
+        [\p{White_Space}\p{Emoji}\p{Emoji_Component}--\p{Decimal_Number}]*
+        $
+        # That string is made of at least one emoji, except digits, possibly more,
+        # possibly with modifiers, possibly with spaces, but nothing else
+        ",
+    )
+    .unwrap()
+});