mifr/subsurface
1
0
Fork 0
mirror of https://github.com/subsurface/subsurface.git synced 2025-02-19 22:16:15 +00:00
Code Issues Projects Releases Packages Wiki Activity

mobile/dive-list: make sure filter input area is visible

Browse source 
Since apparently the header property of the ListView isn't reliably
making sure that our filter input line is visible, let's move the filter
header to be it's own visual element and manually manage the
relationship between that and the ListView.

The obvious idea was to anchor the ListView to the bottom of the
filterHeader, but that didn't work in my tests. So instead we are using
the topMargin to make sure that there is space to show the header.

Because this re-indents the whole filterHeader, 'git show -w' gives a
much better idea what this commit actually changes.

Signed-off-by: Dirk Hohndel <dirk@hohndel.org>
This commit is contained in:
Dirk Hohndel 2020-03-29 12:18:24 -07:00
parent d12e86cb2b
commit ccb671685d
1 changed files with 67 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

139
mobile-widgets/qml/DiveList.qml
View file

@ -353,92 +353,87 @@ Kirigami.ScrollablePage {
visible: diveListView.visible && diveListView.count === 0
}
Component {
Rectangle {
id: filterHeader
Rectangle {
id: filterRectangle
visible: filterBar.height > 0
implicitHeight: filterBar.implicitHeight
implicitWidth: filterBar.implicitWidth
height: filterBar.height
visible: filterBar.height > 0
implicitHeight: filterBar.implicitHeight
implicitWidth: filterBar.implicitWidth
height: filterBar.height
anchors {
top: parent.top
left: parent.left
right: parent.right
}
color: subsurfaceTheme.backgroundColor
enabled: rootItem.filterToggle
RowLayout {
id: filterBar
states: [
State {
name: "isVisible"
when: rootItem.filterToggle
PropertyChanges { target: filterBar; height: sitefilter.implicitHeight }
},
State {
name: "isHidden"
when: !rootItem.filterToggle
PropertyChanges { target: filterBar; height: 0 }
}
]
transitions: [
Transition { NumberAnimation { property: "height"; duration: 400; easing.type: Easing.InOutQuad }}
]
anchors.left: parent.left
anchors.right: parent.right
color: subsurfaceTheme.backgroundColor
enabled: rootItem.filterToggle
RowLayout {
id: filterBar
z: 5 //make sure it sits on top
states: [
State {
name: "isVisible"
when: rootItem.filterToggle
PropertyChanges { target: filterBar; height: sitefilter.implicitHeight }
},
State {
name: "isHidden"
when: !rootItem.filterToggle
PropertyChanges { target: filterBar; height: 0 }
}
]
transitions: [
Transition { NumberAnimation { property: "height"; duration: 400; easing.type: Easing.InOutQuad }}
]
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: Kirigami.Units.gridUnit / 2
anchors.rightMargin: Kirigami.Units.gridUnit / 2
TemplateComboBox {
id: sitefilterMode
editable: false
model: ListModel {
ListElement {text: qsTr("Fulltext")}
ListElement {text: qsTr("People")}
ListElement {text: qsTr("Tags")}
}
font.pointSize: subsurfaceTheme.smallPointSize
Layout.preferredWidth: parent.width * 0.2
Layout.maximumWidth: parent.width * 0.3
onActivated: {
manager.setFilter(sitefilter.text, currentIndex)
anchors.leftMargin: Kirigami.Units.gridUnit / 2
anchors.rightMargin: Kirigami.Units.gridUnit / 2
TemplateComboBox {
visible: filterBar.height === sitefilter.implicitHeight
id: sitefilterMode
editable: false
model: ListModel {
ListElement {text: qsTr("Fulltext")}
ListElement {text: qsTr("People")}
ListElement {text: qsTr("Tags")}
}
font.pointSize: subsurfaceTheme.smallPointSize
Layout.preferredWidth: parent.width * 0.2
Layout.maximumWidth: parent.width * 0.3
onActivated: {
manager.setFilter(sitefilter.text, currentIndex)
}
}
Controls.TextField {
id: sitefilter
verticalAlignment: TextInput.AlignVCenter
Layout.fillWidth: true
text: ""
placeholderText: sitefilterMode.currentText
onAccepted: {
manager.setFilter(text, sitefilterMode.currentIndex)
}
onEnabledChanged: {
// reset the filter when it gets toggled
text = ""
if (visible) {
forceActiveFocus()
}
}
Controls.TextField {
id: sitefilter
z: 10
verticalAlignment: TextInput.AlignVCenter
Layout.fillWidth: true
text: ""
placeholderText: sitefilterMode.currentText
onAccepted: {
manager.setFilter(text, sitefilterMode.currentIndex)
}
onEnabledChanged: {
// reset the filter when it gets toggled
text = ""
if (visible) {
forceActiveFocus()
}
}
}
Controls.Label {
id: numShown
z: 10
verticalAlignment: Text.AlignVCenter
text: diveModel.shown
}
}
Controls.Label {
id: numShown
verticalAlignment: Text.AlignVCenter
text: diveModel.shown
}
}
}
ListView {
id: diveListView
topMargin: filterHeader.height
anchors.fill: parent
model: diveListModel
currentIndex: -1
delegate: diveOrTripDelegate
header: filterHeader
headerPositioning: ListView.OverlayHeader
boundsBehavior: Flickable.DragOverBounds
maximumFlickVelocity: parent.height * 5
bottomMargin: Kirigami.Units.iconSizes.medium + Kirigami.Units.gridUnit