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

@@ -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
         }
     }
 }