mobile UI: style check boxes and radio boxes

This is needed for the Export page.
And may I say for the record that it's rather surprising that in order
to change the color of one of those elements one ends up having to
completely re-implement them.

Signed-off-by: Dirk Hohndel <dirk@hohndel.org>

2 files changed, 55 insertions, 3 deletions

diff --git a/mobile-widgets/qml/TemplateCheckBox.qml b/mobile-widgets/qml/TemplateCheckBox.qml
index bc71dba8a..85aa0bef1 100644
--- a/mobile-widgets/qml/TemplateCheckBox.qml
+++ b/mobile-widgets/qml/TemplateCheckBox.qml
@@ -2,8 +2,34 @@
 import QtQuick 2.11
 import QtQuick.Controls 2.4
 import QtQuick.Layouts 1.11
+import org.kde.kirigami 2.4 as Kirigami
 
 CheckBox {
-	Layout.fillWidth: true
-	font.pointSize: subsurfaceTheme.regularPointSize
+	id: cb
+
+	indicator: Rectangle {
+		implicitWidth: Kirigami.Units.gridUnit
+		implicitHeight: Kirigami.Units.gridUnit
+		x: cb.leftPadding
+		y: parent.height / 2 - height / 2
+		radius: 3
+		color: subsurfaceTheme.backgroundColor
+		border.color: subsurfaceTheme.textColor
+
+		Rectangle {
+			width: parent.width / 2
+			height: width
+			x: width / 2
+			y: width / 2
+			radius: 2
+			color: subsurfaceTheme.textColor
+			visible: cb.checked
+		}
+	}
+	contentItem: Text {
+		color: subsurfaceTheme.textColor
+		font.pointSize: subsurfaceTheme.regularPointSize
+		text: cb.text
+		leftPadding: cb.indicator.width + cb.spacing
+	}
 }
diff --git a/mobile-widgets/qml/TemplateRadioButton.qml b/mobile-widgets/qml/TemplateRadioButton.qml
index d81b44526..482433cc5 100644
--- a/mobile-widgets/qml/TemplateRadioButton.qml
+++ b/mobile-widgets/qml/TemplateRadioButton.qml
@@ -2,8 +2,34 @@
 import QtQuick 2.11
 import QtQuick.Controls 2.4
 import QtQuick.Layouts 1.11
+import org.kde.kirigami 2.4 as Kirigami
 
 RadioButton {
+	id: rb
 	Layout.fillWidth: true
-	font.pointSize: subsurfaceTheme.regularPointSize
+	indicator: Rectangle {
+		implicitWidth: Kirigami.Units.gridUnit
+		implicitHeight: Kirigami.Units.gridUnit
+		x: rb.leftPadding
+		y: parent.height / 2 - height / 2
+		radius: width / 2
+		color: subsurfaceTheme.backgroundColor
+		border.color: subsurfaceTheme.textColor
+
+		Rectangle {
+			width: parent.width / 2
+			height: width
+			x: width / 2
+			y: width / 2
+			radius: width / 2
+			color: subsurfaceTheme.textColor
+			visible: rb.checked
+		}
+	}
+	contentItem: Text {
+		color: subsurfaceTheme.textColor
+		font.pointSize: subsurfaceTheme.regularPointSize
+		text: rb.text
+		leftPadding: rb.indicator.width + rb.spacing
+	}
 }