UI update

2026-08-17 01:03:00 -04:00
parent 9e8b6a70c8
commit 471c91e622
9 changed files with 216 additions and 92 deletions
@@ -35,29 +35,13 @@ Rectangle
        anchors.fill: parent
        anchors.margins: Constants.mediumMargin

-        Text
+        KeroHeader
        {
            Layout.alignment: Qt.AlignTop
-            Layout.preferredHeight: 50
-
-            color: palette.text
-            font.pixelSize: Constants.h2Font.pixelSize
-            font.bold: true
-            text: qsTr("Featured Images")
-            verticalAlignment: Qt.AlignVCenter
-        }
-
-        Text
-        {
-            Layout.alignment: Qt.AlignTop
-            Layout.preferredHeight: 50
-
-            color: palette.text
-            font.pixelSize: Constants.h4Font.pixelSize
-            font.bold: true
-            text: qsTr("A specially curated collection of images, courtesy of Pexels")
-            verticalAlignment: Qt.AlignVCenter
-            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+            Layout.fillWidth: true
+            Layout.preferredHeight: 180
+            title: qsTr("Featured Images")
+            description: qsTr("A specially curated collection of images, courtesy of Pexels")
        }

        PaginatorGrid
@@ -34,29 +34,13 @@ Rectangle
        anchors.fill: parent
        anchors.margins: Constants.mediumMargin

-        Text
+        KeroHeader
        {
            Layout.alignment: Qt.AlignTop
-            Layout.preferredHeight: 50
-
-            color: palette.text
-            font.pixelSize: Constants.h2Font.pixelSize
-            font.bold: true
-            text: qsTr("Featured Images")
-            verticalAlignment: Qt.AlignVCenter
-        }
-
-        Text
-        {
-            Layout.alignment: Qt.AlignTop
-            Layout.preferredHeight: 50
-
-            color: palette.text
-            font.pixelSize: Constants.h4Font.pixelSize
-            font.bold: true
-            text: qsTr("Newest packs submitted to Komplex.dev")
-            verticalAlignment: Qt.AlignVCenter
-            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+            Layout.fillWidth: true
+            Layout.preferredHeight: 180
+            title: qsTr("Featured Live Wallpapers")
+            description: qsTr("Live Wallpaper Packs from Komplex or ShaderToy")
        }

        PaginatorGrid
@@ -32,29 +32,14 @@ Rectangle
        anchors.fill: parent
        anchors.margins: Constants.mediumMargin

-        Text
+        KeroHeader
        {
            Layout.alignment: Qt.AlignTop
-            Layout.preferredHeight: 50
-
-            color: palette.text
-            font.pixelSize: Constants.h2Font.pixelSize
-            font.bold: true
-            text: qsTr("Most Popular Videos")
-            verticalAlignment: Qt.AlignVCenter
-        }
-
-        Text
-        {
-            Layout.alignment: Qt.AlignTop
-            Layout.preferredHeight: 50
-
-            color: palette.text
-            font.pixelSize: Constants.h4Font.pixelSize
-            font.bold: true
-            text: qsTr("Most popular videos, provided courtesy of Pexels")
-            verticalAlignment: Qt.AlignVCenter
-            wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+            Layout.fillWidth: true
+            Layout.preferredHeight: 180
+            title: qsTr("Most Popular Videos")
+            description: qsTr("Most popular videos, provided courtesy of Pexels")
+            image: "qrc:/images/kero/kero_star.png"
        }

        PaginatorGrid
@@ -19,15 +19,15 @@ Item
                           imagesModel.state === FeaturedImagesModel.Loading ||
                           videosModel.state === FeaturedVideosModel.Loading;

-    onWidthChanged:() => {
+    onWidthChanged: () =>
+    {
        packsModel.resultsPerPage = resultsPerRow
        imagesModel.resultsPerPage = resultsPerRow
        videosModel.resultsPerPage = resultsPerRow
    }

-    clip: true
-
    id: homePageRoot
+    clip: true

    NewestPacksModel
    {
@@ -394,9 +394,9 @@ Item
                        }
                    }
                }
-
-                VerticalSpacer{}
            }
+
+            VerticalSpacer{ height: Constants.largeMargin }
        }

    }
