status-im
/
status-qml
mirror of
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(StatusCheckbox): introduced new `leftSide` prop 

- `leftSide` determines whether to display check box on the left or right
side, defaulted to left
This commit is contained in:
Sale Djenic 2022-08-09 08:07:52 +02:00 committed by saledjenic
parent 9fa6fb2324
commit e1d8d934b3
2 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
sandbox/controls/Controls.qml
View File

@ -119,6 +119,9 @@ GridLayout {
}
StatusCheckBox {}
StatusCheckBox { checkState: Qt.Checked}
StatusCheckBox { text: "Check me on left side"}
StatusCheckBox { text: "Check me on right side"; leftSide: false}
StatusChatInfoButton {
title: "Iuri Matias"

24
src/StatusQ/Controls/StatusCheckBox.qml
View File

@ -8,16 +8,20 @@ import StatusQ.Components 0.1
CheckBox {
id: statusCheckBox
id: root
property bool leftSide: true
indicator: Rectangle {
anchors.left: root.leftSide? parent.left : undefined
anchors.right: !root.leftSide? parent.right : undefined
implicitWidth: 18
implicitHeight: 18
x: statusCheckBox.leftPadding
x: !root.leftSide? root.rightPadding : root.leftPadding
y: parent.height / 2 - height / 2
radius: 2
color: (statusCheckBox.down || statusCheckBox.checked) ? Theme.palette.primaryColor1
: Theme.palette.directColor8
color: (root.down || root.checked) ? Theme.palette.primaryColor1
: Theme.palette.directColor8
StatusIcon {
icon: "checkbox"
@ -26,19 +30,21 @@ CheckBox {
anchors.centerIn: parent
anchors.horizontalCenterOffset: 1
color: Theme.palette.white
visible: statusCheckBox.down || statusCheckBox.checked
visible: root.down || root.checked
}
}
contentItem: StatusBaseText {
text: statusCheckBox.text
font.pixelSize: statusCheckBox.font.pixelSize
text: root.text
font.pixelSize: root.font.pixelSize
opacity: enabled ? 1.0 : 0.3
verticalAlignment: Text.AlignVCenter
wrapMode: Text.WordWrap
width: parent.width
color: Theme.palette.directColor1
leftPadding: !!statusCheckBox.text ? statusCheckBox.indicator.width + statusCheckBox.spacing
: statusCheckBox.indicator.width
leftPadding: root.leftSide? (!!root.text ? root.indicator.width + root.spacing
: root.indicator.width) : 0
rightPadding: !root.leftSide? (!!root.text ? root.indicator.width + root.spacing
: root.indicator.width) : 0
}
}