UI update
This commit is contained in:
Digital Artifex
@@ -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
|
||||
)
|
||||
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user