From a0fcd00a6f83f16e2835e258e64c9dcd5908d48d Mon Sep 17 00:00:00 2001
From: Black Hat <bhat@encom.eu.org>
Date: Fri, 19 Oct 2018 18:09:22 +0800
Subject: [PATCH] Add button to clear search field.

Fix #103.
---
 .../Spectral/Panel/RoomListPanelForm.ui.qml   | 56 +++++++++++++++----
 1 file changed, 45 insertions(+), 11 deletions(-)

diff --git a/imports/Spectral/Panel/RoomListPanelForm.ui.qml b/imports/Spectral/Panel/RoomListPanelForm.ui.qml
index 2ae9444..86ee1ef 100644
--- a/imports/Spectral/Panel/RoomListPanelForm.ui.qml
+++ b/imports/Spectral/Panel/RoomListPanelForm.ui.qml
@@ -35,23 +35,57 @@ Rectangle {
         anchors.fill: parent
         spacing: 0
 
-        AutoTextField {
+        Rectangle {
             Layout.fillWidth: true
             Layout.preferredHeight: 40
             Layout.margins: 12
 
-            id: searchField
+            color: MSettings.darkTheme ? "#303030" : "#fafafa"
+            layer.enabled: true
+            layer.effect: ElevationEffect {
+                elevation: searchField.focus ? 2 : 1
+            }
 
-            leftPadding: MSettings.miniMode ? 4 : 32
-            topPadding: 0
-            bottomPadding: 0
-            placeholderText: "Search..."
+            RowLayout {
+                anchors.fill: parent
 
-            background: Rectangle {
-                color: MSettings.darkTheme ? "#303030" : "#fafafa"
-                layer.enabled: true
-                layer.effect: ElevationEffect {
-                    elevation: searchField.focus ? 2 : 1
+                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 {}
                 }
             }
         }