conversation-list-box: remove shadow and make the rows rounded
This also makes the expander row look like in HdyExpander row.
This commit is contained in:
Julian Sparber
parent
b978f69341
commit
95f75f789c
4 changed files with 147 additions and 25 deletions
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
74
ui/geary.css
74
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 {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue