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

composer: Wrap toolbar when it gets too narrow

Browse source 
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.
This commit is contained in:
James Westman 2020-01-13 20:28:49 -06:00 • committed by James Westman
parent decd33d355
commit aaf172b77f
2 changed files with 328 additions and 285 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/client/composer/composer-widget.vala
View file

@ -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;
}
}
}

596
ui/composer-widget.ui
View file

@ -566,296 +566,322 @@
<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">
<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>
<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">
<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>
<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">
<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>
<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">
<object class="GtkBox" id="top_buttons">
<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>
<property name="spacing">6</property>
<property name="halign">start</property>
<child>
<object class="GtkBox" id="font_style_buttons">
<property name="visible">True</property>
<property name="can_focus">False</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>
<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">
<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>
<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">
<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>
<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">
<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>
</child>
<child>
<object class="GtkBox" id="bottom_buttons">
<property name="visible">True</property>
<property name="can_focus">False</property>
<property name="spacing">6</property>
<property name="halign">start</property>
<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>
</object>
</child>
</object>