Keep showing search icon while typing search query

This adds an option to the TextField element to show an icon on the left side in the text field. The icon remains visible when the user types in something (it's not part of the placeholder string).
Then we use that optional icon for the search bar in the Digital Library.

Contributes to issue CURA-8009.
This commit is contained in:
Ghostkeeper 2021-07-13 15:47:21 +02:00
parent 1566a282dc
commit bec83920e4
No known key found for this signature in database
GPG key ID: 68F39EA88EEED5FF
2 changed files with 24 additions and 6 deletions

View file

@ -51,12 +51,8 @@ Item
onTextEdited: manager.projectFilter = text //Update the search filter when editing this text field. onTextEdited: manager.projectFilter = text //Update the search filter when editing this text field.
placeholderText: leftIcon: UM.Theme.getIcon("Magnifier")
{ placeholderText: "Search"
var image_size = "width=\"" + UM.Theme.getSize("small_button_icon").width + "\" height=\"" + UM.Theme.getSize("small_button_icon").height + "\" ";
var image_source = "src=\"" + UM.Theme.getIcon("Magnifier") + "\"";
return "<img align=\"middle\" " + image_size + image_source + "> &nbsp; Search";
}
} }
Cura.SecondaryButton Cura.SecondaryButton
@ -106,6 +102,7 @@ Item
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
text: searchBar.text === "" ? "It appears that you don't have any projects in the Library yet." : "No projects found that match the search query." text: searchBar.text === "" ? "It appears that you don't have any projects in the Library yet." : "No projects found that match the search query."
font: UM.Theme.getFont("medium") font: UM.Theme.getFont("medium")
color: UM.Theme.getColor("text")
} }
Cura.TertiaryButton Cura.TertiaryButton

View file

@ -15,6 +15,8 @@ TextField
{ {
id: textField id: textField
property alias leftIcon: iconLeft.source
UM.I18nCatalog { id: catalog; name: "cura" } UM.I18nCatalog { id: catalog; name: "cura" }
hoverEnabled: true hoverEnabled: true
@ -22,6 +24,7 @@ TextField
font: UM.Theme.getFont("default") font: UM.Theme.getFont("default")
color: UM.Theme.getColor("text") color: UM.Theme.getColor("text")
renderType: Text.NativeRendering renderType: Text.NativeRendering
leftPadding: iconLeft.visible ? iconLeft.width + UM.Theme.getSize("default_margin").width * 2 : UM.Theme.getSize("thin_margin")
states: [ states: [
State State
@ -67,5 +70,23 @@ TextField
} }
return UM.Theme.getColor("setting_control_border") return UM.Theme.getColor("setting_control_border")
} }
//Optional icon added on the left hand side.
UM.RecolorImage
{
id: iconLeft
anchors
{
verticalCenter: parent.verticalCenter
left: parent.left
leftMargin: UM.Theme.getSize("default_margin").width
}
visible: source != ""
height: UM.Theme.getSize("small_button_icon").height
width: visible ? height : 0
color: textField.color
}
} }
} }