[geary: 1/2] composer: Better UI for Cc/Bcc/Reply-To fields
- From: Michael Gratton <mjog src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [geary: 1/2] composer: Better UI for Cc/Bcc/Reply-To fields
- Date: Wed, 8 Jan 2020 10:09:09 +0000 (UTC)
commit 7753d0a7f71683312f6e4005fa3d8f8a1e3ea38a
Author: James Westman <flyingpimonster gmail com>
Date: Wed Jan 1 19:25:54 2020 -0600
composer: Better UI for Cc/Bcc/Reply-To fields
Implemented according to the mockups at
<https://gitlab.gnome.org/Teams/Design/app-mockups/raw/master/mail/composer.png>.
- Use an animated revealer rather than instantly showing/hiding the
fields
- Include Cc in the "extended fields"
- Use a toggle button instead of a menu item to show/hide these fields,
for better discoverability
src/client/composer/composer-widget.vala | 14 +-
ui/composer-menus.ui | 12 -
ui/composer-widget.ui | 472 ++++++++++++++++++++-----------
3 files changed, 316 insertions(+), 182 deletions(-)
---
diff --git a/src/client/composer/composer-widget.vala b/src/client/composer/composer-widget.vala
index e46bc6f3..123d59e3 100644
--- a/src/client/composer/composer-widget.vala
+++ b/src/client/composer/composer-widget.vala
@@ -317,12 +317,15 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
private Gee.ArrayList<FromAddressMap> from_list = new Gee.ArrayList<FromAddressMap>();
[GtkChild]
- private Gtk.EventBox to_box;
+ private Gtk.Box to_box;
[GtkChild]
private Gtk.Label to_label;
private EmailEntry to_entry;
private Components.EntryUndo to_undo;
+ [GtkChild]
+ private Gtk.Revealer extended_fields_revealer;
+
[GtkChild]
private Gtk.EventBox cc_box;
[GtkChild]
@@ -508,7 +511,7 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
this.to_entry = new EmailEntry(this);
this.to_entry.changed.connect(on_envelope_changed);
- this.to_box.add(to_entry);
+ this.to_box.pack_start(to_entry, true, true);
this.to_label.set_mnemonic_widget(this.to_entry);
this.to_undo = new Components.EntryUndo(this.to_entry);
@@ -530,8 +533,6 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
this.reply_to_label.set_mnemonic_widget(this.reply_to_entry);
this.reply_to_undo = new Components.EntryUndo(this.reply_to_entry);
- this.to_entry.margin_top = this.cc_entry.margin_top = this.bcc_entry.margin_top =
this.reply_to_entry.margin_top = 6;
-
this.subject_undo = new Components.EntryUndo(this.subject_entry);
this.subject_spell_entry = Gspell.Entry.get_from_gtk_entry(
this.subject_entry
@@ -2138,10 +2139,7 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
GLib.Variant? new_state) {
bool show_extended = new_state.get_boolean();
action.set_state(show_extended);
- this.bcc_label.visible =
- this.bcc_entry.visible =
- this.reply_to_label.visible =
- this.reply_to_entry.visible = show_extended;
+ this.extended_fields_revealer.reveal_child = show_extended;
if (show_extended && this.current_mode == INLINE_COMPACT) {
set_mode(INLINE);
diff --git a/ui/composer-menus.ui b/ui/composer-menus.ui
index 66554ac2..2f4c342f 100644
--- a/ui/composer-menus.ui
+++ b/ui/composer-menus.ui
@@ -48,12 +48,6 @@
<attribute name="action">win.compose-as-html</attribute>
</item>
</section>
- <section>
- <item>
- <attribute name="label" translatable="yes">Show Extended Fields</attribute>
- <attribute name="action">win.show-extended</attribute>
- </item>
- </section>
</menu>
<menu id="plain_menu_model">
@@ -63,12 +57,6 @@
<attribute name="action">win.compose-as-html</attribute>
</item>
</section>
- <section>
- <item>
- <attribute name="label" translatable="yes">Show Extended Fields</attribute>
- <attribute name="action">win.show-extended-headers</attribute>
- </item>
- </section>
</menu>
<menu id="context_menu_model">
diff --git a/ui/composer-widget.ui b/ui/composer-widget.ui
index b4821843..57ee5157 100644
--- a/ui/composer-widget.ui
+++ b/ui/composer-widget.ui
@@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
-<!-- Generated with glade 3.22.1 -->
+<!-- Generated with glade 3.22.0 -->
<interface>
<requires lib="gtk+" version="3.20"/>
<template class="ComposerWidget" parent="GtkEventBox">
@@ -40,194 +40,326 @@
<property name="orientation">vertical</property>
<property name="spacing">6</property>
<child>
- <object class="GtkGrid" id="recipients">
+ <object class="GtkBox" id="recipients">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="margin_start">6</property>
<property name="margin_end">6</property>
<property name="margin_top">6</property>
- <property name="column_spacing">6</property>
+ <property name="orientation">vertical</property>
<child>
- <object class="GtkLabel" id="to_label">
+ <object class="GtkBox">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="halign">end</property>
- <property name="margin_top">6</property>
- <property name="label" translatable="yes" comments="Address(es) e-mail is to be sent
to">_To</property>
- <property name="use_underline">True</property>
- <property name="justify">right</property>
- <property name="mnemonic_widget">to_box</property>
- <style>
- <class name="dim-label"/>
- </style>
- </object>
- <packing>
- <property name="left_attach">0</property>
- <property name="top_attach">1</property>
- </packing>
- </child>
- <child>
- <object class="GtkLabel" id="cc_label">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="halign">end</property>
- <property name="margin_top">6</property>
- <property name="label" translatable="yes">_Cc</property>
- <property name="use_underline">True</property>
- <property name="justify">right</property>
- <property name="mnemonic_widget">to_box</property>
- <style>
- <class name="dim-label"/>
- </style>
- </object>
- <packing>
- <property name="left_attach">0</property>
- <property name="top_attach">2</property>
- </packing>
- </child>
- <child>
- <object class="GtkEventBox" id="to_box">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="hexpand">True</property>
- </object>
- <packing>
- <property name="left_attach">1</property>
- <property name="top_attach">1</property>
- </packing>
- </child>
- <child>
- <object class="GtkEventBox" id="cc_box">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="hexpand">True</property>
- </object>
- <packing>
- <property name="left_attach">1</property>
- <property name="top_attach">2</property>
- </packing>
- </child>
- <child>
- <object class="GtkEntry" id="subject_entry">
- <property name="visible">True</property>
- <property name="can_focus">True</property>
- <property name="margin_top">6</property>
- <property name="hexpand">True</property>
- <property name="invisible_char">•</property>
- <signal name="changed" handler="on_subject_changed" swapped="no"/>
- </object>
- <packing>
- <property name="left_attach">1</property>
- <property name="top_attach">5</property>
- </packing>
- </child>
- <child>
- <object class="GtkLabel" id="subject_label">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="halign">end</property>
- <property name="margin_top">6</property>
- <property name="label" translatable="yes">_Subject</property>
- <property name="use_underline">True</property>
- <property name="justify">right</property>
- <property name="mnemonic_widget">subject_entry</property>
- <style>
- <class name="dim-label"/>
- </style>
- </object>
- <packing>
- <property name="left_attach">0</property>
- <property name="top_attach">5</property>
- </packing>
- </child>
- <child>
- <object class="GtkLabel" id="bcc_label">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="halign">end</property>
- <property name="margin_top">6</property>
- <property name="label" translatable="yes">_Bcc</property>
- <property name="use_underline">True</property>
- <property name="justify">right</property>
- <property name="mnemonic_widget">to_box</property>
- <style>
- <class name="dim-label"/>
- </style>
- </object>
- <packing>
- <property name="left_attach">0</property>
- <property name="top_attach">3</property>
- </packing>
- </child>
- <child>
- <object class="GtkEventBox" id="bcc_box">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="hexpand">True</property>
- </object>
- <packing>
- <property name="left_attach">1</property>
- <property name="top_attach">3</property>
- </packing>
- </child>
- <child>
- <object class="GtkLabel" id="reply_to_label">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="halign">end</property>
- <property name="margin_top">6</property>
- <property name="label" translatable="yes">_Reply-To</property>
- <property name="use_underline">True</property>
- <property name="justify">right</property>
- <property name="mnemonic_widget">to_box</property>
- <style>
- <class name="dim-label"/>
- </style>
+ <property name="margin_bottom">6</property>
+ <property name="spacing">6</property>
+ <child>
+ <object class="GtkLabel" id="from_label">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="halign">end</property>
+ <property name="label" translatable="yes" comments="Geary account mail will be
sent from">From</property>
+ <property name="use_underline">True</property>
+ <property name="justify">right</property>
+ <property name="mnemonic_widget">to_box</property>
+ <property name="xalign">1</property>
+ <style>
+ <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="GtkBox" id="from_container">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="hexpand">True</property>
+ <property name="orientation">vertical</property>
+ <child>
+ <object class="GtkLabel" id="from_single">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="halign">start</property>
+ </object>
+ <packing>
+ <property name="expand">False</property>
+ <property name="fill">True</property>
+ <property name="position">0</property>
+ </packing>
+ </child>
+ <child>
+ <object class="GtkComboBoxText" id="from_multiple">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <signal name="changed" handler="on_envelope_changed" swapped="no"/>
+ </object>
+ <packing>
+ <property name="expand">False</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">1</property>
+ </packing>
+ </child>
</object>
<packing>
- <property name="left_attach">0</property>
- <property name="top_attach">4</property>
+ <property name="expand">False</property>
+ <property name="fill">True</property>
+ <property name="position">12</property>
</packing>
</child>
<child>
- <object class="GtkEventBox" id="reply_to_box">
+ <object class="GtkBox">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="hexpand">True</property>
+ <property name="margin_bottom">6</property>
+ <property name="spacing">6</property>
+ <child>
+ <object class="GtkLabel" id="to_label">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="halign">end</property>
+ <property name="label" translatable="yes" comments="Address(es) e-mail is to be
sent to">_To</property>
+ <property name="use_underline">True</property>
+ <property name="justify">right</property>
+ <property name="mnemonic_widget">to_box</property>
+ <property name="xalign">1</property>
+ <style>
+ <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="GtkBox" id="to_box">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="hexpand">True</property>
+ <child>
+ <placeholder/>
+ </child>
+ <child>
+ <object class="GtkToggleButton">
+ <property name="visible">True</property>
+ <property name="can_focus">True</property>
+ <property name="receives_default">True</property>
+ <property name="tooltip_text" translatable="yes">Show Cc, Bcc, and Reply-To
fields</property>
+ <property name="action_name">win.show-extended-headers</property>
+ <child>
+ <object class="GtkImage">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="icon_name">view-more-horizontal-symbolic</property>
+ </object>
+ </child>
+ </object>
+ <packing>
+ <property name="expand">False</property>
+ <property name="fill">True</property>
+ <property name="pack_type">end</property>
+ <property name="position">1</property>
+ </packing>
+ </child>
+ <style>
+ <class name="linked"/>
+ </style>
+ </object>
+ <packing>
+ <property name="expand">False</property>
+ <property name="fill">True</property>
+ <property name="position">1</property>
+ </packing>
+ </child>
</object>
<packing>
- <property name="left_attach">1</property>
- <property name="top_attach">4</property>
+ <property name="expand">False</property>
+ <property name="fill">True</property>
+ <property name="position">13</property>
</packing>
</child>
<child>
- <object class="GtkLabel" id="from_label">
+ <object class="GtkRevealer" id="extended_fields_revealer">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="halign">end</property>
- <property name="label" translatable="yes" comments="Geary account mail will be sent
from">From</property>
- <property name="use_underline">True</property>
- <property name="justify">right</property>
- <property name="mnemonic_widget">to_box</property>
- <style>
- <class name="dim-label"/>
- </style>
+ <child>
+ <object class="GtkBox">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="margin_bottom">6</property>
+ <property name="orientation">vertical</property>
+ <property name="spacing">6</property>
+ <child>
+ <object class="GtkBox">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="spacing">6</property>
+ <child>
+ <object class="GtkLabel" id="cc_label">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="halign">end</property>
+ <property name="label" translatable="yes">_Cc</property>
+ <property name="use_underline">True</property>
+ <property name="justify">right</property>
+ <property name="mnemonic_widget">to_box</property>
+ <property name="xalign">1</property>
+ <style>
+ <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="GtkEventBox" id="cc_box">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="hexpand">True</property>
+ </object>
+ <packing>
+ <property name="expand">False</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">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="spacing">6</property>
+ <child>
+ <object class="GtkLabel" id="bcc_label">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="halign">end</property>
+ <property name="label" translatable="yes">_Bcc</property>
+ <property name="use_underline">True</property>
+ <property name="justify">right</property>
+ <property name="mnemonic_widget">to_box</property>
+ <property name="xalign">1</property>
+ <style>
+ <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="GtkEventBox" id="bcc_box">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="hexpand">True</property>
+ </object>
+ <packing>
+ <property name="expand">False</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">1</property>
+ </packing>
+ </child>
+ <child>
+ <object class="GtkBox">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="spacing">6</property>
+ <child>
+ <object class="GtkLabel" id="reply_to_label">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="halign">end</property>
+ <property name="label" translatable="yes">_Reply-To</property>
+ <property name="use_underline">True</property>
+ <property name="justify">right</property>
+ <property name="mnemonic_widget">to_box</property>
+ <property name="xalign">1</property>
+ <style>
+ <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="GtkEventBox" id="reply_to_box">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="hexpand">True</property>
+ </object>
+ <packing>
+ <property name="expand">False</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">2</property>
+ </packing>
+ </child>
+ </object>
+ </child>
</object>
<packing>
- <property name="left_attach">0</property>
- <property name="top_attach">0</property>
+ <property name="expand">False</property>
+ <property name="fill">True</property>
+ <property name="position">14</property>
</packing>
</child>
<child>
- <object class="GtkBox" id="from_container">
+ <object class="GtkBox">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="orientation">vertical</property>
+ <property name="spacing">6</property>
<child>
- <object class="GtkLabel" id="from_single">
+ <object class="GtkLabel" id="subject_label">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="halign">start</property>
+ <property name="halign">end</property>
+ <property name="label" translatable="yes">_Subject</property>
+ <property name="use_underline">True</property>
+ <property name="justify">right</property>
+ <property name="mnemonic_widget">subject_entry</property>
+ <property name="xalign">1</property>
+ <style>
+ <class name="dim-label"/>
+ </style>
</object>
<packing>
<property name="expand">False</property>
@@ -236,10 +368,12 @@
</packing>
</child>
<child>
- <object class="GtkComboBoxText" id="from_multiple">
+ <object class="GtkEntry" id="subject_entry">
<property name="visible">True</property>
- <property name="can_focus">False</property>
- <signal name="changed" handler="on_envelope_changed" swapped="no"/>
+ <property name="can_focus">True</property>
+ <property name="hexpand">True</property>
+ <property name="invisible_char">•</property>
+ <signal name="changed" handler="on_subject_changed" swapped="no"/>
</object>
<packing>
<property name="expand">False</property>
@@ -249,8 +383,9 @@
</child>
</object>
<packing>
- <property name="left_attach">1</property>
- <property name="top_attach">0</property>
+ <property name="expand">False</property>
+ <property name="fill">True</property>
+ <property name="position">15</property>
</packing>
</child>
</object>
@@ -859,6 +994,9 @@
<class name="top"/>
</style>
</object>
+ <packing>
+ <property name="index">1</property>
+ </packing>
</child>
</object>
<packing>
@@ -910,4 +1048,14 @@
</object>
</child>
</template>
+ <object class="GtkSizeGroup" id="field_labels">
+ <widgets>
+ <widget name="from_label"/>
+ <widget name="to_label"/>
+ <widget name="cc_label"/>
+ <widget name="bcc_label"/>
+ <widget name="reply_to_label"/>
+ <widget name="subject_label"/>
+ </widgets>
+ </object>
</interface>
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
