Commit 19029889 authored by Heather Ellsworth's avatar Heather Ellsworth

Merge branch 'gtk' into 'master'

Various GTK+ section improvements

See merge request Librem5/developer.puri.sm!47
parents 090a5953 1b3e7338
......@@ -3,15 +3,22 @@
.. _GTK+ website : https://www.gtk.org/
.. _GTK+ Inspector : https://wiki.gnome.org/Projects/GTK+/Inspector
.. _selection mode : https://developer.gnome.org/hig/stable/selection-mode.html.en
.. _enable dconf access : http://docs.flatpak.org/en/latest/sandbox-permissions.html#dconf-access
.. _application menu design : https://gitlab.gnome.org/Community/Design/os-mockups/tree/master/app-menu
.. _application menu example application : https://source.puri.sm/Librem5/purism-gtk-3-examples/tree/app-menu
.. _adaptive labels example application : https://source.puri.sm/Librem5/purism-gtk-3-examples/tree/adaptive-labels
.. _grid layout example application : https://source.puri.sm/Librem5/purism-gtk-3-examples/tree/grid-layout
.. _GtkHeaderBar : https://developer.gnome.org/gtk3/stable/GtkHeaderBar.html
.. _GtkLabel : https://developer.gnome.org/gtk3/stable/GtkLabel.html
.. _GtkLabel ellipize property : https://developer.gnome.org/gtk3/stable/GtkLabel.html#GtkLabel--ellipsize
.. _GtkLabel wrap property : https://developer.gnome.org/gtk3/stable/GtkLabel.html#GtkLabel--wrap
.. _GtkLabel wrap-mode property : https://developer.gnome.org/gtk3/stable/GtkLabel.html#GtkLabel--wrap-mode
.. _GtkSizeGroup : https://developer.gnome.org/gtk3/stable/GtkSizeGroup.html
GTK+
====
......@@ -35,7 +42,7 @@ Alternatively you can set the ``GTK_DEBUG`` environment variable to ``interactiv
$ GTK_DEBUG=interactive your-application
.. note:: For the GTK+ Inspector to work in your flatpaked application, you need to add ``--env=DCONF_USER_CONFIG_DIR=.config/dconf`` to the ``finish-args`` list.
.. note:: For the GTK+ Inspector to work in your flatpaked application, see how to `enable dconf access`_ in the the Flatpak documentation.
Application Menu
----------------
......@@ -56,3 +63,32 @@ Letting your label wrap will preserve the integrity of the text at the expense o
.. note:: By allowing the label to wrap, it will always request enough height when fully wrapped. Consider putting your label or a widget containing it into a scrollable window to avoid height becoming a problem.
To help you implement these, we created an `example application <adaptive labels example application_>`_, just clone it in :ref:`gbuilder` and check the ``adaptive-labels`` branch out.
Header Bars and Separators
--------------------------
A GtkHeaderBar_ is meant to be used as a window's title bar, typically presenting to the user the application's title, various controls and a `close` button.
Some applications want to split their header bar into two or more pieces, a typical way to implement this is by having a `GtkBox` containing two header bars separated by a `GtkSeparator` as you title bar.
.. note:: There currently is a bug in GTK+ 3 that `may` make a separator in a title bar appear black. You can fix this with the following custom style:
``.titlebar:not(headerbar) separator { background-color: @theme_borders_color; }``
As per the GNOME human interface guidelines, applications may enter a special `selection mode`_. A common way to implement it is by adding the `selection-mode` style class to your header bars and the separators between them.
.. note:: A separator with the `selection-mode` style class won't appear blue in GTK+ 3 and will look out of place. The bug has been fixed in GTK+ 4 and for GTK+ 3 you can apply the same effect with the following custom style:
``separator.selection-mode { background-color: mix(@theme_selected_bg_color, #000, 0.2); }``
Grid Layout
-----------
Some applications have a grid layout where several panels sit side-by-side and extend to the title bar. A typical way to implement this is by having a `GtkBox` containing several header bars separated by `GtkSeparator` as your title bar, having a similar layout as your window's content, and by binding the width of each of column's elements with a GtkSizeGroup_.
.. image:: images/grid-layout.png
:width: 600px
:height: 300px
:align: center
.. note:: You will have to horizontally expand at least one column to avoid having unused window space, which would look particularly ugly in the title bar.
To help you implement these, we created an `example application <grid layout example application_>`_, just clone it in :ref:`gbuilder` and check the ``grid-layout`` branch out.
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment