fix(StatusRadioButton): StatusRadioButton can't be fully clicked

- fix the control's width (don't have to be explicit, the QQC2 Control
takes care of calculating the implicitWidth/Height automatically based on
contents)
- while at it, fix the metrics to be able to support RTL
languages too (it was off for Arabic)
- some smaller cleanups too
This commit is contained in:
Lukáš Tinkl 2022-09-02 17:59:28 +02:00 committed by Lukáš Tinkl
parent 9688113d7f
commit 32db0bb023
2 changed files with 29 additions and 23 deletions

View File

@ -113,9 +113,20 @@ GridLayout {
StatusSwitch { StatusSwitch {
} }
StatusSwitch {
text: "Switch with text"
}
StatusRadioButton { StatusRadioButton {
text: "i'm radio!" text: "Radio button 1"
checked: true
}
StatusRadioButton {
text: "Radio button 2 (clicking on this text will uncheck the above)"
}
StatusRadioButton {
LayoutMirroring.enabled : true
text: "Radio button 3 (forced right-to-left)"
} }
StatusCheckBox {} StatusCheckBox {}

View File

@ -1,14 +1,12 @@
import QtQuick 2.14 import QtQuick 2.14
import QtQuick.Controls 2.14 import QtQuick.Controls 2.14
import QtQml 2.14
import StatusQ.Core 0.1 import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1 import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1 import StatusQ.Components 0.1
RadioButton { RadioButton {
id: statusRadioButton id: root
/*! /*!
\qmlproperty int StatusRadioButton::size \qmlproperty int StatusRadioButton::size
@ -24,32 +22,29 @@ RadioButton {
Large Large
} }
width: indicator.implicitWidth
indicator: Rectangle { indicator: Rectangle {
implicitWidth: size === StatusRadioButton.Size.Large ? 20 : 14 implicitWidth: root.size === StatusRadioButton.Size.Large ? 20 : 14
implicitHeight: size === StatusRadioButton.Size.Large ? 20 : 14 implicitHeight: root.size === StatusRadioButton.Size.Large ? 20 : 14
x: 0 x: root.text ? (root.mirrored ? root.width - width - root.rightPadding : root.leftPadding) : root.leftPadding + (root.availableWidth - width) / 2
y: 6 y: root.topPadding + (root.availableHeight - height) / 2
radius: 10 radius: width / 2
color: statusRadioButton.checked ? Theme.palette.primaryColor1 color: root.checked ? Theme.palette.primaryColor1 : Theme.palette.directColor8
: Theme.palette.directColor8
Rectangle { Rectangle {
width: size === StatusRadioButton.Size.Large ? 12 : 8 width: root.size === StatusRadioButton.Size.Large ? 12 : 8
height: size === StatusRadioButton.Size.Large ? 12 : 8 height: root.size === StatusRadioButton.Size.Large ? 12 : 8
radius: 6 radius: width / 2
anchors.horizontalCenter: parent.horizontalCenter anchors.centerIn: parent
anchors.verticalCenter: parent.verticalCenter color: Theme.palette.white
color: statusRadioButton.checked ? Theme.palette.white : "transparent" visible: root.checked
visible: statusRadioButton.checked
} }
} }
contentItem: StatusBaseText { contentItem: StatusBaseText {
text: statusRadioButton.text font: root.font
text: root.text
color: Theme.palette.directColor1 color: Theme.palette.directColor1
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
leftPadding: !!statusRadioButton.text ? statusRadioButton.indicator.width + statusRadioButton.spacing leftPadding: root.indicator && !root.mirrored ? root.indicator.width + root.spacing : 0
: statusRadioButton.indicator.width rightPadding: root.indicator && root.mirrored ? root.indicator.width + root.spacing : 0
} }
} }