digitalartifex/komplex-hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Various visual improvements

Browse Source
This commit is contained in:
Digital Artifex
2026-06-18 17:54:19 -04:00
parent 22cdb351ca
commit bfa2a50dfb
3 changed files with 335 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
KomplexHubContent/MainScreen.qml
+4
View File
@@ -54,7 +54,11 @@ Rectangle {
onTriggered: () => { onTriggered: () => {
pageLoader.page = "pages/HomePage.qml" pageLoader.page = "pages/HomePage.qml"
if(currentMenuButton !== null)
{
currentMenuButton.selected = false currentMenuButton.selected = false
}
currentMenuButton = this currentMenuButton = this
searchContainer.preferredHeight = 0 searchContainer.preferredHeight = 0
KomplexHubContent/pages/HomePage.qml
+193 -49
View File
@@ -1,6 +1,8 @@
import QtQuick import QtQuick
import QtQuick.Controls import QtQuick.Controls
import QtQuick.Layouts import QtQuick.Layouts
import QtQuick.Effects
import KomplexHub import KomplexHub
import KomplexHub.Controls import KomplexHub.Controls
import KomplexHub.Kero import KomplexHub.Kero
@@ -8,7 +10,9 @@ import KomplexHubPlugin
Item { Item {
readonly property bool searchable: false 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 id: homePageRoot
@@ -30,42 +34,67 @@ Item {
resultsPerPage: homePageRoot.resultsPerRow resultsPerPage: homePageRoot.resultsPerRow
} }
Rectangle { Rectangle
{
anchors.fill: parent anchors.fill: parent
color: palette.base color: palette.base
ScrollView { ScrollView
{
id: newPacksView
anchors.fill: parent anchors.fill: parent
anchors.margins: Constants.largeMargin anchors.margins: Constants.largeMargin
ColumnLayout { ColumnLayout
width: homePageRoot.width {
width: newPacksView.width
// Featured Results ColumnLayout
ColumnLayout { {
width: parent.width width: parent.width
height: 420 height: 420
Text { Text
{
color: palette.text color: palette.text
font.pixelSize: Constants.h3Font.pixelSize font.pixelSize: Constants.h2Font.pixelSize
font.bold: true font.bold: true
text: "Newest Wallpaper Packs" text: qsTr("Newest Wallpaper Packs")
} }
RowLayout { RowLayout
{
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 256 Layout.preferredHeight: 256
Layout.alignment: Qt.AlignHCenter
Layout.leftMargin: Constants.largeMargin
Repeater { Rectangle
{
Layout.fillWidth: true
Layout.fillHeight: true
color: "transparent"
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
{
model: newestPacksModel model: newestPacksModel
delegate: Item { delegate: Item {
width: 256 width: resultWidth
height: 256 height: resultHeight
required property string name required property string name
required property string author required property string author
required property string description required property string description
@@ -84,10 +113,33 @@ Item {
} }
} }
} }
}
SquareButton { Rectangle
Layout.fillHeight: true {
Layout.preferredWidth: 64 id: newestGradientMap
anchors.top: parent.top
anchors.right: newPacksMoreButton.left
height: resultHeight
width: resultWidth / 4
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.source: "qrc:/images/icons/icons8-forward.svg"
icon.height: 24 icon.height: 24
@@ -95,35 +147,59 @@ Item {
} }
} }
} }
}
Item { Item {
height: Constants.largeMargin height: Constants.largeMargin
} }
ColumnLayout { ColumnLayout
{
width: parent.width width: parent.width
height: 420 height: 420
Text { Text
{
color: palette.text color: palette.text
font.pixelSize: Constants.h3Font.pixelSize font.pixelSize: Constants.h2Font.pixelSize
font.bold: true font.bold: true
text: "Featured Images" text: qsTr("Featured Images")
} }
RowLayout { RowLayout
{
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 256 Layout.preferredHeight: 256
Layout.alignment: Qt.AlignHCenter
Layout.leftMargin: Constants.largeMargin
Repeater { Rectangle
{
Layout.fillWidth: true
Layout.fillHeight: true
color: "transparent"
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
{
model: featuredImagesModel model: featuredImagesModel
delegate: Item { delegate: Item
width: 256 {
height: 256 width: resultWidth
height: resultHeight
required property string author required property string author
required property string description required property string description
required property string uuid required property string uuid
@@ -141,10 +217,32 @@ Item {
} }
} }
} }
}
SquareButton { Rectangle
Layout.fillHeight: true {
Layout.preferredWidth: 64 anchors.top: parent.top
anchors.right: featuredImagesMoreButton.left
height: resultHeight
width: resultWidth / 4
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.source: "qrc:/images/icons/icons8-forward.svg"
icon.height: 24 icon.height: 24
@@ -152,35 +250,58 @@ Item {
} }
} }
} }
}
Item { Item {
height: Constants.largeMargin height: Constants.largeMargin
} }
ColumnLayout { ColumnLayout
{
width: parent.width width: parent.width
height: 420 height: 420
Text { Text
{
color: palette.text color: palette.text
font.pixelSize: Constants.h3Font.pixelSize font.pixelSize: Constants.h2Font.pixelSize
font.bold: true font.bold: true
text: "Featured Videos" text: qsTr("Featured Videos")
} }
RowLayout { RowLayout
{
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 256 Layout.preferredHeight: 256
Layout.alignment: Qt.AlignHCenter
Layout.leftMargin: Constants.largeMargin
Repeater { Rectangle
{
Layout.fillWidth: true
Layout.fillHeight: true
color: "transparent"
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
{
model: featuredVideosModel model: featuredVideosModel
delegate: Item { delegate: Item {
width: 256 width: resultWidth
height: 256 height: resultHeight
required property string uuid required property string uuid
required property string author required property string author
required property string authorId required property string authorId
@@ -198,10 +319,32 @@ Item {
} }
} }
} }
}
SquareButton { Rectangle
Layout.fillHeight: true {
Layout.preferredWidth: 64 anchors.top: parent.top
anchors.right: featuredVideosMoreButton.left
height: resultHeight
width: resultWidth / 4
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.source: "qrc:/images/icons/icons8-forward.svg"
icon.height: 24 icon.height: 24
@@ -212,6 +355,7 @@ Item {
} }
} }
} }
}
KeroLoadingAnimation KeroLoadingAnimation
{ {
KomplexHubContent/pages/ImageSearchPage.qml
+65 -21
View File
@@ -11,9 +11,12 @@ Item
{ {
property string query property string query
readonly property bool searchable: true readonly property bool searchable: true
property int resultsPerRow: (resultsView.width - (64 + Constants.largeMargin)) / (256 + Constants.largeMargin) property int resultsPerRow: (resultsContainer.width - (Constants.largeMargin * 2)) / (resultWidth + Constants.mediumMargin)
property int rows: (resultsView.height - (Constants.largeMargin * 2) / (256 + Constants.largeMargin)) property int rows: ((resultsContainer.height - (Constants.largeMargin * 2)) / (resultHeight + Constants.mediumMargin))
property int resultsPerPage: resultsPerRow * rows 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 id: imageSearchPageRoot
@@ -29,29 +32,53 @@ Item
anchors.fill: parent anchors.fill: parent
color: palette.base color: palette.base
ScrollView Rectangle
{ {
id: resultsView id: resultsContainer
anchors.top: parent.top anchors.top: parent.top
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
anchors.bottom: buttonBoxLayout.top anchors.bottom: buttonBoxLayout.top
GridLayout { color: "transparent"
ScrollView
{
id: resultsView
anchors.fill: parent
RowLayout
{
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.top: parent.top anchors.top: parent.top
anchors.margins: Constants.largeMargin anchors.margins: Constants.largeMargin
columns: imageSearchPageRoot.resultsPerRow
Repeater { Item
{
Layout.fillHeight: true
Layout.preferredWidth: emptyWidth / 2
Layout.maximumWidth: emptyWidth / 2
}
GridLayout
{
Layout.fillHeight: true
Layout.fillWidth: true
columns: imageSearchPageRoot.resultsPerRow
columnSpacing: Constants.mediumMargin
rowSpacing: Constants.mediumMargin
Repeater
{
model: searchModel model: searchModel
delegate: Item { delegate: Item
{
width: 256 width: 256
height: 256 height: 245
required property string author required property string author
required property string description required property string description
required property string uuid required property string uuid
@@ -71,16 +98,21 @@ Item
} }
} }
} }
}
}
RowLayout { RowLayout
{
id: buttonBoxLayout id: buttonBoxLayout
height: 50 height: 35
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.margins: Constants.largeMargin
SquareButton { SquareButton
{
Layout.fillHeight: true Layout.fillHeight: true
Layout.preferredWidth: 128 Layout.preferredWidth: 128
@@ -89,11 +121,14 @@ Item
icon.width: 16 icon.width: 16
text: qsTr("Previous") text: qsTr("Previous")
enabled: searchModel.hasPreviousPage enabled: searchModel.hasPreviousPage
onTriggered: () => searchModel.previousPage()
} }
Item { Layout.fillWidth: true } Item { Layout.fillWidth: true }
SquareButton { SquareButton
{
Layout.fillHeight: true Layout.fillHeight: true
Layout.preferredWidth: 128 Layout.preferredWidth: 128
@@ -102,25 +137,30 @@ Item
icon.width: 16 icon.width: 16
text: qsTr("Next") text: qsTr("Next")
enabled: searchModel.hasNextPage enabled: searchModel.hasNextPage
onTriggered: () => searchModel.nextPage()
} }
} }
} }
KeroErrorAvatar { KeroErrorAvatar
{
id: errorOverlay id: errorOverlay
anchors.fill: parent anchors.fill: parent
opacity: 0 opacity: 0
} }
KeroNoResultsAvatar { KeroNoResultsAvatar
{
id: noResultsOverlay id: noResultsOverlay
anchors.fill: parent anchors.fill: parent
opacity: 0 opacity: 0
} }
KeroLoadingAnimation { KeroLoadingAnimation
{
id: loadingOverlay id: loadingOverlay
anchors.fill: parent anchors.fill: parent
@@ -128,7 +168,8 @@ Item
} }
states: [ states: [
State { State
{
name: "loading" name: "loading"
when: searchModel.state == ImageSearchModel.Loading when: searchModel.state == ImageSearchModel.Loading
@@ -143,7 +184,8 @@ Item
opacity: 0 opacity: 0
} }
}, },
State { State
{
name: "empty" name: "empty"
when: searchModel.totalResults === 0 when: searchModel.totalResults === 0
@@ -157,12 +199,14 @@ Item
target: resultsView target: resultsView
opacity: 0 opacity: 0
} }
PropertyChanges { PropertyChanges
{
target: buttonBoxLayout target: buttonBoxLayout
visible: false visible: false
} }
}, },
State { State
{
name: "error" name: "error"
when: searchModel.state == ImageSearchModel.Error when: searchModel.state == ImageSearchModel.Error