@@ -583,9 +583,7 @@ Item
        },
        State {
            name: "idle"
-            when: packsModel.state !== NewestPacksModel.Loading &&
-                  imagesModel.state !== FeaturedImagesModel.Loading &&
-                  videosModel.state !== FeaturedVideosModel.Loading;
+            when: !popup && !loading

            PropertyChanges
            {
@@ -598,6 +596,17 @@ Item
                target: pageArea
                opacity: 1
            }
+        },
+        State
+        {
+            name: "popup"
+            when: popup
+
+            PropertyChanges
+            {
+                target: pageArea
+                opacity: 0
+            }
        }
    ]

@@ -0,0 +1,143 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+import KomplexHub
+import KomplexHub.Controls
+import KomplexHub.Kero
+import KomplexHubPlugin
+
+Rectangle
+{
+    id: rootItem
+
+    property string query
+    readonly property bool searchable: false
+    property bool popup: false
+    property int resultWidth: 256
+    property int resultHeight: 245
+
+    color: palette.base
+
+    NewestPacksModel
+    {
+        id: packsModel
+        resultsPerPage: paginator.resultsPerPage
+
+        Component.onCompleted: () => nextPage()
+    }
+
+    ColumnLayout
+    {
+        id: resultsLayout
+        visible: opacity > 0.01
+        anchors.fill: parent
+        anchors.margins: Constants.mediumMargin
+
+        KeroHeader
+        {
+            Layout.alignment: Qt.AlignTop
+            Layout.fillWidth: true
+            Layout.preferredHeight: 180
+            title: qsTr("Newest Live Wallpapers")
+            description: qsTr("Live Wallpaper Packs from Komplex or ShaderToy")
+            image: "qrc:/images/kero/kero_star.png"
+        }
+
+        PaginatorGrid
+        {
+            Layout.alignment: Qt.AlignTop
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+
+            id: paginator
+            model: packsModel
+            loading: model.state === NewestPacksModel.Loading
+
+            delegate: ItemDelegate
+            {
+                id: resultDelegate
+
+                width: resultWidth
+                height: resultHeight
+
+                required property string name
+                required property string author
+                required property string description
+                required property string uuid
+                required property string thumbnail
+                required property string authorId
+                required property int index
+
+                SearchResultItem
+                {
+                    anchors.fill: parent
+                    title: parent.name
+                    author: parent.author
+                    description: parent.description
+                    thumbnail: parent.thumbnail
+                    uuid: parent.uuid
+                    selected: paginator.currentIndex === parent.index
+
+                    onTriggered: () => paginator.currentIndex = parent.index
+
+                    onViewMoreTriggered: () =>
+                    {
+                        showWallpaperPopup(parent.index)
+                    }
+                }
+            }
+        }
+    }
+
+    Rectangle
+    {
+        id: popupContainer
+        anchors.fill: parent
+        opacity: 0
+        visible: opacity > 0.01
+        color: palette.base
+
+        PackView
+        {
+            id: viewMoreWallpaperPopup
+            anchors.fill: parent
+            opacity: 0
+            visible: opacity > 0.01
+
+            Behavior on opacity {
+                NumberAnimation
+                {
+                    duration: 250
+                }
+            }
+        }
+
+        Behavior on opacity {
+            NumberAnimation
+            {
+                duration: 250
+            }
+        }
+    }
+
+    function closePopup()
+    {
+        viewMoreWallpaperPopup.opacity = 0
+        popupContainer.opacity = 0
+        resultsLayout.opacity = 1
+        rootItem.popup = false
+    }
+
+    function showWallpaperPopup(index)
+    {
+        viewMoreWallpaperPopup.author = packsModel.data(packsModel.index(index,0), NewestPacksModel.AuthorRole)
+        viewMoreWallpaperPopup.authorId = packsModel.data(packsModel.index(index,0), NewestPacksModel.AuthorIdRole)
+        viewMoreWallpaperPopup.description = packsModel.data(packsModel.index(index,0), NewestPacksModel.DescriptionRole)
+        viewMoreWallpaperPopup.thumbnail = packsModel.data(packsModel.index(index,0), NewestPacksModel.ThumbnailRole)
+        viewMoreWallpaperPopup.opacity = 1
+        popupContainer.opacity = 1
+        resultsLayout.opacity = 0
+        rootItem.popup = true
+    }
+}