Add button to clear search field.

Fix #103.
This commit is contained in:
Black Hat 2018-10-19 18:09:22 +08:00
parent 3269a683d6
commit a0fcd00a6f
1 changed files with 45 additions and 11 deletions

View File

@ -35,24 +35,58 @@ Rectangle {
anchors.fill: parent anchors.fill: parent
spacing: 0 spacing: 0
AutoTextField { Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 40 Layout.preferredHeight: 40
Layout.margins: 12 Layout.margins: 12
id: searchField
leftPadding: MSettings.miniMode ? 4 : 32
topPadding: 0
bottomPadding: 0
placeholderText: "Search..."
background: Rectangle {
color: MSettings.darkTheme ? "#303030" : "#fafafa" color: MSettings.darkTheme ? "#303030" : "#fafafa"
layer.enabled: true layer.enabled: true
layer.effect: ElevationEffect { layer.effect: ElevationEffect {
elevation: searchField.focus ? 2 : 1 elevation: searchField.focus ? 2 : 1
} }
RowLayout {
anchors.fill: parent
spacing: 0
MaterialIcon {
Layout.preferredWidth: height
Layout.fillHeight: true
visible: !MSettings.miniMode && !searchField.text
icon: "\ue8b6"
color: "grey"
}
ItemDelegate {
Layout.preferredWidth: height
Layout.fillHeight: true
visible: !MSettings.miniMode && searchField.text
contentItem: MaterialIcon {
icon: "\ue5cd"
color: "grey"
}
onClicked: searchField.text = ""
}
AutoTextField {
Layout.fillWidth: true
Layout.fillHeight: true
id: searchField
topPadding: 0
bottomPadding: 0
placeholderText: "Search..."
background: Item {}
}
} }
} }