[libadwaita/wip/exalm/docs: 4/7] doc: Add Adaptive Layouts page
- From: Alexander Mikhaylenko <alexm src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [libadwaita/wip/exalm/docs: 4/7] doc: Add Adaptive Layouts page
- Date: Mon, 27 Dec 2021 09:52:30 +0000 (UTC)
commit 4962e0a21ee710ea19f762469eed93fa32f1f08f
Author: Alexander Mikhaylenko <alexm gnome org>
Date: Sun Dec 26 21:37:56 2021 +0500
doc: Add Adaptive Layouts page
doc/adaptive-layouts.md | 288 +++++++++++++++++++++
doc/images/adaptive-boxed-lists-narrow-dark.png | Bin 0 -> 17742 bytes
doc/images/adaptive-boxed-lists-narrow.png | Bin 0 -> 17825 bytes
doc/images/adaptive-boxed-lists-wide-dark.png | Bin 0 -> 19620 bytes
doc/images/adaptive-boxed-lists-wide.png | Bin 0 -> 19845 bytes
.../adaptive-split-headers-narrow-1-dark.png | Bin 0 -> 11104 bytes
doc/images/adaptive-split-headers-narrow-1.png | Bin 0 -> 10920 bytes
.../adaptive-split-headers-narrow-2-dark.png | Bin 0 -> 10229 bytes
doc/images/adaptive-split-headers-narrow-2.png | Bin 0 -> 10051 bytes
doc/images/adaptive-split-headers-wide-dark.png | Bin 0 -> 15154 bytes
doc/images/adaptive-split-headers-wide.png | Bin 0 -> 14946 bytes
doc/images/adaptive-utility-pane-narrow-dark.png | Bin 0 -> 12211 bytes
doc/images/adaptive-utility-pane-narrow.png | Bin 0 -> 12068 bytes
doc/images/adaptive-utility-pane-wide-dark.png | Bin 0 -> 15120 bytes
doc/images/adaptive-utility-pane-wide.png | Bin 0 -> 14894 bytes
doc/images/adaptive-view-switcher-narrow-dark.png | Bin 0 -> 14101 bytes
doc/images/adaptive-view-switcher-narrow.png | Bin 0 -> 13877 bytes
doc/images/adaptive-view-switcher-wide-dark.png | Bin 0 -> 14606 bytes
doc/images/adaptive-view-switcher-wide.png | Bin 0 -> 14414 bytes
doc/libadwaita.toml.in | 19 ++
doc/meson.build | 1 +
doc/tools/data/adaptive-boxed-lists-narrow.ui | 71 +++++
doc/tools/data/adaptive-boxed-lists-wide.ui | 71 +++++
doc/tools/data/adaptive-split-headers-narrow-1.ui | 107 ++++++++
doc/tools/data/adaptive-split-headers-narrow-2.ui | 108 ++++++++
doc/tools/data/adaptive-split-headers-wide.ui | 107 ++++++++
doc/tools/data/adaptive-utility-pane-narrow.ui | 53 ++++
doc/tools/data/adaptive-utility-pane-wide.ui | 53 ++++
doc/tools/data/adaptive-view-switcher-narrow.ui | 94 +++++++
doc/tools/data/adaptive-view-switcher-wide.ui | 94 +++++++
doc/tools/screenshot.gresources.xml | 9 +
31 files changed, 1075 insertions(+)
---
diff --git a/doc/adaptive-layouts.md b/doc/adaptive-layouts.md
new file mode 100644
index 00000000..af19b3c8
--- /dev/null
+++ b/doc/adaptive-layouts.md
@@ -0,0 +1,288 @@
+Title: Adaptive Layouts
+Slug: adaptive-layouts
+
+# Adaptive Layouts
+
+Libadwaita provides a number of widgets that change their layout based on the
+available space. This can be used to make applications adapt their UI between
+desktop and mobile devices.
+
+## Clamp
+
+[class@Clamp] has one child and constrains its maximum size, while still
+allowing it to shrink. In other words, it allows the child to have padding when
+there's enough space, and to remove them otherwise.
+
+This is commonly used for patterns such as [boxed lists](boxed-lists.html):
+
+<picture>
+ <source srcset="adaptive-boxed-lists-wide-dark.png" media="(prefers-color-scheme: dark)">
+ <img src="adaptive-boxed-lists-wide.png" alt="adaptive-boxed-lists-wide">
+</picture>
+<picture>
+ <source srcset="adaptive-boxed-lists-narrow-dark.png" media="(prefers-color-scheme: dark)">
+ <img src="adaptive-boxed-lists-narrow.png" alt="adaptive-boxed-lists-narrow">
+</picture>
+
+```xml
+<object class="AdwClamp">
+ <property name="child">
+ <object class="GtkBox">
+ <property name="orientation">vertical</property>
+ <property name="margin-top">24</property>
+ <property name="margin-bottom">24</property>
+ <property name="margin-start">12</property>
+ <property name="margin-end">12</property>
+ <property name="spacing">24</property>
+ <child>
+ <object class="GtkListBox">
+ <property name="selection-mode">none</property>
+ <style>
+ <class name="boxed-list"/>
+ </style>
+ <!-- rows -->
+ </object>
+ </child>
+ <!-- more lists -->
+ </object>
+ </property>
+</object>
+```
+
+See also: [class@ClampLayout], [class@ClampScrollable].
+
+## Leaflet
+
+[class@Leaflet] shows all its children side by side when there's enough room, or
+one child otherwise. In other words, it behaves like a [class Gtk Box] or
+[class@Gtk.Stack].
+
+A common use for a leaflet is implementing a split header bar layout, with a
+sidebar, a content view and a separator between them:
+
+<picture>
+ <source srcset="adaptive-split-headers-wide-dark.png" media="(prefers-color-scheme: dark)">
+ <img src="adaptive-split-headers-wide.png" alt="adaptive-split-headers-wide">
+</picture>
+<picture style="width: 49%; display: inline-block;">
+ <source srcset="adaptive-split-headers-narrow-1-dark.png" media="(prefers-color-scheme: dark)">
+ <img src="adaptive-split-headers-narrow-1.png" alt="adaptive-split-headers-narrow-1">
+</picture>
+<picture style="width: 49%; display: inline-block;">
+ <source srcset="adaptive-split-headers-narrow-2-dark.png" media="(prefers-color-scheme: dark)">
+ <img src="adaptive-split-headers-narrow-2.png" alt="adaptive-split-headers-narrow-2">
+</picture>
+
+```xml
+ <object class="AdwLeaflet" id="leaflet">
+ <property name="can-navigate-back">True</property>
+ <child>
+ <object class="GtkBox">
+ <property name="orientation">vertical</property>
+ <child>
+ <object class="AdwHeaderBar">
+ <binding name="show-end-title-buttons">
+ <lookup name="folded">leaflet</lookup>
+ </binding>
+ <property name="title-widget">
+ <object class="AdwWindowTitle">
+ <property name="title" translatable="yes">Sidebar</property>
+ </object>
+ </property>
+ </object>
+ </child>
+ <!-- sidebar -->
+ </object>
+ </child>
+ <child>
+ <object class="AdwLeafletPage">
+ <property name="navigatable">False</property>
+ <property name="child">
+ <object class="GtkSeparator"/>
+ </property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkBox">
+ <property name="orientation">vertical</property>
+ <property name="hexpand">True</property>>
+ <child>
+ <object class="AdwHeaderBar">
+ <binding name="show-start-title-buttons">
+ <lookup name="folded">leaflet</lookup>
+ </binding>
+ <child>
+ <object class="GtkButton">
+ <binding name="visible">
+ <lookup name="folded">leaflet</lookup>
+ </binding>
+ <property name="icon-name">go-previous-symbolic</property>
+ </object>
+ </child>
+ <property name="title-widget">
+ <object class="AdwWindowTitle">
+ <property name="title" translatable="yes">Content</property>
+ </object>
+ </property>
+ </object>
+ </child>
+ <!-- content -->
+ </object>
+ </child>
+ </object>
+```
+
+When the window is wide, the leaflet shows the sidebar, separator and content
+side by side. When it's narrow, the leaflet shows either sidebar or content,
+using the [browsing](https://developer.gnome.org/hig/patterns/nav/browsing.html)
+pattern to navigate between them. If [property@Leaflet:can-navigate-back] is set
+to `TRUE`, the leaflet will provide a swipe gesture allowing to go back from
+the content page, as well as handle the relevant keyboard shortcuts and mouse
+buttons.
+
+The application needs to provide a back button and to switch leaflet's visible
+child to content appropriate (for example, show content after a sidebar row has
+been clicked, show sidebar after the back button has been clicked). The
+[method@Leaflet.navigate] method is convenient for this.
+
+Split header bars are typically used with [class@Window] or
+[class@ApplicationWindow], since the layout already contains header bars.
+
+## Flap
+
+[class@Flap] shows children side by side when there's enough room, or overlays
+one child on top of the other otherwise.
+
+This is commonly used to implement [utility
panes](https://developer.gnome.org/hig/patterns/containers/utility-panes.html),
+via setting the utility pane as the [property@Flap:flap] and the main view as
+[property@Flap:content].
+
+<picture>
+ <source srcset="adaptive-utility-pane-wide-dark.png" media="(prefers-color-scheme: dark)">
+ <img src="adaptive-utility-pane-wide.png" alt="adaptive-utility-pane-wide">
+</picture>
+<picture>
+ <source srcset="adaptive-utility-pane-narrow-dark.png" media="(prefers-color-scheme: dark)">
+ <img src="adaptive-utility-pane-narrow.png" alt="adaptive-utility-pane-narrow">
+</picture>
+
+```xml
+<object class="GtkToggleButton" id="toggle_pane_button">
+ <property name="icon-name">sidebar-show-symbolic</property>
+ <property name="active">True</property>
+</object>
+<!-- ... -->
+<object class="AdwFlap">
+ <property name="reveal-flap"
+ bind-source="toggle_pane_button"
+ bind-property="active"
+ bind-flags="sync-create|bidirectional"/>
+ <property name="flap">
+ <!-- utility pane -->
+ </property>
+ <property name="separator">
+ <object class="GtkSeparator"/>
+ </property>
+ <property name="content">
+ <!-- main view -->
+ </property>
+</object>
+```
+
+To make the utility pane permanently visible on desktop, and only allow to show
+and hide it on mobile, bind the relevant properties to
+the flap's [property@Flap:folded] value.
+
+```xml
+<object class="GtkToggleButton" id="toggle_pane_button">
+ <property name="icon-name">sidebar-show-symbolic</property>
+ <property name="active">True</property>
+ <property name="visible"
+ bind-source="flap"
+ bind-property="folded"
+ bind-flags="sync-create"/>
+</object>
+<!-- ... -->
+<object class="AdwFlap" id="flap">
+ <property name="reveal-flap"
+ bind-source="toggle_pane_button"
+ bind-property="active"
+ bind-flags="sync-create|bidirectional"/>
+ <property name="swipe-to-open"
+ bind-source="flap"
+ bind-property="folded"
+ bind-flags="sync-create"/>
+ <property name="swipe-to-close"
+ bind-source="flap"
+ bind-property="folded"
+ bind-flags="sync-create"/>
+ <property name="flap">
+ <!-- utility pane -->
+ </property>
+ <property name="separator">
+ <object class="GtkSeparator"/>
+ </property>
+ <property name="content">
+ <!-- main view -->
+ </property>
+</object>
+```
+
+## View Switcher
+
+The [class@ViewSwitcherTitle] and [class@ViewSwitcherBar] widgets implement an
+adaptive [view switcher](https://developer.gnome.org/hig/patterns/nav/view-switchers.html).
+
+They are typically used together, providing desktop and mobile UI for the same
+navigation: a view switcher in the header bar when there's enough space, or a
+view switcher in a bottom bar otherwise.
+
+<picture>
+ <source srcset="adaptive-view-switcher-wide-dark.png" media="(prefers-color-scheme: dark)">
+ <img src="adaptive-view-switcher-wide.png" alt="adaptive-view-switcher-wide">
+</picture>
+<picture>
+ <source srcset="adaptive-view-switcher-narrow-dark.png" media="(prefers-color-scheme: dark)">
+ <img src="adaptive-view-switcher-narrow.png" alt="adaptive-view-switcher-narrow">
+</picture>
+
+```xml
+<object class="GtkBox">
+ <property name="orientation">vertical</property>
+ <child>
+ <object class="AdwHeaderBar">
+ <property name="centering-policy">strict</property>
+ <property name="title-widget">
+ <object class="AdwViewSwitcherTitle" id="title">
+ <property name="stack">stack</property>
+ </object>
+ </property>
+ </object>
+ </child>
+ <child>
+ <object class="AdwViewStack" id="stack">
+ <property name="vexpand">True</property>
+ <!-- pages -->
+ </object>
+ </child>
+ <child>
+ <object class="AdwViewSwitcherBar">
+ <property name="stack">stack</property>
+ <binding name="reveal">
+ <lookup name="title-visible">title</lookup>
+ </binding>
+ </object>
+ </child>
+</object>
+```
+
+View switcher is also available separately as [class@ViewSwitcher]. This can be
+useful if the higher level widgets cannot work for some reason.
+
+## Squeezer
+
+[class@Squeezer] is similar to [class@Gtk.Stack], but shows the largest of its
+children that can fit into the available space.
+
+For example, [class@ViewSwitcherTitle] uses it to conditionally show a view
+switcher or the window title.
diff --git a/doc/images/adaptive-boxed-lists-narrow-dark.png b/doc/images/adaptive-boxed-lists-narrow-dark.png
new file mode 100644
index 00000000..8365bca2
Binary files /dev/null and b/doc/images/adaptive-boxed-lists-narrow-dark.png differ
diff --git a/doc/images/adaptive-boxed-lists-narrow.png b/doc/images/adaptive-boxed-lists-narrow.png
new file mode 100644
index 00000000..86c2a51c
Binary files /dev/null and b/doc/images/adaptive-boxed-lists-narrow.png differ
diff --git a/doc/images/adaptive-boxed-lists-wide-dark.png b/doc/images/adaptive-boxed-lists-wide-dark.png
new file mode 100644
index 00000000..ff43de75
Binary files /dev/null and b/doc/images/adaptive-boxed-lists-wide-dark.png differ
diff --git a/doc/images/adaptive-boxed-lists-wide.png b/doc/images/adaptive-boxed-lists-wide.png
new file mode 100644
index 00000000..55e130a9
Binary files /dev/null and b/doc/images/adaptive-boxed-lists-wide.png differ
diff --git a/doc/images/adaptive-split-headers-narrow-1-dark.png
b/doc/images/adaptive-split-headers-narrow-1-dark.png
new file mode 100644
index 00000000..91ba33cf
Binary files /dev/null and b/doc/images/adaptive-split-headers-narrow-1-dark.png differ
diff --git a/doc/images/adaptive-split-headers-narrow-1.png b/doc/images/adaptive-split-headers-narrow-1.png
new file mode 100644
index 00000000..87fa9546
Binary files /dev/null and b/doc/images/adaptive-split-headers-narrow-1.png differ
diff --git a/doc/images/adaptive-split-headers-narrow-2-dark.png
b/doc/images/adaptive-split-headers-narrow-2-dark.png
new file mode 100644
index 00000000..3e64e2f1
Binary files /dev/null and b/doc/images/adaptive-split-headers-narrow-2-dark.png differ
diff --git a/doc/images/adaptive-split-headers-narrow-2.png b/doc/images/adaptive-split-headers-narrow-2.png
new file mode 100644
index 00000000..15161ddc
Binary files /dev/null and b/doc/images/adaptive-split-headers-narrow-2.png differ
diff --git a/doc/images/adaptive-split-headers-wide-dark.png b/doc/images/adaptive-split-headers-wide-dark.png
new file mode 100644
index 00000000..8994fd4a
Binary files /dev/null and b/doc/images/adaptive-split-headers-wide-dark.png differ
diff --git a/doc/images/adaptive-split-headers-wide.png b/doc/images/adaptive-split-headers-wide.png
new file mode 100644
index 00000000..0db2cd5b
Binary files /dev/null and b/doc/images/adaptive-split-headers-wide.png differ
diff --git a/doc/images/adaptive-utility-pane-narrow-dark.png
b/doc/images/adaptive-utility-pane-narrow-dark.png
new file mode 100644
index 00000000..81636cc8
Binary files /dev/null and b/doc/images/adaptive-utility-pane-narrow-dark.png differ
diff --git a/doc/images/adaptive-utility-pane-narrow.png b/doc/images/adaptive-utility-pane-narrow.png
new file mode 100644
index 00000000..04b93507
Binary files /dev/null and b/doc/images/adaptive-utility-pane-narrow.png differ
diff --git a/doc/images/adaptive-utility-pane-wide-dark.png b/doc/images/adaptive-utility-pane-wide-dark.png
new file mode 100644
index 00000000..368eefbb
Binary files /dev/null and b/doc/images/adaptive-utility-pane-wide-dark.png differ
diff --git a/doc/images/adaptive-utility-pane-wide.png b/doc/images/adaptive-utility-pane-wide.png
new file mode 100644
index 00000000..8ca036a7
Binary files /dev/null and b/doc/images/adaptive-utility-pane-wide.png differ
diff --git a/doc/images/adaptive-view-switcher-narrow-dark.png
b/doc/images/adaptive-view-switcher-narrow-dark.png
new file mode 100644
index 00000000..f74b4778
Binary files /dev/null and b/doc/images/adaptive-view-switcher-narrow-dark.png differ
diff --git a/doc/images/adaptive-view-switcher-narrow.png b/doc/images/adaptive-view-switcher-narrow.png
new file mode 100644
index 00000000..73b2a3ab
Binary files /dev/null and b/doc/images/adaptive-view-switcher-narrow.png differ
diff --git a/doc/images/adaptive-view-switcher-wide-dark.png b/doc/images/adaptive-view-switcher-wide-dark.png
new file mode 100644
index 00000000..5af0c2a7
Binary files /dev/null and b/doc/images/adaptive-view-switcher-wide-dark.png differ
diff --git a/doc/images/adaptive-view-switcher-wide.png b/doc/images/adaptive-view-switcher-wide.png
new file mode 100644
index 00000000..e401ed27
Binary files /dev/null and b/doc/images/adaptive-view-switcher-wide.png differ
diff --git a/doc/libadwaita.toml.in b/doc/libadwaita.toml.in
index 592fe2fe..b6f01245 100644
--- a/doc/libadwaita.toml.in
+++ b/doc/libadwaita.toml.in
@@ -41,6 +41,7 @@ content_files = [
"build-howto.md",
"boxed-lists.md",
+ "adaptive-layouts.md",
"styles-and-appearance.md",
"named-colors.md",
@@ -54,6 +55,24 @@ content_files = [
content_images = [
"images/action-row.png",
"images/action-row-dark.png",
+ "images/adaptive-boxed-lists-narrow.png",
+ "images/adaptive-boxed-lists-narrow-dark.png",
+ "images/adaptive-boxed-lists-wide.png",
+ "images/adaptive-boxed-lists-wide-dark.png",
+ "images/adaptive-split-headers-narrow-1.png",
+ "images/adaptive-split-headers-narrow-1-dark.png",
+ "images/adaptive-split-headers-narrow-2.png",
+ "images/adaptive-split-headers-narrow-2-dark.png",
+ "images/adaptive-split-headers-wide.png",
+ "images/adaptive-split-headers-wide-dark.png",
+ "images/adaptive-utility-pane-narrow.png",
+ "images/adaptive-utility-pane-narrow-dark.png",
+ "images/adaptive-utility-pane-wide.png",
+ "images/adaptive-utility-pane-wide-dark.png",
+ "images/adaptive-view-switcher-narrow.png",
+ "images/adaptive-view-switcher-narrow-dark.png",
+ "images/adaptive-view-switcher-wide.png",
+ "images/adaptive-view-switcher-wide-dark.png",
"images/app-icons.png",
"images/app-icons-dark.png",
"images/application-window.png",
diff --git a/doc/meson.build b/doc/meson.build
index f8b73a00..60ec70bb 100644
--- a/doc/meson.build
+++ b/doc/meson.build
@@ -3,6 +3,7 @@ if get_option('gtk_doc')
subdir('tools')
expand_content_md_files = [
+ 'adaptive-layouts.md',
'boxed-lists.md',
'build-howto.md',
'migrating-between-development-versions.md',
diff --git a/doc/tools/data/adaptive-boxed-lists-narrow.ui b/doc/tools/data/adaptive-boxed-lists-narrow.ui
new file mode 100644
index 00000000..c3236ec3
--- /dev/null
+++ b/doc/tools/data/adaptive-boxed-lists-narrow.ui
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+ <requires lib="gtk" version="4.0"/>
+ <requires lib="libadwaita" version="1.0"/>
+ <object class="GtkWindow" id="widget">
+ <property name="default-width">360</property>
+ <property name="default-height">500</property>
+ <property name="title">Boxed List</property>
+ <property name="titlebar">
+ <object class="GtkHeaderBar"/>
+ </property>
+ <property name="child">
+ <object class="AdwPreferencesPage">
+ <child>
+ <object class="AdwPreferencesGroup">
+ <child>
+ <object class="AdwActionRow">
+ <property name="title">Row 1</property>
+ </object>
+ </child>
+ <child>
+ <object class="AdwActionRow">
+ <property name="title">Row 2</property>
+ </object>
+ </child>
+ <child>
+ <object class="AdwActionRow">
+ <property name="title">Row 3</property>
+ </object>
+ </child>
+ <child>
+ <object class="AdwActionRow">
+ <property name="title">Row 4</property>
+ </object>
+ </child>
+ <child>
+ <object class="AdwActionRow">
+ <property name="title">Row 5</property>
+ </object>
+ </child>
+ <child>
+ <object class="AdwActionRow">
+ <property name="title">Row 6</property>
+ </object>
+ </child>
+ <child>
+ <object class="AdwActionRow">
+ <property name="title">Row 7</property>
+ </object>
+ </child>
+ <child>
+ <object class="AdwActionRow">
+ <property name="title">Row 8</property>
+ </object>
+ </child>
+ <child>
+ <object class="AdwActionRow">
+ <property name="title">Row 9</property>
+ </object>
+ </child>
+ <child>
+ <object class="AdwActionRow">
+ <property name="title">Row 10</property>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </property>
+ </object>
+</interface>
diff --git a/doc/tools/data/adaptive-boxed-lists-wide.ui b/doc/tools/data/adaptive-boxed-lists-wide.ui
new file mode 100644
index 00000000..e01cdf1d
--- /dev/null
+++ b/doc/tools/data/adaptive-boxed-lists-wide.ui
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+ <requires lib="gtk" version="4.0"/>
+ <requires lib="libadwaita" version="1.0"/>
+ <object class="GtkWindow" id="widget">
+ <property name="default-width">800</property>
+ <property name="default-height">500</property>
+ <property name="title">Boxed List</property>
+ <property name="titlebar">
+ <object class="GtkHeaderBar"/>
+ </property>
+ <property name="child">
+ <object class="AdwPreferencesPage">
+ <child>
+ <object class="AdwPreferencesGroup">
+ <child>
+ <object class="AdwActionRow">
+ <property name="title">Row 1</property>
+ </object>
+ </child>
+ <child>
+ <object class="AdwActionRow">
+ <property name="title">Row 2</property>
+ </object>
+ </child>
+ <child>
+ <object class="AdwActionRow">
+ <property name="title">Row 3</property>
+ </object>
+ </child>
+ <child>
+ <object class="AdwActionRow">
+ <property name="title">Row 4</property>
+ </object>
+ </child>
+ <child>
+ <object class="AdwActionRow">
+ <property name="title">Row 5</property>
+ </object>
+ </child>
+ <child>
+ <object class="AdwActionRow">
+ <property name="title">Row 6</property>
+ </object>
+ </child>
+ <child>
+ <object class="AdwActionRow">
+ <property name="title">Row 7</property>
+ </object>
+ </child>
+ <child>
+ <object class="AdwActionRow">
+ <property name="title">Row 8</property>
+ </object>
+ </child>
+ <child>
+ <object class="AdwActionRow">
+ <property name="title">Row 9</property>
+ </object>
+ </child>
+ <child>
+ <object class="AdwActionRow">
+ <property name="title">Row 10</property>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </property>
+ </object>
+</interface>
diff --git a/doc/tools/data/adaptive-split-headers-narrow-1.ui
b/doc/tools/data/adaptive-split-headers-narrow-1.ui
new file mode 100644
index 00000000..99815359
--- /dev/null
+++ b/doc/tools/data/adaptive-split-headers-narrow-1.ui
@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+ <requires lib="gtk" version="4.0"/>
+ <requires lib="libadwaita" version="1.0"/>
+ <object class="AdwWindow" id="widget">
+ <property name="default-width">360</property>
+ <property name="default-height">500</property>
+ <property name="content">
+ <object class="AdwLeaflet" id="leaflet">
+ <property name="can-navigate-back">True</property>
+ <child>
+ <object class="GtkBox">
+ <property name="orientation">vertical</property>
+ <child>
+ <object class="AdwHeaderBar">
+ <property name="show-end-title-buttons" bind-source="leaflet" bind-property="folded"
bind-flags="sync-create"/>
+ <property name="title-widget">
+ <object class="AdwWindowTitle">
+ <property name="title">Sidebar</property>
+ </object>
+ </property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkScrolledWindow">
+ <property name="vexpand">True</property>
+ <property name="hscrollbar-policy">never</property>
+ <property name="width-request">250</property>
+ <property name="child">
+ <object class="GtkViewport">
+ <property name="scroll-to-focus">True</property>
+ <property name="child">
+ <object class="GtkListBox">
+ <property name="selection-mode">none</property>
+ <style>
+ <class name="navigation-sidebar"/>
+ </style>
+ <child>
+ <object class="GtkLabel">
+ <property name="label">Item 1</property>
+ <property name="xalign">0</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label">Item 2</property>
+ <property name="xalign">0</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label">Item 3</property>
+ <property name="xalign">0</property>
+ </object>
+ </child>
+ </object>
+ </property>
+ </object>
+ </property>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="AdwLeafletPage">
+ <property name="navigatable">False</property>
+ <property name="child">
+ <object class="GtkSeparator"/>
+ </property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkBox" id="content">
+ <property name="orientation">vertical</property>
+ <property name="hexpand">True</property>
+ <property name="width-request">360</property>
+ <child>
+ <object class="AdwHeaderBar">
+ <property name="show-start-title-buttons" bind-source="leaflet" bind-property="folded"
bind-flags="sync-create"/>
+ <child>
+ <object class="GtkButton">
+ <property name="visible" bind-source="leaflet" bind-property="folded"
bind-flags="sync-create"/>
+ <property name="icon-name">go-previous-symbolic</property>
+ </object>
+ </child>
+ <property name="title-widget">
+ <object class="AdwWindowTitle">
+ <property name="title">Item 1</property>
+ </object>
+ </property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label">Page 1</property>
+ <property name="vexpand">True</property>
+ <style>
+ <class name="title-1"/>
+ </style>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </property>
+ </object>
+</interface>
diff --git a/doc/tools/data/adaptive-split-headers-narrow-2.ui
b/doc/tools/data/adaptive-split-headers-narrow-2.ui
new file mode 100644
index 00000000..0f0809f4
--- /dev/null
+++ b/doc/tools/data/adaptive-split-headers-narrow-2.ui
@@ -0,0 +1,108 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+ <requires lib="gtk" version="4.0"/>
+ <requires lib="libadwaita" version="1.0"/>
+ <object class="AdwWindow" id="widget">
+ <property name="default-width">360</property>
+ <property name="default-height">500</property>
+ <property name="content">
+ <object class="AdwLeaflet" id="leaflet">
+ <property name="can-navigate-back">True</property>
+ <property name="visible-child">content</property>
+ <child>
+ <object class="GtkBox">
+ <property name="orientation">vertical</property>
+ <child>
+ <object class="AdwHeaderBar">
+ <property name="show-end-title-buttons" bind-source="leaflet" bind-property="folded"
bind-flags="sync-create"/>
+ <property name="title-widget">
+ <object class="AdwWindowTitle">
+ <property name="title">Sidebar</property>
+ </object>
+ </property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkScrolledWindow">
+ <property name="vexpand">True</property>
+ <property name="hscrollbar-policy">never</property>
+ <property name="width-request">250</property>
+ <property name="child">
+ <object class="GtkViewport">
+ <property name="scroll-to-focus">True</property>
+ <property name="child">
+ <object class="GtkListBox">
+ <property name="selection-mode">none</property>
+ <style>
+ <class name="navigation-sidebar"/>
+ </style>
+ <child>
+ <object class="GtkLabel">
+ <property name="label">Item 1</property>
+ <property name="xalign">0</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label">Item 2</property>
+ <property name="xalign">0</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label">Item 3</property>
+ <property name="xalign">0</property>
+ </object>
+ </child>
+ </object>
+ </property>
+ </object>
+ </property>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="AdwLeafletPage">
+ <property name="navigatable">False</property>
+ <property name="child">
+ <object class="GtkSeparator"/>
+ </property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkBox" id="content">
+ <property name="orientation">vertical</property>
+ <property name="hexpand">True</property>
+ <property name="width-request">360</property>
+ <child>
+ <object class="AdwHeaderBar">
+ <property name="show-start-title-buttons" bind-source="leaflet" bind-property="folded"
bind-flags="sync-create"/>
+ <child>
+ <object class="GtkButton">
+ <property name="visible" bind-source="leaflet" bind-property="folded"
bind-flags="sync-create"/>
+ <property name="icon-name">go-previous-symbolic</property>
+ </object>
+ </child>
+ <property name="title-widget">
+ <object class="AdwWindowTitle">
+ <property name="title">Item 1</property>
+ </object>
+ </property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label">Page 1</property>
+ <property name="vexpand">True</property>
+ <style>
+ <class name="title-1"/>
+ </style>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </property>
+ </object>
+</interface>
diff --git a/doc/tools/data/adaptive-split-headers-wide.ui b/doc/tools/data/adaptive-split-headers-wide.ui
new file mode 100644
index 00000000..793481e8
--- /dev/null
+++ b/doc/tools/data/adaptive-split-headers-wide.ui
@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+ <requires lib="gtk" version="4.0"/>
+ <requires lib="libadwaita" version="1.0"/>
+ <object class="AdwWindow" id="widget">
+ <property name="default-width">800</property>
+ <property name="default-height">500</property>
+ <property name="content">
+ <object class="AdwLeaflet" id="leaflet">
+ <property name="can-navigate-back">True</property>
+ <child>
+ <object class="GtkBox">
+ <property name="orientation">vertical</property>
+ <child>
+ <object class="AdwHeaderBar">
+ <property name="show-end-title-buttons" bind-source="leaflet" bind-property="folded"
bind-flags="sync-create"/>
+ <property name="title-widget">
+ <object class="AdwWindowTitle">
+ <property name="title">Sidebar</property>
+ </object>
+ </property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkScrolledWindow">
+ <property name="vexpand">True</property>
+ <property name="hscrollbar-policy">never</property>
+ <property name="width-request">250</property>
+ <property name="child">
+ <object class="GtkViewport">
+ <property name="scroll-to-focus">True</property>
+ <property name="child">
+ <object class="GtkListBox">
+ <property name="selection-mode">single</property>
+ <style>
+ <class name="navigation-sidebar"/>
+ </style>
+ <child>
+ <object class="GtkLabel">
+ <property name="label">Item 1</property>
+ <property name="xalign">0</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label">Item 2</property>
+ <property name="xalign">0</property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label">Item 3</property>
+ <property name="xalign">0</property>
+ </object>
+ </child>
+ </object>
+ </property>
+ </object>
+ </property>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="AdwLeafletPage">
+ <property name="navigatable">False</property>
+ <property name="child">
+ <object class="GtkSeparator"/>
+ </property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkBox" id="content">
+ <property name="orientation">vertical</property>
+ <property name="hexpand">True</property>
+ <property name="width-request">360</property>
+ <child>
+ <object class="AdwHeaderBar">
+ <property name="show-start-title-buttons" bind-source="leaflet" bind-property="folded"
bind-flags="sync-create"/>
+ <child>
+ <object class="GtkButton">
+ <property name="visible" bind-source="leaflet" bind-property="folded"
bind-flags="sync-create"/>
+ <property name="icon-name">go-previous-symbolic</property>
+ </object>
+ </child>
+ <property name="title-widget">
+ <object class="AdwWindowTitle">
+ <property name="title">Item 1</property>
+ </object>
+ </property>
+ </object>
+ </child>
+ <child>
+ <object class="GtkLabel">
+ <property name="label">Page 1</property>
+ <property name="vexpand">True</property>
+ <style>
+ <class name="title-1"/>
+ </style>
+ </object>
+ </child>
+ </object>
+ </child>
+ </object>
+ </property>
+ </object>
+</interface>
diff --git a/doc/tools/data/adaptive-utility-pane-narrow.ui b/doc/tools/data/adaptive-utility-pane-narrow.ui
new file mode 100644
index 00000000..62ebe991
--- /dev/null
+++ b/doc/tools/data/adaptive-utility-pane-narrow.ui
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+ <requires lib="gtk" version="4.0"/>
+ <requires lib="libadwaita" version="1.0"/>
+ <object class="GtkWindow" id="widget">
+ <property name="default-width">360</property>
+ <property name="default-height">500</property>
+ <property name="title" translatable="yes">Utility Pane</property>
+ <property name="titlebar">
+ <object class="GtkHeaderBar">
+ <child type="start">
+ <object class="GtkToggleButton" id="show_sidebar_button">
+ <property name="icon-name">sidebar-show-symbolic</property>
+ <property name="active">True</property>
+ </object>
+ </child>
+ </object>
+ </property>
+ <property name="child">
+ <object class="AdwFlap" id="flap">
+ <property name="reveal-flap"
+ bind-source="show_sidebar_button"
+ bind-property="active"
+ bind-flags="sync-create|bidirectional"/>
+ <property name="locked">True</property>
+ <property name="flap">
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Utility Pane</property>
+ <property name="wrap">True</property>
+ <property name="width-request">250</property>
+ <style>
+ <class name="title-1"/>
+ <class name="background"/>
+ </style>
+ </object>
+ </property>
+ <property name="separator">
+ <object class="GtkSeparator"/>
+ </property>
+ <property name="content">
+ <object class="GtkLabel">
+ <property name="width-request">360</property>
+ <property name="label" translatable="yes">Main View</property>
+ <property name="wrap">True</property>
+ <style>
+ <class name="title-1"/>
+ </style>
+ </object>
+ </property>
+ </object>
+ </property>
+ </object>
+</interface>
diff --git a/doc/tools/data/adaptive-utility-pane-wide.ui b/doc/tools/data/adaptive-utility-pane-wide.ui
new file mode 100644
index 00000000..170c2c52
--- /dev/null
+++ b/doc/tools/data/adaptive-utility-pane-wide.ui
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+ <requires lib="gtk" version="4.0"/>
+ <requires lib="libadwaita" version="1.0"/>
+ <object class="GtkWindow" id="widget">
+ <property name="default-width">800</property>
+ <property name="default-height">500</property>
+ <property name="title" translatable="yes">Utility Pane</property>
+ <property name="titlebar">
+ <object class="GtkHeaderBar">
+ <child type="start">
+ <object class="GtkToggleButton" id="show_sidebar_button">
+ <property name="icon-name">sidebar-show-symbolic</property>
+ <property name="active">True</property>
+ </object>
+ </child>
+ </object>
+ </property>
+ <property name="child">
+ <object class="AdwFlap" id="flap">
+ <property name="reveal-flap"
+ bind-source="show_sidebar_button"
+ bind-property="active"
+ bind-flags="sync-create|bidirectional"/>
+ <property name="locked">True</property>
+ <property name="flap">
+ <object class="GtkLabel">
+ <property name="label" translatable="yes">Utility Pane</property>
+ <property name="wrap">True</property>
+ <property name="width-request">250</property>
+ <style>
+ <class name="title-1"/>
+ <class name="background"/>
+ </style>
+ </object>
+ </property>
+ <property name="separator">
+ <object class="GtkSeparator"/>
+ </property>
+ <property name="content">
+ <object class="GtkLabel">
+ <property name="width-request">360</property>
+ <property name="label" translatable="yes">Main View</property>
+ <property name="wrap">True</property>
+ <style>
+ <class name="title-1"/>
+ </style>
+ </object>
+ </property>
+ </object>
+ </property>
+ </object>
+</interface>
diff --git a/doc/tools/data/adaptive-view-switcher-narrow.ui b/doc/tools/data/adaptive-view-switcher-narrow.ui
new file mode 100644
index 00000000..dd87a613
--- /dev/null
+++ b/doc/tools/data/adaptive-view-switcher-narrow.ui
@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+ <requires lib="gtk" version="4.0"/>
+ <requires lib="libadwaita" version="1.0"/>
+ <object class="GtkWindow" id="widget">
+ <property name="default-width">360</property>
+ <property name="default-height">500</property>
+ <property name="titlebar">
+ <object class="AdwHeaderBar">
+ <property name="centering-policy">strict</property>
+ <property name="title-widget">
+ <object class="AdwViewSwitcherTitle" id="title">
+ <property name="stack">stack</property>
+ <property name="title">View Switcher</property>
+ </object>
+ </property>
+ </object>
+ </property>
+ <property name="child">
+ <object class="GtkBox">
+ <property name="orientation">vertical</property>
+ <child>
+ <object class="AdwViewStack" id="stack">
+ <property name="vexpand">True</property>
+ <child>
+ <object class="AdwViewStackPage">
+ <property name="title">View 1</property>
+ <property name="icon-name">folder-music-symbolic</property>
+ <property name="child">
+ <object class="GtkLabel">
+ <property name="label">View 1</property>
+ <style>
+ <class name="title-1"/>
+ </style>
+ </object>
+ </property>
+ </object>
+ </child>
+ <child>
+ <object class="AdwViewStackPage">
+ <property name="title">View 2</property>
+ <property name="icon-name">folder-pictures-symbolic</property>
+ <property name="child">
+ <object class="GtkLabel">
+ <property name="label">View 2</property>
+ <style>
+ <class name="title-1"/>
+ </style>
+ </object>
+ </property>
+ </object>
+ </child>
+ <child>
+ <object class="AdwViewStackPage">
+ <property name="title">View 3</property>
+ <property name="icon-name">folder-videos-symbolic</property>
+ <property name="child">
+ <object class="GtkLabel">
+ <property name="label">View 3</property>
+ <style>
+ <class name="title-1"/>
+ </style>
+ </object>
+ </property>
+ </object>
+ </child>
+ <child>
+ <object class="AdwViewStackPage">
+ <property name="title">View 4</property>
+ <property name="icon-name">non-starred-symbolic</property>
+ <property name="child">
+ <object class="GtkLabel">
+ <property name="label">View 4</property>
+ <style>
+ <class name="title-1"/>
+ </style>
+ </object>
+ </property>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="AdwViewSwitcherBar">
+ <property name="stack">stack</property>
+ <binding name="reveal">
+ <lookup name="title-visible">title</lookup>
+ </binding>
+ </object>
+ </child>
+ </object>
+ </property>
+ </object>
+</interface>
diff --git a/doc/tools/data/adaptive-view-switcher-wide.ui b/doc/tools/data/adaptive-view-switcher-wide.ui
new file mode 100644
index 00000000..1fa421af
--- /dev/null
+++ b/doc/tools/data/adaptive-view-switcher-wide.ui
@@ -0,0 +1,94 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+ <requires lib="gtk" version="4.0"/>
+ <requires lib="libadwaita" version="1.0"/>
+ <object class="GtkWindow" id="widget">
+ <property name="default-width">800</property>
+ <property name="default-height">500</property>
+ <property name="titlebar">
+ <object class="AdwHeaderBar">
+ <property name="centering-policy">strict</property>
+ <property name="title-widget">
+ <object class="AdwViewSwitcherTitle" id="title">
+ <property name="stack">stack</property>
+ <property name="title">View Switcher</property>
+ </object>
+ </property>
+ </object>
+ </property>
+ <property name="child">
+ <object class="GtkBox">
+ <property name="orientation">vertical</property>
+ <child>
+ <object class="AdwViewStack" id="stack">
+ <property name="vexpand">True</property>
+ <child>
+ <object class="AdwViewStackPage">
+ <property name="title">View 1</property>
+ <property name="icon-name">folder-music-symbolic</property>
+ <property name="child">
+ <object class="GtkLabel">
+ <property name="label">View 1</property>
+ <style>
+ <class name="title-1"/>
+ </style>
+ </object>
+ </property>
+ </object>
+ </child>
+ <child>
+ <object class="AdwViewStackPage">
+ <property name="title">View 2</property>
+ <property name="icon-name">folder-pictures-symbolic</property>
+ <property name="child">
+ <object class="GtkLabel">
+ <property name="label">View 2</property>
+ <style>
+ <class name="title-1"/>
+ </style>
+ </object>
+ </property>
+ </object>
+ </child>
+ <child>
+ <object class="AdwViewStackPage">
+ <property name="title">View 3</property>
+ <property name="icon-name">folder-videos-symbolic</property>
+ <property name="child">
+ <object class="GtkLabel">
+ <property name="label">View 3</property>
+ <style>
+ <class name="title-1"/>
+ </style>
+ </object>
+ </property>
+ </object>
+ </child>
+ <child>
+ <object class="AdwViewStackPage">
+ <property name="title">View 4</property>
+ <property name="icon-name">non-starred-symbolic</property>
+ <property name="child">
+ <object class="GtkLabel">
+ <property name="label">View 4</property>
+ <style>
+ <class name="title-1"/>
+ </style>
+ </object>
+ </property>
+ </object>
+ </child>
+ </object>
+ </child>
+ <child>
+ <object class="AdwViewSwitcherBar">
+ <property name="stack">stack</property>
+ <binding name="reveal">
+ <lookup name="title-visible">title</lookup>
+ </binding>
+ </object>
+ </child>
+ </object>
+ </property>
+ </object>
+</interface>
diff --git a/doc/tools/screenshot.gresources.xml b/doc/tools/screenshot.gresources.xml
index c7ce7e47..536029bd 100644
--- a/doc/tools/screenshot.gresources.xml
+++ b/doc/tools/screenshot.gresources.xml
@@ -4,6 +4,15 @@
<file preprocess="xml-stripblanks">icons/scalable/apps/org.gnome.Boxes.svg</file>
<file preprocess="xml-stripblanks">data/action-row.ui</file>
+ <file preprocess="xml-stripblanks">data/adaptive-boxed-lists-narrow.ui</file>
+ <file preprocess="xml-stripblanks">data/adaptive-boxed-lists-wide.ui</file>
+ <file preprocess="xml-stripblanks">data/adaptive-split-headers-narrow-1.ui</file>
+ <file preprocess="xml-stripblanks">data/adaptive-split-headers-narrow-2.ui</file>
+ <file preprocess="xml-stripblanks">data/adaptive-split-headers-wide.ui</file>
+ <file preprocess="xml-stripblanks">data/adaptive-utility-pane-narrow.ui</file>
+ <file preprocess="xml-stripblanks">data/adaptive-utility-pane-wide.ui</file>
+ <file preprocess="xml-stripblanks">data/adaptive-view-switcher-narrow.ui</file>
+ <file preprocess="xml-stripblanks">data/adaptive-view-switcher-wide.ui</file>
<file preprocess="xml-stripblanks">data/app-icons.ui</file>
<file preprocess="xml-stripblanks">data/application-window.ui</file>
<file preprocess="xml-stripblanks">data/avatar.ui</file>
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
