[vlc-devel] [PATCH 2/4] qml: add clear button to the search box

[Fatih Uzunoglu]

---
 modules/gui/qt/widgets/qml/SearchBox.qml | 108 ++++++++++++++---------
 1 file changed, 67 insertions(+), 41 deletions(-)

diff --git a/modules/gui/qt/widgets/qml/SearchBox.qml b/modules/gui/qt/widgets/qml/SearchBox.qml
index 161ede746c..9d4eb1dbe7 100644
--- a/modules/gui/qt/widgets/qml/SearchBox.qml
+++ b/modules/gui/qt/widgets/qml/SearchBox.qml
@@ -55,7 +55,7 @@ Widgets.NavigableFocusScope {
 
     SmoothedAnimation {
         id: animateExpand;
-        target: searchBox;
+        target: searchBoxRect;
         properties: "width"
         duration: 200
         to: VLCStyle.widthSearchInput
@@ -67,7 +67,7 @@ Widgets.NavigableFocusScope {
 
     SmoothedAnimation {
         id: animateRetract;
-        target: searchBox;
+        target: searchBoxRect;
         properties: "width"
         duration: 200
         to: 0
@@ -94,56 +94,82 @@ Widgets.NavigableFocusScope {
             }
         }
 
-        TextField {
-            id: searchBox
+        Rectangle {
+            id: searchBoxRect
+            color: VLCStyle.colors.button
 
             anchors.verticalCenter: parent.verticalCenter
 
-            font.pixelSize: VLCStyle.fontSize_normal
-
-            color: VLCStyle.colors.buttonText
             width: 0
+            implicitHeight: searchBox.height
+
+            border.color: {
+                if ( searchBox.text.length < 3 && searchBox.text.length !== 0 )
+                    return VLCStyle.colors.alert
+                else if ( searchBox.activeFocus )
+                    return VLCStyle.colors.accent
+                else
+                    return VLCStyle.colors.buttonBorder
+            }
+
+            TextField {
+                id: searchBox
+
+                anchors.fill: searchBoxRect
+                anchors.rightMargin: clearButton.visible ? (VLCStyle.margin_xxsmall + clearButton.width) : 0
+
+                font.pixelSize: VLCStyle.fontSize_normal
+
+                color: VLCStyle.colors.buttonText
+
+                selectByMouse: true
+
+                background: Rectangle { color: "transparent" }
 
-            selectByMouse: true
-
-            background: Rectangle {
-                color: VLCStyle.colors.button
-                border.color: {
-                    if ( searchBox.text.length < 3 && searchBox.text.length !== 0 )
-                        return VLCStyle.colors.alert
-                    else if ( searchBox.activeFocus )
-                        return VLCStyle.colors.accent
-                    else
-                        return VLCStyle.colors.buttonBorder
+                onTextChanged: {
+                    if (contentModel !== undefined)
+                        contentModel.searchPattern = text;
                 }
-            }
 
-            onTextChanged: {
-                if (contentModel !== undefined)
-                    contentModel.searchPattern = text;
-            }
+                Keys.onPressed: {
+                    //don't use KeyHelper.matchCancel here as we don't want to match Backspace
+                    if (event.key === Qt.Key_Back
+                        || event.key === Qt.Key_Cancel
+                        || event.matches(StandardKey.Back)
+                        || event.matches(StandardKey.Cancel))
+                    {
+                        event.accepted = true
+                    }
+                }
 
-            Keys.onPressed: {
-                //don't use KeyHelper.matchCancel here as we don't want to match Backspace
-                if (event.key === Qt.Key_Back
-                    || event.key === Qt.Key_Cancel
-                    || event.matches(StandardKey.Back)
-                    || event.matches(StandardKey.Cancel))
-                {
-                    event.accepted = true
+                Keys.onReleased: {
+                    //don't use KeyHelper.matchCancel here as we don't want to match Backspace
+                    if (event.key === Qt.Key_Back
+                        || event.key === Qt.Key_Cancel
+                        || event.matches(StandardKey.Back)
+                        || event.matches(StandardKey.Cancel))
+                    {
+                        text = ""
+                        expanded = false
+                        event.accepted = true
+                    }
                 }
             }
 
-            Keys.onReleased: {
-                //don't use KeyHelper.matchCancel here as we don't want to match Backspace
-                if (event.key === Qt.Key_Back
-                    || event.key === Qt.Key_Cancel
-                    || event.matches(StandardKey.Back)
-                    || event.matches(StandardKey.Cancel))
-                {
-                    text = ""
-                    expanded = false
-                    event.accepted = true
+            Widgets.IconToolButton {
+                id: clearButton
+
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.right: parent.right
+                anchors.rightMargin: VLCStyle.margin_xxsmall
+
+                size: VLCStyle.icon_small
+                iconText: VLCIcons.close
+
+                visible: ( expanded && searchBox.text.length > 0 )
+
+                onClicked: {
+                    searchBox.clear()
                 }
             }
         }
-- 
2.25.1