Skip to content

Commit

Permalink
Update dialog section
Browse files Browse the repository at this point in the history
  • Loading branch information
@Hofer-Julian
Hofer-Julian committed Nov 10, 2023
1 parent 4991de8 commit 62cceb7
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 77 deletions.
168 changes: 91 additions & 77 deletions book/src/todo_4.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ We will start by adding an empty sidebar without any functionality.

There are a couple of steps we have to go through to get to this state.
First, we have to replace [`gtk::ApplicationWindow`](https://gtk-rs.org/gtk4-rs/stable/latest/docs/gtk4/struct.ApplicationWindow.html) with [`adw::ApplicationWindow`](https://world.pages.gitlab.gnome.org/Rust/libadwaita-rs/stable/latest/docs/libadwaita/struct.ApplicationWindow.html).
The only difference between those two is that `adw::ApplicationWindow` has no titlebar area.
That comes in handy when we build up our interface with [`adw::Leaflet`](https://world.pages.gitlab.gnome.org/Rust/libadwaita-rs/stable/latest/docs/libadwaita/struct.Leaflet.html).
In the screenshot above, the `Leaflet` behaves like a [`gtk::Box`](https://gtk-rs.org/gtk4-rs/stable/latest/docs/gtk4/struct.Box.html) and contains the collection view on the left, a separator in the middle and the task view on the right.
The main difference between those two is that `adw::ApplicationWindow` has no titlebar area.
That comes in handy when we build up our interface with [`adw::NavigationSplitView`](https://world.pages.gitlab.gnome.org/Rust/libadwaita-rs/stable/latest/docs/libadwaita/struct.NavigationSplitView.html).
In the screenshot above, the `NavigationSplitView` adds a sidebar for the collection view to the left, while the task view occupies the space on the right.
When using `adw::ApplicationWindow` the collection view and task view have their own [`adw::HeaderBar`](https://world.pages.gitlab.gnome.org/Rust/libadwaita-rs/stable/latest/docs/libadwaita/struct.HeaderBar.html) and the separator spans over the whole window.


Expand Down Expand Up @@ -56,12 +56,10 @@ Filename: <a class=file-link href="https://github.com/gtk-rs/gtk4-rs/blob/master
```


The `Leaflet` does not always behave like a `gtk::Box`.
As soon as the requested size is too small to fit all children at the same time, the leaflet folds, and starts behaving like a [`gtk::Stack`](https://gtk-rs.org/gtk4-rs/stable/latest/docs/gtk4/struct.Stack.html).
`NavigationSplitView` also helps with making your app [adaptive](https://developer.gnome.org/hig/guidelines/adaptive.html)/
As soon as the requested size is too small to fit all children at the same time, the splitview collapses, and starts behaving like a [`gtk::Stack`](https://gtk-rs.org/gtk4-rs/stable/latest/docs/gtk4/struct.Stack.html).
This means that it only displays one of its children at a time.
The property "can-navigate-back" controls whether gestures and shortcuts for navigating backward are enabled.
The `AdwLeafletPage` with the `gtk::Separator` will never be displayed in the folded state since its property "navigatable" is set to `False`.
The adaptive behavior of the leaflet allows the To-Do app to work on smaller screen sizes even with the added collection view.
The adaptive behavior of the leaflet allows the To-Do app to work on smaller screen sizes (like e.g. phones) even with the added collection view.


<div style="text-align:center">
Expand All @@ -73,85 +71,99 @@ The adaptive behavior of the leaflet allows the To-Do app to work on smaller scr


We add the necessary UI elements for the collection view, such as a header bar with a button to add a new collection, as well as the list box `collections_list` to display the collections later on.

As you can see in the screencast above, the header bar also displays a close button if the leaflet is folded.
We include this logic with an expression which can be built up in the UI file with the tag [`lookup`](https://gtk-rs.org/gtk4-rs/stable/latest/docs/gtk4/struct.Expression.html#gtkexpression-in-ui-files).
We also add the style [navigations-sidebar](https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1-latest/style-classes.html#sidebars) to `collections_list`.


Filename: <a class=file-link href="https://github.com/gtk-rs/gtk4-rs/blob/master/book/listings/todo/7/resources/window.ui">listings/todo/7/resources/window.ui</a>

```xml
<object class="GtkBox">
<property name="orientation">vertical</property>
<property name="width-request">200</property>
<child>
<object class="AdwHeaderBar">
<binding name="show-end-title-buttons">
<lookup name="folded">leaflet</lookup>
</binding>
<child type="start">
<object class="GtkToggleButton">
<property name="icon-name">list-add-symbolic</property>
<property name="tooltip-text" translatable="yes">New Collection</property>
<property name="action-name">win.new-collection</property>
<object class="AdwNavigationPage">
<property name="title" bind-source="TodoWindow"
bind-property="title" bind-flags="sync-create" />
<property name="child">
<object class="AdwToolbarView">
<child type="top">
<object class="AdwHeaderBar">
<child type="start">
<object class="GtkToggleButton">
<property name="icon-name">list-add-symbolic</property>
<property name="tooltip-text" translatable="yes">New Collection</property>
<property name="action-name">win.new-collection</property>
</object>
</child>
</object>
</child>
</object>
</child>
<child>
<object class="GtkScrolledWindow">
<property name="vexpand">True</property>
<property name="child">
<object class="GtkListBox" id="collections_list">
<style>
<class name="navigation-sidebar" />
</style>
<property name="content">
<object class="GtkScrolledWindow">
<property name="child">
<object class="GtkListBox" id="collections_list">
<style>
<class name="navigation-sidebar" />
</style>
</object>
</property>
</object>
</property>
</object>
</child>
</object>
```

We also add a header bar to the task view.
We don't have to worry about the close button here: it will always be displayed.
However, we will need a way to go back to the collection view when the leaflet is folded.
That is why we add `back_button` which can be used to return to the collection view and which is only visible when the leaflet is folded.


Filename: <a class=file-link href="https://github.com/gtk-rs/gtk4-rs/blob/master/book/listings/todo/7/resources/window.ui">listings/todo/7/resources/window.ui</a>

```xml
<object class="GtkBox">
<property name="orientation">vertical</property>
<property name="hexpand">True</property>
<property name="width-request">250</property>
<child>
<object class="AdwHeaderBar">
<property name="title-widget">
<object class="AdwWindowTitle" />
</property>
<child type="start">
<object class="GtkButton" id="back_button">
<binding name="visible">
<lookup name="folded">leaflet</lookup>
</binding>
<property name="icon-name">go-previous-symbolic</property>
<property name="tooltip-text" translatable="yes">Back</property>
<object class="AdwNavigationPage">
<property name="title" translatable="yes">Tasks</property>
<property name="child">
<object class="AdwToolbarView">
<child type="top">
<object class="AdwHeaderBar">
<property name="show-title">False</property>
<child type="end">
<object class="GtkMenuButton">
<property name="icon-name">open-menu-symbolic</property>
<property name="menu-model">main-menu</property>
<property name="tooltip-text" translatable="yes">Main Menu</property>
</object>
</child>
</object>
</child>
<child type="end">
<object class="GtkMenuButton">
<property name="icon-name">open-menu-symbolic</property>
<property name="menu-model">main-menu</property>
<property name="tooltip-text" translatable="yes">Main Menu</property>
<property name="content">
<object class="GtkScrolledWindow">
<property name="child">
<object class="AdwClamp">
<property name="maximum-size">400</property>
<property name="tightening-threshold">300</property>
<property name="child">
<object class="GtkBox">
<property name="orientation">vertical</property>
<property name="margin-start">12</property>
<property name="margin-end">12</property>
<property name="spacing">12</property>
<child>
<object class="GtkEntry" id="entry">
<property name="placeholder-text" translatable="yes">Enter a Task…</property>
<property name="secondary-icon-name">list-add-symbolic</property>
</object>
</child>
<child>
<object class="GtkListBox" id="tasks_list">
<property name="visible">False</property>
<property name="selection-mode">none</property>
<style>
<class name="boxed-list" />
</style>
</object>
</child>
</object>
</property>
</object>
</property>
</object>
</child>
</property>
</object>
</child>
<child>
<!--This part stays the same-->
</child>
</property>
</object>
```

Expand Down Expand Up @@ -207,14 +219,20 @@ Filename: <a class=file-link href="https://github.com/gtk-rs/gtk4-rs/blob/master
</menu>
<template class="TodoWindow" parent="AdwApplicationWindow">
<property name="title" translatable="yes">To-Do</property>
<property name="default_width">650</property>
<property name="default_height">550</property>
<property name="width-request">360</property>
<property name="height-request">200</property>
<child>
<object class="AdwBreakpoint">
<condition>max-width: 500sp</condition>
<setter object="split_view" property="collapsed">True</setter>
</object>
</child>
<property name="content">
<object class="GtkStack" id="stack">
<property name="transition-type">crossfade</property>
<child>
<object class="GtkStackPage">
<property name="name">empty</property>
<property name="name">placeholder</property>
<property name="child">
<object class="GtkBox">
<!--Placeholder page implementation-->
Expand All @@ -226,7 +244,7 @@ Filename: <a class=file-link href="https://github.com/gtk-rs/gtk4-rs/blob/master
<object class="GtkStackPage">
<property name="name">main</property>
<property name="child">
<object class="AdwLeaflet" id="leaflet">
<object class="AdwNavigationSplitView" id="split_view">
<!--Main page implementation-->
</object>
</property>
Expand Down Expand Up @@ -413,11 +431,10 @@ Filename: <a class=file-link href="https://github.com/gtk-rs/gtk4-rs/blob/master
```


## Leaflet and Dialog
## Message Dialog

Thanks to the leaflet the To-Do app folds now when we resize it to a smaller width.
However, there isn't yet a way to navigate between the different leaflet pages.
Let us start with the most important one: adding a new collection.
There isn't yet a way to add a collection.
Let's implement that functionality.

<div style="text-align:center">
<video autoplay muted loop>
Expand Down Expand Up @@ -463,10 +480,7 @@ We also add more callbacks to `setup_callbacks`.
Importantly, we want to filter our current task model whenever the value of the "filter" setting changes.
Whenever the items of our collections change we also want to set the stack.
This makes sure that our placeholder page is shown if there are no collections.
When we click on an item of `collections_list`, `current_collection` should be set to the selected collection and we should then navigate to the task view.
That is setup in `collections_list.connect_row_activated`, but we also need to setup `leaflet.connect_folded_notify` to make sure that no selection of `collections_list` items is happening in folded mode so that it just directly moves to the task view.
Finally, we connect to a click of the `back_button` in the task view so that we can return to the collections view again in folded mode.

Finally, we assure that when we click on a row of `collections_list`, `current_collection` is set to the selected collection and the split view shows the task view.

Filename: <a class=file-link href="https://github.com/gtk-rs/gtk4-rs/blob/master/book/listings/todo/8/window/imp.rs">listings/todo/8/window/mod.rs</a>

Expand Down
Binary file modified book/src/vid/todo_8_adaptive_sidebar.webm
View file
Binary file not shown.
Binary file modified book/src/vid/todo_8_dialog.webm
View file
Binary file not shown.

0 comments on commit 62cceb7

Please sign in to comment.