Created FilterBar component.

qml/components/FilterBar.qml

+/*
+ * Copyright (C) 2014-2018 CZ.NIC
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ * In addition, as a special exception, the copyright holders give
+ * permission to link the code of portions of this program with the
+ * OpenSSL library under certain conditions as described in each
+ * individual source file, and distribute linked combinations including
+ * the two.
+ */
+
+import QtQuick 2.7
+import QtQuick.Controls 2.1
+
+/*
+ * Filter bar component.
+ */
+Rectangle {
+    id: root
+
+    /* These properties must be set by caller. */
+    property string placeholderText: ""
+    property real fontPointSize: 1.0
+    property int buttonImageHeight: 1
+    property string buttonAccessibleName: ""
+
+    signal textChanged(string text)
+    signal clearClicked()
+
+    property alias filterField: filterField
+
+    TextField {
+        id: filterField
+
+        anchors.top: parent.top
+        width: parent.width - clearFilterButton.width
+        placeholderText: root.placeholderText
+        font.pointSize: root.fontPointSize
+        inputMethodHints: Qt.ImhNoPredictiveText
+        /*
+         * Using explicit top, left, ... padding because plain padding
+         * does not centre the text properly.
+         */
+        topPadding: 8.0
+        bottomPadding: 8.0
+        leftPadding: 8.0
+        rightPadding: 8.0
+        /* TODO - remove background if used materials */
+        background: Rectangle {
+            anchors.fill: parent
+            color: "transparent"
+            border.color: "transparent"
+        }
+        onTextChanged: {
+            root.textChanged(filterField.text)
+        }
+    }
+    AccessibleImageButton {
+        id: clearFilterButton
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+        sourceSize.height: buttonImageHeight
+        source: "qrc:/ui/remove.svg"
+        accessibleName: buttonAccessibleName
+        onClicked: {
+            filterField.clear()
+            root.clearClicked()
+        }
+    }
+}

qml/pages/PageContactList.qml

@@ -90,62 +90,38 @@ Item {
                 onClicked: {
                     databoxList.anchors.top = filterBar.bottom
                     filterBar.visible = true
-                    filter.forceActiveFocus()
+                    filterBar.filterField.forceActiveFocus()
                     Qt.inputMethod.show()
                 }
             }
         }
     } // PageHeader
