One Widget to Adapt Them All and to The Librem 5 Port Them

http://bytesgnomeschozo.blogspot.com/2018/03/one-widget-to-adapt-them-all-and-to.html

mars 03, 2018

In my previous article I shared my plans to help porting existing GTK+ applications to Purism's upcoming Librem 5 phone without having to fork them. This article will present the GTK+ widget I developed for Purism to make this happen.

For more information on what Purism is working on for the Librem 5, please check Nicole Faerber's latest article.

C'est pas sorcier

The underlying idea is to allow applications to dynamically switch between the two main GNOME application layouts: a row of panels — each panel being the view of an element from the previous one — and a stack of panels. The goal isn't to changes applications using the stack paradigm but the ones using the row one, allowing them to reach smaller sizes and to be usable on constrained sizes while keeping their initial paradigm and design when the screen space is sufficient. The development cost to port the applications to this adaptive design should be as low as possible.

To achieve that, I wrote a GTK+ widget which acts similarly to a GtkBox when there is plenty of space for its children, but which adapts automatically and acts similarly to a GtkStack when there isn't, displaying only one of its children. I called this widget HdyStackableBox and it is being developed for the libhandy library.

The widget's minimum size is the minimum size of its visible child, matching the minimum size of a GtkStack. The widget's natural size is the sum of the natural sizes of its children, matching size of a GtkBox.

The threshold below which the widget will turn into a stack is the sum of the natural sizes of its children — hence, when allocated less than its natural size the widget will turn into a stack. In box mode, the minimum size allocated to the children is their natural size, combined to the previously defined threshold this allows a collapsing priority property to naturally emerge as, when nesting HdyStackableBoxes, the wrapping one will collapse into a stack before the nested one. This is what I consider the biggest feature of this widget: this widget offers an adaptive behavior with no magic number involved.

Features of HdyStackableBox

HdyStackableBox is still in development, here is a list of already implemented features.

• Mode: box or stack.
• Adaptive design.
• Box homogeneity.
• Stack homogeneity.
• Mode transition:
  • None and slide animations.
  • Its duration is settable up to 250ms (like GtkRevealer).
• Child transition:
  • None animation.
  • Its duration is settable up to 200ms (like GtkStack).
• Named children.
• Unlimited children.

Here is a list of features that may or may not be implemented later.

• Draw on its own windows: the animations currently causes the widget to draw out of its allocated space.
• Mode transition: slide over animation, similarly to hiding the left panel of DzlBin.
• Child transition: slide animation.
• Orientation: this is partially implemented.
• Text direction: right-to-left languages should be supported.

Gimme! Gimme! Gimme!

The code is currently hosted at my fork of libhandy. You can test the widget by cloning the repo in GNOME Builder, moving to the wip/aplazas/stackablebox branch, building and running the project.

To test the widget in real world applications, I quickly tested it on GNOME Contacts. It is mostly ported and should work just fine, if not don't hesitate to report any strange behavior to me but only regarding the adaptive port.

GNOME Contacts with adaptive design and full navigation in stack mode

Adaptive GNOME Contacts running on an i.MX 6 development board and a phone screen.

I also tested it on Geary, there is no navigation implemented yet but it's a good test case of a complex UI with a HdyStackableBox nested into another.

Geary and its nested stackable boxes.

Adaptive design is useful even on the desktop for Geary.

Sorry for the graphical glitches, I suspect they are caused by a mix of out-of-bound drawings and improper/missing resizing and redraw queries, they will be fixed. You can test these by yourself by cloning, building and running these branches in GNOME Builder.

• Contacts: https://gitlab.gnome.org/aplazas/gnome-contacts/tree/wip/aplazas/stackablebox.
• Geary: https://gitlab.gnome.org/aplazas/geary/tree/wip/aplazas/stackablebox.

Keep in mind that my libhandy, GNOME Contacts and Geary forks are expected to disappear at some point in the future, and that I don't guaranty their quality as this is all in development.

/* TODO */

As you can see in the list of unimplemented features and in the videos, there is still a lot to do, polishing the widget to make it featureful and bug free will take time, probably a few more weeks of focused development. In the meantime, feedback from designers on what this widget could be used for and — perhaps more importantly — what it shouldn't be used for is more than welcome!

