client: ConversationList.Row: Rework widget internals

- Remove hover buttons
 - Move flagged icon to the right

Fix #1516

src/client/conversation-list/conversation-list-row.vala

@@ -20,16 +20,13 @@ internal class ConversationList.Row : Gtk.ListBoxRow {
     }
 
     [GtkChild] unowned Gtk.Label preview;
-    [GtkChild] unowned Gtk.Box preview_row;
     [GtkChild] unowned Gtk.Label subject;
     [GtkChild] unowned Gtk.Label participants;
     [GtkChild] unowned Gtk.Label date;
     [GtkChild] unowned Gtk.Label count_badge;
 
-    [GtkChild] unowned Gtk.Image read_icon;
     [GtkChild] unowned Gtk.Image flagged_icon;
 
-    [GtkChild] unowned Gtk.Stack stack;
     [GtkChild] unowned Gtk.CheckButton selected_button;
 
     internal Geary.App.Conversation conversation;
@@ -50,7 +47,7 @@ internal class ConversationList.Row : Gtk.ListBoxRow {
         conversation.email_flags_changed.connect(update_flags);
 
         config.bind(Application.Configuration.DISPLAY_PREVIEW_KEY,
-                    this.preview_row, "visible");
+                    this.preview, "visible");
 
         if (selection_mode_enabled) {
             set_selection_enabled(true);
@@ -87,13 +84,11 @@ internal class ConversationList.Row : Gtk.ListBoxRow {
 
     internal void set_selection_enabled(bool enabled) {
         if (enabled) {
-            this.selected_button.show();
             set_button_active(this.is_selected());
             this.state_flags_changed.connect(update_button);
             this.selected_button.toggled.connect(update_state_flags);
-            this.stack.set_visible_child_name("selection-button");
+            this.selected_button.show();
         } else {
-            this.stack.set_visible_child_name("buttons");
             this.state_flags_changed.disconnect(update_button);
             this.selected_button.toggled.disconnect(update_state_flags);
             set_button_active(false);
@@ -140,29 +135,17 @@ internal class ConversationList.Row : Gtk.ListBoxRow {
     private void update_flags(Geary.Email? email) {
         if (conversation.is_unread()) {
             get_style_context().add_class("unread");
-            read_icon.set_from_icon_name("mail-unread-symbolic", Gtk.IconSize.BUTTON);
         } else {
             get_style_context().remove_class("unread");
-            read_icon.set_from_icon_name("mail-read-symbolic", Gtk.IconSize.BUTTON);
         }
 
         if (conversation.is_flagged()) {
-            get_style_context().add_class("starred");
+            this.flagged_icon.show();
-            flagged_icon.set_from_icon_name("starred-symbolic", Gtk.IconSize.BUTTON);
         } else {
-            get_style_context().remove_class("starred");
+            this.flagged_icon.hide();
-            flagged_icon.set_from_icon_name("non-starred-symbolic", Gtk.IconSize.BUTTON);
         }
     }
 
-    [GtkCallback] private void on_unread_button_clicked() {
-        toggle_flag(this, Geary.EmailFlags.UNREAD);
-    }
-
-    [GtkCallback] private void on_flagged_button_clicked() {
-        toggle_flag(this, Geary.EmailFlags.FLAGGED);
-    }
-
     private string get_participants() {
         var participants = new Gee.ArrayList<Participant>();
         Gee.List<Geary.Email> emails = conversation.get_emails(

ui/conversation-list-row.ui

@@ -2,12 +2,6 @@
 <!-- Generated with glade 3.38.2 -->
 <interface>
   <requires lib="gtk+" version="3.24"/>
-  <object class="GtkImage" id="flagged_icon">
-    <property name="visible">True</property>
-  </object>
-  <object class="GtkImage" id="read_icon">
-    <property name="visible">True</property>
-  </object>
   <template class="ConversationListRow" parent="GtkListBoxRow">
     <property name="can-focus">True</property>
     <child>
@@ -17,121 +11,42 @@
           <object class="GtkBox" id="container">
             <property name="visible">True</property>
             <property name="has-tooltip">True</property>
-            <property name="baseline-position">top</property>
             <child>
-              <object class="GtkStack" id="stack">
+              <object class="GtkCheckButton" id="selected_button">
-                <property name="visible">True</property>
+                <property name="visible">False</property>
-                <child>
+                <property name="receives-default">True</property>
-                  <object class="GtkBox" id="buttons">
+                <property name="vexpand">True</property>
-                    <property name="width-request">36</property>
+                <property name="can-focus">False</property>
-                    <property name="visible">True</property>
-                    <property name="vexpand">True</property>
-                    <property name="orientation">vertical</property>
-                    <property name="homogeneous">True</property>
-                    <child>
-                      <object class="GtkButton" id="unread">
-                        <property name="visible">True</property>
-                        <property name="can-focus">False</property>
-                        <property name="valign">center</property>
-                        <property name="relief">none</property>
-                        <property name="image">read_icon</property>
-                        <signal name="clicked" handler="on_unread_button_clicked"/>
-                        <style>
-                          <class name="conversation-ephemeral-button"/>
-                          <class name="unread-button"/>
-                        </style>
-                      </object>
-                      <packing>
-                        <property name="expand">False</property>
-                        <property name="fill">True</property>
-                      </packing>
-                    </child>
-                    <child>
-                      <object class="GtkButton" id="flagged">
-                        <property name="visible">True</property>
-                        <property name="can-focus">False</property>
-                        <property name="valign">center</property>
-                        <property name="relief">none</property>
-                        <property name="image">flagged_icon</property>
-                        <signal name="clicked" handler="on_flagged_button_clicked"/>
-                        <style>
-                          <class name="conversation-ephemeral-button"/>
-                          <class name="flagged-button"/>
-                        </style>
-                      </object>
-                      <packing>
-                        <property name="expand">False</property>
-                        <property name="fill">True</property>
-                      </packing>
-                    </child>
-                  </object>
-                  <packing>
-                    <property name="name">buttons</property>
-                  </packing>
-                </child>
-                <child>
-                  <object class="GtkCheckButton" id="selected_button">
-                    <property name="receives-default">True</property>
-                    <property name="vexpand">True</property>
-                    <property name="can-focus">False</property>
-                  </object>
-                  <packing>
-                    <property name="name">selection-button</property>
-                  </packing>
-                </child>
               </object>
-              <packing>
-                <property name="expand">False</property>
-                <property name="fill">True</property>
-              </packing>
             </child>
             <child>
-              <object class="GtkBox" id="Details">
+              <object class="GtkBox" id="details">
                 <property name="visible">True</property>
                 <property name="orientation">vertical</property>
                 <property name="baseline-position">top</property>
+                <style>
+                  <class name="details"/>
+                </style>
                 <child>
-                  <object class="GtkBox" id="Header">
+                  <object class="GtkLabel" id="participants">
                     <property name="visible">True</property>
-                    <child>
+                    <property name="use-markup">True</property>
-                      <object class="GtkLabel" id="participants">
+                    <property name="ellipsize">end</property>
-                        <property name="visible">True</property>
+                    <property name="xalign">0</property>
-                        <property name="use-markup">True</property>
+                    <style>
-                        <property name="ellipsize">end</property>
+                      <class name="participants"/>
-                        <property name="xalign">0</property>
+                    </style>
-                        <style>
-                          <class name="participants"/>
-                        </style>
-                      </object>
-                      <packing>
-                        <property name="expand">False</property>
-                        <property name="fill">True</property>
-                      </packing>
-                    </child>
-                    <child>
-                      <object class="GtkLabel" id="date">
-                        <property name="visible">True</property>
-                        <style>
-                          <class name="date"/>
-                          <class name="tertiary"/>
-                        </style>
-                      </object>
-                      <packing>
-                        <property name="expand">False</property>
-                        <property name="fill">False</property>
-                        <property name="pack-type">end</property>
-                      </packing>
-                    </child>
                   </object>
                   <packing>
                     <property name="expand">False</property>
-                    <property name="fill">False</property>
+                    <property name="fill">True</property>
                   </packing>
                 </child>
                 <child>
                   <object class="GtkLabel" id="subject">
                     <property name="visible">True</property>
                     <property name="halign">start</property>
+                    <property name="hexpand">True</property>
                     <property name="ellipsize">end</property>
                     <property name="single-line-mode">True</property>
                     <property name="xalign">0</property>
@@ -145,32 +60,68 @@
                   </packing>
                 </child>
                 <child>
-                  <object class="GtkBox" id="preview_row">
+                  <object class="GtkLabel" id="preview">
                     <property name="visible">True</property>
+                    <property name="halign">start</property>
+                    <property name="hexpand">True</property>
+                    <property name="wrap">True</property>
+                    <property name="wrap-mode">word-char</property>
+                    <property name="ellipsize">end</property>
+                    <property name="lines">1</property>
+                    <property name="xalign">0</property>
+                    <style>
+                      <class name="preview"/>
+                      <class name="tertiary"/>
+                    </style>
+                  </object>
+                  <packing>
+                    <property name="expand">False</property>
+                    <property name="fill">True</property>
+                  </packing>
+                </child>
+              </object>
+              <packing>
+                <property name="expand">True</property>
+                <property name="fill">True</property>
+              </packing>
+            </child>
+            <child>
+              <object class="GtkBox" id="indicators">
+                <property name="visible">True</property>
+                <property name="vexpand">True</property>
+                <property name="orientation">vertical</property>
+                 <child>
+                  <object class="GtkLabel" id="date">
+                    <property name="visible">True</property>
+                    <style>
+                      <class name="date"/>
+                      <class name="tertiary"/>
+                    </style>
+                  </object>
+                  <packing>
+                    <property name="expand">True</property>
+                    <property name="fill">False</property>
+                    <property name="pack-type">start</property>
+                  </packing>
+                </child>
+                <child>
+                  <object class="GtkBox">
+                    <property name="visible">True</property>
+                    <property name="halign">end</property>
+                    <property name="spacing">5</property>
                     <child>
-                      <object class="GtkLabel" id="preview">
+                      <object class="GtkImage" id="flagged_icon">
                         <property name="visible">True</property>
-                        <property name="halign">start</property>
+                        <property name="icon-name">starred-symbolic</property>
-                        <property name="hexpand">True</property>
-                        <property name="wrap">True</property>
-                        <property name="wrap-mode">word-char</property>
-                        <property name="ellipsize">end</property>
-                        <property name="lines">1</property>
-                        <property name="xalign">0</property>
-                        <style>
-                          <class name="preview"/>
-                          <class name="tertiary"/>
-                        </style>
                       </object>
                       <packing>
                         <property name="expand">False</property>
-                        <property name="fill">True</property>
+                        <property name="fill">False</property>
                       </packing>
                     </child>
                     <child>
                       <object class="GtkLabel" id="count_badge">
                         <property name="visible">True</property>
-                        <property name="valign">center</property>
                         <style>
                           <class name="count-badge"/>
                         </style>
@@ -181,15 +132,11 @@
                       </packing>
                     </child>
                   </object>
-                  <packing>
-                    <property name="expand">True</property>
-                    <property name="fill">False</property>
-                  </packing>
                 </child>
               </object>
               <packing>
-                <property name="expand">True</property>
+                <property name="expand">False</property>
-                <property name="fill">True</property>
+                <property name="fill">False</property>
               </packing>
             </child>
           </object>

ui/geary.css

@@ -59,6 +59,10 @@ row.conversation-list label {
   margin-bottom: .4em;
 }
 
+row.conversation-list .details {
+  padding-left: 1em;
+}
+
 row.conversation-list .tertiary {
   opacity: 0.7;
   font-size: 0.8em;
@@ -66,6 +70,11 @@ row.conversation-list .tertiary {
 
 row.conversation-list .subject {
   font-size: 0.9em;
+  padding-left: 0.5em;
+}
+
+row.conversation-list .preview {
+  padding-left: 0.6em;
 }
 
 row.conversation-list .date {
@@ -73,10 +82,6 @@ row.conversation-list .date {
 }
 
 /* Unread styling */
-row.conversation-list.unread .preview {
-  opacity: 1;
-}
-
 row.conversation-list.unread .subject {
   font-weight: bold;
 }
@@ -85,33 +90,10 @@ row.conversation-list.unread .participants {
   font-weight: bold;
 }
 
-row.conversation-list.unread .unread-button {
-  opacity: 1;
-}
-
-/* Hover buttons */
-row.conversation-list .conversation-ephemeral-button {
-  opacity: 0;
-  margin: 2px;
-  border-radius: 50%;
-  border: none;
-}
-
-row.conversation-list:hover .conversation-ephemeral-button {
-  opacity: 1;
-}
-
-row.conversation-list.starred .flagged-button {
-  opacity: 1;
-}
-
-row.conversation-list:selected .conversation-ephemeral-button {
-  opacity: 1;
-}
-
 row.conversation-list .count-badge {
   background: #888888;
   color: white;
+  margin-top: 4px;
   min-width: 1.5em;
   border-radius: 1em;
   font-size: .8em;