nettika/geary
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

composer: Better UI for Cc/Bcc/Reply-To fields

Browse source 
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
This commit is contained in:
James Westman 2020-01-01 19:25:54 -06:00
parent e51a3c580b
commit 7753d0a7f7
3 changed files with 336 additions and 202 deletions
Download patch file Download diff file Expand all files Collapse all files

12
ui/composer-menus.ui
View file

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

512
ui/composer-widget.ui
View file

@ -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,32 @@
<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>
</object>
<packing>
<property name="left_attach">0</property>
<property name="top_attach">4</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="left_attach">1</property>
<property name="top_attach">4</property>
</packing>
</child>
<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>
<style>
<class name="dim-label"/>
</style>
</object>
<packing>
<property name="left_attach">0</property>
<property name="top_attach">0</property>
</packing>
</child>
<child>
<object class="GtkBox" id="from_container">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="orientation">vertical</property>
<property name="margin_bottom">6</property>
<property name="spacing">6</property>
<child>
<object class="GtkLabel" id="from_single">
<object class="GtkLabel" id="from_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" 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>
@ -236,10 +74,35 @@
</packing>
</child>
<child>
<object class="GtkComboBoxText" id="from_multiple">
<object class="GtkBox" id="from_container">
<property name="visible">True</property>
<property name="can_focus">False</property>
<signal name="changed" handler="on_envelope_changed" swapped="no"/>
<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>
@ -249,8 +112,280 @@
</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">12</property>
</packing>
</child>
<child>
<object class="GtkBox">
<property name="visible">True</property>
<property name="can_focus">False</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="expand">False</property>
<property name="fill">True</property>
<property name="position">13</property>
</packing>
</child>
<child>
<object class="GtkRevealer" id="extended_fields_revealer">
<property name="visible">True</property>
<property name="can_focus">False</property>
<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="expand">False</property>
<property name="fill">True</property>
<property name="position">14</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="subject_label">
<property name="visible">True</property>
<property name="can_focus">False</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>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkEntry" id="subject_entry">
<property name="visible">True</property>
<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>
<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">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>