status-desktop/ui/app/AppLayouts/CommunitiesPortal/views/CommunitiesGridView.qml

135 lines
3.3 KiB
QML
Raw Normal View History

import QtQuick 2.13
import QtQuick.Layouts 1.13
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
import StatusQ.Core.Utils 0.1
import utils 1.0
import SortFilterProxyModel 0.2
StatusScrollView {
id: root
property var locale
property var model
property bool searchLayout: false
readonly property bool isEmpty: !featuredRepeater.count && !popularRepeater.count
signal cardClicked(string communityId)
clip: false
QtObject {
id: d
// values from the design
readonly property int scrollViewTopMargin: 20
readonly property int subtitlePixelSize: 17
}
SortFilterProxyModel {
id: featuredModel
sourceModel: root.model
filters: ValueFilter {
roleName: "featured"
value: true
}
}
SortFilterProxyModel {
id: popularModel
sourceModel: root.model
filters: ValueFilter {
roleName: "featured"
value: false
}
}
Component {
id: communityCardDelegate
StatusCommunityCard {
readonly property string tags: model.tags
JSONListModel {
id: tagsJson
json: tags
}
locale: root.locale
communityId: model.id
loaded: model.available
logo: model.icon
banner: model.banner
communityColor: model.color
name: model.name
description: model.description
members: model.members
popularity: model.popularity
categories: tagsJson.model
onClicked: root.cardClicked(communityId)
}
}
ColumnLayout {
id: contentColumn
StatusBaseText {
id: featuredLabel
visible: !root.searchLayout && featuredRepeater.count
Layout.topMargin: d.scrollViewTopMargin
text: qsTr("Featured")
font.weight: Font.Bold
font.pixelSize: d.subtitlePixelSize
color: Theme.palette.directColor1
}
GridLayout {
Layout.topMargin: root.searchLayout
? featuredLabel.height + contentColumn.spacing + featuredLabel.Layout.topMargin
: 0
columns: 3
columnSpacing: Style.current.padding
rowSpacing: Style.current.padding
visible: featuredRepeater.count
Repeater {
id: featuredRepeater
model: root.searchLayout ? root.model : featuredModel
delegate: communityCardDelegate
}
}
StatusBaseText {
visible: !root.searchLayout && popularRepeater.count
Layout.topMargin: 20
text: qsTr("Popular")
font.weight: Font.Bold
font.pixelSize: d.subtitlePixelSize
color: Theme.palette.directColor1
}
GridLayout {
visible: !root.searchLayout
columns: 3
columnSpacing: Style.current.padding
rowSpacing: Style.current.padding
Repeater {
id: popularRepeater
model: popularModel
delegate: communityCardDelegate
}
}
}
}