client icon indicating copy to clipboard operation
client copied to clipboard

Replace QProgressIndicator with QML?

Open fmoc opened this issue 2 years ago • 1 comments

We recently experimented a bit with using QML in the client. After seeing it in another project, I thought that instead of relying on a 3rd-party library, we should switch to the BusyIndicator QML type described here. It's a solution that comes with Qt itself.

I just tested this, and it looks more like on the Qt 6 screenshot, but I think that won't matter so much. We can use the same small QML script with QQuickWidgets in place of QProgressIndicator.

fmoc avatar Feb 27 '23 15:02 fmoc

Some screenshots:

screenshot_2023-02-27_16-31-43 screenshot_2023-02-27_16-31-32

QML code:

import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

ColumnLayout {
    BusyIndicator {
        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
        width: 64
        height: 64
        running: true
    }
}

The layout is needed so we can align the item relative to the parent QQuickWidget, which is created by a .ui file and customized as follows in the corresponding UI class's constructor:

_ui->quickWidget->setAttribute(Qt::WA_AlwaysStackOnTop);
_ui->quickWidget->setAttribute(Qt::WA_TranslucentBackground);
_ui->quickWidget->setClearColor(Qt::transparent);
_ui->quickWidget->setSource(QUrl::fromLocalFile(":/spinner.qml");

Without making these three additional calls before setting the source, the QQuickWidget's background color is just white, not the actual window's color. (We can use palettes to configure the dark mode primary color, which we can reference from the QML script, something I have not implemented yet.)

fmoc avatar Feb 27 '23 15:02 fmoc