client: ConversationList.Row: Rework widget internals
- Remove hover buttons - Move flagged icon to the right Fix #1516
This commit is contained in:
Cédric Bellegarde
parent
9fc0a999ba
commit
41874dc29a
3 changed files with 85 additions and 173 deletions
|
|
@ -20,16 +20,13 @@ internal class ConversationList.Row : Gtk.ListBoxRow {
|
|||
}
|
||||
|
||||
[GtkChild] unowned Gtk.Label preview;
|
||||
[GtkChild] unowned Gtk.Box preview_row;
|
||||
[GtkChild] unowned Gtk.Label subject;
|
||||
[GtkChild] unowned Gtk.Label participants;
|
||||
[GtkChild] unowned Gtk.Label date;
|
||||
[GtkChild] unowned Gtk.Label count_badge;
|
||||
|
||||
[GtkChild] unowned Gtk.Image read_icon;
|
||||
[GtkChild] unowned Gtk.Image flagged_icon;
|
||||
|
||||
[GtkChild] unowned Gtk.Stack stack;
|
||||
[GtkChild] unowned Gtk.CheckButton selected_button;
|
||||
|
||||
internal Geary.App.Conversation conversation;
|
||||
|
|
@ -50,7 +47,7 @@ internal class ConversationList.Row : Gtk.ListBoxRow {
|
|||
conversation.email_flags_changed.connect(update_flags);
|
||||
|
||||
config.bind(Application.Configuration.DISPLAY_PREVIEW_KEY,
|
||||
this.preview_row, "visible");
|
||||
this.preview, "visible");
|
||||
|
||||
if (selection_mode_enabled) {
|
||||
set_selection_enabled(true);
|
||||
|
|
@ -87,13 +84,11 @@ internal class ConversationList.Row : Gtk.ListBoxRow {
|
|||
|
||||
internal void set_selection_enabled(bool enabled) {
|
||||
if (enabled) {
|
||||
this.selected_button.show();
|
||||
set_button_active(this.is_selected());
|
||||
this.state_flags_changed.connect(update_button);
|
||||
this.selected_button.toggled.connect(update_state_flags);
|
||||
this.stack.set_visible_child_name("selection-button");
|
||||
this.selected_button.show();
|
||||
} else {
|
||||
this.stack.set_visible_child_name("buttons");
|
||||
this.state_flags_changed.disconnect(update_button);
|
||||
this.selected_button.toggled.disconnect(update_state_flags);
|
||||
set_button_active(false);
|
||||
|
|
@ -140,29 +135,17 @@ internal class ConversationList.Row : Gtk.ListBoxRow {
|
|||
private void update_flags(Geary.Email? email) {
|
||||
if (conversation.is_unread()) {
|
||||
get_style_context().add_class("unread");
|
||||
read_icon.set_from_icon_name("mail-unread-symbolic", Gtk.IconSize.BUTTON);
|
||||
} else {
|
||||
get_style_context().remove_class("unread");
|
||||
read_icon.set_from_icon_name("mail-read-symbolic", Gtk.IconSize.BUTTON);
|
||||
}
|
||||
|
||||
if (conversation.is_flagged()) {
|
||||
get_style_context().add_class("starred");
|
||||
flagged_icon.set_from_icon_name("starred-symbolic", Gtk.IconSize.BUTTON);
|
||||
this.flagged_icon.show();
|
||||
} else {
|
||||
get_style_context().remove_class("starred");
|
||||
flagged_icon.set_from_icon_name("non-starred-symbolic", Gtk.IconSize.BUTTON);
|
||||
this.flagged_icon.hide();
|
||||
}
|
||||
}
|
||||
|
||||
[GtkCallback] private void on_unread_button_clicked() {
|
||||
toggle_flag(this, Geary.EmailFlags.UNREAD);
|
||||
}
|
||||
|
||||
[GtkCallback] private void on_flagged_button_clicked() {
|
||||
toggle_flag(this, Geary.EmailFlags.FLAGGED);
|
||||
}
|
||||
|
||||
private string get_participants() {
|
||||
var participants = new Gee.ArrayList<Participant>();
|
||||
Gee.List<Geary.Email> emails = conversation.get_emails(
|
||||
|
|
|
|||
|
|
@ -2,12 +2,6 @@
|
|||
<!-- Generated with glade 3.38.2 -->
|
||||
<interface>
|
||||
<requires lib="gtk+" version="3.24"/>
|
||||
<object class="GtkImage" id="flagged_icon">
|
||||
<property name="visible">True</property>
|
||||
</object>
|
||||
<object class="GtkImage" id="read_icon">
|
||||
<property name="visible">True</property>
|
||||
</object>
|
||||
<template class="ConversationListRow" parent="GtkListBoxRow">
|
||||
<property name="can-focus">True</property>
|
||||
<child>
|
||||
|
|
@ -17,121 +11,42 @@
|
|||
<object class="GtkBox" id="container">
|
||||
<property name="visible">True</property>
|
||||
<property name="has-tooltip">True</property>
|
||||
<property name="baseline-position">top</property>
|
||||
<child>
|
||||
<object class="GtkStack" id="stack">
|
||||
<property name="visible">True</property>
|
||||
<child>
|
||||
<object class="GtkBox" id="buttons">
|
||||
<property name="width-request">36</property>
|
||||
<property name="visible">True</property>
|
||||
<property name="vexpand">True</property>
|
||||
<property name="orientation">vertical</property>
|
||||
<property name="homogeneous">True</property>
|
||||
<child>
|
||||
<object class="GtkButton" id="unread">
|
||||
<property name="visible">True</property>
|
||||
<property name="can-focus">False</property>
|
||||
<property name="valign">center</property>
|
||||
<property name="relief">none</property>
|
||||
<property name="image">read_icon</property>
|
||||
<signal name="clicked" handler="on_unread_button_clicked"/>
|
||||
<style>
|
||||
<class name="conversation-ephemeral-button"/>
|
||||
<class name="unread-button"/>
|
||||
</style>
|
||||
</object>
|
||||
<packing>
|
||||
<property name="expand">False</property>
|
||||
<property name="fill">True</property>
|
||||
</packing>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkButton" id="flagged">
|
||||
<property name="visible">True</property>
|
||||
<property name="can-focus">False</property>
|
||||
<property name="valign">center</property>
|
||||
<property name="relief">none</property>
|
||||
<property name="image">flagged_icon</property>
|
||||
<signal name="clicked" handler="on_flagged_button_clicked"/>
|
||||
<style>
|
||||
<class name="conversation-ephemeral-button"/>
|
||||
<class name="flagged-button"/>
|
||||
</style>
|
||||
</object>
|
||||
<packing>
|
||||
<property name="expand">False</property>
|
||||
<property name="fill">True</property>
|
||||
</packing>
|
||||
</child>
|
||||
</object>
|
||||
<packing>
|
||||
<property name="name">buttons</property>
|
||||
</packing>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkCheckButton" id="selected_button">
|
||||
<property name="receives-default">True</property>
|
||||
<property name="vexpand">True</property>
|
||||
<property name="can-focus">False</property>
|
||||
</object>
|
||||
<packing>
|
||||
<property name="name">selection-button</property>
|
||||
</packing>
|
||||
</child>
|
||||
<object class="GtkCheckButton" id="selected_button">
|
||||
<property name="visible">False</property>
|
||||
<property name="receives-default">True</property>
|
||||
<property name="vexpand">True</property>
|
||||
<property name="can-focus">False</property>
|
||||
</object>
|
||||
<packing>
|
||||
<property name="expand">False</property>
|
||||
<property name="fill">True</property>
|
||||
</packing>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkBox" id="Details">
|
||||
<object class="GtkBox" id="details">
|
||||
<property name="visible">True</property>
|
||||
<property name="orientation">vertical</property>
|
||||
<property name="baseline-position">top</property>
|
||||
<style>
|
||||
<class name="details"/>
|
||||
</style>
|
||||
<child>
|
||||
<object class="GtkBox" id="Header">
|
||||
<object class="GtkLabel" id="participants">
|
||||
<property name="visible">True</property>
|
||||
<child>
|
||||
<object class="GtkLabel" id="participants">
|
||||
<property name="visible">True</property>
|
||||
<property name="use-markup">True</property>
|
||||
<property name="ellipsize">end</property>
|
||||
<property name="xalign">0</property>
|
||||
<style>
|
||||
<class name="participants"/>
|
||||
</style>
|
||||
</object>
|
||||
<packing>
|
||||
<property name="expand">False</property>
|
||||
<property name="fill">True</property>
|
||||
</packing>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkLabel" id="date">
|
||||
<property name="visible">True</property>
|
||||
<style>
|
||||
<class name="date"/>
|
||||
<class name="tertiary"/>
|
||||
</style>
|
||||
</object>
|
||||
<packing>
|
||||
<property name="expand">False</property>
|
||||
<property name="fill">False</property>
|
||||
<property name="pack-type">end</property>
|
||||
</packing>
|
||||
</child>
|
||||
<property name="use-markup">True</property>
|
||||
<property name="ellipsize">end</property>
|
||||
<property name="xalign">0</property>
|
||||
<style>
|
||||
<class name="participants"/>
|
||||
</style>
|
||||
</object>
|
||||
<packing>
|
||||
<property name="expand">False</property>
|
||||
<property name="fill">False</property>
|
||||
<property name="fill">True</property>
|
||||
</packing>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkLabel" id="subject">
|
||||
<property name="visible">True</property>
|
||||
<property name="halign">start</property>
|
||||
<property name="hexpand">True</property>
|
||||
<property name="ellipsize">end</property>
|
||||
<property name="single-line-mode">True</property>
|
||||
<property name="xalign">0</property>
|
||||
|
|
@ -145,32 +60,68 @@
|
|||
</packing>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkBox" id="preview_row">
|
||||
<object class="GtkLabel" id="preview">
|
||||
<property name="visible">True</property>
|
||||
<property name="halign">start</property>
|
||||
<property name="hexpand">True</property>
|
||||
<property name="wrap">True</property>
|
||||
<property name="wrap-mode">word-char</property>
|
||||
<property name="ellipsize">end</property>
|
||||
<property name="lines">1</property>
|
||||
<property name="xalign">0</property>
|
||||
<style>
|
||||
<class name="preview"/>
|
||||
<class name="tertiary"/>
|
||||
</style>
|
||||
</object>
|
||||
<packing>
|
||||
<property name="expand">False</property>
|
||||
<property name="fill">True</property>
|
||||
</packing>
|
||||
</child>
|
||||
</object>
|
||||
<packing>
|
||||
<property name="expand">True</property>
|
||||
<property name="fill">True</property>
|
||||
</packing>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkBox" id="indicators">
|
||||
<property name="visible">True</property>
|
||||
<property name="vexpand">True</property>
|
||||
<property name="orientation">vertical</property>
|
||||
<child>
|
||||
<object class="GtkLabel" id="date">
|
||||
<property name="visible">True</property>
|
||||
<style>
|
||||
<class name="date"/>
|
||||
<class name="tertiary"/>
|
||||
</style>
|
||||
</object>
|
||||
<packing>
|
||||
<property name="expand">True</property>
|
||||
<property name="fill">False</property>
|
||||
<property name="pack-type">start</property>
|
||||
</packing>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkBox">
|
||||
<property name="visible">True</property>
|
||||
<property name="halign">end</property>
|
||||
<property name="spacing">5</property>
|
||||
<child>
|
||||
<object class="GtkLabel" id="preview">
|
||||
<object class="GtkImage" id="flagged_icon">
|
||||
<property name="visible">True</property>
|
||||
<property name="halign">start</property>
|
||||
<property name="hexpand">True</property>
|
||||
<property name="wrap">True</property>
|
||||
<property name="wrap-mode">word-char</property>
|
||||
<property name="ellipsize">end</property>
|
||||
<property name="lines">1</property>
|
||||
<property name="xalign">0</property>
|
||||
<style>
|
||||
<class name="preview"/>
|
||||
<class name="tertiary"/>
|
||||
</style>
|
||||
<property name="icon-name">starred-symbolic</property>
|
||||
</object>
|
||||
<packing>
|
||||
<property name="expand">False</property>
|
||||
<property name="fill">True</property>
|
||||
<property name="fill">False</property>
|
||||
</packing>
|
||||
</child>
|
||||
<child>
|
||||
<object class="GtkLabel" id="count_badge">
|
||||
<property name="visible">True</property>
|
||||
<property name="valign">center</property>
|
||||
<style>
|
||||
<class name="count-badge"/>
|
||||
</style>
|
||||
|
|
@ -181,15 +132,11 @@
|
|||
</packing>
|
||||
</child>
|
||||
</object>
|
||||
<packing>
|
||||
<property name="expand">True</property>
|
||||
<property name="fill">False</property>
|
||||
</packing>
|
||||
</child>
|
||||
</object>
|
||||
<packing>
|
||||
<property name="expand">True</property>
|
||||
<property name="fill">True</property>
|
||||
<property name="expand">False</property>
|
||||
<property name="fill">False</property>
|
||||
</packing>
|
||||
</child>
|
||||
</object>
|
||||
|
|
|
|||
38
ui/geary.css
38
ui/geary.css
|
|
@ -59,6 +59,10 @@ row.conversation-list label {
|
|||
margin-bottom: .4em;
|
||||
}
|
||||
|
||||
row.conversation-list .details {
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
row.conversation-list .tertiary {
|
||||
opacity: 0.7;
|
||||
font-size: 0.8em;
|
||||
|
|
@ -66,6 +70,11 @@ row.conversation-list .tertiary {
|
|||
|
||||
row.conversation-list .subject {
|
||||
font-size: 0.9em;
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
|
||||
row.conversation-list .preview {
|
||||
padding-left: 0.6em;
|
||||
}
|
||||
|
||||
row.conversation-list .date {
|
||||
|
|
@ -73,10 +82,6 @@ row.conversation-list .date {
|
|||
}
|
||||
|
||||
/* Unread styling */
|
||||
row.conversation-list.unread .preview {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
row.conversation-list.unread .subject {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -85,33 +90,10 @@ row.conversation-list.unread .participants {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
row.conversation-list.unread .unread-button {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Hover buttons */
|
||||
row.conversation-list .conversation-ephemeral-button {
|
||||
opacity: 0;
|
||||
margin: 2px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
row.conversation-list:hover .conversation-ephemeral-button {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
row.conversation-list.starred .flagged-button {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
row.conversation-list:selected .conversation-ephemeral-button {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
row.conversation-list .count-badge {
|
||||
background: #888888;
|
||||
color: white;
|
||||
margin-top: 4px;
|
||||
min-width: 1.5em;
|
||||
border-radius: 1em;
|
||||
font-size: .8em;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue