[geary: 3/8] composer: Wrap toolbar when it gets too narrow
- From: Michael Gratton <mjog src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [geary: 3/8] composer: Wrap toolbar when it gets too narrow
- Date: Thu, 23 Jan 2020 08:37:24 +0000 (UTC)
commit aaf172b77f19d1b6b151c7f71c581211e2c3234d
Author: James Westman <flyingpimonster gmail com>
Date: Mon Jan 13 20:28:49 2020 -0600
composer: Wrap toolbar when it gets too narrow
This way, the composer fits on even smaller screens than before.
Works by simply listening to the size-allocate signal and changing the
orientation of a box if the allocated width is less than or equal to the
combined width of the two rows.
src/client/composer/composer-widget.vala | 17 +
ui/composer-widget.ui | 542 ++++++++++++++++---------------
2 files changed, 301 insertions(+), 258 deletions(-)
---
diff --git a/src/client/composer/composer-widget.vala b/src/client/composer/composer-widget.vala
index ec9e9211..b4668980 100644
--- a/src/client/composer/composer-widget.vala
+++ b/src/client/composer/composer-widget.vala
@@ -374,6 +374,9 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
[GtkChild]
private Gtk.Box header_area;
[GtkChild] private Gtk.Revealer formatting;
+ [GtkChild] private Gtk.Box toolbar_box;
+ [GtkChild] private Gtk.Box top_buttons;
+ [GtkChild] private Gtk.Box bottom_buttons;
[GtkChild]
private Gtk.Button insert_link_button;
[GtkChild]
@@ -2862,4 +2865,18 @@ public class Composer.Widget : Gtk.EventBox, Geary.BaseInterface {
this.background_work_pulse.reset();
this.show_background_work_timeout.reset();
}
+
+ [GtkCallback]
+ private void on_toolbar_size_allocate(Gtk.Widget widget, Gtk.Allocation rect) {
+ int top_width = this.top_buttons.get_allocated_width();
+ int bottom_width = this.bottom_buttons.get_allocated_width();
+ // add 6 for spacing
+ int width = top_width + bottom_width + 6;
+
+ if (rect.width <= width) {
+ this.toolbar_box.orientation = VERTICAL;
+ } else {
+ this.toolbar_box.orientation = HORIZONTAL;
+ }
+ }
}
diff --git a/ui/composer-widget.ui b/ui/composer-widget.ui
index 2899c6af..1288ac6e 100644
--- a/ui/composer-widget.ui
+++ b/ui/composer-widget.ui
@@ -566,297 +566,323 @@
<object class="GtkActionBar">
<property name="visible">True</property>
<child>
- <object class="GtkBox" id="font_style_buttons">
+ <object class="GtkBox" id="toolbar_box">
<property name="visible">True</property>
<property name="can_focus">False</property>
+ <property name="orientation">horizontal</property>
+ <property name="spacing">6</property>
+ <property name="hexpand">True</property>
+ <signal name="size-allocate" handler="on_toolbar_size_allocate" swapped="no"/>
<child>
- <object class="GtkToggleButton" id="bold_button">
- <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">Bold text</property>
- <property name="action_name">edt.bold</property>
- <property name="always_show_image">True</property>
- <child>
- <object class="GtkImage" id="bold_image">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="pixel_size">16</property>
- <property name="icon_name">format-text-bold-symbolic</property>
- </object>
- </child>
- </object>
- <packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
- <property name="position">0</property>
- </packing>
- </child>
- <child>
- <object class="GtkToggleButton" id="italics_button">
- <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">Italic text</property>
- <property name="action_name">edt.italic</property>
- <property name="always_show_image">True</property>
- <child>
- <object class="GtkImage" id="italics_image">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="pixel_size">16</property>
- <property name="icon_name">format-text-italic-symbolic</property>
- </object>
- </child>
- </object>
- <packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
- <property name="position">1</property>
- </packing>
- </child>
- <child>
- <object class="GtkToggleButton" id="underline_button">
- <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">Underline text</property>
- <property name="action_name">edt.underline</property>
- <property name="always_show_image">True</property>
- <child>
- <object class="GtkImage" id="underline_image">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="pixel_size">16</property>
- <property name="icon_name">format-text-underline-symbolic</property>
- </object>
- </child>
- </object>
- <packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
- <property name="position">2</property>
- </packing>
- </child>
- <child>
- <object class="GtkToggleButton" id="strikethrough_button">
- <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">Strikethrough text</property>
- <property name="action_name">edt.strikethrough</property>
- <property name="always_show_image">True</property>
- <child>
- <object class="GtkImage" id="strikethrough_image">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="pixel_size">16</property>
- <property name="icon_name">format-text-strikethrough-symbolic</property>
- </object>
- </child>
- </object>
- <packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
- <property name="position">3</property>
- </packing>
- </child>
- <style>
- <class name="linked"/>
- </style>
- </object>
- </child>
- <child>
- <object class="GtkBox" id="list_buttons">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <child>
- <object class="GtkButton" id="ulist_button">
- <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">Insert bulleted list</property>
- <property name="action_name">edt.ulist</property>
- <property name="always_show_image">True</property>
- <child>
- <object class="GtkImage" id="ulist_image">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="pixel_size">16</property>
- <property name="icon_name">format-unordered-list-symbolic</property>
- </object>
- </child>
- </object>
- <packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
- <property name="position">0</property>
- </packing>
- </child>
- <child>
- <object class="GtkButton" id="olist_button">
+ <object class="GtkBox" id="top_buttons">
<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">Insert numbered list</property>
- <property name="action_name">edt.olist</property>
- <property name="always_show_image">True</property>
+ <property name="can_focus">False</property>
+ <property name="spacing">6</property>
+ <property name="halign">start</property>
<child>
- <object class="GtkImage" id="olist_image">
+ <object class="GtkBox" id="font_style_buttons">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="pixel_size">16</property>
- <property name="icon_name">format-ordered-list-symbolic</property>
+ <child>
+ <object class="GtkToggleButton" id="bold_button">
+ <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">Bold text</property>
+ <property name="action_name">edt.bold</property>
+ <property name="always_show_image">True</property>
+ <child>
+ <object class="GtkImage" id="bold_image">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="pixel_size">16</property>
+ <property name="icon_name">format-text-bold-symbolic</property>
+ </object>
+ </child>
+ </object>
+ <packing>
+ <property name="expand">False</property>
+ <property name="fill">True</property>
+ <property name="position">0</property>
+ </packing>
+ </child>
+ <child>
+ <object class="GtkToggleButton" id="italics_button">
+ <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">Italic text</property>
+ <property name="action_name">edt.italic</property>
+ <property name="always_show_image">True</property>
+ <child>
+ <object class="GtkImage" id="italics_image">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="pixel_size">16</property>
+ <property name="icon_name">format-text-italic-symbolic</property>
+ </object>
+ </child>
+ </object>
+ <packing>
+ <property name="expand">False</property>
+ <property name="fill">True</property>
+ <property name="position">1</property>
+ </packing>
+ </child>
+ <child>
+ <object class="GtkToggleButton" id="underline_button">
+ <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">Underline
text</property>
+ <property name="action_name">edt.underline</property>
+ <property name="always_show_image">True</property>
+ <child>
+ <object class="GtkImage" id="underline_image">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="pixel_size">16</property>
+ <property name="icon_name">format-text-underline-symbolic</property>
+ </object>
+ </child>
+ </object>
+ <packing>
+ <property name="expand">False</property>
+ <property name="fill">True</property>
+ <property name="position">2</property>
+ </packing>
+ </child>
+ <child>
+ <object class="GtkToggleButton" id="strikethrough_button">
+ <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">Strikethrough
text</property>
+ <property name="action_name">edt.strikethrough</property>
+ <property name="always_show_image">True</property>
+ <child>
+ <object class="GtkImage" id="strikethrough_image">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="pixel_size">16</property>
+ <property
name="icon_name">format-text-strikethrough-symbolic</property>
+ </object>
+ </child>
+ </object>
+ <packing>
+ <property name="expand">False</property>
+ <property name="fill">True</property>
+ <property name="position">3</property>
+ </packing>
+ </child>
+ <style>
+ <class name="linked"/>
+ </style>
</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>
- <object class="GtkBox" id="indentation_buttons">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <child>
- <object class="GtkButton" id="indent_button">
- <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">Indent or quote text</property>
- <property name="action_name">edt.indent</property>
- <property name="always_show_image">True</property>
<child>
- <object class="GtkImage" id="indent_image">
+ <object class="GtkBox" id="list_buttons">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="pixel_size">16</property>
- <property name="icon_name">format-indent-more-symbolic</property>
+ <child>
+ <object class="GtkButton" id="ulist_button">
+ <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">Insert bulleted
list</property>
+ <property name="action_name">edt.ulist</property>
+ <property name="always_show_image">True</property>
+ <child>
+ <object class="GtkImage" id="ulist_image">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="pixel_size">16</property>
+ <property name="icon_name">format-unordered-list-symbolic</property>
+ </object>
+ </child>
+ </object>
+ <packing>
+ <property name="expand">False</property>
+ <property name="fill">True</property>
+ <property name="position">0</property>
+ </packing>
+ </child>
+ <child>
+ <object class="GtkButton" id="olist_button">
+ <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">Insert numbered
list</property>
+ <property name="action_name">edt.olist</property>
+ <property name="always_show_image">True</property>
+ <child>
+ <object class="GtkImage" id="olist_image">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="pixel_size">16</property>
+ <property name="icon_name">format-ordered-list-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>
- </object>
- <packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
- <property name="position">0</property>
- </packing>
- </child>
- <child>
- <object class="GtkButton" id="outdent_button">
- <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">Un-indent or unquote
text</property>
- <property name="action_name">edt.outdent</property>
- <property name="always_show_image">True</property>
<child>
- <object class="GtkImage" id="outdent_image">
+ <object class="GtkBox" id="indentation_buttons">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="pixel_size">16</property>
- <property name="icon_name">format-indent-less-symbolic</property>
+ <child>
+ <object class="GtkButton" id="indent_button">
+ <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">Indent or quote
text</property>
+ <property name="action_name">edt.indent</property>
+ <property name="always_show_image">True</property>
+ <child>
+ <object class="GtkImage" id="indent_image">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="pixel_size">16</property>
+ <property name="icon_name">format-indent-more-symbolic</property>
+ </object>
+ </child>
+ </object>
+ <packing>
+ <property name="expand">False</property>
+ <property name="fill">True</property>
+ <property name="position">0</property>
+ </packing>
+ </child>
+ <child>
+ <object class="GtkButton" id="outdent_button">
+ <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">Un-indent or unquote
text</property>
+ <property name="action_name">edt.outdent</property>
+ <property name="always_show_image">True</property>
+ <child>
+ <object class="GtkImage" id="outdent_image">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="pixel_size">16</property>
+ <property name="icon_name">format-indent-less-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>
- </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>
- <object class="GtkBox" id="insert_buttons">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <child>
- <object class="GtkButton" id="insert_link_button">
- <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">Insert or update text
link</property>
- <property name="action_name">edt.insert-link</property>
- <property name="always_show_image">True</property>
<child>
- <object class="GtkImage" id="insert_link_image">
+ <object class="GtkBox" id="insert_buttons">
<property name="visible">True</property>
<property name="can_focus">False</property>
- <property name="pixel_size">16</property>
- <property name="icon_name">insert-link-symbolic</property>
+ <child>
+ <object class="GtkButton" id="insert_link_button">
+ <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">Insert or update text
link</property>
+ <property name="action_name">edt.insert-link</property>
+ <property name="always_show_image">True</property>
+ <child>
+ <object class="GtkImage" id="insert_link_image">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="pixel_size">16</property>
+ <property name="icon_name">insert-link-symbolic</property>
+ </object>
+ </child>
+ </object>
+ <packing>
+ <property name="expand">False</property>
+ <property name="fill">True</property>
+ <property name="position">0</property>
+ </packing>
+ </child>
+ <child>
+ <object class="GtkButton" id="insert_image_button">
+ <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">Insert an
image</property>
+ <property name="action_name">edt.insert-image</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">insert-image-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>
</object>
- <packing>
- <property name="expand">False</property>
- <property name="fill">True</property>
- <property name="position">0</property>
- </packing>
</child>
<child>
- <object class="GtkButton" id="insert_image_button">
+ <object class="GtkBox" id="bottom_buttons">
<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">Insert an image</property>
- <property name="action_name">edt.insert-image</property>
- <property name="always_show_image">True</property>
+ <property name="can_focus">False</property>
+ <property name="spacing">6</property>
+ <property name="halign">start</property>
<child>
- <object class="GtkImage">
+ <object class="GtkButton" id="remove_format_button">
<property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="pixel_size">16</property>
- <property name="icon_name">insert-image-symbolic</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">Remove text
formatting</property>
+ <property name="action_name">edt.remove-format</property>
+ <property name="always_show_image">True</property>
+ <child>
+ <object class="GtkImage" id="remove_format_image">
+ <property name="visible">True</property>
+ <property name="can_focus">False</property>
+ <property name="pixel_size">16</property>
+ <property name="icon_name">format-text-remove-symbolic</property>
+ </object>
+ </child>
</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>
- <object class="GtkButton" id="remove_format_button">
- <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">Remove text formatting</property>
- <property name="action_name">edt.remove-format</property>
- <property name="always_show_image">True</property>
- <child>
- <object class="GtkImage" id="remove_format_image">
- <property name="visible">True</property>
- <property name="can_focus">False</property>
- <property name="pixel_size">16</property>
- <property name="icon_name">format-text-remove-symbolic</property>
- </object>
</child>
</object>
</child>
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
