Commit d2c5359e authored by Karel Slaný's avatar Karel Slaný

Created FilterBar component.

parent bf8870eb
/*
* 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()
}
}
}
......@@ -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
......
......@@ -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
......
......@@ -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
......
......@@ -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>
......
......@@ -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 },
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment