UI update

KomplexHubContent/CMakeLists.txt

@@ -21,6 +21,7 @@ qt6_add_qml_module(KomplexHubContent
         QML_FILES pages/FeaturedVideosPage.qml
         QML_FILES pages/FeaturedPacksPage.qml
         QML_FILES pages/FeaturedImagesPage.qml
+        QML_FILES pages/NewestPacksPage.qml
 )
 
 

KomplexHubContent/pages/FeaturedImagesPage.qml

@@ -35,29 +35,13 @@ Rectangle
         anchors.fill: parent
         anchors.margins: Constants.mediumMargin
 
-        Text
+        KeroHeader
         {
             Layout.alignment: Qt.AlignTop
-            Layout.preferredHeight: 50
+            Layout.fillWidth: true
-
+            Layout.preferredHeight: 180
-            color: palette.text
+            title: qsTr("Featured Images")
-            font.pixelSize: Constants.h2Font.pixelSize
+            description: qsTr("A specially curated collection of images, courtesy of Pexels")
-            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
         }
 
         PaginatorGrid

KomplexHubContent/pages/FeaturedPacksPage.qml

@@ -34,29 +34,13 @@ Rectangle
         anchors.fill: parent
         anchors.margins: Constants.mediumMargin
 
-        Text
+        KeroHeader
         {
             Layout.alignment: Qt.AlignTop
-            Layout.preferredHeight: 50
+            Layout.fillWidth: true
-
+            Layout.preferredHeight: 180
-            color: palette.text
+            title: qsTr("Featured Live Wallpapers")
-            font.pixelSize: Constants.h2Font.pixelSize
+            description: qsTr("Live Wallpaper Packs from Komplex or ShaderToy")
-            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
         }
 
         PaginatorGrid

KomplexHubContent/pages/FeaturedVideosPage.qml

@@ -32,29 +32,14 @@ Rectangle
         anchors.fill: parent
         anchors.margins: Constants.mediumMargin
 
-        Text
+        KeroHeader
         {
             Layout.alignment: Qt.AlignTop
-            Layout.preferredHeight: 50
+            Layout.fillWidth: true
-
+            Layout.preferredHeight: 180
-            color: palette.text
+            title: qsTr("Most Popular Videos")
-            font.pixelSize: Constants.h2Font.pixelSize
+            description: qsTr("Most popular videos, provided courtesy of Pexels")
-            font.bold: true
+            image: "qrc:/images/kero/kero_star.png"
-            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
         }
 
         PaginatorGrid

KomplexHubContent/pages/HomePage.qml

@@ -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 &&
+            when: !popup && !loading
-                  imagesModel.state !== FeaturedImagesModel.Loading &&
-                  videosModel.state !== FeaturedVideosModel.Loading;
 
             PropertyChanges
             {
@@ -598,6 +596,17 @@ Item
                 target: pageArea
                 opacity: 1
             }
+        },
+        State
+        {
+            name: "popup"
+            when: popup
+
+            PropertyChanges
+            {
+                target: pageArea
+                opacity: 0
+            }
         }
     ]
 

KomplexHubContent/pages/NewestPacksPage.qml

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

KomplexHubPlugin/featuredimagesmodel.cpp

@@ -172,13 +172,19 @@ auto FeaturedImagesModel::state() const -> FeaturedImagesModel::State
 
 auto FeaturedImagesModel::setState(State state) -> void
 {
-    if (m_state == state)
+    QFuture<void> aether = QtConcurrent::run
-    {
+    (
-        return;
+        [this, state]
-    }
+        {
+            if (m_state == state)
+            {
+                return;
+            }
 
-    m_state = state;
+            m_state = state;
-    emit stateChanged();
+            emit stateChanged();
+        }
+    );
 }
 
 auto FeaturedImagesModel::resetState() -> void

KomplexHubPlugin/featuredvideosmodel.cpp

@@ -160,13 +160,19 @@ auto FeaturedVideosModel::state() const -> FeaturedVideosModel::State
 
 auto FeaturedVideosModel::setState(State state) -> void
 {
-    if (m_state == state)
+    QFuture<void> aether = QtConcurrent::run
-    {
+    (
-        return;
+        [this, state]
-    }
+        {
+            if (m_state == state)
+            {
+                return;
+            }
 
-    m_state = state;
+            m_state = state;
-    emit stateChanged();
+            emit stateChanged();
+        }
+    );
 }
 
 auto FeaturedVideosModel::resetState() -> void

KomplexHubPlugin/newestpacksmodel.cpp

@@ -159,13 +159,19 @@ auto NewestPacksModel::state() const -> NewestPacksModel::State
 
 auto NewestPacksModel::setState(State state) -> void
 {
-    if (m_state == state)
+    QFuture<void> aether = QtConcurrent::run
-    {
+    (
-        return;
+        [this, state]
-    }
+        {
+            if (m_state == state)
+            {
+                return;
+            }
 
-    m_state = state;
+            m_state = state;
-    emit stateChanged();
+            emit stateChanged();
+        }
+    );
 }
 
 auto NewestPacksModel::resetState() -> void
@@ -224,7 +230,7 @@ auto NewestPacksModel::setResultsPerPage(qsizetype resultsPerPage) -> void
 {
     if(m_paginator != nullptr)
     {
-        QFuture<void> future = QtConcurrent::run
+        QFuture<void> aether = QtConcurrent::run
         (
             [this, resultsPerPage]
             {
@@ -277,7 +283,7 @@ auto NewestPacksModel::nextPage() const -> void
 {
     if(m_paginator != nullptr)
     {
-        QFuture<void> future = QtConcurrent::run
+        QFuture<void> aether = QtConcurrent::run
         (
             [this]
             {
@@ -291,7 +297,7 @@ auto NewestPacksModel::previousPage() const -> void
 {
     if(m_paginator != nullptr)
     {
-        QFuture<void> future = QtConcurrent::run
+        QFuture<void> aether = QtConcurrent::run
         (
             [this]
             {