imprv: StartChat: Improve label layout

3 files changed, 35 insertions, 33 deletions

diff --git a/gajim/data/style/gajim.css b/gajim/data/style/gajim.css
index afe2f8cfc..8d5a50e3f 100644
--- a/gajim/data/style/gajim.css
+++ b/gajim/data/style/gajim.css
@@ -59,6 +59,10 @@ infobar.error > revealer > box {
 /* Text style */
 .bold { font-weight: bold; }
 .monospace { font-family: monospace; }
+.bold14 {
+    font-size: 1.125rem;
+    font-weight: bold;
+}
 .bold16 {
     font-size: 1.33rem;
     font-weight: bold;
@@ -219,11 +223,6 @@ infobar.error > revealer > box {
     font-weight: bold;
 }
 
-.idle-time {
-    font-size: 80%;
-    font-weight: lighter;
-}
-
 .group {
     color: rgb(242, 242, 242);
     padding-left: 6px;
diff --git a/gajim/gtk/start_chat.py b/gajim/gtk/start_chat.py
index 39efaf992..449a62b4f 100644
--- a/gajim/gtk/start_chat.py
+++ b/gajim/gtk/start_chat.py
@@ -794,39 +794,24 @@ class ContactRow(Gtk.ListBoxRow):
         image.set_has_tooltip(True)
         image.connect('query-tooltip', self._on_query_tooltip)
 
-        box = Gtk.Box(orientation=Gtk.Orientation.VERTICAL, spacing=0)
-        box.set_hexpand(True)
-
         if self.name is None:
             self.name = _('Start New Chat')
 
+        meta_box = Gtk.Box(
+            orientation=Gtk.Orientation.VERTICAL, valign=Gtk.Align.CENTER)
+
         self.name_label = Gtk.Label(label=self.name)
         self.name_label.set_ellipsize(Pango.EllipsizeMode.END)
         self.name_label.set_xalign(0)
         self.name_label.set_width_chars(20)
         self.name_label.set_halign(Gtk.Align.START)
-        self.name_label.get_style_context().add_class('bold16')
-        name_box = Gtk.Box(orientation=Gtk.Orientation.HORIZONTAL, spacing=6)
-        name_box.add(self.name_label)
-        if show_account:
-            account_badge = AccountBadge(account)
-            account_badge.set_halign(Gtk.Align.END)
-            account_badge.set_valign(Gtk.Align.START)
-            account_badge.set_hexpand(True)
-            name_box.add(account_badge)
+        self.name_label.get_style_context().add_class('bold14')
+        meta_box.add(self.name_label)
 
         if contact and not contact.is_groupchat:
             if idle := contact.idle_datetime:
                 idle_badge = IdleBadge(idle)
-                name_box.add(idle_badge)
-
-        if contact and not contact.is_groupchat and not contact.is_pm_contact:
-            groups = contact.groups
-            for group in groups:
-                group_badge = GroupBadge(group)
-                name_box.add(group_badge)
-
-        box.add(name_box)
+                meta_box.add(idle_badge)
 
         if contact and not contact.is_groupchat and (status := contact.status):
             self.status_label = Gtk.Label(
@@ -837,9 +822,27 @@ class ContactRow(Gtk.ListBoxRow):
                 halign=Gtk.Align.START,
             )
             self.status_label.get_style_context().add_class('dim-label')
-            box.add(self.status_label)
+            self.status_label.get_style_context().add_class('small-label')
+            meta_box.add(self.status_label)
+
+        grid.attach(meta_box, 1, 0, 1, 3)
+
+        badge_box = Gtk.Box(orientation=Gtk.Orientation.VERTICAL, spacing=6)
+        if show_account:
+            account_badge = AccountBadge(account)
+            account_badge.set_halign(Gtk.Align.END)
+            account_badge.set_valign(Gtk.Align.START)
+            account_badge.set_hexpand(True)
+            badge_box.add(account_badge)
+
+        if contact and not contact.is_groupchat and not contact.is_pm_contact:
+            groups = contact.groups
+            for group in groups:
+                group_badge = GroupBadge(group)
+                badge_box.add(group_badge)
+
+        grid.attach(badge_box, 2, 0, 1, 3)
 
-        grid.add(box)
         self._grid = grid
 
         eventbox = Gtk.EventBox()
diff --git a/gajim/gtk/util.py b/gajim/gtk/util.py
index 22e9b2a51..542cf637d 100644
--- a/gajim/gtk/util.py
+++ b/gajim/gtk/util.py
@@ -803,7 +803,7 @@ class GroupBadge(Gtk.Label):
             ellipsize=Pango.EllipsizeMode.END,
             no_show_all=True,
             halign=Gtk.Align.END,
-            valign=Gtk.Align.START,
+            valign=Gtk.Align.CENTER,
             hexpand=True,
             tooltip_text=group,
         )
@@ -817,21 +817,21 @@ class IdleBadge(Gtk.Label):
     def __init__(self, idle: datetime | None = None) -> None:
         Gtk.Label.__init__(
             self,
-            valign=Gtk.Align.START,
-            halign=Gtk.Align.END,
+            halign=Gtk.Align.START,
             hexpand=True,
             ellipsize=Pango.EllipsizeMode.NONE,
             no_show_all=True,
         )
         self.set_size_request(50, -1)
-        self.get_style_context().add_class('idle-time')
+        self.get_style_context().add_class('dim-label')
+        self.get_style_context().add_class('small-label')
         if idle is not None:
             self.set_idle(idle)
 
         self.show()
 
     def set_idle(self, idle: datetime) -> None:
-        self.set_text(_('Last seen %s') % format_idle_time(idle))
+        self.set_text(_('Last seen: %s') % format_idle_time(idle))
         format_string = app.settings.get('date_time_format')
         self.set_tooltip_text(idle.strftime(format_string))