MauiKit UI tweaks/papercuts & more

MauiKit is a framework based on QQC2 and Kirigami, that helps to create convergent applications that run on GNU Linux and Android, based on the Maui HIG.

This posts aims to show the ongoing work on the UI/UX design, this is still a work in progress so things might changed or get discarded.

Coloring/Branding

You can set custom colours for the main ApplicationWindow HeadBar using the property headBarBGColor and MauiKit will automatically detect changes to it and set the colour of the window decoration and status bar, accordingly, under KDE and Android.

This allows apps to set a distinct colour brand but still keep the Maui HIG in place.

Also, it let’s apps set different colours depending on the view and its content, for example, on Pix, the image gallery app, the colour shifts from the default one to a dark one when viewing an image, this allows to focus more on the content.

To allow this, the MauiKit controls now has a nice colorScheme property you can modify to give each widget/control that special colour accent you want.

For example, to colourize a MauiKit.Button:

colorScheme.backgroundColor: “#333”

colorScheme.textColor: “#fff”

colorScheme.borderColor: “#444”

this will only affect that single instance of the button while still keeping all the other properties defined by the MauiHIG.

and you can still modify the global colours properties to change the colour for all the controls.

Flickable ToolBars

Maui.ToolBar is divided into three areas: a rightContent, leftContent and middleContent.

You can add any kind of control to those areas and rest assure that when the screen size gets too small in width all of the content inside the Maui.Toolbar will still be reachable. This is done within the MauiKit control by making use of a flickable toolbar that allows to slide the content to uncover the hidden controls.

There are two parts for this flickable action, the first one is within the middleContent area. While the leftContent and rightContent area will still be visible if the space is enough to fit them, the middleContent will be flickable if its content is too wide to fit in the middle.

This is better explained with an example, all the Maui apps have a HeadBar that contains a menu button, the views icons and finally a search button, the right and left icons will still be visible as long as they fit in the application window width, and the middle content, meaning the different views icons, will be flickable. This is done so to keep the right and left content visible as long as possible.

The second part of this flickable action is found when the application window width can not longer fit its children content, so the controls will be flickable horizontally.

There is also some small UI elements to indicate that the content can be uncovered, such as a small line separator for the middleContent and a drop shadow for the left and right side.

This is true for all the Maui.ToolBars, and allows to place not only actions or button inside the toolbar, but any other kind of control, such as Maui.TextEntry, Maui.PathBar, etc…

Maui.ToolButtons text

As you maybe have already noticed the Maui apps use on their HeadBars different Maui.ToolButtons with an icon with text besides it; this layout now changes to text under the icon, if the width of the application window is not wide enough.

This, of course, won’t affect the Maui.ToolButton s without a text property set.

Maui.Popup and hints

Now MauiKit includes a Popup control that adds some new properties to handle its sizing:

widthHint, heightHint, maxWidth, maxHeight

with widthHint and heightHint you give a hint about the size of the popup from 0.0 up to 1, relative to the popup parent’s size.

and with maxWidth and maxHeight you can set a maximum value for popup height and width.

For example, on Buho, the notes taking app, the notes dialog-popup has a maximum height and width established but its widthHint and heightHint is 0.9 relative to its parent, so it will take up to the 90% of its parent space but not more than the maxHeight and maxWidth set.

This behaviour is very useful to set a responsive size for popups on small screens like on phones, but still keep its size from turning too huge on bigger screens like on desktop computers screens.

About Dialog

Now all the Maui apps have this nice About dialog by default without the need to set up anything. MauiKit retrieves the necessary information such as application name, version and icon.

However, more information can be set by making use the property about, such as:

string about.appDescription:

sets a description text for the application. It is placed within a TextBrowser view. By deafult this property is empty

string about.appName:

sets the name of the application. By default this value is retrieved from the value set on QApplication or QGuiApplication.

string about.appVersion:

sets the version of the application. By default this value is retrieved from the value set on QApplication or QGuiApplication.

string about.appIcon:

sets the icon of the application. By default this value is retrieved from the value set on QApplication or QGuiApplication.

string about.appLink:

sets the link to the website of the application, and can be accessed from the middle icon on the dialog. By default this value links to the official Maui website.

