From 471c91e6223e73e5a535d94258b2d3fc22ceca4b Mon Sep 17 00:00:00 2001 From: Digital Artifex <7929434+DigitalArtifex@users.noreply.github.com> Date: Mon, 17 Aug 2026 01:03:00 -0400 Subject: [PATCH] UI update --- KomplexHubContent/CMakeLists.txt | 1 + .../pages/FeaturedImagesPage.qml | 26 +--- KomplexHubContent/pages/FeaturedPacksPage.qml | 26 +--- .../pages/FeaturedVideosPage.qml | 27 +--- KomplexHubContent/pages/HomePage.qml | 25 ++- KomplexHubContent/pages/NewestPacksPage.qml | 143 ++++++++++++++++++ KomplexHubPlugin/featuredimagesmodel.cpp | 18 ++- KomplexHubPlugin/featuredvideosmodel.cpp | 18 ++- KomplexHubPlugin/newestpacksmodel.cpp | 24 +-- 9 files changed, 216 insertions(+), 92 deletions(-) create mode 100644 KomplexHubContent/pages/NewestPacksPage.qml diff --git a/KomplexHubContent/CMakeLists.txt b/KomplexHubContent/CMakeLists.txt index 567171f..6c80f2b 100644 --- a/KomplexHubContent/CMakeLists.txt +++ b/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 ) diff --git a/KomplexHubContent/pages/FeaturedImagesPage.qml b/KomplexHubContent/pages/FeaturedImagesPage.qml index fd5fa6b..dcb0cee 100644 --- a/KomplexHubContent/pages/FeaturedImagesPage.qml +++ b/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 - - 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 diff --git a/KomplexHubContent/pages/FeaturedPacksPage.qml b/KomplexHubContent/pages/FeaturedPacksPage.qml index 05a84be..cdcd069 100644 --- a/KomplexHubContent/pages/FeaturedPacksPage.qml +++ b/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 - - 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 diff --git a/KomplexHubContent/pages/FeaturedVideosPage.qml b/KomplexHubContent/pages/FeaturedVideosPage.qml index 67c5509..71ea25d 100644 --- a/KomplexHubContent/pages/FeaturedVideosPage.qml +++ b/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 - - 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 diff --git a/KomplexHubContent/pages/HomePage.qml b/KomplexHubContent/pages/HomePage.qml index 645bbd6..1436775 100644 --- a/KomplexHubContent/pages/HomePage.qml +++ b/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 && - 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 + } } ] diff --git a/KomplexHubContent/pages/NewestPacksPage.qml b/KomplexHubContent/pages/NewestPacksPage.qml new file mode 100644 index 0000000..c51fcfc --- /dev/null +++ b/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 + } +} diff --git a/KomplexHubPlugin/featuredimagesmodel.cpp b/KomplexHubPlugin/featuredimagesmodel.cpp index 78998b9..07d590f 100644 --- a/KomplexHubPlugin/featuredimagesmodel.cpp +++ b/KomplexHubPlugin/featuredimagesmodel.cpp @@ -172,13 +172,19 @@ auto FeaturedImagesModel::state() const -> FeaturedImagesModel::State auto FeaturedImagesModel::setState(State state) -> void { - if (m_state == state) - { - return; - } + QFuture aether = QtConcurrent::run + ( + [this, state] + { + if (m_state == state) + { + return; + } - m_state = state; - emit stateChanged(); + m_state = state; + emit stateChanged(); + } + ); } auto FeaturedImagesModel::resetState() -> void diff --git a/KomplexHubPlugin/featuredvideosmodel.cpp b/KomplexHubPlugin/featuredvideosmodel.cpp index b390e07..16ab652 100644 --- a/KomplexHubPlugin/featuredvideosmodel.cpp +++ b/KomplexHubPlugin/featuredvideosmodel.cpp @@ -160,13 +160,19 @@ auto FeaturedVideosModel::state() const -> FeaturedVideosModel::State auto FeaturedVideosModel::setState(State state) -> void { - if (m_state == state) - { - return; - } + QFuture aether = QtConcurrent::run + ( + [this, state] + { + if (m_state == state) + { + return; + } - m_state = state; - emit stateChanged(); + m_state = state; + emit stateChanged(); + } + ); } auto FeaturedVideosModel::resetState() -> void diff --git a/KomplexHubPlugin/newestpacksmodel.cpp b/KomplexHubPlugin/newestpacksmodel.cpp index 9614da5..2cae7dd 100644 --- a/KomplexHubPlugin/newestpacksmodel.cpp +++ b/KomplexHubPlugin/newestpacksmodel.cpp @@ -159,13 +159,19 @@ auto NewestPacksModel::state() const -> NewestPacksModel::State auto NewestPacksModel::setState(State state) -> void { - if (m_state == state) - { - return; - } + QFuture aether = QtConcurrent::run + ( + [this, state] + { + if (m_state == state) + { + return; + } - m_state = state; - emit stateChanged(); + m_state = state; + emit stateChanged(); + } + ); } auto NewestPacksModel::resetState() -> void @@ -224,7 +230,7 @@ auto NewestPacksModel::setResultsPerPage(qsizetype resultsPerPage) -> void { if(m_paginator != nullptr) { - QFuture future = QtConcurrent::run + QFuture aether = QtConcurrent::run ( [this, resultsPerPage] { @@ -277,7 +283,7 @@ auto NewestPacksModel::nextPage() const -> void { if(m_paginator != nullptr) { - QFuture future = QtConcurrent::run + QFuture aether = QtConcurrent::run ( [this] { @@ -291,7 +297,7 @@ auto NewestPacksModel::previousPage() const -> void { if(m_paginator != nullptr) { - QFuture future = QtConcurrent::run + QFuture aether = QtConcurrent::run ( [this] {