-    Rectangle {
+    FilterBar {
         id: filterBar
         visible: false
         z: 1
         anchors.top: headerBar.bottom
         width: parent.width
-        height: filter.height
-        color: (filter.text.length == 0) ? datovkaPalette.alternateBase :
+        height: filterField.height
+        color: (filterField.text.length == 0) ? datovkaPalette.alternateBase :
                 (databoxList.count > 0) ? "#afffaf" : "#ffafaf"
-        border.color: filter.activeFocus ? "#0066ff" : "#bdbebf"
-        TextField {
-            id: filter
-            anchors.top: parent.top
-            width: parent.width - close.width
-            placeholderText: qsTr("Set filter")
-            font.pointSize: defaultTextFont.font.pointSize
-            inputMethodHints: Qt.ImhNoPredictiveText
-            /*
-             * Using explicit top, left, ... padding because plain padding
-             * does not centre the text properly.
-             */
-            topPadding: 8.0
-            bottomPadding: 8.0
-            leftPadding: 8.0
-            rightPadding: 8.0
-            /* TODO - remove background if used materials */
-            background: Rectangle {
-                anchors.fill: parent
-                color: "transparent"
-                border.color: "transparent"
-            }
-            onTextChanged: {
-                proxyDataboxModel.setFilterRegExpStr(filter.text)
-            }
+        border.color: filterField.activeFocus ? "#0066ff" : "#bdbebf"
+
+        placeholderText: qsTr("Set filter")
+        fontPointSize: defaultTextFont.font.pointSize
+        buttonImageHeight: imgHeight
+        buttonAccessibleName: qsTr("Clear and hide filter field")
+
+        onTextChanged: {
+            proxyDataboxModel.setFilterRegExpStr(text)
         }
-        AccessibleImageButton {
-            id: close
-            anchors.right: parent.right
-            anchors.verticalCenter: parent.verticalCenter
-            sourceSize.height: imgHeight
-            source: "qrc:/ui/remove.svg"
-            accessibleName: qsTr("Clear and hide filter field.")
-            onClicked: {
-                filterBar.visible = false
-                filter.clear()
-                databoxList.anchors.top = headerBar.bottom
-                Qt.inputMethod.hide()
-            }
+
+        onClearClicked: {
+            filterBar.visible = false
+            databoxList.anchors.top = headerBar.bottom
+            Qt.inputMethod.hide()
         }
-    } // Rectangle
+    }
     AccessibleText {
         id: emptyList
         visible: false

qml/pages/PageDataboxSearch.qml

@@ -96,7 +96,7 @@ Item {
                 onClicked: {
                     databoxList.anchors.top = filterBar.bottom
                     filterBar.visible = true
-                    filter.forceActiveFocus()
+                    filterBar.filterField.forceActiveFocus()
                     Qt.inputMethod.show()
                 }
             }
@@ -301,56 +301,32 @@ Item {
             } // Item
         } // Column
     } // Pane
-    Rectangle {
+    FilterBar {
         id: filterBar
         visible: false
         z: 1
         anchors.top: searchPanel.bottom
         width: parent.width
-        height: filter.height
-        color: (filter.text.length == 0) ? datovkaPalette.alternateBase :
+        height: filterField.height
+        color: (filterField.text.length == 0) ? datovkaPalette.alternateBase :
                 (databoxList.count > 0) ? "#afffaf" : "#ffafaf"
-        border.color: filter.activeFocus ? "#0066ff" : "#bdbebf"
-        TextField {
-            id: filter
-            anchors.top: parent.top
-            width: parent.width - closeFilterButton.width
-            placeholderText: qsTr("Set filter")
-            font.pointSize: defaultTextFont.font.pointSize
-            inputMethodHints: Qt.ImhNoPredictiveText
-            /*
-             * Using explicit top, left, ... padding because plain padding
-             * does not centre the text properly.
-             */
-            topPadding: 8.0
-            bottomPadding: 8.0
-            leftPadding: 8.0
-            rightPadding: 8.0
-            /* TODO - remove background if used materials */
-            background: Rectangle {
-                anchors.fill: parent
-                color: "transparent"
-                border.color: "transparent"
-            }
-            onTextChanged: {
-                proxyDataboxModel.setFilterRegExpStr(filter.text)
-            }
+        border.color: filterField.activeFocus ? "#0066ff" : "#bdbebf"
+
+        placeholderText: qsTr("Set filter")
+        fontPointSize: defaultTextFont.font.pointSize
+        buttonImageHeight: imgHeight
+        buttonAccessibleName: qsTr("Clear and hide filter field")
+
+        onTextChanged: {
+            proxyDataboxModel.setFilterRegExpStr(text)
         }
-        AccessibleImageButton {
-            id: closeFilterButton
-            anchors.right: parent.right
-            anchors.verticalCenter: parent.verticalCenter
-            sourceSize.height: imgHeight
-            source: "qrc:/ui/remove.svg"
-            accessibleName: qsTr("Clear and hide filter field.")
-            onClicked: {
-                filterBar.visible = false
-                filter.clear()
-                databoxList.anchors.top = searchPanel.bottom
-                Qt.inputMethod.hide()
-            }
+
+        onClearClicked: {
+            filterBar.visible = false
+            databoxList.anchors.top = searchPanel.bottom
+            Qt.inputMethod.hide()
         }
-    } // Rectangle
+    }
     AccessibleText {
         id: emptyList
         visible: false

qml/pages/PageMessageList.qml

@@ -103,7 +103,7 @@ Component {
                     onClicked: {
                         messageList.anchors.top = filterBar.bottom
                         filterBar.visible = true
-                        filter.forceActiveFocus()
+                        filterBar.filterField.forceActiveFocus()
                         Qt.inputMethod.show()
                     }
                 }
@@ -128,56 +128,32 @@ Component {
                 }
             }
         }
-        Rectangle {
+        FilterBar {
             id: filterBar
             visible: false
             z: 1
             anchors.top: headerBar.bottom
             width: parent.width
-            height: filter.height
-            color: (filter.text.length == 0) ? datovkaPalette.alternateBase :
+            height: filterField.height
+            color: (filterField.text.length == 0) ? datovkaPalette.alternateBase :
                     (messageList.count > 0) ? "#afffaf" : "#ffafaf"
-            border.color: filter.activeFocus ? "#0066ff" : "#bdbebf"
-            TextField {
-                id: filter
-                anchors.top: parent.top
-                width: parent.width - closeFilterButton.width
-                placeholderText: qsTr("Set filter")
-                font.pointSize: defaultTextFont.font.pointSize
-                inputMethodHints: Qt.ImhNoPredictiveText
-                /*
-                 * Using explicit top, left, ... padding because plain padding
-                 * does not centre the text properly.
-                 */
-                topPadding: 8.0
-                bottomPadding: 8.0
-                leftPadding: 8.0
-                rightPadding: 8.0
-                /* TODO - remove background if used materials */
-                background: Rectangle {
-                    anchors.fill: parent
-                    color: "transparent"
-                    border.color: "transparent"
-                }
-                onTextChanged: {
-                    proxyMessageModel.setFilterRegExpStr(filter.text)
-                }
+            border.color: filterField.activeFocus ? "#0066ff" : "#bdbebf"
+
+            placeholderText: qsTr("Set filter")
+            fontPointSize: defaultTextFont.font.pointSize
+            buttonImageHeight: imgHeight
+            buttonAccessibleName: qsTr("Clear and hide filter field")
+
+            onTextChanged: {
+                proxyMessageModel.setFilterRegExpStr(text)
             }
-            AccessibleImageButton {
-                id: closeFilterButton
-                anchors.right: parent.right
-                anchors.verticalCenter: parent.verticalCenter
-                sourceSize.height: imgHeight
-                source: "qrc:/ui/remove.svg"
-                accessibleName: qsTr("Clear and hide filter field.")
-                onClicked: {
-                    filterBar.visible = false
-                    filter.clear()
-                    messageList.anchors.top = headerBar.bottom
-                    Qt.inputMethod.hide()
-                }
+
+            onClearClicked: {
+                filterBar.visible = false
+                messageList.anchors.top = headerBar.bottom
+                Qt.inputMethod.hide()
             }
-        } // Rectangle
+        }
         AccessibleText {
             id: emptyList
             visible: false
@@ -186,9 +162,9 @@ Component {
             width: parent.width
             horizontalAlignment: Text.AlignHCenter
             wrapMode: Text.Wrap
-            text: (filter.text.length == 0) ?
+            text: (filterBar.filterField.text.length == 0) ?
                 qsTr("No messages or have not been downloaded yet.") :
-                qsTr("No message found that matches filter text '%1'.").arg(filter.text)
+                qsTr("No message found that matches filter text '%1'.").arg(filterBar.filterField.text)
         }
         MessageList {
             id: messageList

res/qml.qrc

@@ -107,6 +107,7 @@
         <file>../qml/components/AccessibleText.qml</file>
         <file>../qml/components/AccessibleTextButton.qml</file>
         <file>../qml/components/DataboxList.qml</file>
+        <file>../qml/components/FilterBar.qml</file>
         <file>../qml/components/InputLineMenu.qml</file>
         <file>../qml/components/MessageList.qml</file>
         <file>../qml/components/OverlaidImage.qml</file>

src/main.cpp

@@ -130,6 +130,7 @@ const struct QmlTypeEntry qmlComponents[] = {
 	{ "AccessibleText", 1, 0 },
 	{ "AccessibleTextButton", 1, 0 },
 	{ "DataboxList", 1, 0 },
+	{ "FilterBar", 1, 0 },
 	{ "InputLineMenu", 1, 0 },
 	{ "MessageList", 1, 0 },
 	{ "OverlaidImage", 1, 0 },