string about.appDonation:

sets the link to a donation or crowdfunding website, and can be accessed from the right side icon on the dialog. By default this value is empty.

string about.organizationName

string about.organizationDomain

Maui Apps on tiny screens

MauiKit is constantly being deployed on different platforms and devices to test the implementation of its controls on different screen/form factors.

Even on the most tiny smartphone screens running Android.

Here, all the work put into the convergence flow of the controls can be tested and fine tuned.

Maui Apps on Remix OS / Chrome OS

Same goes for testing MauiKit on even “larger” screens running Android, such as desktop devices. In this case the tests have been done on RemixOS and even on Chrome OS, to test the convergence of the controls under Android.

It is also the case of testing for GNU Linux distros both on mobile and desktop devices.

Maui.GridView

Another control that has been introduced to MauiKit is the GridView.

This new control allows to display elements on a grid that gets resized automatically to keep an uniform cell size.

It can also centre the cells.

int spacing:

sets the spacing between the cells. By default his value is set to the global property space.medium

int itemSize:

sets a hint about the size of the item to be contained inside the grid cell, this allows to resize the grid cells to keep an uniform size based on the value of the item. This could be think of as a minimum size for the cell size, both height and width. By default this property is set to 0.

bool centerContent:

if set to True the cells will be centred. by default this property is set to False.

bool adaptContent:

if set to True the cells will be resized automatically to fill the GridView width uniformly, the minimum value the cell will take is the value set with the property itemSize

ColorScheme

MauiKit controls now make use of this new Object that allows to colourize each control individually but still falling back by default to the main application colour scheme.

How does this work?, well, each control now has a new property named colorScheme. With this new property the colours for a control can be changed to better fit the design needs, while still retaining the other aspects of the control.

For example, to set a custom colour to Maui.Button:

colorScheme.backgroundColor: “green”

or more in detail:

colorScheme.borderColor: “red”

colorScheme.backgroundColor: “transparent”

All of the based colour scheme colours defined int he global ApplicationWindow properties can be changed within each control.

Maui.PieButton

This will probably be renamed to better fit the new design, but while that is done, let me introduce this new control to you.

The Maui.PieButton is a control based on Maui.ToolButton that launches an horizontal popup with a Maui.ToolBar within. This allows to have an Android like FAB button with contextual actions.

Given that the popup is based on Maui.ToolBar it will inherited all its properties including the flickable behaviour when its children content can not longer fit its width size.

int alignment:

set the alignment of the popup relative to the control. Possible values are Qt.AlignLeft or Qt.AlignRight. By default the value is set to Qt.AlignLeft.

int barHeight:

sets the height for the popup. By default the value is set to 0

int maxWidth:

sets the maximum width for the popup, affecting the toolbar within.

list[Object] content:

with this property the popup Maui.ToolBar can be filled with any kind of controls.

Maui.Dialog

MauiKit now also has a Dialog control.

This new control is based on Maui.Popup, so it inherits the new Popup hints properties.

Maui.Dialog has a basic layout based on Maui.Page, so it has, by default, as footBar.rightContent two Maui.Buttons colourized with the colorScheme property to indicate a “reject” and “accept” response.

This control has the following properties:

string message :

sets the message body of the dialog. By default this property is empty.

string title:

sets the title of the dialog. By default this property is empty.

string acceptText:

sets the text for the accept button. By default this property is set to “Ok”

string rejectText:

sets the text for the accept button. By default this property is set to “No”

bool defaultButtons:

if set to True the dialog will display the accept and reject default buttons. By default this is set to True

bool entryField:

if set to True the dialog will display a Maui.TextEntry above the footBar area. By default this is set to False

alias textEntry

alias footBar

alias headBar

alias headBarTitle

signal accepted()
signal rejected()

There is probably a bunch of things I’ve forgotten to add here, but as my head is all over the place maybe on a latter post I will include them.

As always, if you like this project and find it interesting and want to contribute with coding, design, distribution, translations, documentation, etc … let me know. I’m always around telegram as @milohr, and on Github, KDE Phabricator, email milo.h@aol.com. or just comment here.