feat(StatusBaseInput): add icon support

Usage:

```qml
StatusBaseInput {
    icon.name: "..."
}
```

Closes #242
This commit is contained in:
Pascal Precht 2021-07-26 14:57:30 +02:00 committed by Pascal Precht
parent f16e857c72
commit c8e903496c
2 changed files with 33 additions and 2 deletions

View File

@ -30,6 +30,13 @@ Column {
input.valid: false input.valid: false
} }
StatusInput {
label: "Label"
input.icon.name: "search"
input.placeholderText: "Input with icon"
}
StatusInput { StatusInput {
label: "Label" label: "Label"
input.placeholderText: "Placeholder" input.placeholderText: "Placeholder"

View File

@ -42,6 +42,12 @@ Item {
property bool valid: true property bool valid: true
property StatusIconSettings icon: StatusIconSettings {
width: 24
height: 24
name: ""
}
implicitWidth: 448 implicitWidth: 448
implicitHeight: multiline ? Math.max(edit.implicitHeight + topPadding + bottomPadding, 44) : 44 implicitHeight: multiline ? Math.max(edit.implicitHeight + topPadding + bottomPadding, 44) : 44
@ -74,11 +80,29 @@ Item {
anchors.fill: parent anchors.fill: parent
cursorShape: Qt.IBeamCursor cursorShape: Qt.IBeamCursor
onClicked: edit.forceActiveFocus() onClicked: edit.forceActiveFocus()
StatusIcon {
id: statusIcon
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 10
anchors.topMargin: 10
icon: statusBaseInput.icon.name
width: statusBaseInput.icon.width
height: statusBaseInput.icon.height
color: Theme.palette.baseColor1
visible: !!statusBaseInput.icon.name
}
Flickable { Flickable {
id: flick id: flick
anchors.fill: parent anchors.top: parent.top
anchors.leftMargin: statusBaseInput.leftPadding 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 ? clearButtton.width : 0 anchors.rightMargin: statusBaseInput.rightPadding + clearable ? clearButtton.width : 0
anchors.topMargin: statusBaseInput.topPadding anchors.topMargin: statusBaseInput.topPadding
anchors.bottomMargin: statusBaseInput.bottomPadding anchors.bottomMargin: statusBaseInput.bottomPadding