Add 'clear' button to search bar and implement search indicator via spinner

3 files changed, 39 insertions, 2 deletions

diff --git a/resources/qml/MatrixTextField.qml b/resources/qml/MatrixTextField.qml

index 3f0f77ed..e3632b61 100644
--- a/resources/qml/MatrixTextField.qml
+++ b/resources/qml/MatrixTextField.qml
@@ -20,6 +20,7 @@ ColumnLayout {
     property alias font: input.font
     property alias echoMode: input.echoMode
     property alias selectByMouse: input.selectByMouse
+    property var hasClear: false
 
     Timer {
         id: timer
@@ -129,6 +130,39 @@ ColumnLayout {
             color: labelC.text ? "transparent" : backgroundColor
         }
 
+        ToolButton {
+            id: clearText
+            Layout.fillWidth: true
+            visible: c.hasClear && searchField.text !== ''
+            icon.source: "image://colorimage/:/icons/icons/ui/round-remove-button.svg?" + (clearText.hovered ? Nheko.colors.highlight : Nheko.colors.buttonText)
+            focusPolicy: Qt.NoFocus
+            onClicked: {
+                searchField.clear()
+                topBar.searchString = "";
+            }
+            hoverEnabled: true
+            background: null
+            anchors {
+                verticalCenter: parent.verticalCenter
+                right: parent.right
+            }
+            // clear the default hover effects.
+
+            Image {
+                height: parent.height - 2 * Nheko.paddingSmall
+                width: height
+                source: "image://colorimage/:/icons/icons/ui/round-remove-button.svg?" + (clearText.hovered ? Nheko.colors.highlight : Nheko.colors.buttonText)
+
+                anchors {
+                    verticalCenter: parent.verticalCenter
+                    right: parent.right
+                    margins: Nheko.paddingSmall
+                }
+
+            }
+
+        }
+
     }
 
     Rectangle {
diff --git a/resources/qml/MessageView.qml b/resources/qml/MessageView.qml

index e3e02ee9..a49c046c 100644
--- a/resources/qml/MessageView.qml
+++ b/resources/qml/MessageView.qml
@@ -38,6 +38,8 @@ Item {
 
         property int delegateMaxWidth: ((Settings.timelineMaxWidth > 100 && Settings.timelineMaxWidth < chatRoot.availableWidth) ? Settings.timelineMaxWidth : chatRoot.availableWidth) - chatRoot.padding * 2 - (scrollbar.interactive? scrollbar.width : 0)
 
+        readonly property alias filteringInProgress: filteredTimeline.filteringInProgress
+
         displayMarginBeginning: height / 2
         displayMarginEnd: height / 2
 
@@ -561,7 +563,7 @@ Item {
         footer: Item {
             anchors.horizontalCenter: parent.horizontalCenter
             anchors.margins: Nheko.paddingLarge
-            visible: room && room.paginationInProgress
+            visible: (room && room.paginationInProgress) || chat.filteringInProgress
             // hacky, but works
             height: loadingSpinner.height + 2 * Nheko.paddingLarge
 
@@ -570,7 +572,7 @@ Item {
 
                 anchors.centerIn: parent
                 anchors.margins: Nheko.paddingLarge
-                running: room && room.paginationInProgress
+                running: (room && room.paginationInProgress) || chat.filteringInProgress
                 foreground: Nheko.colors.mid
                 z: 3
             }
diff --git a/resources/qml/TopBar.qml b/resources/qml/TopBar.qml

index 760f20e6..cce2c89b 100644
--- a/resources/qml/TopBar.qml
+++ b/resources/qml/TopBar.qml
@@ -450,6 +450,7 @@ Pane {
                 id: searchField
                 visible: searchButton.searchActive
                 enabled: visible
+                hasClear: true
 
                 Layout.row: 5
                 Layout.column: 2