composer: Move formatting buttons to new toolbar

Splits the toolbar at the top of the composer into two action
bars at the bottom. One is always visible and contains undo, redo,
spellcheck, a menu, and a button to toggle the other action bar. The
other action bar contains the formatting buttons.

Also cleans up the margins around the fields at the top.

Implemented according to the mockups at
https://gitlab.gnome.org/Teams/Design/app-mockups/raw/master/mail/composer.png
This commit is contained in:
James Westman 2020-01-04 02:09:38 -06:00 committed by James Westman
parent a88134f5e5
commit 2aff2694b2
4 changed files with 486 additions and 484 deletions

View file

@ -45,6 +45,12 @@
<description>True if the folder list Paned is in the horizontal orientation.</description>
</key>
<key name="formatting-toolbar-visible" type="b">
<default>true</default>
<summary>Show/hide formatting toolbar</summary>
<description>True if the formatting toolbar in the composer is shown.</description>
</key>
<key name="messages-pane-position" type="i">
<default>250</default>
<summary>Position of message list pane</summary>

View file

@ -22,6 +22,7 @@ public class Application.Configuration : Geary.BaseObject {
public const string FOLDER_LIST_PANE_POSITION_HORIZONTAL_KEY = "folder-list-pane-position-horizontal";
public const string FOLDER_LIST_PANE_POSITION_KEY = "folder-list-pane-position";
public const string FOLDER_LIST_PANE_POSITION_VERTICAL_KEY = "folder-list-pane-position-vertical";
public const string FORMATTING_TOOLBAR_VISIBLE = "formatting-toolbar-visible";
public const string MESSAGES_PANE_POSITION_KEY = "messages-pane-position";
public const string SEARCH_STRATEGY_KEY = "search-strategy";
public const string SINGLE_KEY_SHORTCUTS = "single-key-shortcuts";
@ -104,6 +105,11 @@ public class Application.Configuration : Geary.BaseObject {
get { return settings.get_boolean(FOLDER_LIST_PANE_HORIZONTAL_KEY); }
}
public bool formatting_toolbar_visible {
get { return settings.get_boolean(FORMATTING_TOOLBAR_VISIBLE); }
set { settings.set_boolean(FORMATTING_TOOLBAR_VISIBLE, value); }
}
public int messages_pane_position {
get { return settings.get_int(MESSAGES_PANE_POSITION_KEY); }
set { settings.set_int(MESSAGES_PANE_POSITION_KEY, value); }

View file

@ -131,6 +131,7 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
private const string ACTION_INSERT_LINK = "insert-link";
private const string ACTION_COMPOSE_AS_HTML = "compose-as-html";
private const string ACTION_SHOW_EXTENDED_HEADERS = "show-extended-headers";
private const string ACTION_SHOW_FORMATTING = "show-formatting";
private const string ACTION_DISCARD = "discard";
private const string ACTION_DETACH = "detach";
private const string ACTION_SEND = "send";
@ -186,6 +187,7 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
{ ACTION_SELECT_DICTIONARY, on_select_dictionary },
{ ACTION_SEND, on_send },
{ ACTION_SHOW_EXTENDED_HEADERS, on_toggle_action, null, "false", on_show_extended_headers_toggled },
{ ACTION_SHOW_FORMATTING, on_toggle_action, null, "false", on_show_formatting },
};
public static void add_accelerators(Application.Client application) {
@ -310,6 +312,7 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
[GtkChild]
private Gtk.Label from_label;
[GtkChild] private Gtk.Box from_row;
[GtkChild]
private Gtk.Label from_single;
[GtkChild]
@ -347,8 +350,7 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
private EmailEntry reply_to_entry;
private Components.EntryUndo reply_to_undo;
[GtkChild]
private Gtk.Label subject_label;
[GtkChild] private Gtk.Box subject_row;
[GtkChild]
private Gtk.Entry subject_entry;
private Components.EntryUndo subject_undo;
@ -371,17 +373,10 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
private Gtk.Widget recipients;
[GtkChild]
private Gtk.Box header_area;
[GtkChild]
private Gtk.Box insert_buttons;
[GtkChild]
private Gtk.Box font_style_buttons;
[GtkChild]
private Gtk.Box list_buttons;
[GtkChild] private Gtk.Revealer formatting;
[GtkChild]
private Gtk.Button insert_link_button;
[GtkChild]
private Gtk.Button remove_format_button;
[GtkChild]
private Gtk.Button select_dictionary_button;
[GtkChild]
private Gtk.MenuButton menu_button;
@ -1150,6 +1145,11 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
);
}
this.composer_actions.change_action_state(
ACTION_SHOW_FORMATTING,
this.application.config.formatting_toolbar_visible
);
get_action(Action.Edit.UNDO).set_enabled(false);
get_action(Action.Edit.REDO).set_enabled(false);
@ -1435,20 +1435,17 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
case PresentationMode.DETACHED:
case PresentationMode.PANED:
this.recipients.set_visible(true);
this.subject_label.set_visible(true);
this.subject_entry.set_visible(true);
this.subject_row.visible = true;
break;
case PresentationMode.INLINE:
this.recipients.set_visible(true);
this.subject_label.set_visible(false);
this.subject_entry.set_visible(false);
this.subject_row.visible = false;
break;
case PresentationMode.INLINE_COMPACT:
this.recipients.set_visible(false);
this.subject_label.set_visible(false);
this.subject_entry.set_visible(false);
this.subject_row.visible = false;
set_compact_header_recipients();
break;
}
@ -2123,10 +2120,9 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
update_cursor_actions();
this.insert_buttons.visible = compose_as_html;
this.font_style_buttons.visible = compose_as_html;
this.list_buttons.visible = compose_as_html;
this.remove_format_button.visible = compose_as_html;
var show_formatting = (SimpleAction) this.composer_actions.lookup_action(ACTION_SHOW_FORMATTING);
show_formatting.set_enabled(compose_as_html);
update_formatting_toolbar();
this.menu_button.menu_model = (compose_as_html) ? this.html_menu : this.plain_menu;
@ -2146,6 +2142,20 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
}
}
private void update_formatting_toolbar() {
var show_formatting = (SimpleAction) this.composer_actions.lookup_action(ACTION_SHOW_FORMATTING);
var text_format = (SimpleAction) this.composer_actions.lookup_action(ACTION_TEXT_FORMAT);
this.formatting.reveal_child = text_format.get_state().get_string() == "html" && show_formatting.get_state().get_boolean();
}
private void on_show_formatting(SimpleAction? action, Variant? new_state) {
bool show_formatting = new_state.get_boolean();
this.application.config.formatting_toolbar_visible = show_formatting;
action.set_state(new_state);
update_formatting_toolbar();
}
private void on_font_family(SimpleAction action, Variant? param) {
this.editor.execute_editing_command_with_argument(
"fontname", param.get_string()
@ -2392,7 +2402,7 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
// the from address had to be set
private bool update_from_field() {
this.from_multiple.changed.disconnect(on_from_changed);
this.from_single.visible = this.from_multiple.visible = this.from_label.visible = false;
this.from_single.visible = this.from_multiple.visible = this.from_row.visible = false;
// Don't show in inline unless the current account has
// multiple email accounts or aliases, since these will be replies to a
@ -2411,7 +2421,7 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
return false;
}
this.from_label.visible = true;
this.from_row.visible = true;
this.from_label.set_mnemonic_widget(this.from_multiple);
// Composer label (with mnemonic underscore) for the account selector
// when choosing what address to send a message from.

View file

@ -14,7 +14,6 @@
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="orientation">vertical</property>
<property name="spacing">2</property>
<child>
<object class="GtkBox" id="header_area">
<property name="visible">True</property>
@ -48,7 +47,7 @@
<property name="margin_top">6</property>
<property name="orientation">vertical</property>
<child>
<object class="GtkBox">
<object class="GtkBox" id="from_row">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="margin_bottom">6</property>
@ -343,10 +342,11 @@
</packing>
</child>
<child>
<object class="GtkBox">
<object class="GtkBox" id="subject_row">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="spacing">6</property>
<property name="margin-bottom">6</property>
<child>
<object class="GtkLabel" id="subject_label">
<property name="visible">True</property>
@ -467,76 +467,104 @@
<object class="GtkGrid" id="editor_container">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="orientation">vertical</property>
<child>
<object class="GtkBox" id="composer_toolbar">
<object class="GtkFrame">
<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_bottom">4</property>
<property name="spacing">6</property>
<property name="label_xalign">0</property>
<property name="shadow_type">in</property>
<child>
<object class="GtkBox" id="command_buttons">
<object class="GtkBox" id="message_area">
<property name="visible">True</property>
<property name="can_focus">False</property>
<child>
<object class="GtkButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="focus_on_click">False</property>
<property name="receives_default">False</property>
<property name="tooltip_text" translatable="yes">Undo last edit</property>
<property name="action_name">edt.undo</property>
<property name="always_show_image">True</property>
<child>
<object class="GtkImage">
<object class="GtkOverlay" id="message_overlay">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="pixel_size">16</property>
<property name="icon_name">edit-undo-symbolic</property>
</object>
<child>
<object class="GtkGrid" id="body_container">
<property name="height_request">250</property>
<property name="visible">True</property>
<property name="can_focus">False</property>
<child>
<placeholder/>
</child>
<child>
<placeholder/>
</child>
<child>
<placeholder/>
</child>
<child>
<placeholder/>
</child>
<child>
<placeholder/>
</child>
<child>
<placeholder/>
</child>
<child>
<placeholder/>
</child>
<child>
<placeholder/>
</child>
<child>
<placeholder/>
</child>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">0</property>
<property name="index">-1</property>
</packing>
</child>
<child>
<object class="GtkButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="focus_on_click">False</property>
<property name="receives_default">False</property>
<property name="tooltip_text" translatable="yes">Redo last edit</property>
<property name="action_name">edt.redo</property>
<property name="always_show_image">True</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<child type="overlay">
<object class="GtkLabel" id="message_overlay_label">
<property name="can_focus">False</property>
<property name="pixel_size">16</property>
<property name="icon_name">edit-redo-symbolic</property>
</object>
</child>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
<property name="no_show_all">True</property>
<property name="halign">start</property>
<property name="valign">end</property>
<property name="ellipsize">middle</property>
<style>
<class name="linked"/>
<class name="geary-overlay"/>
</style>
</object>
</child>
<child type="overlay">
<object class="GtkProgressBar" id="background_progress">
<property name="can_focus">False</property>
<property name="valign">start</property>
<style>
<class name="osd"/>
<class name="top"/>
</style>
</object>
<packing>
<property name="expand">False</property>
<property name="index">1</property>
</packing>
</child>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
</object>
</child>
<style>
<class name="geary-composer-body"/>
</style>
</object>
</child>
<child>
<object class="GtkRevealer" id="formatting">
<property name="visible">True</property>
<property name="transition_type">slide-up</property>
<child>
<object class="GtkActionBar">
<property name="visible">True</property>
<child>
<object class="GtkBox" id="font_style_buttons">
<property name="visible">True</property>
@ -641,11 +669,6 @@
<class name="linked"/>
</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="list_buttons">
@ -703,11 +726,6 @@
<class name="linked"/>
</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="indentation_buttons">
@ -765,11 +783,6 @@
<class name="linked"/>
</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="insert_buttons">
@ -827,11 +840,6 @@
<class name="linked"/>
</style>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">4</property>
</packing>
</child>
<child>
<object class="GtkButton" id="remove_format_button">
@ -851,10 +859,117 @@
</object>
</child>
</object>
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkActionBar">
<property name="visible">True</property>
<child>
<object class="GtkBox" id="command_buttons">
<property name="visible">True</property>
<property name="can_focus">False</property>
<child>
<object class="GtkButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="focus_on_click">False</property>
<property name="receives_default">False</property>
<property name="tooltip_text" translatable="yes">Undo last edit</property>
<property name="action_name">edt.undo</property>
<property name="always_show_image">True</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="pixel_size">16</property>
<property name="icon_name">edit-undo-symbolic</property>
</object>
</child>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">5</property>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkButton">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="focus_on_click">False</property>
<property name="receives_default">False</property>
<property name="tooltip_text" translatable="yes">Redo last edit</property>
<property name="action_name">edt.redo</property>
<property name="always_show_image">True</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="pixel_size">16</property>
<property name="icon_name">edit-redo-symbolic</property>
</object>
</child>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">1</property>
</packing>
</child>
<style>
<class name="linked"/>
</style>
</object>
</child>
<child type="center">
<object class="GtkLabel" id="info_label">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="ellipsize">end</property>
<property name="width_chars">6</property>
<property name="xalign">0</property>
<style>
<class name="dim-label"/>
</style>
</object>
</child>
<child>
<object class="GtkMenuButton" id="menu_button">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="focus_on_click">False</property>
<property name="receives_default">False</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="icon_name">view-more-symbolic</property>
</object>
</child>
</object>
<packing>
<property name="pack_type">end</property>
</packing>
</child>
<child>
<object class="GtkToggleButton" id="show_formatting_button">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="focus_on_click">False</property>
<property name="receives_default">False</property>
<property name="action_name">win.show-formatting</property>
<property name="tooltip_text" translatable="yes">Show formatting toolbar</property>
<child>
<object class="GtkImage">
<property name="visible">True</property>
<property name="icon_name">format-text-italic-symbolic</property>
</object>
</child>
</object>
<packing>
<property name="pack_type">end</property>
</packing>
</child>
<child>
@ -871,150 +986,15 @@
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="pixel_size">16</property>
<property name="icon_name">accessories-dictionary-symbolic</property>
<property name="icon_name">tools-check-spelling-symbolic</property>
</object>
</child>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="position">6</property>
</packing>
</child>
<child>
<object class="GtkMenuButton" id="menu_button">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="focus_on_click">False</property>
<property name="receives_default">False</property>
<child>
<placeholder/>
</child>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="pack_type">end</property>
<property name="position">7</property>
</packing>
</child>
<child>
<object class="GtkLabel" id="info_label">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="ellipsize">end</property>
<property name="width_chars">6</property>
<property name="xalign">0</property>
<style>
<class name="dim-label"/>
</style>
</object>
<packing>
<property name="expand">False</property>
<property name="fill">True</property>
<property name="pack_type">end</property>
<property name="position">8</property>
</packing>
</child>
</object>
<packing>
<property name="left_attach">0</property>
<property name="top_attach">0</property>
</packing>
</child>
<child>
<object class="GtkFrame">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="label_xalign">0</property>
<property name="shadow_type">in</property>
<child>
<object class="GtkBox" id="message_area">
<property name="visible">True</property>
<property name="can_focus">False</property>
<child>
<object class="GtkOverlay" id="message_overlay">
<property name="visible">True</property>
<property name="can_focus">False</property>
<child>
<object class="GtkGrid" id="body_container">
<property name="height_request">250</property>
<property name="visible">True</property>
<property name="can_focus">False</property>
<child>
<placeholder/>
</child>
<child>
<placeholder/>
</child>
<child>
<placeholder/>
</child>
<child>
<placeholder/>
</child>
<child>
<placeholder/>
</child>
<child>
<placeholder/>
</child>
<child>
<placeholder/>
</child>
<child>
<placeholder/>
</child>
<child>
<placeholder/>
</child>
</object>
<packing>
<property name="index">-1</property>
</packing>
</child>
<child type="overlay">
<object class="GtkLabel" id="message_overlay_label">
<property name="can_focus">False</property>
<property name="no_show_all">True</property>
<property name="halign">start</property>
<property name="valign">end</property>
<property name="ellipsize">middle</property>
<style>
<class name="geary-overlay"/>
</style>
</object>
</child>
<child type="overlay">
<object class="GtkProgressBar" id="background_progress">
<property name="can_focus">False</property>
<property name="valign">start</property>
<style>
<class name="osd"/>
<class name="top"/>
</style>
</object>
<packing>
<property name="index">1</property>
</packing>
</child>
</object>
<packing>
<property name="expand">True</property>
<property name="fill">True</property>
<property name="position">0</property>
</packing>
</child>
</object>
</child>
<style>
<class name="geary-composer-body"/>
</style>
</object>
<packing>
<property name="left_attach">0</property>
<property name="top_attach">1</property>
</packing>
</child>
</object>
<packing>