room-history: Fix size of spinners and error icons for visual media messages and location

data/resources/style.css

@@ -595,18 +595,35 @@ room-history-row .event-content .emote {
   color: var(--accent-color);
 }
 
-.content-thumbnail {
+.visual-content.opaque-bg {
   border-radius: 6px;
   background-color: var(--border-color);
 }
 
-.content-thumbnail .osd.circular {
+.visual-content .spinner {
+  min-width: 32px;
+  min-height: 32px;
+}
+
+.visual-content.compact .spinner {
+  min-width: 16px;
+  min-height: 16px;
+}
+
+.visual-content image.osd.circular {
   min-width: 64px;
   min-height: 64px;
   border-radius: 32px;
+  -gtk-icon-size: 32px;
+}
+
+.visual-content.compact image.osd.circular {
+  min-width: 32px;
+  min-height: 32px;
+  -gtk-icon-size: 16px;
 }
 
-.content-thumbnail .timestamp {
+.visual-content .timestamp {
   border-radius: 4px;
   padding: 2px 5px;
 }

src/session/view/content/room_history/message_row/location.rs

@@ -85,6 +85,7 @@ impl MessageLocation {
         glib::Object::new()
     }
 
+    /// Set the `geo:` URI to display.
     pub fn set_geo_uri(&self, uri: &str, format: ContentFormat) {
         let imp = self.imp();
         let compact = matches!(format, ContentFormat::Compact | ContentFormat::Ellipsized);
@@ -107,8 +108,10 @@ impl MessageLocation {
 
         if compact {
             self.set_halign(gtk::Align::Start);
+            self.add_css_class("compact");
         } else {
             self.set_halign(gtk::Align::Fill);
+            self.remove_css_class("compact");
         }
     }
 }

src/session/view/content/room_history/message_row/location.ui

@@ -5,7 +5,8 @@
       <property name="label" translatable="yes">User Location</property>
     </accessibility>
     <style>
-      <class name="content-thumbnail"/>
+      <class name="visual-content"/>
+      <class name="opaque-bg"/>
     </style>
     <property name="overflow">hidden</property>
     <child>
@@ -22,7 +23,6 @@
             <property name="halign">center</property>
             <property name="valign">center</property>
             <property name="icon-name">error-symbolic</property>
-            <property name="icon-size">large</property>
             <layout>
               <property name="measure">true</property>
             </layout>

src/session/view/content/room_history/message_row/visual_media.rs

@@ -49,10 +49,10 @@ mod imp {
         #[template_child]
         pub overlay_spinner: TemplateChild<adw::Spinner>,
         /// The intended display width of the media.
-        #[property(get, set = Self::set_width, explicit_notify, default = -1, minimum = -1)]
+        #[property(get, default = -1, minimum = -1)]
         pub width: Cell<i32>,
         /// The intended display height of the media.
-        #[property(get, set = Self::set_height, explicit_notify, default = -1, minimum = -1)]
+        #[property(get, default = -1, minimum = -1)]
         pub height: Cell<i32>,
         /// The loading state of the media.
         #[property(get, builder(LoadingState::default()))]
@@ -73,6 +73,7 @@ mod imp {
             Self::bind_template(klass);
             Self::Type::bind_template_callbacks(klass);
 
+            klass.set_css_name("message-visual-media");
             klass.set_accessible_role(gtk::AccessibleRole::Group);
         }
 
@@ -184,7 +185,7 @@ mod imp {
 
     impl MessageVisualMedia {
         /// Set the intended display width of the media.
-        fn set_width(&self, width: i32) {
+        pub(super) fn set_width(&self, width: i32) {
             if self.width.get() == width {
                 return;
             }
@@ -194,7 +195,7 @@ mod imp {
         }
 
         /// Set the intended display height of the media.
-        fn set_height(&self, height: i32) {
+        pub(super) fn set_height(&self, height: i32) {
             if self.height.get() == height {
                 return;
             }
@@ -247,6 +248,23 @@ mod imp {
                     .replace(Some(paintable.animation_ref()));
             }
         }
+
+        /// Set whether to display this media in a compact format.
+        pub(super) fn set_compact(&self, compact: bool) {
+            if self.compact.get() == compact {
+                return;
+            }
+
+            self.compact.set(compact);
+
+            if compact {
+                self.media.add_css_class("compact");
+            } else {
+                self.media.remove_css_class("compact");
+            }
+
+            self.obj().notify_compact();
+        }
     }
 }
 
@@ -269,12 +287,6 @@ impl MessageVisualMedia {
             .unwrap();
     }
 
-    /// Set whether to display this media in a compact format.
-    fn set_compact(&self, compact: bool) {
-        self.imp().compact.set(compact);
-        self.notify_compact();
-    }
-
     /// Display the given visual media message.
     pub fn set_media_message(
         &self,
@@ -285,9 +297,10 @@ impl MessageVisualMedia {
         let (width, height) = media_message.dimensions().unzip();
         let compact = matches!(format, ContentFormat::Compact | ContentFormat::Ellipsized);
 
-        self.set_width(width.and_then(|w| w.try_into().ok()).unwrap_or(-1));
-        self.set_height(height.and_then(|h| h.try_into().ok()).unwrap_or(-1));
-        self.set_compact(compact);
+        let imp = self.imp();
+        imp.set_width(width.and_then(|w| w.try_into().ok()).unwrap_or(-1));
+        imp.set_height(height.and_then(|h| h.try_into().ok()).unwrap_or(-1));
+        imp.set_compact(compact);
 
         self.build(media_message, session);
     }
@@ -379,11 +392,9 @@ impl MessageVisualMedia {
 
                         child.set_tooltip_text(Some(&filename));
                         if is_sticker {
-                            if imp.media.has_css_class("content-thumbnail") {
-                                imp.media.remove_css_class("content-thumbnail");
-                            }
-                        } else if !imp.media.has_css_class("content-thumbnail") {
-                            imp.media.add_css_class("content-thumbnail");
+                            imp.media.remove_css_class("opaque-bg");
+                        } else {
+                            imp.media.add_css_class("opaque-bg");
                         }
                     }
                     Err(error) => {

src/session/view/content/room_history/message_row/visual_media.ui

@@ -6,7 +6,8 @@
     <child>
       <object class="GtkOverlay" id="media">
         <style>
-          <class name="content-thumbnail"/>
+          <class name="visual-content"/>
+          <class name="opaque-bg"/>
         </style>
         <property name="overflow">hidden</property>
         <child>
@@ -16,6 +17,8 @@
         </child>
         <child type="overlay">
           <object class="AdwSpinner" id="overlay_spinner">
+            <property name="halign">center</property>
+            <property name="valign">center</property>
             <layout>
               <property name="measure">true</property>
             </layout>
@@ -30,7 +33,6 @@
             <property name="halign">center</property>
             <property name="valign">center</property>
             <property name="icon-name">error-symbolic</property>
-            <property name="icon-size">large</property>
             <layout>
               <property name="measure">true</property>
             </layout>