status-im/status-desktop
2
0
Fork 0
mirror of https://github.com/status-im/status-desktop.git synced 2025-02-17 09:08:49 +00:00
Code Issues Projects Releases Wiki Activity

chore(StatusInput): use layouts for elements positioning

Browse Source 
It removes complexity and fixes StatusInput to follow the size assigned
by client.
This commit is contained in:
Patryk Osmaczko 2022-05-27 09:56:46 +02:00 committed by Michał Cieślak
parent 76a0caaa13
commit 9a841b9c20
1 changed files with 73 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

170
ui/StatusQ/src/StatusQ/Controls/StatusInput.qml
View File

@ -1,4 +1,5 @@
import QtQuick 2.14 import QtQuick 2.14
import QtQuick.Layouts 1.14
import StatusQ.Core 0.1 import StatusQ.Core 0.1
import StatusQ.Core.Backpressure 1.0 import StatusQ.Core.Backpressure 1.0
@ -29,23 +30,7 @@ import StatusQ.Controls.Validators 0.1
*/ */
Item { Item {
id: root id: root
implicitWidth: 480
implicitHeight: (label.visible ?
label.anchors.topMargin +
label.height :
charLimitLabel.visible ?
charLimitLabel.anchors.topMargin +
charLimitLabel.height :
0) +
statusBaseInput.anchors.topMargin +
statusBaseInput.height +
(errorMessage.visible ?
errorMessage.anchors.topMargin +
errorMessage.height :
0) + 8
height: implicitHeight
width: implicitWidth
/*! /*!
\qmlproperty alias StatusInput::input \qmlproperty alias StatusInput::input
This property holds a reference to the TextEdit component. This property holds a reference to the TextEdit component.
@ -320,92 +305,83 @@ Item {
root.valid = Object.values(asyncErrors).length == 0 root.valid = Object.values(asyncErrors).length == 0
} }
implicitWidth: inputLayout.implicitWidth
implicitHeight: inputLayout.implicitHeight
height: implicitHeight
width: implicitWidth
Component.onCompleted: validate() Component.onCompleted: validate()
Row { ColumnLayout {
id: labelRow id: inputLayout
anchors.top: parent.top
anchors.left: parent.left anchors.fill: parent
anchors.topMargin: visible ? 8 : 0
anchors.leftMargin: root.leftPadding RowLayout {
anchors.right: (charLimitLabel.visible ? charLimitLabel.right : parent.right) Layout.fillWidth: true
anchors.rightMargin: root.rightPadding
height: visible ? 17 : 0 StatusBaseText {
visible: !!root.label id: label
spacing: 5 visible: !!root.label
StatusBaseText { elide: Text.ElideRight
id: label text: root.label
elide: Text.ElideRight font.pixelSize: 15
text: root.label color: statusBaseInput.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1
font.pixelSize: 15 }
color: statusBaseInput.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1
StatusBaseText {
id: secondaryLabel
visible: !!root.secondaryLabel
elide: Text.ElideRight
text: root.secondaryLabel
font.pixelSize: 15
color: Theme.palette.baseColor1
}
Item {
Layout.fillWidth: true
}
StatusBaseText {
id: charLimitLabel
visible: root.charLimit > 0
text: "%1 / %2".arg(statusBaseInput.text.length).arg(root.charLimit)
font.pixelSize: 12
color: statusBaseInput.enabled ? Theme.palette.baseColor1 : Theme.palette.directColor6
}
}
StatusBaseInput {
id: statusBaseInput
Layout.fillWidth: true
Layout.fillHeight: true
maximumLength: root.charLimit
onTextChanged: root.validate()
Keys.forwardTo: [root]
onIconClicked: root.iconClicked()
onKeyPressed: {
root.keyPressed(event);
}
onEditChanged: {
root.editClicked();
}
} }
StatusBaseText { StatusBaseText {
id: secondaryLabel id: errorMessage
height: visible ? 17 : 0
visible: !!root.secondaryLabel visible: !!text && !statusBaseInput.valid
elide: Text.ElideRight
text: root.secondaryLabel font.pixelSize: 12
font.pixelSize: 15 color: Theme.palette.dangerColor1
color: Theme.palette.baseColor1
horizontalAlignment: Text.AlignRight
wrapMode: Text.WordWrap
} }
} }
StatusBaseText {
id: charLimitLabel
height: visible ? implicitHeight : 0
anchors.top: parent.top
anchors.right: parent.right
anchors.topMargin: visible ? 11 : 0
anchors.rightMargin: root.rightPadding
visible: root.charLimit > 0
text: "%1 / %2".arg(statusBaseInput.text.length).arg(root.charLimit)
font.pixelSize: 12
color: statusBaseInput.enabled ? Theme.palette.baseColor1 : Theme.palette.directColor6
}
StatusBaseInput {
id: statusBaseInput
anchors.top: labelRow.visible ? labelRow.bottom :
charLimitLabel.visible ? charLimitLabel.bottom : parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.topMargin: charLimitLabel.visible ? 11 : 8
anchors.leftMargin: root.leftPadding
anchors.rightMargin: root.rightPadding
maximumLength: root.charLimit
onTextChanged: root.validate()
Keys.forwardTo: [root]
onIconClicked: root.iconClicked()
onKeyPressed: {
root.keyPressed(event);
}
onEditChanged: {
root.editClicked();
}
}
StatusBaseText {
id: errorMessage
anchors.top: statusBaseInput.bottom
anchors.topMargin: 11
anchors.right: parent.right
anchors.rightMargin: root.rightPadding
anchors.left: parent.left
anchors.leftMargin: root.leftPadding
height: visible ? implicitHeight : 0
visible: !!text && !statusBaseInput.valid
font.pixelSize: 12
color: Theme.palette.dangerColor1
horizontalAlignment: Text.AlignRight
wrapMode: Text.WordWrap
}
} }