General update
This commit is contained in:
Digital Artifex
@@ -14,5 +14,7 @@ qt6_add_qml_module(KomplexHubModule_Controls
|
||||
"Throbber.qml"
|
||||
"SearchResultItem.qml"
|
||||
"SearchResultList.qml"
|
||||
QML_FILES PaginationBox.qml
|
||||
QML_FILES PaginatorGrid.qml
|
||||
)
|
||||
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Controls
|
||||
|
||||
import KomplexHub
|
||||
|
||||
Item
|
||||
{
|
||||
id: itemRoot
|
||||
|
||||
property int page: 0
|
||||
property int totalPages: 0
|
||||
|
||||
property bool enablePrevious: false
|
||||
property bool enableNext: false
|
||||
|
||||
signal next
|
||||
signal previous
|
||||
|
||||
RowLayout
|
||||
{
|
||||
id: buttonBoxLayout
|
||||
anchors.fill: parent
|
||||
|
||||
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: itemRoot.enablePrevious
|
||||
|
||||
onTriggered: () => itemRoot.previous()
|
||||
}
|
||||
|
||||
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: itemRoot.enableNext
|
||||
|
||||
onTriggered: () => itemRoot.next()
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,384 @@
|
||||
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: (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
|
||||
property bool loading: false
|
||||
|
||||
property var model
|
||||
|
||||
property Component delegate
|
||||
|
||||
id: rootItem
|
||||
|
||||
KeroErrorAvatar
|
||||
{
|
||||
id: errorOverlay
|
||||
|
||||
anchors.fill: parent
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
KeroNoResultsAvatar
|
||||
{
|
||||
id: noResultsOverlay
|
||||
|
||||
anchors.fill: parent
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
KeroChoiceAvatar
|
||||
{
|
||||
id: noSearchOverlay
|
||||
|
||||
title: qsTr("No Search Term")
|
||||
description: qsTr("Kero needs a subject or term to search for wallpapers")
|
||||
|
||||
anchors.fill: parent
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
KeroLoadingAnimation
|
||||
{
|
||||
id: loadingOverlay
|
||||
|
||||
anchors.fill: parent
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
Rectangle
|
||||
{
|
||||
id: resultsContainer
|
||||
anchors.fill: parent
|
||||
color: palette.base
|
||||
|
||||
RowLayout
|
||||
{
|
||||
anchors.fill: parent
|
||||
anchors.margins: Constants.largeMargin
|
||||
|
||||
Item
|
||||
{
|
||||
Layout.fillHeight: true
|
||||
Layout.preferredWidth: emptyWidth / 2
|
||||
Layout.maximumWidth: emptyWidth / 2
|
||||
}
|
||||
|
||||
GridView
|
||||
{
|
||||
id: resultsView
|
||||
Layout.fillHeight: true
|
||||
Layout.fillWidth: true
|
||||
|
||||
cellWidth: 256 + Constants.mediumMargin
|
||||
cellHeight: 245 + Constants.mediumMargin
|
||||
focus: true
|
||||
model: rootItem.model
|
||||
|
||||
delegate: rootItem.delegate
|
||||
|
||||
add: Transition
|
||||
{
|
||||
NumberAnimation
|
||||
{
|
||||
properties: "x"
|
||||
from: resultsContainer.width
|
||||
duration: 250
|
||||
}
|
||||
NumberAnimation
|
||||
{
|
||||
properties: "opacity,scale"
|
||||
to: 1.0
|
||||
duration: 500
|
||||
}
|
||||
}
|
||||
|
||||
move: Transition
|
||||
{
|
||||
NumberAnimation
|
||||
{
|
||||
properties: "x,y"
|
||||
duration: 250
|
||||
}
|
||||
}
|
||||
|
||||
populate: Transition
|
||||
{
|
||||
NumberAnimation
|
||||
{
|
||||
properties: "opacity,scale"
|
||||
to: 1.0
|
||||
duration: 500
|
||||
}
|
||||
}
|
||||
|
||||
remove: Transition
|
||||
{
|
||||
NumberAnimation
|
||||
{
|
||||
properties: "x"
|
||||
to: 0
|
||||
duration: 250
|
||||
}
|
||||
NumberAnimation
|
||||
{
|
||||
properties: "opacity"
|
||||
to: 0
|
||||
duration: 250
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
PaginationBox
|
||||
{
|
||||
height: 35
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.margins: Constants.largeMargin
|
||||
|
||||
onNext: () => model.nextPage()
|
||||
onPrevious: () => model.previousPage()
|
||||
|
||||
enablePrevious: model.hasPreviousPage
|
||||
enableNext: model.hasNextPage
|
||||
}
|
||||
}
|
||||
|
||||
states: [
|
||||
State
|
||||
{
|
||||
name: "loading"
|
||||
when: loading
|
||||
|
||||
PropertyChanges
|
||||
{
|
||||
target: loadingOverlay
|
||||
opacity: 1
|
||||
}
|
||||
PropertyChanges
|
||||
{
|
||||
target: resultsContainer
|
||||
opacity: 0
|
||||
}
|
||||
PropertyChanges
|
||||
{
|
||||
target: noSearchOverlay
|
||||
opacity: 0
|
||||
}
|
||||
PropertyChanges
|
||||
{
|
||||
target: errorOverlay
|
||||
opacity: 0
|
||||
}
|
||||
PropertyChanges
|
||||
{
|
||||
target: buttonBoxLayout
|
||||
visible: false
|
||||
}
|
||||
},
|
||||
State
|
||||
{
|
||||
name: "empty"
|
||||
when: model.totalResults === 0 && model.query.length > 0
|
||||
|
||||
PropertyChanges
|
||||
{
|
||||
target: noResultsOverlay
|
||||
opacity: 1
|
||||
}
|
||||
PropertyChanges
|
||||
{
|
||||
target: noSearchOverlay
|
||||
opacity: 0
|
||||
}
|
||||
PropertyChanges
|
||||
{
|
||||
target: resultsContainer
|
||||
opacity: 0
|
||||
}
|
||||
PropertyChanges
|
||||
{
|
||||
target: buttonBoxLayout
|
||||
visible: false
|
||||
}
|
||||
},
|
||||
State
|
||||
{
|
||||
name: "nosearch"
|
||||
when: model.query.length === 0
|
||||
|
||||
PropertyChanges
|
||||
{
|
||||
target: noResultsOverlay
|
||||
opacity: 0
|
||||
}
|
||||
PropertyChanges
|
||||
{
|
||||
target: noSearchOverlay
|
||||
opacity: 1
|
||||
}
|
||||
PropertyChanges
|
||||
{
|
||||
target: resultsContainer
|
||||
opacity: 0
|
||||
}
|
||||
PropertyChanges
|
||||
{
|
||||
target: buttonBoxLayout
|
||||
visible: false
|
||||
}
|
||||
},
|
||||
State
|
||||
{
|
||||
name: "idle"
|
||||
when: model.totalResults !== 0 && !loading
|
||||
|
||||
PropertyChanges
|
||||
{
|
||||
target: loadingOverlay
|
||||
opacity: 0.0
|
||||
}
|
||||
PropertyChanges
|
||||
{
|
||||
target: resultsContainer
|
||||
opacity: 1.0
|
||||
}
|
||||
PropertyChanges
|
||||
{
|
||||
target: buttonBoxLayout
|
||||
visible: true
|
||||
}
|
||||
},
|
||||
State
|
||||
{
|
||||
name: "error"
|
||||
when: model.errorString.length > 0
|
||||
|
||||
PropertyChanges
|
||||
{
|
||||
target: errorOverlay
|
||||
opacity: 1.0
|
||||
}
|
||||
PropertyChanges
|
||||
{
|
||||
target: resultsContainer
|
||||
opacity: 0.0
|
||||
}
|
||||
PropertyChanges
|
||||
{
|
||||
target: noSearchOverlay
|
||||
opacity: 0.0
|
||||
}
|
||||
PropertyChanges
|
||||
{
|
||||
target: noResultsOverlay
|
||||
opacity: 0.0
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
transitions: [
|
||||
Transition
|
||||
{
|
||||
from: "empty"
|
||||
to: "loading"
|
||||
NumberAnimation
|
||||
{
|
||||
target: noResultsOverlay
|
||||
duration: 250
|
||||
property: "opacity";
|
||||
}
|
||||
NumberAnimation
|
||||
{
|
||||
target: loadingOverlay
|
||||
duration: 250
|
||||
property: "opacity";
|
||||
}
|
||||
},
|
||||
Transition
|
||||
{
|
||||
from: "nosearch"
|
||||
to: "loading"
|
||||
NumberAnimation
|
||||
{
|
||||
target: noSearchOverlay
|
||||
duration: 250
|
||||
property: "opacity";
|
||||
}
|
||||
NumberAnimation
|
||||
{
|
||||
target: loadingOverlay
|
||||
duration: 250
|
||||
property: "opacity";
|
||||
}
|
||||
},
|
||||
Transition
|
||||
{
|
||||
from: "loading"
|
||||
to: "nosearch"
|
||||
NumberAnimation
|
||||
{
|
||||
target: noSearchOverlay
|
||||
duration: 250
|
||||
property: "opacity";
|
||||
}
|
||||
NumberAnimation
|
||||
{
|
||||
target: loadingOverlay
|
||||
duration: 250
|
||||
property: "opacity";
|
||||
}
|
||||
},
|
||||
Transition
|
||||
{
|
||||
from: "loading"
|
||||
to: "empty"
|
||||
NumberAnimation
|
||||
{
|
||||
target: noResultsOverlay
|
||||
duration: 250
|
||||
property: "opacity";
|
||||
}
|
||||
NumberAnimation
|
||||
{
|
||||
target: loadingOverlay
|
||||
duration: 250
|
||||
property: "opacity";
|
||||
}
|
||||
},
|
||||
Transition
|
||||
{
|
||||
from: "loading"
|
||||
to: "idle"
|
||||
NumberAnimation
|
||||
{
|
||||
target: loadingOverlay
|
||||
duration: 250
|
||||
property: "opacity";
|
||||
}
|
||||
NumberAnimation
|
||||
{
|
||||
target: resultsView
|
||||
duration: 250
|
||||
property: "opacity";
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -2,13 +2,16 @@ import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
|
||||
import KomplexHub
|
||||
|
||||
Item {
|
||||
property string author: "Author"
|
||||
property string description: "This is a description of the search result item"
|
||||
property string title: "Wallpaper Title"
|
||||
property string author: ""
|
||||
property string description: ""
|
||||
property string title: ""
|
||||
property string thumbnail: ""
|
||||
property string uuid: ""
|
||||
property bool selected: false
|
||||
property bool pexels: false
|
||||
|
||||
signal triggered
|
||||
|
||||
@@ -48,6 +51,22 @@ Item {
|
||||
id: thumnailImage
|
||||
source: searchResultItemRoot.thumbnail
|
||||
}
|
||||
|
||||
Image
|
||||
{
|
||||
antialiasing: true
|
||||
anchors.right: parent.right
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.margins: Constants.mediumMargin
|
||||
|
||||
width: 24
|
||||
height: 24
|
||||
transform: Image.PreserveAspectFit
|
||||
opacity: 0.5
|
||||
source: "qrc:/images/icons/pexels-icon-filled-256.svg"
|
||||
|
||||
visible: searchResultItemRoot.pexels
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
@@ -62,6 +81,8 @@ Item {
|
||||
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
|
||||
}
|
||||
|
||||
Item { Layout.fillHeight: true }
|
||||
|
||||
Text {
|
||||
color: palette.text
|
||||
font.pixelSize: 12
|
||||
@@ -70,6 +91,7 @@ Item {
|
||||
|
||||
Layout.alignment: Qt.AlignLeft | Qt.AlignBottom
|
||||
Layout.preferredWidth: 250
|
||||
visible: !searchResultItemRoot.pexels
|
||||
}
|
||||
|
||||
Text {
|
||||
@@ -88,6 +110,8 @@ Item {
|
||||
Layout.maximumWidth: 236
|
||||
Layout.bottomMargin: 3
|
||||
}
|
||||
|
||||
Item { Layout.fillHeight: true }
|
||||
}
|
||||
|
||||
Behavior on color {
|
||||
|
||||
Reference in New Issue
Block a user