Digital Artifex
182 lines
4.6 KiB
QML
182 lines
4.6 KiB
QML
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
|
|
|
|
id: imageSearchPageRoot
|
|
|
|
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 {
|
|
id: errorOverlay
|
|
|
|
anchors.fill: parent
|
|
opacity: 0
|
|
}
|
|
|
|
KeroNoResultsAvatar {
|
|
id: noResultsOverlay
|
|
|
|
anchors.fill: parent
|
|
opacity: 0
|
|
}
|
|
|
|
KeroLoadingAnimation {
|
|
id: loadingOverlay
|
|
|
|
anchors.fill: parent
|
|
opacity: 0
|
|
}
|
|
|
|
states: [
|
|
State {
|
|
name: "loading"
|
|
when: searchModel.state == ImageSearchModel.Loading
|
|
|
|
PropertyChanges
|
|
{
|
|
target: loadingOverlay
|
|
opacity: 1
|
|
}
|
|
PropertyChanges
|
|
{
|
|
target: resultsView
|
|
opacity: 0
|
|
}
|
|
},
|
|
State {
|
|
name: "empty"
|
|
when: searchModel.totalResults === 0
|
|
|
|
PropertyChanges
|
|
{
|
|
target: noResultsOverlay
|
|
opacity: 1
|
|
}
|
|
PropertyChanges
|
|
{
|
|
target: resultsView
|
|
opacity: 0
|
|
}
|
|
PropertyChanges {
|
|
target: buttonBoxLayout
|
|
visible: false
|
|
}
|
|
},
|
|
State {
|
|
name: "error"
|
|
when: searchModel.state == ImageSearchModel.Error
|
|
|
|
PropertyChanges
|
|
{
|
|
target: errorOverlay
|
|
opacity: 1
|
|
}
|
|
PropertyChanges
|
|
{
|
|
target: resultsView
|
|
opacity: 0
|
|
}
|
|
}
|
|
]
|
|
}
|