diff --git a/src/client/conversation-viewer/conversation-list-box.vala b/src/client/conversation-viewer/conversation-list-box.vala index 5bad2d10..d2365416 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 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 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 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 a1ba21a6..9d30fddd 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 ce56ec17..0c3c4710 100644 --- a/ui/composer-editor.ui +++ b/ui/composer-editor.ui @@ -73,6 +73,9 @@ True False vertical + True diff --git a/ui/geary.css b/ui/geary.css index 12f94d7d..91ceba4b 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 {