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>

1 files changed, 29 insertions, 0 deletions

diff --git a/mobile-widgets/qml/SsrfSwitch.qml b/mobile-widgets/qml/SsrfSwitch.qml
new file mode 100644
index 000000000..a88b94aea
--- /dev/null
+++ b/mobile-widgets/qml/SsrfSwitch.qml
@@ -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
+		}
+	}
+}