content: Improve style

data/resources/style.css

@@ -1,23 +1,11 @@
-/* Login */
-.login {
-  min-width: 250px;
-}
-
 .title-header {
   font-size: 36px;
   font-weight: bold;
 }
 
-.content {
-  background-color: @theme_base_color;
-}
-
-.content:backdrop {
-  background-color: @theme_unfocused_base_color;
-}
-
-.send-message-area {
-  margin: 6px;
+/* Login */
+.login {
+  min-width: 250px;
 }
 
 /* Sidebar */
@@ -70,6 +58,48 @@
 }
 
 /* Content */
+.content {
+  background-color: @theme_base_color;
+}
+
+.content:backdrop {
+  background-color: @theme_unfocused_base_color;
+}
+
+.content row {
+  min-height: 0;
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
+.content row.has-header {
+  margin-top: 6px;
+}
+
+.content .event-content {
+  margin-right: 46px;
+}
+
+.content row:not(.has-header) .event-content {
+  margin-left: 46px;
+}
+
+.divider-row {
+  font-size: 0.9em;
+  font-weight: bold;
+}
+
+.displayname {
+  font-size: 0.9em;
+  font-weight: bold;
+  color: @theme_selected_bg_color;
+}
+
+.timestamp {
+  font-size: 0.9em;
+  min-width: 36px;
+}
+
 .codeview {
   border-radius: 5px;
   padding: 6px;
@@ -78,6 +108,10 @@
   color: @theme_text_color;
 }
 
+.send-message-area {
+  margin: 6px;
+}
+
 .message-entry > .view {
   background-color: @theme_base_color;
   border-radius: 5px;

data/resources/ui/content-message-row.ui

@@ -3,23 +3,26 @@
   <template class="ContentMessageRow" parent="AdwBin">
     <child>
       <object class="GtkBox">
-        <property name="spacing">6</property>
+        <property name="spacing">10</property>
         <child>
           <object class="AdwAvatar" id="avatar">
             <property name="show-initials">True</property>
-            <property name="size">24</property>
+            <property name="size">36</property>
+            <property name="valign">start</property>
             <property name="text" bind-source="display_name" bind-property="label" bind-flags="sync-create"/>
           </object>
         </child>
         <child>
           <object class="GtkBox">
-            <property name="spacing">6</property>
             <property name="orientation">vertical</property>
+            <property name="spacing">2</property>
             <child>
               <object class="GtkBox" id="header">
-                <property name="spacing">6</property>
+                <property name="spacing">10</property>
                 <child>
                   <object class="GtkLabel" id="display_name">
+                    <property name="hexpand">true</property>
+                    <property name="halign">start</property>
                     <property name="ellipsize">end</property>
                     <property name="selectable">True</property>
                     <style>
@@ -31,6 +34,7 @@
                   <object class="GtkLabel" id="timestamp">
                     <style>
                       <class name="timestamp"/>
+                      <class name="dim-label"/>
                     </style>
                   </object>
                 </child>
@@ -40,6 +44,9 @@
               <object class="AdwBin" id="content">
                 <property name="hexpand">True</property>
                 <property name="vexpand">True</property>
+                <style>
+                  <class name="event-content"/>
+                </style>
               </object>
             </child>
           </object>

src/session/content/message_row.rs

@@ -122,6 +122,15 @@ impl MessageRow {
         let priv_ = imp::MessageRow::from_instance(self);
         priv_.avatar.set_visible(visible);
         priv_.header.set_visible(visible);
+
+        if let Some(list_item) = self.parent().and_then(|w| w.parent()) {
+            if visible {
+                list_item.set_css_classes(&["has-header"]);
+            } else {
+                list_item.remove_css_class("has-header");
+            }
+        }
+
         self.notify("show-header");
     }
 
@@ -152,10 +161,17 @@ impl MessageRow {
             .build()
             .unwrap();
 
-        priv_
-            .bindings
-            .borrow_mut()
-            .append(&mut vec![display_name_binding, show_header_binding]);
+        let timestamp_binding = event
+            .bind_property("time", &*priv_.timestamp, "label")
+            .flags(glib::BindingFlags::SYNC_CREATE)
+            .build()
+            .unwrap();
+
+        priv_.bindings.borrow_mut().append(&mut vec![
+            display_name_binding,
+            show_header_binding,
+            timestamp_binding,
+        ]);
 
         priv_
             .relates_to_changed_handler

src/session/content/state_row.rs

@@ -74,6 +74,7 @@ impl StateRow {
             child.set_text(&message);
         } else {
             let child = gtk::Label::new(Some(&message));
+            child.set_css_classes(&["event-content"]);
             self.set_child(Some(&child));
         };
     }

src/session/room/event.rs

@@ -77,6 +77,13 @@ mod imp {
                         User::static_type(),
                         glib::ParamFlags::READWRITE | glib::ParamFlags::CONSTRUCT_ONLY,
                     ),
+                    glib::ParamSpec::new_string(
+                        "time",
+                        "Time",
+                        "The locally formatted time of this matrix event",
+                        None,
+                        glib::ParamFlags::READABLE,
+                    ),
                 ]
             });
 
@@ -114,6 +121,7 @@ mod imp {
                 "sender" => self.sender.get().to_value(),
                 "show-header" => obj.show_header().to_value(),
                 "can-hide-header" => obj.can_hide_header().to_value(),
+                "time" => obj.time().to_value(),
                 _ => unimplemented!(),
             }
         }
@@ -174,6 +182,21 @@ impl Event {
         fn_event!(event, origin_server_ts).clone().into()
     }
 
+    pub fn time(&self) -> String {
+        let datetime = self.timestamp();
+
+        // FIXME Is there a cleaner way to do that?
+        let local_time = datetime.format("%X").to_string().to_ascii_lowercase();
+
+        if local_time.ends_with("am") || local_time.ends_with("pm") {
+            // Use 12h time format (AM/PM)
+            datetime.format("%l∶%M %p").to_string()
+        } else {
+            // Use 24 time format
+            datetime.format("%R").to_string()
+        }
+    }
+
     /// Find the related event if any
     pub fn related_matrix_event(&self) -> Option<EventId> {
         let priv_ = imp::Event::from_instance(&self);