[fractal/fractal-next] content: Improve style
- From: Julian Sparber <jsparber src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [fractal/fractal-next] content: Improve style
- Date: Mon, 10 May 2021 09:28:31 +0000 (UTC)
commit fc02302620331ea149de64ab12aea728acc6681b
Author: Kévin Commaille <zecakeh tedomum fr>
Date: Sun May 9 09:23:32 2021 +0200
content: Improve style
data/resources/style.css | 64 ++++++++++++++++++++++++--------
data/resources/ui/content-message-row.ui | 15 ++++++--
src/session/content/message_row.rs | 24 ++++++++++--
src/session/content/state_row.rs | 1 +
src/session/room/event.rs | 23 ++++++++++++
5 files changed, 104 insertions(+), 23 deletions(-)
---
diff --git a/data/resources/style.css b/data/resources/style.css
index 335ee9e0..1a795019 100644
--- a/data/resources/style.css
+++ b/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;
diff --git a/data/resources/ui/content-message-row.ui b/data/resources/ui/content-message-row.ui
index 37c74018..87a7e300 100644
--- a/data/resources/ui/content-message-row.ui
+++ b/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>
diff --git a/src/session/content/message_row.rs b/src/session/content/message_row.rs
index d8fa8e80..dfd9eaf3 100644
--- a/src/session/content/message_row.rs
+++ b/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
diff --git a/src/session/content/state_row.rs b/src/session/content/state_row.rs
index a027637b..59ce2ed4 100644
--- a/src/session/content/state_row.rs
+++ b/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));
};
}
diff --git a/src/session/room/event.rs b/src/session/room/event.rs
index 534a2b71..41b3603c 100644
--- a/src/session/room/event.rs
+++ b/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);
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]