status-qml/sandbox/demoapp/StatusAppCommunitiesPortalView.qml

import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13

import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Layout 0.1
import StatusQ.Components 0.1

import "../demoapp/data" 1.0

StatusSectionLayout {
    id: root

    QtObject {
        id: d

        property ListModel featuredCommunitiesModel: Models.featuredCommunitiesModel
        property ListModel popularCommunitiesModel: Models.curatedCommunitiesModel
        property ListModel tagsModel: Models.tagsModel

        property string searchText: ""
        property int layoutVMargin: 70
        property int layoutHMargin: 64
        property int titlePixelSize: 28
        property int subtitlePixelSize: 17
        property int stylePadding: 16

        function navigateToCommunity(communityId) {
            console.info("Clicked community ID: " + communityId)
        }
    }
    centerPanel: Item {
        anchors.fill: parent
        clip: true
        StatusScrollView {
            anchors.fill: parent
            contentHeight: column.height + d.layoutVMargin
            contentWidth: column.width + d.layoutHMargin

            ColumnLayout {
                id: column
                spacing: 18

                StatusBaseText {
                    Layout.topMargin: d.layoutVMargin
                    Layout.leftMargin: d.layoutHMargin
                    text: qsTr("Find community")
                    font.weight: Font.Bold
                    font.pixelSize: d.titlePixelSize
                    color: Theme.palette.directColor1
                }

                // Tags definition - Now hidden - Out of scope
                // TODO: Replace by `StatusListItemTagRow`
                Row {
                    visible: d.tagsModel.count > 0
                    Layout.leftMargin: d.layoutHMargin
                    Layout.rightMargin: d.layoutHMargin
                    width: 1234 // by design
                    spacing: d.stylePadding/2

                    Repeater {
                        model: d.tagsModel
                        delegate: StatusListItemTag {
                            border.color: Theme.palette.baseColor2
                            color: "transparent"
                            height: 32
                            radius: 36
                            closeButtonVisible: false
                            asset.emoji: model.emoji
                            asset.height: 32
                            asset.width: asset.height
                            asset.color: "transparent"
                            asset.isLetterIdenticon: true
                            title: model.name
                            titleText.font.pixelSize: 15
                            titleText.color: Theme.palette.primaryColor1
                        }
                    }
                }

                StatusBaseText {
                    Layout.leftMargin: d.layoutHMargin
                    Layout.topMargin: 20
                    text: qsTr("Featured")
                    font.weight: Font.Bold
                    font.pixelSize: d.subtitlePixelSize
                    color: Theme.palette.directColor1
                }

                GridLayout {
                    id: featuredGrid
                    Layout.leftMargin: d.layoutHMargin
                    columns: 3
                    columnSpacing: d.stylePadding
                    rowSpacing: d.stylePadding

                    Repeater {
                        model: d.featuredCommunitiesModel
                        delegate: StatusCommunityCard {
                            locale: "es"
                            communityId: model.communityId
                            loaded: model.available
                            logo: model.logo
                            name: model.name
                            description: model.description
                            members: model.members
                            popularity: model.popularity
                            communityColor: model.communityColor
                            categories: ListModel {
                                ListElement { name: "sport"; emoji: "🎾"}
                                ListElement { name: "food"; emoji: "🥑"}
                                ListElement { name: "privacy"; emoji: "👻"}
                            }

                            onClicked: { d.navigateToCommunity(communityId) }
                        }
                    }
                }

                StatusBaseText {
                    Layout.leftMargin: d.layoutHMargin
                    Layout.topMargin: 20
                    text: qsTr("Popular")
                    font.weight: Font.Bold
                    font.pixelSize: d.subtitlePixelSize
                    color: Theme.palette.directColor1
                }

                GridLayout {
                    Layout.leftMargin: d.layoutHMargin
                    columns: 3
                    columnSpacing: d.stylePadding
                    rowSpacing: d.stylePadding

                    Repeater {
                        model: d.popularCommunitiesModel
                        delegate: StatusCommunityCard {
                            locale: "es"
                            communityId: model.communityId
                            loaded: model.available
                            logo: model.logo
                            name: model.name
                            description: model.description
                            members: model.members
                            activeUsers: model.activeUsers
                            popularity: model.popularity
                            tokenLogo: model.tokenLogo
                            isPrivate: model.isPrivate
                            banner: model.banner

                            onClicked: { d.navigateToCommunity(communityId) }
                        }
                    }
                }
            }
        }
    }
}