From 9a059cbeb0c7ce778ecccb4d01a94948ce937720 Mon Sep 17 00:00:00 2001
From: Michael Bohlender <michael.bohlender@kdemail.net>
Date: Mon, 11 Sep 2017 14:54:57 +0200
Subject: style mail list filter field and add close button

---
 framework/qml/MailListView.qml | 31 ++++++++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/framework/qml/MailListView.qml b/framework/qml/MailListView.qml
index 94e591e7..042196e4 100644
--- a/framework/qml/MailListView.qml
+++ b/framework/qml/MailListView.qml
@@ -68,10 +68,35 @@ FocusScope {
 
         spacing: 0
 
-        Kube.TextField {
+        Rectangle {
+            id: filterField
             Layout.fillWidth: true
-            placeholderText: "Filter..."
-            onTextChanged: mailListModel.filter = text
+            height: Kube.Units.gridUnit * 2
+
+            color: Kube.Colors.buttonColor
+
+            RowLayout {
+                anchors {
+                    verticalCenter: parent.verticalCenter
+                }
+
+                width: parent.width - Kube.Units.smallSpacing
+                spacing: 0
+
+                Kube.IconButton {
+                    iconName: Kube.Icons.remove
+                    onClicked: {
+                        filterField.visible = false
+                        mailListModel.filter = ""
+                    }
+                }
+
+                Kube.TextField {
+                    Layout.fillWidth: true
+                    placeholderText: "Filter..."
+                    onTextChanged: mailListModel.filter = text
+                }
+            }
         }
 
         Kube.ListView {
-- 
cgit v1.2.3