[fractal] room-history: Make text reactions smaller data/resources/style.css: Added class for font on applying

[Marge Bot <marge-bot src gnome org>]

commit 0ccaad63753562029d283f8ea03ce2d432083a09
Author: Harshil Patel <harshilpatel1973 gmail com>
Date:   Sat Aug 20 14:28:50 2022 +0530

    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 ++
 .../content/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 08f3d628c..43f83b241 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 ed36d551a..b677cbf6f 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 b67e54c26..3a3f27814 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 7b067e88a..6bc888311 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 c17feba8d..15263924e 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()
+});