From a2be3a7a79dc4fabe8675ea80a6ba550e0e4deec Mon Sep 17 00:00:00 2001
From: Shawn Rutledge <shawn.rutledge@qt.io>
Date: Wed, 19 Feb 2020 10:30:52 +0100
Subject: [PATCH] PDF multipage example: move search field to the footer
Hiding the search feature in a closed Drawer might not have been
sufficiently touch-friendly and discoverable, for example on iOS where
the user is not going to press control-F to start searching.
But the top toolbar is too full to put the search field back up there.
It's familiar from Firefox to have the search field at the bottom,
and we have enough space for it there. So now you can search and
jump around the search results without opening the drawer; but pressing
Enter in the search field opens the drawer. Hopefully swiping to open
the drawer is also convenient enough on touch platforms; otherwise we
could add another button for that, perhaps at the left of the footer.
Change-Id: Iaec63bc22b03e29156fee817d197daae5b0cf9d5
Reviewed-by: Shawn Rutledge <shawn.rutledge@qt.io>
---
examples/pdf/multipage/viewer.qml | 145 ++++++++++++++----------------
1 file changed, 69 insertions(+), 76 deletions(-)
diff --git a/examples/pdf/multipage/viewer.qml b/examples/pdf/multipage/viewer.qml
index 3a6347f5a..ba54065b7 100644
--- a/examples/pdf/multipage/viewer.qml
+++ b/examples/pdf/multipage/viewer.qml
@@ -167,6 +167,10 @@ ApplicationWindow {
onTriggered: view.copySelectionToClipboard()
}
}
+ Shortcut {
+ sequence: StandardKey.Find
+ onActivated: searchField.forceActiveFocus()
+ }
Shortcut {
sequence: StandardKey.Quit
onActivated: Qt.quit()
@@ -240,95 +244,84 @@ ApplicationWindow {
id: searchDrawer
edge: Qt.LeftEdge
modal: false
- width: searchLayout.implicitWidth
+ width: 300
y: root.header.height
height: view.height
dim: false
- Shortcut {
- sequence: StandardKey.Find
- onActivated: {
- searchDrawer.open()
- searchField.forceActiveFocus()
+ ListView {
+ id: searchResultsList
+ anchors.fill: parent
+ anchors.margins: 2
+ model: view.searchModel
+ ScrollBar.vertical: ScrollBar { }
+ delegate: ItemDelegate {
+ width: parent ? parent.width : 0
+ text: "page " + (page + 1) + ": " + context
+ highlighted: ListView.isCurrentItem
+ onClicked: {
+ searchResultsList.currentIndex = index
+ view.goToLocation(page, location, 0)
+ view.searchModel.currentResult = indexOnPage
+ }
}
}
- ColumnLayout {
- id: searchLayout
+ }
+
+ footer: ToolBar {
+ height: footerRow.implicitHeight
+ RowLayout {
+ id: footerRow
anchors.fill: parent
- anchors.margins: 2
- RowLayout {
- ToolButton {
- action: Action {
- icon.source: "resources/go-up-search.svg"
- shortcut: StandardKey.FindPrevious
- onTriggered: view.searchBack()
- }
- ToolTip.visible: enabled && hovered
- ToolTip.delay: 2000
- ToolTip.text: "find previous"
+ ToolButton {
+ action: Action {
+ icon.source: "resources/go-up-search.svg"
+ shortcut: StandardKey.FindPrevious
+ onTriggered: view.searchBack()
}
- TextField {
- id: searchField
- placeholderText: "search"
- Layout.minimumWidth: 200
- Layout.fillWidth: true
- Image {
- visible: searchField.text !== ""
- source: "resources/edit-clear.svg"
- anchors {
- right: parent.right
- top: parent.top
- bottom: parent.bottom
- margins: 3
- rightMargin: 5
- }
- TapHandler {
- onTapped: searchField.clear()
- }
+ ToolTip.visible: enabled && hovered
+ ToolTip.delay: 2000
+ ToolTip.text: "find previous"
+ }
+ TextField {
+ id: searchField
+ placeholderText: "search"
+ Layout.minimumWidth: 200
+ Layout.fillWidth: true
+ onAccepted: searchDrawer.open()
+ Image {
+ visible: searchField.text !== ""
+ source: "resources/edit-clear.svg"
+ anchors {
+ right: parent.right
+ top: parent.top
+ bottom: parent.bottom
+ margins: 3
+ rightMargin: 5
}
- }
- ToolButton {
- action: Action {
- icon.source: "resources/go-down-search.svg"
- shortcut: StandardKey.FindNext
- onTriggered: view.searchForward()
+ TapHandler {
+ onTapped: searchField.clear()
}
- ToolTip.visible: enabled && hovered
- ToolTip.delay: 2000
- ToolTip.text: "find next"
}
}
- ListView {
- id: searchResultsList
- Layout.fillWidth: true
- Layout.fillHeight: true
- clip: true
- model: view.searchModel
- ScrollBar.vertical: ScrollBar { }
- delegate: ItemDelegate {
- width: parent ? parent.width : 0
- text: "page " + (page + 1) + ": " + context
- highlighted: ListView.isCurrentItem
- onClicked: {
- searchResultsList.currentIndex = index
- view.goToLocation(page, location, 0)
- view.searchModel.currentResult = indexOnPage
- }
+ ToolButton {
+ action: Action {
+ icon.source: "resources/go-down-search.svg"
+ shortcut: StandardKey.FindNext
+ onTriggered: view.searchForward()
}
+ ToolTip.visible: enabled && hovered
+ ToolTip.delay: 2000
+ ToolTip.text: "find next"
+ }
+ Label {
+ id: statusLabel
+ Layout.fillWidth: true
+ property size implicitPointSize: document.pagePointSize(view.currentPage)
+ text: "page " + (currentPageSB.value) + " of " + document.pageCount +
+ " scale " + view.renderScale.toFixed(2) +
+ " original size " + implicitPointSize.width.toFixed(1) + "x" + implicitPointSize.height.toFixed(1) + " pt"
+ visible: document.pageCount > 0
}
- }
- }
-
- footer: ToolBar {
- height: statusLabel.implicitHeight * 1.5
- Label {
- id: statusLabel
- anchors.verticalCenter: parent.verticalCenter
- x: 6
- property size implicitPointSize: document.pagePointSize(view.currentPage)
- text: "page " + (currentPageSB.value) + " of " + document.pageCount +
- " scale " + view.renderScale.toFixed(2) +
- " original size " + implicitPointSize.width.toFixed(1) + "x" + implicitPointSize.height.toFixed(1) + " pt"
- visible: document.pageCount > 0
}
}
}
--
GitLab