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.
This commit is contained in:
Michael James Gratton 2016-04-15 02:15:44 +10:00
parent 83d0c16f2f
commit d0dc003772
4 changed files with 360 additions and 313 deletions

View file

@ -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);

View file

@ -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);

View file

@ -29,54 +29,56 @@
</packing>
</child>
<child>
<object class="GtkBox" id="header_box">
<object class="GtkBox">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="orientation">vertical</property>
<child>
<object class="GtkBox" id="from_header">
<object class="GtkRevealer" id="preview_revealer">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="transition_type">none</property>
<property name="reveal_child">True</property>
<child>
<object class="GtkRevealer" id="from_revealer">
<object class="GtkBox">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="transition_type">slide-right</property>
<property name="orientation">vertical</property>
<child>
<object class="GtkLabel" id="from_label">
<object class="GtkLabel" id="from_preview">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="label" translatable="yes">From:</property>
<property name="xalign">1</property>
<property name="halign">start</property>
<property name="label" translatable="yes">From &lt;email&gt;</property>
<property name="ellipsize">end</property>
<style>
<class name="header-label"/>
<class name="dim-label"/>
<class name="header-value"/>
</style>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkLabel" id="body_preview">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="halign">start</property>
<property name="label" translatable="yes">Preview body text.</property>
<property name="ellipsize">end</property>
<style>
<class name="preview-value"/>
</style>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkLabel" id="from_text">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="halign">start</property>
<property name="label" translatable="yes">From &lt;email&gt;</property>
<property name="ellipsize">end</property>
<style>
<class name="header-value"/>
</style>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
</object>
<packing>
@ -86,42 +88,293 @@
</packing>
</child>
<child>
<object class="GtkBox" id="to_header">
<object class="GtkRevealer" id="header_revealer">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="transition_type">none</property>
<child>
<object class="GtkLabel" id="to_label">
<object class="GtkBox" id="header_box">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="label" translatable="yes">To:</property>
<property name="xalign">1</property>
<style>
<class name="header-label"/>
<class name="dim-label"/>
</style>
<property name="orientation">vertical</property>
<child>
<object class="GtkBox" id="from_header">
<property name="visible">True</property>
<property name="can_focus">False</property>
<child>
<object class="GtkLabel" id="from_label">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="label" translatable="yes">From:</property>
<property name="xalign">1</property>
<style>
<class name="header-label"/>
<class name="dim-label"/>
</style>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkLabel" id="from_text">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="halign">start</property>
<property name="label" translatable="yes">From &lt;email&gt;</property>
<property name="selectable">True</property>
<property name="ellipsize">end</property>
<style>
<class name="header-value"/>
</style>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkBox" id="to_header">
<property name="visible">True</property>
<property name="can_focus">False</property>
<child>
<object class="GtkLabel" id="to_label">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="label" translatable="yes">To:</property>
<property name="xalign">1</property>
<style>
<class name="header-label"/>
<class name="dim-label"/>
</style>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkLabel" id="to_text">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="halign">start</property>
<property name="label" translatable="yes">To &lt;email&gt;</property>
<property name="selectable">True</property>
<property name="ellipsize">end</property>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
<style>
<class name="empty"/>
</style>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
<child>
<object class="GtkBox" id="cc_header">
<property name="visible">True</property>
<property name="can_focus">False</property>
<child>
<object class="GtkLabel" id="cc_label">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="label" translatable="yes">Cc:</property>
<property name="xalign">1</property>
<style>
<class name="header-label"/>
<class name="dim-label"/>
</style>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkLabel" id="cc_text">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="halign">start</property>
<property name="label" translatable="yes">CC &lt;email&gt;</property>
<property name="selectable">True</property>
<property name="ellipsize">end</property>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
<style>
<class name="empty"/>
</style>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">2</property>
</packing>
</child>
<child>
<object class="GtkBox" id="bcc_header">
<property name="visible">True</property>
<property name="can_focus">False</property>
<child>
<object class="GtkLabel" id="bcc_label">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="label" translatable="yes">Bcc:</property>
<property name="xalign">1</property>
<style>
<class name="header-label"/>
<class name="dim-label"/>
</style>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkLabel" id="bcc_text">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="halign">start</property>
<property name="label" translatable="yes">BCC &lt;email&gt;</property>
<property name="selectable">True</property>
<property name="ellipsize">end</property>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
<style>
<class name="empty"/>
</style>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">3</property>
</packing>
</child>
<child>
<object class="GtkBox" id="subject_header">
<property name="visible">True</property>
<property name="can_focus">False</property>
<child>
<object class="GtkLabel" id="subject_label">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="label" translatable="yes">Subject:</property>
<property name="xalign">1</property>
<style>
<class name="header-label"/>
<class name="dim-label"/>
</style>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkLabel" id="subject_text">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="halign">start</property>
<property name="label" translatable="yes">Subject</property>
<property name="selectable">True</property>
<property name="ellipsize">end</property>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
<style>
<class name="empty"/>
</style>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">4</property>
</packing>
</child>
<child>
<object class="GtkBox" id="date_header">
<property name="visible">True</property>
<property name="can_focus">False</property>
<child>
<object class="GtkLabel" id="date_label">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="label" translatable="yes">Date:</property>
<property name="xalign">1</property>
<style>
<class name="header-label"/>
<class name="dim-label"/>
</style>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkLabel" id="date_text">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="halign">start</property>
<property name="label" translatable="yes">1/1/1970 </property>
<property name="selectable">True</property>
<property name="ellipsize">end</property>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
<style>
<class name="empty"/>
</style>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">5</property>
</packing>
</child>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkLabel" id="to_text">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="halign">start</property>
<property name="label" translatable="yes">To &lt;email&gt;</property>
<property name="ellipsize">end</property>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
<style>
<class name="empty"/>
</style>
</object>
<packing>
<property name="expand">False</property>
@ -129,199 +382,6 @@
<property name="position">1</property>
</packing>
</child>
<child>
<object class="GtkBox" id="cc_header">
<property name="can_focus">False</property>
<child>
<object class="GtkLabel" id="cc_label">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="label" translatable="yes">Cc:</property>
<property name="xalign">1</property>
<style>
<class name="header-label"/>
<class name="dim-label"/>
</style>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkLabel" id="cc_text">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="halign">start</property>
<property name="label" translatable="yes">CC &lt;email&gt;</property>
<property name="ellipsize">end</property>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
<style>
<class name="empty"/>
</style>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">2</property>
</packing>
</child>
<child>
<object class="GtkBox" id="bcc_header">
<property name="can_focus">False</property>
<child>
<object class="GtkLabel" id="bcc_label">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="label" translatable="yes">Bcc:</property>
<property name="xalign">1</property>
<style>
<class name="header-label"/>
<class name="dim-label"/>
</style>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkLabel" id="bcc_text">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="halign">start</property>
<property name="label" translatable="yes">BCC &lt;email&gt;</property>
<property name="ellipsize">end</property>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
<style>
<class name="empty"/>
</style>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">3</property>
</packing>
</child>
<child>
<object class="GtkBox" id="subject_header">
<property name="can_focus">False</property>
<child>
<object class="GtkLabel" id="subject_label">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="label" translatable="yes">Subject:</property>
<property name="xalign">1</property>
<style>
<class name="header-label"/>
<class name="dim-label"/>
</style>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkLabel" id="subject_text">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="halign">start</property>
<property name="label" translatable="yes">Subject</property>
<property name="ellipsize">end</property>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
<style>
<class name="empty"/>
</style>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">4</property>
</packing>
</child>
<child>
<object class="GtkBox" id="date_header">
<property name="can_focus">False</property>
<child>
<object class="GtkLabel" id="date_label">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="label" translatable="yes">Date:</property>
<property name="xalign">1</property>
<style>
<class name="header-label"/>
<class name="dim-label"/>
</style>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkLabel" id="date_text">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="halign">start</property>
<property name="label" translatable="yes">1/1/1970 </property>
<property name="ellipsize">end</property>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
<style>
<class name="empty"/>
</style>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">5</property>
</packing>
</child>
<child>
<object class="GtkLabel" id="preview_label">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="halign">start</property>
<property name="label" translatable="yes">Preview body text.</property>
<property name="ellipsize">end</property>
<style>
<class name="preview-value"/>
</style>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">6</property>
</packing>
</child>
</object>
<packing>
<property name="expand">True</property>
@ -333,13 +393,17 @@
<object class="GtkBox">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="valign">start</property>
<property name="vexpand">False</property>
<property name="spacing">1</property>
<property name="homogeneous">True</property>
<child>
<object class="GtkButton" id="flag_button">
<property name="visible">True</property>
<property name="sensitive">False</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<property name="tooltip_text" translatable="yes">Toggle this message's flag</property>
<property name="valign">start</property>
<property name="relief">none</property>
<child>
@ -353,7 +417,7 @@
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">0</property>
<property name="position">1</property>
</packing>
</child>
<child>
@ -362,6 +426,7 @@
<property name="sensitive">False</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<property name="tooltip_text" translatable="yes">Display the message menu</property>
<property name="valign">start</property>
<property name="relief">none</property>
<child>
@ -375,7 +440,7 @@
<packing>
<property name="expand">False</property>
<property name="fill">False</property>
<property name="position">1</property>
<property name="position">2</property>
</packing>
</child>
</object>
@ -520,9 +585,6 @@
<property name="position">1</property>
</packing>
</child>
<style>
<class name="view"/>
</style>
</template>
<object class="GtkSizeGroup" id="header_labels_sizegroup">
<property name="ignore_hidden">True</property>

View file

@ -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 {