From eb12a09f19211d9833113ddcbad7863e21a28e2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Romain=20Tarti=C3=A8re?= <romain@blogreen.org>
Date: Sun, 29 Sep 2024 18:34:09 -1000
Subject: [PATCH] Move content in a `Column`

In order to always be able to see the progress bar that indicates when
OTPs will be renewed and the search bar, we have to limit the height of
the OTP list widget.  To do so, we put a Colmun that fill in the page
and contain these 3 components.

Components definitions have been moved around, some `Row` wrapping was
removed (The progress bar was previously displayed into the page header,
which goes out of sight when the page is scrolled), and positionning
constraints have been adjusted to have all elements feet nicely.
---
 qml/pages/MainView.qml | 80 ++++++++++++++++--------------------------
 1 file changed, 31 insertions(+), 49 deletions(-)

diff --git a/qml/pages/MainView.qml b/qml/pages/MainView.qml
index 0da3da1..0f53dab 100644
--- a/qml/pages/MainView.qml
+++ b/qml/pages/MainView.qml
@@ -101,7 +101,7 @@ Page {
     onTriggered: refreshOTPValues();
   }
 
-  SilicaFlickable {
+  Column {
     anchors.fill: parent
 
     PullDownMenu {
@@ -127,8 +127,8 @@ Page {
 
     SilicaListView {
       id: otpList
-      anchors.fill: parent
       model: appWin.listModel
+      height: parent.height - updateProgress.height - searchField.height
       width: parent.width
 
       ViewPlaceholder {
@@ -137,53 +137,8 @@ Page {
         hintText: qsTr("Pull down to add a OTP")
       }
 
-      header: Column {
-        width: parent.width
-        height: headerRow.height + searchRow.height
-        Row {
-          id: headerRow
-          height: Theme.itemSizeSmall
-          width: parent.width
-          ProgressBar {
-            id: updateProgress
-            anchors.topMargin: Theme.paddingLarge * 1.15
-            anchors.top: parent.top
-            anchors.bottom: parent.bottom
-            height: parent.height
-            width: parent.width * 0.65
-            maximumValue: 29
-            value: 29 - seconds_global
-            // Only show when there are enries
-            visible: appWin.listModel.count
-          }
-          PageHeader {
-            id: header
-            anchors.top: parent.top
-            height: Theme.itemSizeSmall
-            width: parent.width * 0.35
-            title: "SailOTP"
-          }
-        }
-        Row {
-          id: searchRow
-          width: parent.width
-          SearchField {
-            id: searchField
-            font.pixelSize: Theme.fontSizeMedium
-            width: parent.width
-// This would be useful, but seems to break the button altogether. Perhaps it'll work later?
-//            canHide: true
-            EnterKey.enabled: false
-            inputMethodHints: Qt.ImhNoPredictiveText // Qt.ImhPreferUppercase | Qt.ImhNoAutoUppercase
-            placeholderText: qsTr("Search")
-            onTextChanged: {
-              searchTerm = searchField.text
-              for (var i = 0; i < appWin.listModel.count; i++) {
-                appWin.listModel.get(i).itemVisible = appWin.listModel.get(i).title.toString().toLowerCase().indexOf(searchField.text.toLowerCase()) > -1
-              }
-            }
-          }
-        }
+      header: PageHeader {
+        title: "SailOTP"
       }
 
       delegate: ListItem {
@@ -323,6 +278,33 @@ Page {
       }
       VerticalScrollDecorator{}
     }
+
+    SearchField {
+      id: searchField
+      font.pixelSize: Theme.fontSizeMedium
+      width: parent.width
+      // This would be useful, but seems to break the button altogether. Perhaps it'll work later?
+      //            canHide: true
+      EnterKey.enabled: false
+      inputMethodHints: Qt.ImhNoPredictiveText // Qt.ImhPreferUppercase | Qt.ImhNoAutoUppercase
+      placeholderText: qsTr("Search")
+      onTextChanged: {
+        searchTerm = searchField.text
+        for (var i = 0; i < appWin.listModel.count; i++) {
+          appWin.listModel.get(i).itemVisible = appWin.listModel.get(i).title.toString().toLowerCase().indexOf(searchField.text.toLowerCase()) > -1
+        }
+      }
+    }
+
+    ProgressBar {
+      id: updateProgress
+      height: Theme.itemSizeSmall
+      width: parent.width
+      maximumValue: 29
+      value: 29 - seconds_global
+      // Only show when there are enries
+      visible: appWin.listModel.count
+    }
   }
 
   Component.onCompleted: {