UI update

AI_ASSETS

@@ -2,78 +2,90 @@
 ;Format: {file, class, model/version, ["message"]}
 
 ;Kero
+{
     {
         images/kero/kero_build_1.png,
         placeholders,
         chatgpt5
-}
+    },
     {
         images/kero/kero_build_2.png,
         placeholders,
         chatgpt5
-}
+    },
     {
         images/kero/kero_build_3.png,
         placeholders,
         chatgpt5
-}
+    },
     {
         images/kero/kero_build_4.png,
         placeholders,
         chatgpt5
-}
+    },
     {
         images/kero/kero_build_error.png,
         placeholders,
         chatgpt5
-}
+    },
     {
         images/kero/kero_choice.png,
         placeholders,
         chatgpt5
-}
+    },
     {
         images/kero/kero_hello.png,
         placeholders,
         chatgpt5
-}
+    },
     {
         images/kero/kero_login.png,
         placeholders,
         chatgpt5
-}
+    },
     {
         images/kero/kero_no_results.png,
         placeholders,
         chatgpt5
-}
+    },
     {
         images/kero/kero_run_1.png,
         placeholders,
         chatgpt5
-}
+    },
     {
         images/kero/kero_run_2.png,
         placeholders,
         chatgpt5
-}
+    },
     {
         images/kero/kero_run_3.png,
         placeholders,
         chatgpt5
-}
+    },
     {
         images/kero/kero_run_4.png,
         placeholders,
         chatgpt5
-}
+    },
     {
         images/kero/kero_warning.png,
         placeholders,
         chatgpt5
-}
+    },
     {
         images/kero/kero_success.png,
         placeholders,
         chatgpt5
+    },
+    {
+        images/kero/kero_spotlight.png,
+        placeholders,
+        chatgpt5
+    },
+    {
+        images/kero/kero_star.png,
+        placeholders,
+        chatgpt5
+    }
 }

CMakeLists.txt

@@ -97,6 +97,8 @@ qt_add_resources(${CMAKE_PROJECT_NAME} "app_images"
     "images/kero/kero_run_3.png"
     "images/kero/kero_run_4.png"
     "images/kero/kero_success.png"
+    "images/kero/kero_spotlight.png"
+    "images/kero/kero_star.png"
     "images/kero/kero_warning.png"
 )
 

KomplexHubContent/pages/HomePage.qml

@@ -1,5 +1,5 @@
 import QtQuick
-import QtQuick.Controls
+import QtQuick.Controls 2.0
 import QtQuick.Layouts
 import QtQuick.Effects
 
@@ -47,37 +47,84 @@ Item
         resultsPerPage: 0
     }
 
