UI update

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