From d0dc003772cdfd98d75781d8282d770d3ab1f543 Mon Sep 17 00:00:00 2001 From: Michael James Gratton Date: Fri, 15 Apr 2016 02:15:44 +1000 Subject: [PATCH] Clean up message header UI, tranitions and style a bit. * ui/conversation-message.ui: Split out preview labels from existing header box and create a new preview box for them. * src/client/components/main-window.vala (MainWindow::set_styling): Use style-defined names to allow us to specify message row backgrounds better. * src/client/conversation-viewer/conversation-message.vala (ConversationMessage): Update GTK composite template children properties and visible state when showing/hiding the body, set new preview/header box label texts. * src/client/conversation-viewer/conversation-viewer.vala (ConversationViewer::do_embedded_composer, ConversationViewer::add_message): Don't add 'frame' class to conversation list rows, we're styling it explicitly now. --- .../conversation-message.vala | 80 +-- .../conversation-viewer.vala | 2 - ui/conversation-message.ui | 580 ++++++++++-------- ui/geary.css | 11 +- 4 files changed, 360 insertions(+), 313 deletions(-) diff --git a/src/client/conversation-viewer/conversation-message.vala b/src/client/conversation-viewer/conversation-message.vala index dc1c8271..3da90eb4 100644 --- a/src/client/conversation-viewer/conversation-message.vala +++ b/src/client/conversation-viewer/conversation-message.vala @@ -58,47 +58,41 @@ public class ConversationMessage : Gtk.Box { private Gtk.Image avatar_image; [GtkChild] - private Gtk.Revealer from_revealer; + private Gtk.Revealer preview_revealer; + [GtkChild] + private Gtk.Label from_preview; + [GtkChild] + private Gtk.Label body_preview; + [GtkChild] + private Gtk.Revealer header_revealer; [GtkChild] private Gtk.Box from_header; - [GtkChild] private Gtk.Box to_header; - [GtkChild] private Gtk.Box cc_header; - [GtkChild] private Gtk.Box bcc_header; - [GtkChild] private Gtk.Box subject_header; - [GtkChild] private Gtk.Box date_header; - [GtkChild] - private Gtk.Label preview_label; - [GtkChild] private Gtk.Button flag_button; - [GtkChild] private Gtk.MenuButton message_menubutton; [GtkChild] private Gtk.Revealer body_revealer; - [GtkChild] - private Gtk.Box body_box; + public Gtk.Box body_box; [GtkChild] private Gtk.Popover link_popover; - [GtkChild] private Gtk.Label good_link_label; - [GtkChild] private Gtk.Label bad_link_label; @@ -132,28 +126,33 @@ public class ConversationMessage : Gtk.Box { return; } - set_header_text(from_header, format_addresses(message.from)); + // Preview headers + from_preview.set_text(format_addresses(message.from)); + + string preview_str = message.get_preview(); + preview_str = Geary.String.reduce_whitespace(preview_str); + body_preview.set_text(preview_str); + + // Full headers + + set_header_text(from_header, format_addresses(message.from)); if (message.to != null) { set_header_text(to_header, format_addresses(message.to)); to_header.get_style_context().remove_class("empty"); } - if (message.cc != null) { set_header_text(cc_header, format_addresses(message.cc)); cc_header.get_style_context().remove_class("empty"); } - if (message.bcc != null) { set_header_text(bcc_header, format_addresses(message.bcc)); bcc_header.get_style_context().remove_class("empty"); } - if (message.subject != null) { set_header_text(subject_header, message.subject.value); subject_header.get_style_context().remove_class("empty"); } - if (message.date != null) { Date.ClockFormat clock_format = GearyApplication.instance.config.clock_format; @@ -164,10 +163,6 @@ public class ConversationMessage : Gtk.Box { date_header.get_style_context().remove_class("empty"); } - string preview_str = message.get_preview(); - preview_str = Geary.String.reduce_whitespace(preview_str); - preview_label.set_text(preview_str); - message_menubutton.set_menu_model(build_message_menu(email)); message_menubutton.set_sensitive(false); @@ -245,30 +240,20 @@ public class ConversationMessage : Gtk.Box { get_style_context().add_class("show-message"); avatar_image.set_pixel_size(32); // XXX constant - // XXX this is pretty gross - Gtk.RevealerTransitionType revealer = from_revealer.get_transition_type(); + Gtk.RevealerTransitionType revealer = preview_revealer.get_transition_type(); if (!include_transitions) { - from_revealer.set_transition_type(Gtk.RevealerTransitionType.NONE); + preview_revealer.set_transition_type(Gtk.RevealerTransitionType.NONE); } - from_revealer.set_reveal_child(true); - from_revealer.set_transition_type(revealer); + preview_revealer.set_reveal_child(false); + preview_revealer.set_transition_type(revealer); - if (!to_header.get_style_context().has_class("empty")) { - to_header.show(); + revealer = header_revealer.get_transition_type(); + if (!include_transitions) { + header_revealer.set_transition_type(Gtk.RevealerTransitionType.NONE); } - if (!cc_header.get_style_context().has_class("empty")) { - cc_header.show(); - } - if (!bcc_header.get_style_context().has_class("empty")) { - bcc_header.show(); - } - if (!subject_header.get_style_context().has_class("empty")) { - subject_header.show(); - } - if (!date_header.get_style_context().has_class("empty")) { - date_header.show(); - } - preview_label.hide(); + header_revealer.set_reveal_child(true); + header_revealer.set_transition_type(revealer); + flag_button.set_sensitive(true); message_menubutton.set_sensitive(true); @@ -284,13 +269,8 @@ public class ConversationMessage : Gtk.Box { public void hide_message() { get_style_context().remove_class("show-message"); avatar_image.set_pixel_size(24); // XXX constant - from_revealer.set_reveal_child(false); - to_header.hide(); - cc_header.hide(); - bcc_header.hide(); - subject_header.hide(); - date_header.hide(); - preview_label.show(); + preview_revealer.set_reveal_child(true); + header_revealer.set_reveal_child(false); flag_button.set_sensitive(false); message_menubutton.set_sensitive(false); body_revealer.set_reveal_child(false); diff --git a/src/client/conversation-viewer/conversation-viewer.vala b/src/client/conversation-viewer/conversation-viewer.vala index cd9ced00..1360cdbc 100644 --- a/src/client/conversation-viewer/conversation-viewer.vala +++ b/src/client/conversation-viewer/conversation-viewer.vala @@ -287,7 +287,6 @@ public class ConversationViewer : Gtk.Stack { Gtk.ListBoxRow row = new Gtk.ListBoxRow(); row.get_style_context().add_class("composer"); - row.get_style_context().add_class("frame"); row.show(); row.add(embed); conversation_listbox.add(row); @@ -604,7 +603,6 @@ public class ConversationViewer : Gtk.Stack { }); Gtk.ListBoxRow row = new Gtk.ListBoxRow(); - row.get_style_context().add_class("frame"); row.show(); row.add(message); diff --git a/ui/conversation-message.ui b/ui/conversation-message.ui index dcde9ae1..cbfb0d0a 100644 --- a/ui/conversation-message.ui +++ b/ui/conversation-message.ui @@ -29,54 +29,56 @@ - + True False vertical - + True False + none + True - + True False - slide-right + vertical - + True False - From: - 1 + start + From <email> + end + + True + True + 0 + + + + + True + False + start + Preview body text. + end + + + + True + True + 1 + - - False - True - 0 - - - - - True - False - start - From <email> - end - - - - True - True - 1 - @@ -86,42 +88,293 @@ - + + True False + none - + True False - To: - 1 - + vertical + + + True + False + + + True + False + From: + 1 + + + + False + True + 0 + + + + + True + False + start + From <email> + True + end + + + + True + True + 1 + + + + + False + True + 0 + + + + + True + False + + + True + False + To: + 1 + + + + False + True + 0 + + + + + True + False + start + To <email> + True + end + + + True + True + 1 + + + + + + False + True + 1 + + + + + True + False + + + True + False + Cc: + 1 + + + + False + True + 0 + + + + + True + False + start + CC <email> + True + end + + + True + True + 1 + + + + + + False + True + 2 + + + + + True + False + + + True + False + Bcc: + 1 + + + + False + True + 0 + + + + + True + False + start + BCC <email> + True + end + + + True + True + 1 + + + + + + False + True + 3 + + + + + True + False + + + True + False + Subject: + 1 + + + + False + True + 0 + + + + + True + False + start + Subject + True + end + + + True + True + 1 + + + + + + False + True + 4 + + + + + True + False + + + True + False + Date: + 1 + + + + False + True + 0 + + + + + True + False + start + 1/1/1970 + True + end + + + True + True + 1 + + + + + + False + True + 5 + + - - False - True - 0 - - - - True - False - start - To <email> - end - - - True - True - 1 - - - False @@ -129,199 +382,6 @@ 1 - - - False - - - True - False - Cc: - 1 - - - - False - True - 0 - - - - - True - False - start - CC <email> - end - - - True - True - 1 - - - - - - False - True - 2 - - - - - False - - - True - False - Bcc: - 1 - - - - False - True - 0 - - - - - True - False - start - BCC <email> - end - - - True - True - 1 - - - - - - False - True - 3 - - - - - False - - - True - False - Subject: - 1 - - - - False - True - 0 - - - - - True - False - start - Subject - end - - - True - True - 1 - - - - - - False - True - 4 - - - - - False - - - True - False - Date: - 1 - - - - False - True - 0 - - - - - True - False - start - 1/1/1970 - end - - - True - True - 1 - - - - - - False - True - 5 - - - - - True - False - start - Preview body text. - end - - - - True - True - 6 - - True @@ -333,13 +393,17 @@ True False + start + False 1 + True True False True True + Toggle this message's flag start none @@ -353,7 +417,7 @@ False True - 0 + 1 @@ -362,6 +426,7 @@ False True True + Display the message menu start none @@ -375,7 +440,7 @@ False False - 1 + 2 @@ -520,9 +585,6 @@ 1 - True diff --git a/ui/geary.css b/ui/geary.css index bd248132..9766d00e 100644 --- a/ui/geary.css +++ b/ui/geary.css @@ -62,10 +62,17 @@ row.geary-folder-popover-list-row > label { } #conversation_listbox > row { margin: 0; - border-width: 1px 1px 0; + border: 1px solid @borders; + border-bottom-width: 0; padding: 0; + background: @theme_bg_color; box-shadow: 0 4px 8px 1px rgba(0,0,0,0.4); - transition: margin 0.1s; + transition: margin 0.1s, background 0.15s; +} +#conversation_listbox > row:hover, +#conversation_listbox > row.show-message, +#conversation_listbox > row.show-message:hover { + background: @theme_base_color; } #conversation_listbox > row.show-message, #conversation_listbox > row.composer {