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

feat(StatusInput): Introduced secondaryLabel property 

Due to design updates in AddAccount modal, updates are
needed in StatusBaseInput and StatusInput

* Added the possibility of having the icon on the right
  side
* Added secondaryLabel for title
* Added examples in StatusInputPage

Closes #383
This commit is contained in:
Alexandra Betouni 2021-09-01 19:53:48 +03:00 committed by Pascal Precht
parent 38fb8f61a5
commit d648230d79
3 changed files with 66 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
sandbox/StatusInputPage.qml
View File

@ -67,6 +67,22 @@ Column {
input.placeholderText: "Placeholder"
}
StatusInput {
label: "StatusInput"
secondaryLabel: "with right icon"
input.icon.width: 15
input.icon.height: 11
input.icon.name: text !== "" ? "checkmark" : ""
input.leftIcon: false
}
StatusInput {
label: "Label"
secondaryLabel: "secondary label"
input.placeholderText: "Placeholder"
input.implicitHeight: 56
}
StatusInput {
label: "Label"
charLimit: 30

50
src/StatusQ/Controls/StatusBaseInput.qml
View File

@ -45,23 +45,23 @@ Item {
property bool valid: true
property bool pristine: true
property bool dirty: false
property bool leftIcon: true
property StatusIconSettings icon: StatusIconSettings {
width: 24
height: 24
name: ""
color: Theme.palette.baseColor1
}
implicitWidth: 448
implicitHeight: multiline ? Math.max(edit.implicitHeight + topPadding + bottomPadding, 44) : 44
implicitHeight: multiline ? Math.max((edit.implicitHeight + topPadding + bottomPadding), 44) : 44
Rectangle {
width: parent.width
height: maximumHeight != 0 ? Math.min(
minimumHeight != 0 ? Math.max(statusBaseInput.implicitHeight, minimumHeight)
: implicitHeight,
maximumHeight)
: parent.height
: statusBaseInput.implicitHeight, maximumHeight) : parent.height
color: Theme.palette.baseColor2
radius: 8
@ -80,36 +80,37 @@ Item {
StatusIcon {
id: statusIcon
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 10
anchors.topMargin: 10
anchors.left: statusBaseInput.leftIcon ? parent.left : undefined
anchors.right: !statusBaseInput.leftIcon ? parent.right : undefined
anchors.leftMargin: 10
anchors.rightMargin: 10
anchors.verticalCenter: parent.verticalCenter
icon: statusBaseInput.icon.name
width: statusBaseInput.icon.width
height: statusBaseInput.icon.height
color: Theme.palette.baseColor1
color: statusBaseInput.icon.color
visible: !!statusBaseInput.icon.name
}
Flickable {
id: flick
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: statusIcon.visible ? statusIcon.right : parent.left
anchors.right: parent.right
anchors.leftMargin: statusIcon.visible ? 8 : statusBaseInput.leftPadding
anchors.rightMargin: statusBaseInput.rightPadding + clearable ? clearButton.width : 0
anchors.left: (statusIcon.visible && statusBaseInput.leftIcon) ?
statusIcon.right : parent.left
anchors.right: (statusIcon.visible && !statusBaseInput.leftIcon) ?
statusIcon.left : parent.right
anchors.leftMargin: statusIcon.visible && statusBaseInput.leftIcon ? 8
: statusBaseInput.leftPadding
anchors.rightMargin: statusBaseInput.rightPadding + clearable ? clearButton.width
: statusIcon.visible && !leftIcon ? 8: 0
anchors.topMargin: statusBaseInput.topPadding
anchors.bottomMargin: statusBaseInput.bottomPadding
contentWidth: edit.paintedWidth
contentHeight: edit.paintedHeight
clip: true
boundsBehavior: Flickable.StopAtBounds
QC.ScrollBar.vertical: QC.ScrollBar { interactive: multiline; enabled: multiline }
function ensureVisible(r) {
if (contentX >= r.x)
contentX = r.x;
@ -120,25 +121,21 @@ Item {
else if (contentY+height <= r.y+r.height)
contentY = r.y+r.height-height;
}
TextEdit {
id: edit
property string previousText: text
width: flick.width
height: flick.height
verticalAlignment: Text.AlignVCenter
selectByMouse: true
selectionColor: Theme.palette.primaryColor2
selectedTextColor: color
anchors.verticalCenter: parent.verticalCenter
focus: true
font.pixelSize: 15
font.family: Theme.palette.baseFont.name
color: Theme.palette.directColor1
onCursorRectangleChanged: flick.ensureVisible(cursorRectangle)
onCursorRectangleChanged: { flick.ensureVisible(cursorRectangle); }
wrapMode: statusBaseInput.multiline ? Text.WrapAtWordBoundaryOrAnywhere : TextEdit.NoWrap
onActiveFocusChanged: {
if (statusBaseInput.pristine) {
statusBaseInput.pristine = false
@ -178,15 +175,14 @@ Item {
previousText = text
}
}
StatusBaseText {
id: placeholder
visible: edit.text.length === 0
visible: (edit.text.length === 0)
anchors.left: parent.left
anchors.right: parent.right
anchors.rightMargin: statusBaseInput.rightPadding
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 15
elide: StatusBaseText.ElideRight
font.family: Theme.palette.baseFont.name
color: statusBaseInput.enabled ? Theme.palette.baseColor1 :

40
src/StatusQ/Controls/StatusInput.qml
View File

@ -8,7 +8,7 @@ import StatusQ.Controls.Validators 0.1
Item {
id: root
implicitWidth: 480
height: (label.visible ?
height: (label.visible ?
label.anchors.topMargin +
label.height :
charLimitLabel.visible ?
@ -16,8 +16,8 @@ Item {
charLimitLabel.height :
0) +
statusBaseInput.anchors.topMargin +
statusBaseInput.height +
(errorMessage.visible ?
statusBaseInput.height +
(errorMessage.visible ?
errorMessage.anchors.topMargin +
errorMessage.height :
0) + 8
@ -26,6 +26,7 @@ Item {
property alias valid: statusBaseInput.valid
property alias text: statusBaseInput.text
property string label: ""
property string secondaryLabel: ""
property int charLimit: 0
property string errorMessage: ""
property list<StatusValidator> validators
@ -52,21 +53,34 @@ Item {
Component.onCompleted: validate()
StatusBaseText {
id: label
height: visible ? 17 : 0
Row {
id: labelRow
anchors.top: parent.top
anchors.left: parent.left
anchors.topMargin: visible ? 8 : 0
anchors.leftMargin: 16
anchors.right: charLimitLabel.visible ? charLimitLabel.left : parent.right
anchors.right: (charLimitLabel.visible ? charLimitLabel.right : parent.right)
anchors.rightMargin: 16
height: visible ? 17 : 0
visible: !!root.label
elide: Text.ElideRight
spacing: 5
StatusBaseText {
id: label
elide: Text.ElideRight
text: root.label
font.pixelSize: 15
color: statusBaseInput.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1
}
text: root.label
font.pixelSize: 15
color: statusBaseInput.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1
StatusBaseText {
id: secondaryLabel
height: visible ? 17 : 0
visible: !!root.secondaryLabel
elide: Text.ElideRight
text: root.secondaryLabel
font.pixelSize: 15
color: Theme.palette.baseColor1
}
}
StatusBaseText {
@ -85,14 +99,13 @@ Item {
StatusBaseInput {
id: statusBaseInput
anchors.top: label.visible ? label.bottom :
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: 16
anchors.rightMargin: 16
maximumLength: root.charLimit
onTextChanged: root.validate()
@ -115,6 +128,7 @@ Item {
font.pixelSize: 12
color: Theme.palette.dangerColor1
text: root.errorMessage
horizontalAlignment: Text.AlignRight
wrapMode: Text.WordWrap
}