Commit 7d73ddc7 authored by Adrien Plazas's avatar Adrien Plazas

GTK+: Update the grid layout section

Rename the section Adaptive Grid Layout as there is no point to explain
how to set up a regular grid layout, and actually explain how to build
such a layout.
parent a912e2d5
Pipeline #1132 passed with stage
in 43 seconds
......@@ -22,6 +22,7 @@
.. _GtkSizeGroup : https://developer.gnome.org/gtk3/stable/GtkSizeGroup.html
.. _HdyHeaderGroup : https://honk.sigxcpu.org/projects/libhandy/doc/HdyHeaderGroup.html
.. _HdyLeaflet : https://honk.sigxcpu.org/projects/libhandy/doc/HdyLeaflet.html
.. _HdyTitleBar : https://honk.sigxcpu.org/projects/libhandy/doc/HdyTitleBar.html
GTK+
......@@ -129,10 +130,10 @@ As per the GNOME human interface guidelines, applications may enter a special `s
HdyTitleBar_ and recent improvements in the default theme of GTK+ simplifies that a lot, simply toggle the `selection-mode` boolean property of HdyTitleBar_ for their descendants to be styled accordingly, including separators with the `sidebar` style class.
Grid Layout
-----------
Adaptive 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_.
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
......@@ -142,3 +143,31 @@ Some applications have a grid layout where several panels sit side-by-side and e
.. 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.
To make an application with a adaptive grid layout, follow these steps:
The basic layout:
* In the title bar put a HdyTitleBar_, put a HdyLeaflet_ in it in which you will put your sidebar's GtkHeaderBar_, a GtkSeparator_ and your content's GtkHeaderBar_.
* In the window put a HdyLeaflet_ in which you will put your sidebar widget, a GtkSeparator_ and your content widget.
* Add the `sidebar` style class to the separators from the titelbar and the window.
* Put your header bars in the same order into a HdyHeaderGroup_.
* Make the close buttons of your header bars visible.
Make it a grid:
* Put your sidebar widget and its header bar into the same horizontal `GtkSizeGroup` to ensure they request the same minimum width.
* Put your separators into the same horizontal `GtkSizeGroup` to ensure they request the same minimum width.
* Put your content widget and its header bar into the same horizontal `GtkSizeGroup` to ensure they request the same minimum width.
* Horizontally expand the content widget and the content header bar.
Solidify the layout
* Give the `sidebar` child name to your sidebar widget and its header bar.
* Give the `content` child name to your content widget and its header bar.
* Make your header bar leaflet's child and mode transitions to `slide` to improve spacial navigation semantics.
* Bind your window's leaflet's visible child name and your child and mode transitions (duration and type) to your header bar leaflet's in a bidirectional way to ensure they always appear as a single unified panel.
* When the leaflets are folded, make the header group focus on the currently visible header bar, make it focus on nothing otherwise.
Navigate in the layout:
* Add a back button at the start of your content header bar.
* When your header bar leaflet is folded, make the back button visible, make it invisible otherwise.
* When the back button is clicked, make the sidebar the visible child of the leaflets.
* When an entry of your sidebar is clicked, make the content visible.
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