Added ImageSearch model and QML page
This commit is contained in:
Digital Artifex
@@ -10,6 +10,7 @@ import QtQuick.Layouts
|
||||
import KomplexHub
|
||||
import KomplexHub.Controls
|
||||
import KomplexHub.Kero
|
||||
import KomplexHubContent
|
||||
|
||||
Rectangle {
|
||||
property MenuButton currentMenuButton
|
||||
@@ -78,6 +79,7 @@ Rectangle {
|
||||
currentMenuButton = this
|
||||
|
||||
searchContainer.preferredHeight = 50
|
||||
// searchContainer.searchTerm = (pageLoader.page as ImageSearchPage).query
|
||||
}
|
||||
}
|
||||
|
||||
@@ -99,6 +101,7 @@ Rectangle {
|
||||
currentMenuButton = this
|
||||
|
||||
searchContainer.preferredHeight = 50
|
||||
// searchContainer.searchTerm = pageLoader.page.query
|
||||
}
|
||||
}
|
||||
|
||||
@@ -176,6 +179,10 @@ Rectangle {
|
||||
|
||||
icon: "qrc:/images/icons/icons8-search.svg"
|
||||
|
||||
onSearchTermChanged: () => {
|
||||
pageLoader.setSearchTerm()
|
||||
}
|
||||
|
||||
Behavior on preferredHeight {
|
||||
NumberAnimation { duration: Constants.normalAnimationDuration }
|
||||
}
|
||||
@@ -212,34 +219,72 @@ Rectangle {
|
||||
|
||||
onFinished: () => {
|
||||
if(pageLoader.loading && pageLoader.opacity === 0)
|
||||
{
|
||||
pageLoader.loadPage()
|
||||
}
|
||||
else if(pageLoader.loading && pageLoader.opacity === 1)
|
||||
{
|
||||
pageLoader.loading = false
|
||||
pageLoader.updateSearchTerm();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function fadeOutPage() {
|
||||
function fadeOutPage()
|
||||
{
|
||||
pageLoaderAnimation.from = 1
|
||||
pageLoaderAnimation.to = 0
|
||||
pageLoaderAnimation.start()
|
||||
}
|
||||
|
||||
function fadeInPage() {
|
||||
function fadeInPage()
|
||||
{
|
||||
if(pageLoader.sourceComponent.status != Component.Ready)
|
||||
{
|
||||
return
|
||||
}
|
||||
|
||||
pageLoaderAnimation.from = 0
|
||||
pageLoaderAnimation.to = 1
|
||||
pageLoaderAnimation.start()
|
||||
}
|
||||
|
||||
function loadPage() {
|
||||
function loadPage()
|
||||
{
|
||||
sourceComponent = Qt.createComponent(page)
|
||||
|
||||
if(pageLoader.sourceComponent.status == Component.Ready)
|
||||
if(sourceComponent.status == Component.Ready)
|
||||
{
|
||||
fadeInPage()
|
||||
}
|
||||
else
|
||||
{
|
||||
statusChanged.connect(fadeInPage)
|
||||
}
|
||||
}
|
||||
|
||||
function updateSearchTerm()
|
||||
{
|
||||
if(isSearchPage())
|
||||
{
|
||||
searchContainer.searchTerm = pageLoader.item.query
|
||||
}
|
||||
}
|
||||
|
||||
function setSearchTerm()
|
||||
{
|
||||
if(isSearchPage())
|
||||
{
|
||||
pageLoader.item.query = searchContainer.searchTerm
|
||||
}
|
||||
}
|
||||
|
||||
function isSearchPage()
|
||||
{
|
||||
return (
|
||||
pageLoader.item instanceof ImageSearchPage ||
|
||||
pageLoader.item instanceof LiveSearchPage
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -48,7 +48,8 @@ Item {
|
||||
|
||||
Text {
|
||||
color: palette.text
|
||||
font.pixelSize: Constants.largeFont.pixelSize
|
||||
font.pixelSize: Constants.h3Font.pixelSize
|
||||
font.bold: true
|
||||
text: "Newest Wallpaper Packs"
|
||||
}
|
||||
|
||||
@@ -57,6 +58,7 @@ Item {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 256
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
Layout.leftMargin: Constants.largeMargin
|
||||
|
||||
Repeater {
|
||||
model: newestPacksModel
|
||||
@@ -104,7 +106,8 @@ Item {
|
||||
|
||||
Text {
|
||||
color: palette.text
|
||||
font.pixelSize: Constants.largeFont.pixelSize
|
||||
font.pixelSize: Constants.h3Font.pixelSize
|
||||
font.bold: true
|
||||
text: "Featured Images"
|
||||
}
|
||||
|
||||
@@ -113,6 +116,7 @@ Item {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 256
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
Layout.leftMargin: Constants.largeMargin
|
||||
|
||||
Repeater {
|
||||
model: featuredImagesModel
|
||||
@@ -159,7 +163,8 @@ Item {
|
||||
|
||||
Text {
|
||||
color: palette.text
|
||||
font.pixelSize: Constants.largeFont.pixelSize
|
||||
font.pixelSize: Constants.h3Font.pixelSize
|
||||
font.bold: true
|
||||
text: "Featured Videos"
|
||||
}
|
||||
|
||||
@@ -168,6 +173,7 @@ Item {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 256
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
Layout.leftMargin: Constants.largeMargin
|
||||
|
||||
Repeater {
|
||||
model: featuredVideosModel
|
||||
|
||||
@@ -1,16 +1,109 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
|
||||
import KomplexHub
|
||||
import KomplexHub.Controls
|
||||
import KomplexHub.Kero
|
||||
import KomplexHubPlugin
|
||||
|
||||
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 resultsPerPage: resultsPerRow * rows
|
||||
|
||||
Item {
|
||||
id: imageSearchPageRoot
|
||||
|
||||
SearchResultList {
|
||||
id: searchResultList
|
||||
ImageSearchModel
|
||||
{
|
||||
id: searchModel
|
||||
query: imageSearchPageRoot.query
|
||||
resultsPerPage: imageSearchPageRoot.resultsPerPage
|
||||
}
|
||||
|
||||
Rectangle
|
||||
{
|
||||
anchors.fill: parent
|
||||
color: palette.base
|
||||
|
||||
ScrollView
|
||||
{
|
||||
id: resultsView
|
||||
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
|
||||
|
||||
anchors.margins: Constants.largeMargin
|
||||
columns: imageSearchPageRoot.resultsPerRow
|
||||
|
||||
Repeater {
|
||||
model: searchModel
|
||||
|
||||
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
|
||||
|
||||
SearchResultItem
|
||||
{
|
||||
anchors.fill: parent
|
||||
title: parent.author
|
||||
author: qsTr("Pexels Images")
|
||||
description: parent.description
|
||||
thumbnail: parent.thumbnail
|
||||
uuid: parent.uuid
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
id: buttonBoxLayout
|
||||
height: 50
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.bottom: parent.bottom
|
||||
|
||||
SquareButton {
|
||||
Layout.fillHeight: true
|
||||
Layout.preferredWidth: 128
|
||||
|
||||
icon.source: "qrc:/images/icons/icons8-back.svg"
|
||||
icon.height: 16
|
||||
icon.width: 16
|
||||
text: qsTr("Previous")
|
||||
enabled: searchModel.hasPreviousPage
|
||||
}
|
||||
|
||||
Item { Layout.fillWidth: true }
|
||||
|
||||
SquareButton {
|
||||
Layout.fillHeight: true
|
||||
Layout.preferredWidth: 128
|
||||
|
||||
icon.source: "qrc:/images/icons/icons8-next.svg"
|
||||
icon.height: 16
|
||||
icon.width: 16
|
||||
text: qsTr("Next")
|
||||
enabled: searchModel.hasNextPage
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
KeroErrorAvatar {
|
||||
@@ -37,39 +130,49 @@ Item {
|
||||
states: [
|
||||
State {
|
||||
name: "loading"
|
||||
when: searchResultList.state === "loading"
|
||||
when: searchModel.state == ImageSearchModel.Loading
|
||||
|
||||
PropertyChanges {
|
||||
PropertyChanges
|
||||
{
|
||||
target: loadingOverlay
|
||||
opacity: 1
|
||||
}
|
||||
PropertyChanges {
|
||||
PropertyChanges
|
||||
{
|
||||
target: resultsView
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "empty"
|
||||
when: searchResultList.state === "empty"
|
||||
when: searchModel.totalResults === 0
|
||||
|
||||
PropertyChanges {
|
||||
PropertyChanges
|
||||
{
|
||||
target: noResultsOverlay
|
||||
opacity: 1
|
||||
}
|
||||
PropertyChanges {
|
||||
PropertyChanges
|
||||
{
|
||||
target: resultsView
|
||||
opacity: 0
|
||||
}
|
||||
PropertyChanges {
|
||||
target: buttonBoxLayout
|
||||
visible: false
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "error"
|
||||
when: searchResultList.state === "error"
|
||||
when: searchModel.state == ImageSearchModel.Error
|
||||
|
||||
PropertyChanges {
|
||||
PropertyChanges
|
||||
{
|
||||
target: errorOverlay
|
||||
opacity: 1
|
||||
}
|
||||
PropertyChanges {
|
||||
PropertyChanges
|
||||
{
|
||||
target: resultsView
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user