From 98687febb918547e8b105dadca8102a687841ddb Mon Sep 17 00:00:00 2001 From: Digital Artifex <7929434+DigitalArtifex@users.noreply.github.com> Date: Thu, 18 Jun 2026 17:54:19 -0400 Subject: [PATCH] Various visual improvements --- KomplexHubContent/MainScreen.qml | 6 +- KomplexHubContent/pages/HomePage.qml | 350 ++++++++++++++------ KomplexHubContent/pages/ImageSearchPage.qml | 122 ++++--- 3 files changed, 335 insertions(+), 143 deletions(-) diff --git a/KomplexHubContent/MainScreen.qml b/KomplexHubContent/MainScreen.qml index d2ee0a3..e5adfc9 100644 --- a/KomplexHubContent/MainScreen.qml +++ b/KomplexHubContent/MainScreen.qml @@ -54,7 +54,11 @@ Rectangle { onTriggered: () => { pageLoader.page = "pages/HomePage.qml" - currentMenuButton.selected = false + if(currentMenuButton !== null) + { + currentMenuButton.selected = false + } + currentMenuButton = this searchContainer.preferredHeight = 0 diff --git a/KomplexHubContent/pages/HomePage.qml b/KomplexHubContent/pages/HomePage.qml index c5b4374..c2ac82c 100644 --- a/KomplexHubContent/pages/HomePage.qml +++ b/KomplexHubContent/pages/HomePage.qml @@ -1,6 +1,8 @@ import QtQuick import QtQuick.Controls import QtQuick.Layouts +import QtQuick.Effects + import KomplexHub import KomplexHub.Controls import KomplexHub.Kero @@ -8,7 +10,9 @@ import KomplexHubPlugin Item { readonly property bool searchable: false - property int resultsPerRow: (homePageRoot.width - (64 + Constants.largeMargin)) / (256 + Constants.largeMargin) + property int resultsPerRow: (homePageRoot.width - (64 + Constants.largeMargin)) / (resultWidth + Constants.largeMargin) + 1 + property int resultWidth: 256 + property int resultHeight: 256 id: homePageRoot @@ -30,68 +34,117 @@ Item { resultsPerPage: homePageRoot.resultsPerRow } - Rectangle { + Rectangle + { anchors.fill: parent color: palette.base - ScrollView { + ScrollView + { + id: newPacksView anchors.fill: parent anchors.margins: Constants.largeMargin - ColumnLayout { - width: homePageRoot.width + ColumnLayout + { + width: newPacksView.width - // Featured Results - ColumnLayout { + ColumnLayout + { width: parent.width height: 420 - Text { + Text + { color: palette.text - font.pixelSize: Constants.h3Font.pixelSize + font.pixelSize: Constants.h2Font.pixelSize font.bold: true - text: "Newest Wallpaper Packs" + text: qsTr("Newest Wallpaper Packs") } - RowLayout { - + RowLayout + { Layout.fillWidth: true Layout.preferredHeight: 256 - Layout.alignment: Qt.AlignHCenter - Layout.leftMargin: Constants.largeMargin - Repeater { - model: newestPacksModel + Rectangle + { + Layout.fillWidth: true + Layout.fillHeight: true - delegate: Item { - width: 256 - height: 256 - required property string name - required property string author - required property string description - required property string uuid - required property string thumbnail - required property string authorId + color: "transparent" - SearchResultItem + clip: true + Row + { + clip: true + spacing: Constants.mediumMargin + + anchors.top: parent.top + anchors.left: parent.left + anchors.bottom: parent.bottom + anchors.right: newPacksMoreButton.left + anchors.leftMargin: Constants.largeMargin + anchors.rightMargin: Constants.largeMargin + + Repeater { - anchors.fill: parent - title: parent.name - author: parent.author - description: parent.description - thumbnail: parent.thumbnail - uuid: parent.uuid + model: newestPacksModel + + delegate: Item { + 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 + + SearchResultItem + { + anchors.fill: parent + title: parent.name + author: parent.author + description: parent.description + thumbnail: parent.thumbnail + uuid: parent.uuid + } + } } } - } - SquareButton { - Layout.fillHeight: true - Layout.preferredWidth: 64 + Rectangle + { + id: newestGradientMap + anchors.top: parent.top + anchors.right: newPacksMoreButton.left + height: resultHeight + width: resultWidth / 4 - icon.source: "qrc:/images/icons/icons8-forward.svg" - icon.height: 24 - icon.width: 24 + gradient: Gradient + { + orientation: Gradient.Horizontal + GradientStop { position: 0.0; color: "transparent" } + GradientStop { position: 1.0; color: palette.light } + } + opacity: 0.5 + } + + SquareButton + { + id: newPacksMoreButton + anchors.top: parent.top + anchors.right: parent.right + height: resultHeight + + width: 64 + + icon.source: "qrc:/images/icons/icons8-forward.svg" + icon.height: 24 + icon.width: 24 + } } } } @@ -100,55 +153,101 @@ Item { height: Constants.largeMargin } - ColumnLayout { + ColumnLayout + { width: parent.width height: 420 - Text { + Text + { color: palette.text - font.pixelSize: Constants.h3Font.pixelSize + font.pixelSize: Constants.h2Font.pixelSize font.bold: true - text: "Featured Images" + text: qsTr("Featured Images") } - RowLayout { - + RowLayout + { Layout.fillWidth: true Layout.preferredHeight: 256 - Layout.alignment: Qt.AlignHCenter - Layout.leftMargin: Constants.largeMargin - Repeater { - model: featuredImagesModel + Rectangle + { + Layout.fillWidth: true + Layout.fillHeight: true - delegate: Item { - width: 256 - height: 256 - required property string author - required property string description - required property string uuid - required property string thumbnail - required property string authorId + color: "transparent" - SearchResultItem + clip: true + Row + { + clip: true + spacing: Constants.mediumMargin + + anchors.top: parent.top + anchors.left: parent.left + anchors.bottom: parent.bottom + anchors.right: featuredImagesMoreButton.left + anchors.leftMargin: Constants.largeMargin + anchors.rightMargin: Constants.largeMargin + + Repeater { - anchors.fill: parent - title: parent.author - author: qsTr("Pexels Images") - description: parent.description - thumbnail: parent.thumbnail - uuid: parent.uuid + model: featuredImagesModel + + delegate: Item + { + width: resultWidth + height: resultHeight + + required property string author + required property string description + required property string uuid + required property string thumbnail + required property string authorId + + SearchResultItem + { + anchors.fill: parent + title: parent.author + author: qsTr("Pexels Images") + description: parent.description + thumbnail: parent.thumbnail + uuid: parent.uuid + } + } } } - } - SquareButton { - Layout.fillHeight: true - Layout.preferredWidth: 64 + Rectangle + { + anchors.top: parent.top + anchors.right: featuredImagesMoreButton.left + height: resultHeight + width: resultWidth / 4 - icon.source: "qrc:/images/icons/icons8-forward.svg" - icon.height: 24 - icon.width: 24 + gradient: Gradient + { + orientation: Gradient.Horizontal + GradientStop { position: 0.0; color: "transparent" } + GradientStop { position: 1.0; color: palette.light } + } + opacity: 0.5 + } + + SquareButton + { + id: featuredImagesMoreButton + anchors.top: parent.top + anchors.right: parent.right + height: resultHeight + + width: 64 + + icon.source: "qrc:/images/icons/icons8-forward.svg" + icon.height: 24 + icon.width: 24 + } } } } @@ -157,55 +256,100 @@ Item { height: Constants.largeMargin } - ColumnLayout { + ColumnLayout + { width: parent.width height: 420 - Text { + Text + { color: palette.text - font.pixelSize: Constants.h3Font.pixelSize + font.pixelSize: Constants.h2Font.pixelSize font.bold: true - text: "Featured Videos" + text: qsTr("Featured Videos") } - RowLayout { - + RowLayout + { Layout.fillWidth: true Layout.preferredHeight: 256 - Layout.alignment: Qt.AlignHCenter - Layout.leftMargin: Constants.largeMargin - Repeater { - model: featuredVideosModel + Rectangle + { + Layout.fillWidth: true + Layout.fillHeight: true - delegate: Item { - width: 256 - height: 256 - required property string uuid - required property string author - required property string authorId - required property string authorUrl - required property string thumbnail + color: "transparent" - SearchResultItem + clip: true + Row + { + clip: true + spacing: Constants.mediumMargin + + anchors.top: parent.top + anchors.left: parent.left + anchors.bottom: parent.bottom + anchors.right: featuredVideosMoreButton.left + anchors.leftMargin: Constants.largeMargin + anchors.rightMargin: Constants.largeMargin + + Repeater { - anchors.fill: parent - title: parent.author - author: parent.author - description: "Video provided by Pexels" - thumbnail: parent.thumbnail - uuid: parent.uuid + model: featuredVideosModel + + delegate: Item { + width: resultWidth + height: resultHeight + + required property string uuid + required property string author + required property string authorId + required property string authorUrl + required property string thumbnail + + SearchResultItem + { + anchors.fill: parent + title: parent.author + author: parent.author + description: "Video provided by Pexels" + thumbnail: parent.thumbnail + uuid: parent.uuid + } + } } } - } - SquareButton { - Layout.fillHeight: true - Layout.preferredWidth: 64 + Rectangle + { + anchors.top: parent.top + anchors.right: featuredVideosMoreButton.left + height: resultHeight + width: resultWidth / 4 - icon.source: "qrc:/images/icons/icons8-forward.svg" - icon.height: 24 - icon.width: 24 + gradient: Gradient + { + orientation: Gradient.Horizontal + GradientStop { position: 0.0; color: "transparent" } + GradientStop { position: 1.0; color: palette.light } + } + opacity: 0.5 + } + + SquareButton + { + id: featuredVideosMoreButton + anchors.top: parent.top + anchors.right: parent.right + height: resultHeight + + width: 64 + + icon.source: "qrc:/images/icons/icons8-forward.svg" + icon.height: 24 + icon.width: 24 + } } } } diff --git a/KomplexHubContent/pages/ImageSearchPage.qml b/KomplexHubContent/pages/ImageSearchPage.qml index b63c83f..995b378 100644 --- a/KomplexHubContent/pages/ImageSearchPage.qml +++ b/KomplexHubContent/pages/ImageSearchPage.qml @@ -11,9 +11,12 @@ Item { property string query readonly property bool searchable: true - property int resultsPerRow: (resultsView.width - (64 + Constants.largeMargin)) / (256 + Constants.largeMargin) - property int rows: (resultsView.height - (Constants.largeMargin * 2) / (256 + Constants.largeMargin)) + property int resultsPerRow: (resultsContainer.width - (Constants.largeMargin * 2)) / (resultWidth + Constants.mediumMargin) + property int rows: ((resultsContainer.height - (Constants.largeMargin * 2)) / (resultHeight + Constants.mediumMargin)) property int resultsPerPage: resultsPerRow * rows + property int emptyWidth: (resultsContainer.width - (Constants.largeMargin * 2)) - (resultsPerRow * (resultWidth + Constants.mediumMargin)) + property int resultWidth: 256 + property int resultHeight: 245 id: imageSearchPageRoot @@ -29,58 +32,87 @@ Item anchors.fill: parent color: palette.base - ScrollView + Rectangle { - id: resultsView + id: resultsContainer anchors.top: parent.top anchors.left: parent.left anchors.right: parent.right anchors.bottom: buttonBoxLayout.top - GridLayout { - anchors.left: parent.left - anchors.right: parent.right - anchors.bottom: parent.bottom - anchors.top: parent.top + color: "transparent" - anchors.margins: Constants.largeMargin - columns: imageSearchPageRoot.resultsPerRow + ScrollView + { + id: resultsView + anchors.fill: parent - Repeater { - model: searchModel + RowLayout + { + anchors.left: parent.left + anchors.right: parent.right + anchors.bottom: parent.bottom + anchors.top: parent.top + anchors.margins: Constants.largeMargin - delegate: Item { - width: 256 - height: 256 - required property string author - required property string description - required property string uuid - required property string thumbnail - required property string authorId + Item + { + Layout.fillHeight: true + Layout.preferredWidth: emptyWidth / 2 + Layout.maximumWidth: emptyWidth / 2 + } - SearchResultItem + GridLayout + { + Layout.fillHeight: true + Layout.fillWidth: true + + columns: imageSearchPageRoot.resultsPerRow + columnSpacing: Constants.mediumMargin + rowSpacing: Constants.mediumMargin + + Repeater { - anchors.fill: parent - title: parent.author - author: qsTr("Pexels Images") - description: parent.description - thumbnail: parent.thumbnail - uuid: parent.uuid + model: searchModel + + delegate: Item + { + width: 256 + height: 245 + required property string author + required property string description + required property string uuid + required property string thumbnail + required property string authorId + + SearchResultItem + { + anchors.fill: parent + title: parent.author + author: qsTr("Pexels Images") + description: parent.description + thumbnail: parent.thumbnail + uuid: parent.uuid + } + } } } } } } - RowLayout { + RowLayout + { id: buttonBoxLayout - height: 50 + height: 35 anchors.left: parent.left anchors.right: parent.right anchors.bottom: parent.bottom + anchors.margins: Constants.largeMargin - SquareButton { + SquareButton + { Layout.fillHeight: true Layout.preferredWidth: 128 @@ -89,11 +121,14 @@ Item icon.width: 16 text: qsTr("Previous") enabled: searchModel.hasPreviousPage + + onTriggered: () => searchModel.previousPage() } Item { Layout.fillWidth: true } - SquareButton { + SquareButton + { Layout.fillHeight: true Layout.preferredWidth: 128 @@ -102,25 +137,30 @@ Item icon.width: 16 text: qsTr("Next") enabled: searchModel.hasNextPage + + onTriggered: () => searchModel.nextPage() } } } - KeroErrorAvatar { + KeroErrorAvatar + { id: errorOverlay anchors.fill: parent opacity: 0 } - KeroNoResultsAvatar { + KeroNoResultsAvatar + { id: noResultsOverlay anchors.fill: parent opacity: 0 } - KeroLoadingAnimation { + KeroLoadingAnimation + { id: loadingOverlay anchors.fill: parent @@ -128,7 +168,8 @@ Item } states: [ - State { + State + { name: "loading" when: searchModel.state == ImageSearchModel.Loading @@ -143,7 +184,8 @@ Item opacity: 0 } }, - State { + State + { name: "empty" when: searchModel.totalResults === 0 @@ -157,12 +199,14 @@ Item target: resultsView opacity: 0 } - PropertyChanges { + PropertyChanges + { target: buttonBoxLayout visible: false } }, - State { + State + { name: "error" when: searchModel.state == ImageSearchModel.Error