mirror of https://github.com/status-im/StatusQ.git
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
Pascal Precht
parent
38fb8f61a5
commit
d648230d79
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 :
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue