This week’s progress update brings UI and UX improvements to the MauiKit toolkit and additional features to the apps, pursuing our goals of a convergent environment.

Are you a developer and want to start developing cross-platform and convergent apps, targeting, among other things, the upcoming Linux Mobile devices? Then join us on Telegram: https://t.me/mauiproject.

If you are interested in testing this project and helping out with translations or documentation, you are also more than welcome, ping us, and we can get started.

The Maui Project is free software from the KDE Community developed by the Nitrux team.
This post contains some code snippets to give you an idea of how to use MauiKit. For more detailed documentation, get in touch with us or subscribe to the news feed to keep up to date with the upcoming tutorial.

We are present on Twitter and Mastodon:
https://twitter.com/maui_project
https://mastodon.technology/@mauiproject


MauiKit

MauiKit provides extra components following the Maui Human Interface Guidelines.

ToolBar

The ToolBar, when scrollable, does no longer display a scrollbar, instead it just uses an indicator, since the mouse wheel or touchpad gesture can be used for scrolling instead.

The middle content can now be forced always to be centered on the full width, with forceCenterMiddleContent property.

Dialog

The popup dialog close button now follows the system settings on Linux, and for the other platforms, it follows the window controls default side.

The side of the button is determined on Linux by picking the KWin config settings.

Stricter close policy on the dialogs, resulting in only closing the popup dialog on explicit actions like hitting close icon or clicking  Esc key.

The Dialog component now styles the default buttons more consistently:

TabButton

The TabButton used in the TabBar has a default close button; this button also follows the right side depending on the platform.

Editor & Document Handler

The Editor control and DocumentHandler are now more stable.

A bug causing a crash when changing the highlighting syntax theme has been fixed.

Page

The Page component has a header and a footer; the header can be moved to the bottom on phone devices for reachability reasons, this has now become its property: altHeader and adds up to the new header and footer properties: floatingHeader, floatingFooter, autoHideHeader, headerPositioning, and footerPositioning.

The floating header/footer blurs the content behind it that is overlapping.

Maui.ApplicationWindow
{
    id: root
    height: 800
    width: height

    Maui.App.enableCSD: true

    autoHideHeader: true
    floatingHeader: true

    headBar.leftContent: ToolButton
    {
        icon.name: "love"
    }

    footBar.leftContent: ToolButton
    {
        icon.name: "love"
        onClicked: root.altHeader = !root.altHeader
    }

    flickable: list

    ListView
    {
        id: list
        anchors.fill: parent
        model: 20
        spacing: 20

        delegate: Rectangle
        {
            width: 100
            height: 68
            color: "orange"
        }
    }
}

 

ToolActions

ToolActions groups related actions together; this update allows the actions to display text by using property hints such as ToolButton.TextBesideIcon, ToolButton.TextOnly and ToolButton.IconOnly


Maui Apps

Some apps see some small papercut fixes provided from MauiKit, and small features were added.

Index

The file manager now has the option to use a translucent sidebar; this was also added to Nota and Vvave. It can be disabled if your compositor settings do not enable the blur effect.

More options were added to the Settings dialog: Stick sidebar, to whether collapse the places sidebar into a thin bar or to hide it completely, and finally an icon size option.

Nota

The simple text editor now includes more configurable options, such as new focus mode, switching on and off the syntax highlighting, and editor background color options.

Nota also now has a translucent sidebar.

The floating button to create new documents does not longer overlap the editor toolbars, and on small screens, the editor takes the full-screen height when editing.

The new focus mode puts the content first without any other UI distractions.

Station

The terminal emulator now has a settings dialog to configure different terminal style options.

 

Pix

Pix now works for macOS, it still needs platform integration, but that should come from MauiKit side eventually, and benefit all the other apps too.

Added the option to change the thumbnails previews:


In Progress

CSD

In GNU/Linux MauiKit looks into KWin config to determine the right control’s theme and buttons distribution, for this to work with 3rdparty themes it will be necessary to create a copy of the wanted theme and place it on the Maui config folder, the structure is pretty simple: if the theme is name BreezeSierra, then a BreezeSierra folder must exist in ~/.local/share/maui/csd with a config.conf a file describing the button assets and other properties like border-radius and wether request to mask the buttons with the system color scheme or not:

[Close]
Normal=close.svg
Hover=close-hover.svg
Pressed=close-pressed.svg
Backdrop=close-backdrop.svg

[Maximize]
Normal=maximize.svg
Hover=maximize-hover.svg
Pressed=maximize-pressed.svg
Backdrop=maximize-backdrop.svg

[Restore]
Normal=restore.svg
Hover=restore-hover.svg
Pressed=restore-pressed.svg
Backdrop=restore-backdrop.svg

[Minimize]
Normal=minimize.svg
Hover=minimize-hover.svg
Pressed=minimize-pressed.svg
Backdrop=minimize-backdrop.svg

[FullScreen]
Normal=fullscreen.svg

[Decoration]
BorderRadius=6
MaskButtons=false

Supported Platforms

Platform integration for Android and macOS is still work in progress. For macOS touch bar actions integration and Android native notifications.

KIO usage on Windows and macOS is wanted, but it’s still under development.

UI Controls

TabsBrowser still under development; it will allow us to create dynamic tabs and handle the interaction quickly.


Testing

Testing more immersive UX for some applications, this has been done by making use of the new Page toolbars properties and CSD.

Below you can see a video demo of how the immersive UX concept has been applied to Maui Apps like Pix, Vvave, and Nota.

Join the discussion 2 Comments

  • Joseph says:

    I like the progress being done, but CSD for desktop I think it makes no sense. The reason being it since the Windows XP days lead to inconsistent UIs and was hard to manage if any app froze. The same is true on Linux, I see every app making different changes to how it is done leading to that inconsistency. Now on mobile where you have full screen apps where space is at a premium I can see the need for CSD but on desktop use cases I just don’t see the need. Without the decorations the apps seem to be simply plasmoids on the desktop which may lead to some confusion as well.

  • CQ says:

    This is an amazing project, congratulations to everyone involved, the development has been blazing fast and with great UX.

Leave a Reply

© 2017-2020 Some Rights Reserved. Made with ♥ by Nitrux Latinoamericana S.C.