From fe283857e1b711f3a4e23b52a39a6ddddde5209b Mon Sep 17 00:00:00 2001 From: Dirk Hohndel Date: Sat, 19 Dec 2020 14:57:19 -0800 Subject: 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 --- mobile-widgets/qml/TemplateCheckBox.qml | 30 ++++++++++++++++++++++++++++-- mobile-widgets/qml/TemplateRadioButton.qml | 28 +++++++++++++++++++++++++++- 2 files changed, 55 insertions(+), 3 deletions(-) (limited to 'mobile-widgets/qml') 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 + } } -- cgit v1.2.3-70-g09d2