feat: add infinite scroll for QML version (fix #2884)

Bionus · Feb 7, 2023 · d263ef4 · d263ef4
1 parent c11894f
commit d263ef4
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 3 deletions.
diff --git a/src/gui-qml/src/components/ResultsView.qml b/src/gui-qml/src/components/ResultsView.qml
@@ -13,6 +13,7 @@ ScrollView {
 
     signal openImage(int index)
     signal refresh()
+    signal appendNext()
 
     property var results
     property double thumbnailHeightToWidthRatio: 0
@@ -33,14 +34,20 @@ ScrollView {
     onThumbnailFillModeChanged: resultsRefresher.restart()
 
     Flickable {
+        // Pull to refresh and infinite scroll
         property bool atBeginningStart: false
+        property bool atEndStart: false
         onFlickStarted: {
             atBeginningStart = atYBeginning
+            atEndStart = atYEnd
         }
         onFlickEnded: {
             if (atYBeginning && atBeginningStart) {
                 refresh()
             }
+            if (atYEnd && atEndStart) {
+                appendNext()
+            }
         }
 
         ColumnFlow {

diff --git a/src/gui-qml/src/components/SearchScreen.qml b/src/gui-qml/src/components/SearchScreen.qml
@@ -15,7 +15,10 @@ Page {
 
     property int page: 1
     property string site
+    property bool infiniteScroll: gSettings.resultsInfiniteScroll.value
+    property var results
     property bool queryChanged: false
+    property bool appendResults: false
 
     TagSearchLoader {
         id: pageLoader
@@ -28,6 +31,14 @@ Page {
         profile: backend.profile
 
         onQueryChanged: searchTab.queryChanged = true
+        onResultsChanged: {
+            if (appendResults) {
+                appendResults = false
+                searchTab.results = searchTab.results.concat(pageLoader.results)
+            } else {
+                searchTab.results = pageLoader.results
+            }
+        }
     }
 
     function load(tag) {
@@ -73,7 +84,7 @@ Page {
         id: imageScreen
 
         ImageScreen {
-            images: pageLoader.results
+            images: searchTab.results
             index: 0
 
             onClosed: mainStackView.pop()
@@ -140,7 +151,7 @@ Page {
             Layout.fillWidth: true
 
             ResultsView {
-                results: pageLoader.results
+                results: searchTab.results
                 thumbnailHeightToWidthRatio: gSettings.resultsLayoutType.value === "flow" ? 0 : gSettings.resultsHeightToWidthRatio.value
                 thumbnailSpacing: gSettings.resultsSpaceBetweenImages.value === "none" ? 0 : (gSettings.resultsSpaceBetweenImages.value === "minimal" ? 2 : 8)
                 thumbnailPadding: gSettings.resultsSpaceBetweenImages.value === "medium"
@@ -150,6 +161,11 @@ Page {
 
                 onOpenImage: mainStackView.push(imageScreen, { index: index })
                 onRefresh: load()
+                onAppendNext: {
+                    searchTab.appendResults = true
+                    searchTab.page++
+                    searchTab.load()
+                }
             }
 
             Loading {
@@ -168,6 +184,7 @@ Page {
                 background.anchors.fill: prevButton
                 width: 40
                 icon.source: "/images/icons/previous.png"
+                visible: !infiniteScroll
                 enabled: pageLoader.hasPrev
                 Layout.fillHeight: true
                 Material.elevation: 0
@@ -194,6 +211,7 @@ Page {
                 background.anchors.fill: nextButton
                 width: 40
                 icon.source: "/images/icons/next.png"
+                visible: !infiniteScroll
                 enabled: pageLoader.hasNext
                 Layout.fillHeight: true
                 Material.elevation: 0

diff --git a/src/gui-qml/src/components/settings/Setting.qml b/src/gui-qml/src/components/settings/Setting.qml
@@ -9,6 +9,7 @@ Item {
     property var def
     property var obj: settings
     property var parser: null
+    property var writer: null
     property var _parser: parser !== null ? parser : (typeof def === "boolean" ? ((v) => v === true || v === "true") : (typeof def === "number" ? ((v) => Number(v)) : null))
 
     property var value: _parser !== null ? _parser(rawValue) : rawValue
@@ -17,8 +18,12 @@ Item {
         : root.def
 
     function setValue(val) {
+        if (root.writer !== null) {
+            val = root.writer(val)
+        }
+
         root.obj.setValue(root.key, val, root.def)
-        root.value = val
+        root.rawValue = val
 
         root.changed(val)
     }

diff --git a/src/gui-qml/src/components/settings/Settings.qml b/src/gui-qml/src/components/settings/Settings.qml
@@ -14,6 +14,12 @@ Item {
 
         onChanged: languageLoader.setLanguage(value)
     }
+    property Setting resultsInfiniteScroll: Setting {
+        key: "infiniteScroll"
+        def: "disabled"
+        parser: (val) => val === "scroll"
+        writer: (val) => val ? "scroll" : "disabled"
+    }
     property Setting resultsColumnCountPortrait: Setting {
         key: "resultsColumnCountPortrait"
         def: 3

diff --git a/src/gui-qml/src/components/settings/pages/InterfaceSettingsPage.qml b/src/gui-qml/src/components/settings/pages/InterfaceSettingsPage.qml
@@ -1,6 +1,7 @@
 import QtQuick 2.12
 import QtQuick.Layouts 1.12
 
+import ".."
 import "../items"
 
 ColumnLayout {
@@ -22,6 +23,12 @@ ColumnLayout {
         Layout.fillWidth: true
         text: qsTr("Search results")
     }
+    CheckBoxSetting {
+        name: qsTr("Infinite scroll")
+        subtitle: qsTr("Automatically load next page of results.")
+        setting: gSettings.resultsInfiniteScroll
+        Layout.fillWidth: true
+    }
     SpinBoxSetting {
         name: qsTr("Columns (portrait)")
         min: 1