status-im/status-desktop
2
0
Fork 0
mirror of https://github.com/status-im/status-desktop.git synced 2025-01-22 04:21:44 +00:00
Code Issues Projects Releases Wiki Activity

feat(StatusCheckbox): introduced new leftSide prop

Browse Source 
- `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 Michał Cieślak
parent 0d35fc022f
commit 8c33ad6191
2 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ui/StatusQ/sandbox/controls/Controls.qml
View File

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

22
ui/StatusQ/src/StatusQ/Controls/StatusCheckBox.qml
View File

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