QML UI: add our own styled switch

This adds a switch styled for us, size is about the same as the material default.

Signed-off-by: Joakim Bygdell <j.bygdell@gmail.com>
This commit is contained in:
Joakim Bygdell 2017-07-24 19:54:34 +02:00 committed by Dirk Hohndel
parent d803d3e63c
commit 93ec03105e
2 changed files with 30 additions and 0 deletions

View file

@ -0,0 +1,29 @@
// SPDX-License-Identifier: GPL-2.0
import QtQuick 2.3
import QtQuick.Controls 2.2
import org.kde.kirigami 2.0 as Kirigami
Switch {
id: root
indicator: Rectangle {
implicitWidth: Kirigami.Units.largeSpacing * 2.2
implicitHeight: Kirigami.Units.largeSpacing * 0.75
x: root.leftPadding
y: parent.height / 2 - height / 2
radius: height / 2
color: root.checked ?
subsurfaceTheme.lightPrimaryColor : subsurfaceTheme.backgroundColor
border.color: subsurfaceTheme.darkerPrimaryColor
Rectangle {
x: root.checked ? parent.width - width : 0
y: parent.height / 2 - height / 2
width: Kirigami.Units.largeSpacing * 1.1
height: Kirigami.Units.largeSpacing * 1.1
radius: height / 2
color: root.down || root.checked ?
subsurfaceTheme.primaryColor : subsurfaceTheme.lightPrimaryColor
border.color: subsurfaceTheme.darkerPrimaryColor
}
}
}

View file

@ -22,6 +22,7 @@
<file alias="menu-edit.png">icons/menu-edit.png</file>
<file alias="menu-back.png">icons/menu-back.png</file>
<file alias="nocloud.svg">icons/nocloud.svg</file>
<file>SsrfSwitch.qml</file>
</qresource>
<qresource prefix="/">
<file>qtquickcontrols2.conf</file>