Once ready, what about turning it into GtkStackableBox? That would help its adoption by important applications like Settings, which probably don't want an extra dependency just for a widget but which could then work on the Librem 5 without yet another major redesign.

LIBELLÉS : GNOME-PLANET GTK PURISM

PARTAGER

Commentaires

1. 

   Fernando Teles4 mars 2018 à 05:10

   This is cool!

   RÉPONDRE

2. 

   Daniel Darias4 mars 2018 à 06:19

   Awesome work! I had my doubts about using gtk instead of kirigami but they are dissapearing quickly. I hope once the component will be finished a lot of apps take advantage of it. Btw, the repos links are inverted.

   RÉPONDRE

   • 

     Adrien Plazas4 mars 2018 à 06:22

     Thanks, they are now fixed.

3. 

   Daniel Espinosa4 mars 2018 à 06:49

   I really love your work.
   
   Getting a GtkStackableBox will bring lot of benefits to Desktop applications, like for users using their applications divided on screen. With addaptive designs generally available, developers can help users to monitor more than one application at the same time, like keep their mail open on one side while use other application in a bigger size.
   
   Adding a bolean developer_mode property in your widget, can help developers to test their addaptive design, by forcing a Phone size.

   RÉPONDRE

4. 

   Georges Basile Stavracas Neto4 mars 2018 à 13:28

   I am absolutely looking forward consuming these new widgets in Calendar and To Do once they land in upstream GTK! *Please* try and get this new widget in GTK :)

   RÉPONDRE

5. 

   Cédric Bellegarde5 mars 2018 à 10:37

   I'm doing this by hand in Lollypop but will migrate to your widget as soon as it's available in mainstream GTK, very useful, good job!
   https://www.youtube.com/watch?v=9OgoBXjyQ4A

   RÉPONDRE

6. 

   Alexander6 mars 2018 à 06:00

   I'm posting this here because Nicole's blog doesn't have comments. Since you are using Wlroots, please try to support redshift for color temperature adjustment!

   RÉPONDRE

7. 

   Alexander6 mars 2018 à 10:25

   There are a lot of things in the likes of handy and dazzle (and granite) that would it would be great to have merged into Gtk4 much as happened prior to Gtk3 release

   RÉPONDRE

8. 

   Felix Pojtinger26 mars 2018 à 03:16

   This is really great. Love your work!

   RÉPONDRE

Enregistrer un commentaire

Posts les plus consultés de ce blog

Librem 5 ❤️ GNOME 3.32

octobre 11, 2018

I am glad to announce that the tooling I am working on since the beginning of the year is ready to be used!Thanks to new features introduced into libhandy 0.0.3 and 0.0.4 and thanks to a few fixes to Adwaita in GTK+ 3.24.1, you can make GTK+ 3 apps adaptive to work both on the desktop and on the upcoming GNOME-based Librem 5 phone.We are early in the GNOME 3.32 release schedule and the Librem 5 will be released a bit after it, so if you want your apps to work on the Librem 5, now is the best time: use libhandy 0.0.4 and up, use GTK+ 3.24.1 and up and target GNOME 3.32! A few apps like Fractal, Podcasts, Calls and Chatty are already using libhandy's adaptive capabilities, and other apps are working on their adaptive transition like Contacts, Games, Geary and Settings (all are works in progress). libhandy is available in Debian Unstable and Arch's AUR repository, and I wish it would be in Fedora already to let GNOME Settings' CI pass.For the moment, libhandy is a GTK+ 3 widg…

PARTAGER

 5 COMMENTAIRES

LIRE LA SUITE

GTK+ Apps on Phones

janvier 25, 2018

As some of you may already know, I recently joined Purism to help developing GTK+ apps for the upcoming Librem 5 phone.Purism and GNOME share a lot of ideas and values, so the GNOME HIG and GNOME apps are what we will focus on primarily: we will do all we can to not fork nor to reinvent the wheel but to help allowing existing GTK+ applications to work on phones.How Fit are Existing GTK+ Apps?Phones are very different from laptops and even tablets: their screen is very small and their main input method is a single thumb on a touchscreen. Luckily, many GNOME applications are touch-friendly and are fit for small screens. Many applications present you a tree of information you can browse and I see two main layouts used by for GNOME applications to let you navigate it.A first kind of layout is found in applications like Documents, I'll call it stack UI: it uses all the available space to display the collection of information sources (in that case, documents), clicking an element from t…