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>
This commit is contained in:
Dirk Hohndel 2020-12-19 14:57:19 -08:00
parent b0193f79d0
commit fe283857e1
2 changed files with 55 additions and 3 deletions

View file

@ -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
}
}

View file

@ -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
}
}