[geary: 2/3] conversation-list-box: remove shadow and make the rows rounded

[Michael Gratton <mjog src gnome org>]

commit 95f75f789c6674b7640950952c39b9dec3093a6d
Author: Julian Sparber <julian sparber net>
Date:   Fri Oct 23 13:05:19 2020 +0200

    conversation-list-box: remove shadow and make the rows rounded
    
    This also makes the expander row look like in HdyExpander row.

 .../conversation-viewer/conversation-list-box.vala | 68 ++++++++++++++++++--
 .../conversation-viewer/conversation-web-view.vala | 27 ++++++++
 ui/composer-editor.ui                              |  3 +
 ui/geary.css                                       | 74 ++++++++++++++++------
 4 files changed, 147 insertions(+), 25 deletions(-)
---
diff --git a/src/client/conversation-viewer/conversation-list-box.vala 
b/src/client/conversation-viewer/conversation-list-box.vala
index 5bad2d103..d23654163 100644
--- a/src/client/conversation-viewer/conversation-list-box.vala
+++ b/src/client/conversation-viewer/conversation-list-box.vala
@@ -332,6 +332,33 @@ public class ConversationListBox : Gtk.ListBox, Geary.BaseInterface {
                 get_style_context().add_class(EXPANDED_CLASS);
             else
                 get_style_context().remove_class(EXPANDED_CLASS);
+
+            update_previous_sibling_css_class();
+        }
+
+        // This is mostly taken form libhandy HdyExpanderRow
+        private Gtk.Widget? get_previous_sibling() {
+            if (this.parent is Gtk.Container) {
+                var siblings = this.parent.get_children();
+                unowned List<weak Gtk.Widget> l;
+                for (l = siblings; l != null && l.next != null && l.next.data != this; l = l.next);
+
+                if (l != null && l.next != null && l.next.data == this) {
+                    return l.data;
+                }
+            }
+
+            return null;
+        }
+
+        private void update_previous_sibling_css_class() {
+            var previous_sibling = get_previous_sibling();
+            if (previous_sibling != null) {
+                if (this.is_expanded)
+                    previous_sibling.get_style_context().add_class("geary-expanded-previous-sibling");
+                else
+                    previous_sibling.get_style_context().remove_class("geary-expanded-previous-sibling");
+            }
         }
 
         protected inline void set_style_context_class(string class_name, bool value) {
@@ -675,9 +702,14 @@ public class ConversationListBox : Gtk.ListBox, Geary.BaseInterface {
 
         this.selection_mode = NONE;
 
+        get_style_context().add_class("content");
         get_style_context().add_class("background");
         get_style_context().add_class("conversation-listbox");
 
+        /* we need to update the previous sibling style class when rows are added or removed */
+        add.connect(update_previous_sibling_css_class);
+        remove.connect(update_previous_sibling_css_class);
+
         set_adjustment(adjustment);
         set_sort_func(ConversationListBox.on_sort);
 
@@ -703,6 +735,30 @@ public class ConversationListBox : Gtk.ListBox, Geary.BaseInterface {
         base.destroy();
     }
 
+    // For some reason insert doesn't emit the add event
+    public new void insert(Gtk.Widget child, int position) {
+      base.insert(child, position);
+      update_previous_sibling_css_class();
+    }
+
+    // This is mostly taken form libhandy HdyExpanderRow
+    private void update_previous_sibling_css_class() {
+        var siblings = this.get_children();
+        unowned List<weak Gtk.Widget> l;
+        for (l = siblings; l != null && l.next != null && l.next.data != this; l = l.next) {
+            if (l != null && l.next != null) {
+                var row = l.next.data as ConversationRow;
+                if (row != null) {
+                    if (row.is_expanded) {
+                        l.data.get_style_context().add_class("geary-expanded-previous-sibling");
+                    } else {
+                        l.data.get_style_context().remove_class("geary-expanded-previous-sibling");
+                    }
+                }
+            }
+        }
+    }
+
     public async void load_conversation(Gee.Collection<Geary.EmailIdentifier> scroll_to,
                                         Geary.SearchQuery? query)
         throws GLib.Error {
@@ -1027,6 +1083,11 @@ public class ConversationListBox : Gtk.ListBox, Geary.BaseInterface {
         if (initial_row is LoadingRow) {
             loading_height = Util.Gtk.get_border_box_height(initial_row);
             remove(initial_row);
+            // Adjust for the changed margin of the first row
+            var first_row = get_row_at_index(0);
+            var style = first_row.get_style_context();
+            var margin = style.get_margin(style.get_state());
+            loading_height -= margin.top;
         }
 
         // None of these will be interesting, so just add them all,
@@ -1042,12 +1103,11 @@ public class ConversationListBox : Gtk.ListBox, Geary.BaseInterface {
             // same place.
             row.enable_should_scroll();
             row.should_scroll.connect(() => {
-                    listbox_adj.value += Util.Gtk.get_border_box_height(row);
+                    listbox_adj.value += (Util.Gtk.get_border_box_height(row) - loading_height);
+                    // Only adjust for the loading row going away once
+                    loading_height = 0;
                 });
 
-            // Only adjust for the loading row going away once
-            loading_height = 0;
-
             yield row.view.load_contacts();
             if (i_mail_loaded % 10 == 0)
                 yield throttle_loading();
diff --git a/src/client/conversation-viewer/conversation-web-view.vala 
b/src/client/conversation-viewer/conversation-web-view.vala
index a1ba21a63..9d30fdddb 100644
--- a/src/client/conversation-viewer/conversation-web-view.vala
+++ b/src/client/conversation-viewer/conversation-web-view.vala
@@ -197,6 +197,33 @@ public class ConversationWebView : Components.WebView {
     }
 
 
+    // Clip round bottom corner
+    // This is based on
+    // https://gitlab.gnome.org/GNOME/gnome-weather/-/commit/9b6336454cc90669d1ee8387bdfc6627e3659e83
+    public override bool draw(Cairo.Context cr) {
+        var frameWidth = this.get_allocated_width();
+        var frameHeight = this.get_allocated_height();
+        var styleContext = this.get_style_context();
+        int borderRadius = (int) styleContext.get_property("border-radius", styleContext.get_state());
+
+        var arc0 = 0.0;
+        var arc1 = Math.PI * 0.5;
+        var arc2 = Math.PI;
+
+        cr.new_sub_path();
+        cr.line_to(frameWidth, 0);
+        cr.arc(frameWidth - borderRadius, frameHeight - borderRadius, borderRadius, arc0, arc1);
+        cr.arc(borderRadius, frameHeight - borderRadius, borderRadius, arc1, arc2);
+        cr.line_to(0, 0);
+        cr.close_path();
+
+        cr.clip();
+        cr.fill();
+        base.draw(cr);
+
+        return Gdk.EVENT_PROPAGATE;
+    }
+
     public override void get_preferred_height(out int minimum_height,
                                               out int natural_height) {
         // XXX clamp height to something not too outrageous so we
diff --git a/ui/composer-editor.ui b/ui/composer-editor.ui
index ce56ec172..0c3c47101 100644
--- a/ui/composer-editor.ui
+++ b/ui/composer-editor.ui
@@ -73,6 +73,9 @@
         <property name="visible">True</property>
         <property name="can_focus">False</property>
         <property name="orientation">vertical</property>
+        <style>
+          <class name="background"/>
+        </style>
         <child>
           <object class="GtkRevealer" id="formatting">
             <property name="visible">True</property>
diff --git a/ui/geary.css b/ui/geary.css
index 12f94d7d3..91ceba4b9 100644
--- a/ui/geary.css
+++ b/ui/geary.css
@@ -89,41 +89,63 @@ row.geary-folder-popover-list-row > label {
 /* ConversationListBox */
 
 .conversation-listbox {
-  padding: 0 12px;
+  padding: 0px 12px;
 }
+
 .conversation-listbox > row {
-  margin: 0;
-  border: 1px solid @borders;
-  border-bottom-width: 0;
   padding: 0;
-  box-shadow: 0 4px 8px 1px rgba(0,0,0,0.4);
-}
-.conversation-listbox > row > box {
-  background: @theme_base_color;
-  transition: background 0.25s;
-}
-.conversation-listbox > row:hover > box {
-  background: shade(@theme_base_color, 0.96);
-}
-.conversation-listbox > row.geary-expanded {
-  margin-bottom: 6px;
-  border-bottom-width: 1px;
 }
+
 .conversation-listbox *.geary-matched *.geary-match {
   color: @theme_selected_fg_color;
   background: @theme_selected_bg_color;
-;}
+}
+
 .conversation-listbox > row.geary-loading {
   border-top-width: 0px;
   padding: 6px;
+  border-top-left-radius: 0px;
+  -gtk-outline-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+  -gtk-outline-top-right-radius: 0px;
 }
-.conversation-listbox > row:first-child:not(.geary-loading) {
+
+.conversation-listbox.content > row:first-child:not(.geary-loading) {
   margin-top: 12px;
+  transition: 0;
 }
-.conversation-listbox > row:last-child {
+
+.conversation-listbox.content > row:last-child {
   margin-bottom: 12px;
 }
 
+.conversation-listbox.content > row:last-child,
+.conversation-listbox.content > row.geary-expanded-previous-sibling,
+.conversation-listbox.content > row.geary-expanded {
+  border-width: 1px;
+}
+
+.geary-expanded:not(:first-child), .geary-expanded + row {
+  border-top-left-radius: 8px;
+  -gtk-outline-top-left-radius: 7px;
+  border-top-right-radius: 8px;
+  -gtk-outline-top-right-radius: 7px;
+  margin-top: 6px;
+}
+
+.geary-expanded,
+.geary-expanded-previous-sibling {
+  border-bottom-left-radius: 8px;
+  -gtk-outline-bottom-left-radius: 7px;
+  border-bottom-right-radius: 8px;
+  -gtk-outline-bottom-right-radius: 7px;
+  margin-bottom: 6px
+}
+
+.geary-expanded webkitwebview {
+  border-radius: 8px;
+}
+
 /* ConversationEmail */
 
 .geary-unread grid.geary-message-summary {
@@ -131,6 +153,14 @@ row.geary-folder-popover-list-row > label {
   transition: border 0.25s;
 }
 
+.geary-expanded > .geary_email grid.geary-message-summary,
+.geary-expanded + row > .geary_email grid.geary-message-summary {
+  border-top-left-radius: 8px;
+  -gtk-outline-top-left-radius: 7px;
+  border-top-right-radius: 8px;
+  -gtk-outline-top-right-radius: 7px;
+}
+
 /* ConversationMessage */
 
 .geary-message infobar box {
@@ -210,8 +240,10 @@ grid.geary-message-summary {
 /* Composer */
 
 .geary-composer-embed headerbar {
-  border-top: 1px solid @borders;
-  border-radius: 0px;
+  border-top-left-radius: 8px;
+  -gtk-outline-top-left-radius: 7px;
+  border-top-right-radius: 8px;
+  -gtk-outline-top-right-radius: 7px;
 }
 
 .geary-attachments-box > box > box {