-    Rectangle
+    ScrollView
-    {
-        anchors.fill: parent
-        color: palette.base
-
-        ColumnLayout
     {
         id: resultsLayout
         visible: opacity > 0.01
-            anchors.fill: parent
+        anchors.right: parent.right
-            anchors.margins: Constants.mediumMargin
+        anchors.left: parent.left
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+
+        ScrollBar.horizontal.interactive: false
+        ScrollBar.vertical.interactive: true
+
+        onWidthChanged: content.width = width
+
+        Column
+        {
+            id: content
+            anchors.right: parent.right
+            anchors.top: parent.top
+
+            VerticalSpacer{ height: Constants.largeMargin }
+
+            Rectangle
+            {
+                anchors.left: parent.left
+                anchors.right: parent.right
+                height: childrenRect.height
+                anchors.margins: Constants.largeMargin
+
+                color: palette.base
+                border.color: palette.midlight
+
+                Column
+                {
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+
+                    KeroHeader
+                    {
+                        height: 180
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                    }
+
+                    Rectangle
+                    {
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        height: childrenRect.height
+
+                        color: palette.window
+
+                        Column
+                        {
+                            anchors.left: parent.left
+                            anchors.right: parent.right
+                            anchors.margins: Constants.largeMargin
 
                             Text
                             {
-                Layout.alignment: Qt.AlignTop
+                                anchors.left: parent.left
-                Layout.preferredHeight: 50
+                                anchors.right: parent.right
+                                height: 36
 
                                 color: palette.text
                                 font.pixelSize: Constants.h2Font.pixelSize
                                 font.bold: true
-                text: qsTr("Newest Wallpaper Packs")
+                                text: qsTr("Featured Live Wallpapers")
                                 verticalAlignment: Qt.AlignVCenter
                             }
 
                             HorizontalPaginator
                             {
-                id: packsPaginator
+                                anchors.left: parent.left
-                Layout.fillWidth: true
+                                anchors.right: parent.right
-                Layout.preferredHeight: 245
+                                height: 245
-                Layout.alignment: Qt.AlignTop
 
+                                id: packsPaginator
                                 model: packsModel
                                 delegate: ItemDelegate
                                 {
@@ -125,8 +172,9 @@ Item
 
                             Text
                             {
-                Layout.alignment: Qt.AlignTop
+                                anchors.left: parent.left
-                Layout.preferredHeight: 50
+                                anchors.right: parent.right
+                                height: 36
 
                                 color: palette.text
                                 font.pixelSize: Constants.h2Font.pixelSize
@@ -138,9 +186,9 @@ Item
                             HorizontalPaginator
                             {
                                 id: imagesPaginator
-                Layout.fillWidth: true
+                                anchors.left: parent.left
-                Layout.preferredHeight: 245
+                                anchors.right: parent.right
-                Layout.alignment: Qt.AlignTop
+                                height: 245
 
                                 model: imagesModel
                                 delegate: ItemDelegate
@@ -180,10 +228,122 @@ Item
                                 }
                             }
 
+                            VerticalSpacer{ height: Constants.largeMargin }
+                        }
+                    }
+                }
+            }
+
+            VerticalSpacer{ height: Constants.largeMargin }
+
+            Rectangle
+            {
+                anchors.left: parent.left
+                anchors.right: parent.right
+                height: childrenRect.height
+                anchors.margins: Constants.largeMargin
+
+                color: palette.base
+                border.color: palette.midlight
+
+                Column
+                {
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+
+                    KeroHeader
+                    {
+                        height: 180
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        title: qsTr("New & Popular Wallpapers")
+                        image: "qrc:/images/kero/kero_star.png"
+                    }
+
+                    Rectangle
+                    {
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        anchors.margins: Constants.largeMargin
+                        height: childrenRect.height
+
+                        color: palette.window
+
+                        Column
+                        {
+                            anchors.left: parent.left
+                            anchors.right: parent.right
+
                             Text
                             {
-                Layout.alignment: Qt.AlignTop
+                                anchors.left: parent.left
-                Layout.preferredHeight: 50
+                                anchors.right: parent.right
+                                height: 36
+
+                                color: palette.text
+                                font.pixelSize: Constants.h2Font.pixelSize
+                                font.bold: true
+                                text: qsTr("Newest Wallpaper Packs")
+                                verticalAlignment: Qt.AlignVCenter
+                            }
+
+                            HorizontalPaginator
+                            {
+                                anchors.left: parent.left
+                                anchors.right: parent.right
+                                height: 245
+
+                                id: packsPaginator2
+                                model: packsModel
+                                delegate: ItemDelegate
+                                {
+                                    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: packsPaginator2.currentIndex === parent.index
+
+                                        onTriggered: () => packsPaginator2.currentIndex = parent.index
+
+                                        onViewMoreTriggered: () =>
+                                        {
+                                            showWallpaperPopup(parent.index)
+                                        }
+
+                                        onThumbnailChanged: () =>
+                                        {
+                                            console.log(index + " " + thumbnail + " " + parent.thumbnail)
+                                        }
+                                    }
+                                }
+
+                                onViewMoreTriggered: () =>
+                                {
+                                    showFeaturedPacksPage()
+                                }
+                            }
+
+                            Text
+                            {
+                                anchors.left: parent.left
+                                anchors.right: parent.right
+                                height: 36
 
                                 color: palette.text
                                 font.pixelSize: Constants.h2Font.pixelSize
@@ -195,9 +355,10 @@ Item
                             HorizontalPaginator
                             {
                                 id: videosPaginator
-                Layout.fillWidth: true
+
-                Layout.preferredHeight: 245
+                                anchors.left: parent.left
-                Layout.alignment: Qt.AlignTop
+                                anchors.right: parent.right
+                                height: 245
 
                                 model: videosModel
                                 delegate: ItemDelegate
@@ -232,8 +393,13 @@ Item
                                 }
                             }
 
-            /* spacer */
+                            VerticalSpacer{ height: Constants.largeMargin }
-            Item { Layout.fillHeight: true }
+                        }
+                    }
+                }
+
+                VerticalSpacer{}
+            }
         }
     }
 

KomplexHubModule/Controls/CMakeLists.txt

@@ -21,5 +21,6 @@ qt6_add_qml_module(KomplexHubModule_Controls
         QML_FILES
         QML_FILES VideoView.qml
         QML_FILES PackView.qml
+        QML_FILES VerticalSpacer.qml
 )
 

KomplexHubModule/Controls/HorizontalPaginator.qml

@@ -28,6 +28,7 @@ Item
     signal viewMoreTriggered()
 
     id: rootItem
+    clip: true
 
     Item
     {
@@ -57,6 +58,7 @@ Item
                 id: resultsView
                 Layout.fillHeight: true
                 Layout.fillWidth: true
+                clip: true
 
                 spacing: Constants.mediumMargin
 
@@ -132,7 +134,7 @@ Item
             Item
             {
                 Layout.fillHeight: true
-                Layout.preferredWidth: 128
+                Layout.preferredWidth: 64
                 Rectangle
                 {
                     id: gradientMap

KomplexHubModule/Controls/VerticalSpacer.qml

@@ -0,0 +1,9 @@
+import QtQuick
+
+Rectangle
+{
+    height: 36
+    color: "transparent"
+    anchors.left: parent.left
+    anchors.right: parent.right
+}

KomplexHubModule/Kero/CMakeLists.txt

@@ -11,4 +11,5 @@ qt6_add_qml_module(KomplexHubModule_Kero
         "KeroLoadingAnimation.qml"
         "KeroNoResultsAvatar.qml"
         "KeroWarningAvatar.qml"
+        QML_FILES KeroHeader.qml
 )

KomplexHubModule/Kero/KeroHeader.qml

@@ -0,0 +1,82 @@
+import QtQuick
+import QtQuick.Controls 2.0
+import QtQuick.Layouts
+import KomplexHub
+
+Item
+{
+    property string title: qsTr("Wallpaper Spotlight")
+    property string description: qsTr("Featured Images and Live Wallpaper Packs")
+    property color color: palette.alternateBase
+    property string image: "qrc:/images/kero/kero_spotlight.png"
+
+    id: rootItem
+
+    Rectangle
+    {
+        anchors.fill: parent
+        color: rootItem.color
+        border.color: palette.midlight
+
+        RowLayout
+        {
+            anchors.fill: parent
+
+            Item
+            {
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+            }
+
+            Rectangle
+            {
+                Layout.fillHeight: true
+                Layout.preferredWidth: height
+                Layout.alignment: Qt.AlignLeft
+
+                color: "transparent"
+
+                Image
+                {
+                    anchors.fill: parent
+
+                    source: image
+                    antialiasing: true
+                    fillMode: Image.PreserveAspectFit
+                }
+            }
+
+            ColumnLayout
+            {
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignLeft
+
+                Text
+                {
+                    color: palette.text
+                    text: rootItem.title
+                    font: Constants.h1Font
+
+                    Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+                }
+
+                Text
+                {
+                    id: errorText
+                    text: rootItem.description
+                    color: palette.text.darker()
+
+                    Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+                    Layout.bottomMargin: Constants.largeMargin
+                }
+            }
+
+            Item
+            {
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+            }
+        }
+    }
+}