Hawaii System Preferences

With the imminent release of Qt 5.1, QML is going to be a serious tool for desktop applications development.

With QtQuick Layouts and QtQuick Controls we can finally create complex user interfaces and drop QtWidgets and that's exactly my goal for the Hawaii System Preferences applications.

This is how it looks like today:

System Preferences uses KDE's categorized view imported into Vibe, which is a nice view that allows you to categorize a list view and filter the results; in this case I filter the results by keyword to gray out and disable icons that don't meet the search criteria:

However, as you can see from the screenshots, there's an annoying bug that cuts the labels out.

Rewriting it with QML is easy, here's the code for the main window:

import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0
import Hawaii.SystemPreferences 0.1

ApplicationWindow {
    id: root
    title: qsTr("System Preferences")
    width: 640
    height: 640
    minimumWidth: 640
    minimumHeight: 640

    toolBar: ToolBar {
        id: mainToolBar
        width: parent.width

        RowLayout {
            anchors.fill: parent
            spacing: 10

            ToolButton {
                action: actionBack
            }

            Item {
                Layout.fillWidth: true
            }

            TextField {
                id: searchEntry
                placeholderText: qsTr("Keywords")

                Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
            }
        }
    }

    Action {
        id: actionBack
        iconName: "view-grid-symbolic"
    }

    StackView {
        id: pageStack
        anchors.fill: parent

        initialItem: Item {
            width: parent.width
            height: parent.height

            ColumnLayout {
                anchors.fill: parent

                Repeater {
                    model: CategoriesModel {}

                    GroupBox {
                        title: label

                        Layout.fillWidth: true
                        Layout.fillHeight: true

                        ScrollView {
                            anchors.fill: parent

                            GridView {
                                id: gridView
                                model: PrefletsProxyModel {}
                                delegate: GridDelegate {
                                    width: gridView.cellWidth
                                }
                                clip: true
                                cellWidth: 100

                                Component.onCompleted: gridView.model.setFilterFixedString(name)
                            }
                        }
                    }
                }
            }
        }
    }
}

Unfortunately I couldn't find a replacement for the categorized view so I decided to repeat a scrollable grid view inside a group box for each category. Far from what I want but it seems the grid view doesn't have something like this, but there's time to improve System Preferences.

The grid delegate was easy to do:

import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0

ColumnLayout {
    Image {
        source: "image://desktoptheme/" + iconName
        sourceSize: Qt.size(48, 48)
        width: 48
        height: 48

        Layout.alignment: Qt.AlignCenter
    }

    Label {
        text: title
        horizontalAlignment: Qt.AlignHCenter
        wrapMode: Text.Wrap

        Layout.fillWidth: true
    }
}

And here's how it looks like:

Colors are from the standard Qt palette which will be replaced with some grayish palette for Hawaii soon.