diff --git a/ui/app/AppLayouts/CommunitiesPortal/CommunitiesPortalLayout.qml b/ui/app/AppLayouts/CommunitiesPortal/CommunitiesPortalLayout.qml index b051fc9edd..493e672e44 100644 --- a/ui/app/AppLayouts/CommunitiesPortal/CommunitiesPortalLayout.qml +++ b/ui/app/AppLayouts/CommunitiesPortal/CommunitiesPortalLayout.qml @@ -1,5 +1,4 @@ import QtQuick 2.13 -import QtQuick.Controls 2.13 import QtQuick.Layouts 1.13 import StatusQ.Core 0.1 @@ -11,12 +10,16 @@ import StatusQ.Popups.Dialog 0.1 import StatusQ.Layout 0.1 import utils 1.0 +import shared.controls 1.0 import shared.popups 1.0 import shared.panels 1.0 +import SortFilterProxyModel 0.2 + import "controls" import "stores" import "popups" +import "views" StatusSectionLayout { id: root @@ -30,165 +33,133 @@ StatusSectionLayout { notificationCount: root.communitiesStore.unreadNotificationsCount onNotificationButtonClicked: Global.openActivityCenterPopup() + onVisibleChanged: { + if(visible) + searcher.input.edit.forceActiveFocus() + } + QtObject { id: d - property string searchText: "" - property int layoutVMargin: 70 - property int layoutHMargin: 64 - property int titlePixelSize: 28 - property int subtitlePixelSize: 17 + // values from the design + readonly property int layoutTopMargin: 10 + readonly property int layoutBottomMargin: 249 + readonly property int layoutHMargin: 64 + readonly property int layoutWidth: 1037 + readonly property int titlePixelSize: 28 + readonly property int preventShadowClipMargin: 40 + + readonly property bool searchMode: searcher.text.length > 0 function navigateToCommunity(communityId) { root.communitiesStore.setActiveCommunity(communityId) } } + SortFilterProxyModel { + id: searchModel + + sourceModel: root.communitiesStore.curatedCommunitiesModel + + filters: ExpressionFilter { + enabled: d.searchMode + expression: { + searcher.text + return name.toLowerCase().includes(searcher.text.toLowerCase()) + } + } + } + centerPanel: Item { - implicitWidth: parent.width - implicitHeight: parent.height + anchors.top: parent.top + anchors.bottom: parent.bottom anchors.left: parent.left + width: d.layoutWidth + + anchors.topMargin: d.layoutTopMargin anchors.leftMargin: d.layoutHMargin - clip: true - StatusScrollView { - contentHeight: column.height + d.layoutVMargin - contentWidth: root.contentPrefferedWidth - d.layoutHMargin + ColumnLayout { + id: column - ColumnLayout { - id: column - width: parent.availableWidth - height: childrenRect.height - spacing: 18 + anchors.fill: parent + spacing: 18 - StatusBaseText { - text: qsTr("Find community") - font.weight: Font.Bold - font.pixelSize: d.titlePixelSize - color: Theme.palette.directColor1 + StatusBaseText { + text: qsTr("Find community") + font.weight: Font.Bold + font.pixelSize: d.titlePixelSize + color: Theme.palette.directColor1 + } + + RowLayout { + Layout.fillWidth: true + Layout.preferredHeight: 38 + spacing: Style.current.bigPadding + + SearchBox { + id: searcher + implicitWidth: 327 + Layout.alignment: Qt.AlignVCenter + topPadding: 0 + bottomPadding: 0 + minimumHeight: 36 + maximumHeight: 36 } - RowLayout { - Layout.fillWidth: true + // Just a row filler to fit design + Item { Layout.fillWidth: true } + + StatusButton { + id: importBtn Layout.preferredHeight: 38 - spacing: Style.current.bigPadding + text: qsTr("Import using key") + verticalPadding: 0 + onClicked: Global.openPopup(importCommunitiesPopupComponent) + } - StatusInput { - id: searcher - implicitWidth: 327 - Layout.alignment: Qt.AlignVCenter - enabled: false // Out of scope - placeholderText: qsTr("Search") - input.asset.name: "search" - leftPadding: 0 - rightPadding: 0 - topPadding: 0 - bottomPadding: 0 - minimumHeight: 36 - maximumHeight: 36 - text: d.searchText - onTextChanged: { - console.warn("TODO: Community Cards searcher algorithm.") - // 1. Filter Community Cards by title, description or tags category. - // 2. Once some filter is applyed, update main tags row only showing the tags that are part of the categories of the filtered Community Cards. - } - } - - // Just a row filler to fit design - Item { Layout.fillWidth: true } - - StatusButton { - id: importBtn - Layout.fillHeight: true - text: qsTr("Import using key") - verticalPadding: 0 - onClicked: Global.openPopup(importCommunitiesPopupComponent) - } - - StatusButton { - id: createBtn - objectName: "createCommunityButton" - Layout.fillHeight: true - verticalPadding: 0 - text: qsTr("Create New Community") - onClicked: { - if (localAccountSensitiveSettings.isDiscordImportToolEnabled) { - Global.openPopup(chooseCommunityCreationTypePopupComponent) - } else { - Global.openPopup(createCommunitiesPopupComponent) - } + StatusButton { + id: createBtn + objectName: "createCommunityButton" + Layout.preferredHeight: 38 + verticalPadding: 0 + text: qsTr("Create New Community") + onClicked: { + if (localAccountSensitiveSettings.isDiscordImportToolEnabled) { + Global.openPopup(chooseCommunityCreationTypePopupComponent) + } else { + Global.openPopup(createCommunitiesPopupComponent) } } } + } - CommunityTagsRow { - tags: root.communitiesStore.communityTags - Layout.fillWidth: true - } + CommunityTagsRow { + tags: root.communitiesStore.communityTags + Layout.fillWidth: true + } - StatusBaseText { - Layout.topMargin: 20 - text: qsTr("Featured") - font.weight: Font.Bold - font.pixelSize: d.subtitlePixelSize - color: Theme.palette.directColor1 - } + Item { + Layout.fillWidth: true + Layout.fillHeight: true + Layout.leftMargin: -d.preventShadowClipMargin + Layout.rightMargin: -d.preventShadowClipMargin - GridLayout { - id: featuredGrid - columns: 3 - columnSpacing: Style.current.padding - rowSpacing: Style.current.padding + clip: true - Repeater { - model: root.communitiesStore.curatedCommunitiesModel - delegate: StatusCommunityCard { - visible: model.featured - locale: communitiesStore.locale - communityId: model.id - loaded: model.available - logo: model.icon - name: model.name - description: model.description - members: model.members - popularity: model.popularity - // categories: model.categories + CommunitiesGridView { + anchors.fill: parent + anchors.rightMargin: d.preventShadowClipMargin + anchors.leftMargin: d.preventShadowClipMargin - onClicked: { d.navigateToCommunity(communityId) } - } - } - } + padding: 0 + bottomPadding: d.layoutBottomMargin - StatusBaseText { - Layout.topMargin: 20 - text: qsTr("Popular") - font.weight: Font.Bold - font.pixelSize: d.subtitlePixelSize - color: Theme.palette.directColor1 - } + locale: communitiesStore.locale + model: searchModel + searchLayout: d.searchMode - GridLayout { - columns: 3 - columnSpacing: Style.current.padding - rowSpacing: Style.current.padding - - Repeater { - model: root.communitiesStore.curatedCommunitiesModel - delegate: StatusCommunityCard { - visible: !model.featured - locale: communitiesStore.locale - communityId: model.id - loaded: model.available - logo: model.icon - name: model.name - description: model.description - members: model.members - popularity: model.popularity - // categories: model.categories - - onClicked: { d.navigateToCommunity(communityId) } - } - } + onCardClicked: d.navigateToCommunity(communityId) } } } diff --git a/ui/app/AppLayouts/CommunitiesPortal/stores/CommunitiesPortalDummyModel.qml b/ui/app/AppLayouts/CommunitiesPortal/stores/CommunitiesPortalDummyModel.qml new file mode 100644 index 0000000000..3ee4e44056 --- /dev/null +++ b/ui/app/AppLayouts/CommunitiesPortal/stores/CommunitiesPortalDummyModel.qml @@ -0,0 +1,111 @@ +import QtQuick 2.14 + +ListModel { + ListElement { + featured: true + communityId: "id1" + loaded: true + icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAP/SURBVHgBzZndVdtAEIXvyhTgVIB8KACoAPPzHlIBogJMBRYVBFdgUQEUwI+pIOI9OTYVhLzHq9yRVkbYxpbWK8ffOToCIaEZ7d3ZmVkFB7SDYdPD+NRDYzcBfF7a49E0R85IDgXEGuMXjcZgELVGWBEFSzKjccF/0EZ22LxcnOmt4kxlBwqGd/DxC69KNAauqjpSyYGjYNitwfAPUILhY9S6Knt/KQf41f0t4DbJtL0ORhyNwzKj4S274fj89awB/Fij8YIv7zwOhqfLblzowEnw2kWiI9QomQXIO29Ftotu+lRCYnwCHWIDWDQv5jpwHPzk0DVusUkoL3job9/MXJ6+IBNW9If/I5tFvHFi709P7Jk5QOOfsHnGC02JhNMXPziQTtosFdhIJBIeBb/C4rWJhIx0hth8REotSulNftnKr9L4LmqCX05edgfoV/ldQfkJ1IGyG22mMlqygTD7X6j168d8weV91BrM+yNjfMBT18KRySikc4CpcBvO0b2HqLX/mfECY3ukmTKYEapCPgrZJFZoXMAhXACvHqKdTpl7TVi8REUUvIP0XIN8In758yoPmBR9qCqGb8roi+dSPkmWRZZOhXNEy6q6jJBVgVAOs0x9Y1tZJRaLJ6PZnkct7cIRGl4ECyihPWW1+itfJrEPN1jXtVyM+rBC7cpC5sMJ+gUVMQGkv0Kx1NyCIyjFhHlKx4O3rdM4jTcN/YfqHmkexXt5DyXjfcV7+8UWdw7wK3ZolJzT5T07Z7liA/WxJaugWuEryPM0s/c3zXUwypMsie08STOgqQsy5c8xHfoOy17SNIqFsyxiPqzQvTG8MDe6LMyBfis4qTlGIqEYFg5IV+2+ZLpQ5CQYthM4K5hGXmJS3KokFiuuee4MztAvlG8Sw4Jx1qythIRNngI4IoEXe2ys3mFNuC6aGBAGnpmAA1SE+fjSrlkRU28HcEcsK7+pB/CMijDGXxhJLKWOJhnnUk/OqQOM4dc2VZG0YLIm2HzEQYbppzo6fNqoZtKVYHgLE3uNDmjkMyYpg2qaVKGNepgUTZNUQkbBbFzYxOg2DW5jTRSLpkljy1T4PWw4Um8X0/aZ3ig1K33Rde4FlEZKVnYyWsVrM71RDs83iwldO0manuNw+vqMA7ZtjrqhVM7nVXxzd2ik4aQsc506yPpMrbkZw8JNvhVDqxPE+MdoJ/zs70t3KWWjjU70Fda7Z2Dm4aWoYdF9Sx0QZEWl1p4su8k2xBJMynQ5SjmQU7ek8vKUDeGw7DOVHBCyVkgS8lFnhUmhrr6uWp5WdiDHyIopBKSzbbvwDSQTtjE8x9qBIu/OaDqStip9FOaL6XyIgbHs0kglxUXpztboIv8AhiCFIFIIkjEAAAAASUVORK5CYII=" + name: "Status.im" + description: "Your portal to Web3. Secure wallet. dApp browser. Private messaging. All-in-one." + members: 34 + popularity: 4 + available: true + } + + ListElement { + featured: true + communityId: "id2" + loaded: true + icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAUySURBVHgB1VpLSCtLEC29gqL4X4gimiguxfhZ61X8LATxLdSNcnNRQUTEh4ob8UYEN27u2ykiLy5EcfXEDy7EiIgbF9eHCv4gefgX/KKI33pdnczcTJxJJjHReKCIU10zU6eruru6xwDwAhAxiv2UM8lgomGiYxJlEwEWm6wy+ZfJQkBAgAU+CuQ0kx9MTOg5fjHRM9HAe8HO8Qv0Lv72OREfOe6IH+BtUM+gNdzvBTN6KxrsQd/Q970uB3pnObwFaE2Zj4ZnKYX+4bwA90iwG8rR//BNztcAGec17OcXSBchf8Alk0zHxU+OgBmsq6k/YpURyLRXBNpfoDXXNOC/0DEfDfYKMQK21DGD/4NSScsiQb+SCHh/BfQNaGy2CBc8Ap70/tXVFZycnADrCYiLi4OIiAh4R4hRECLwVe2dU1NT0NraCtPT07C/vw8LCwuQmZkJsbGxkJWVBTqdDkwmE7cdHh6GhIQEiI+PF6WoqAgGBwehurqaX6enp0NVVRUsLS2BG5BEgSLgss55enrCuro6zM3Nxbu7O0nbw8MDdnR0ID2KZGRkRGzr7OwU9SRlZWVi28DAAAYGBoptzc3N/D0qYRKc16ixppeR+ezsrKJNQ0MDt+nv7xd1LEqKBAhtbW2S9t7eXnQDUURAr8YyJyeHv2BxcVHR5vz8HJOSkrCvr0/UXV5eOiWwu7sraWcphy8vL6gSehoDOlcJx8IKq6ur/O+hoSEiLWsXHR3N22mAq4VWq4WoqN+L/tHREdze3qq9XUcEMlxZEQHBaRqYJSUlsLm5KWtbWFjIB6pasDEAz8/P4jV1QmhoqNrbNbx0UBMrjUYjCTVJQUEBH7A0iJXgKoU2NjYk7TQm3IAZ1FrS4HIkIAhbB7C+vh63t7fRHQJnZ2eYn5/P9cHBwdx5Z50hgwvVBGh6a2xsVCRB8uXLFzQYDE4JZGRkYHd3N9bW1nLipKuoqECz2YyeQDUBAaOjo5iamuqUSE9PjyIBisDKygonK+gSExORDXz0BERA1X734kJqNjc3h+3t7bJjg9Jhb29PkQChqalJoqeF0FMCZjWGbHqU1bMZBMfGxjAlJUXikNFodEqA8p/NOBLSa2tr6CbMNI1aJ3gXmJiYAPaCV3qaBqmW2dragpqaGlH/+Pjo9HkxMTHQ0vK7nLm/vwe2kiuuMQqw0A0/1VAtLS3FvLw83uNKODg4QFYh8h6dn593GgECpaVjCtqv4irwU3UpQQToBV1dXYo2Nzc3nAA5JRA9Pj6WOFhcXCy5Z3JyUtIeEhKC6+vrqBJ64axTNQESKuzkMD4+jkFBQTgzMyPqaNaydzAyMhKvr68l97GVXWJD1yrrIQ1PJFRxwkwEWP2OaWlpGBYWhnq9Hlndz52hIo6cJ52QOoTl5WVMTk5+NUtVVlbyyAjY2dlBtiGS2NAs5Vi2O4BOTsQdmQFcbCkPDw/55oRAtQtbdcFiscDp6SmvXbKzs4HNRNIRxtqVwCLB6x4BbKy8KuJolxceHq70iO8sXY0CASoHzeB/Z0HOQFtKC99S2nb4f8HngVE44LI/VvlMUdAKBMRjlU8UhW7740W5o0Ua3S53aR8EC3Nea68IlDH6A6znLv4G8infUfmKgC08f4L/4btbn2VpbUD/gQE8AfoHCQO8BWj9WvNRH/n04A2g9fTOjO8HOurUgLeBvk8p6nUD+BJojYYRvQvuOFqrgfeBjQhtht7yBd/0VscDwAtAa75+BesKLvzLjcbO5NImtP/+z/b7j/CZ6C34H+drFRIBW7QeAAAAAElFTkSuQmCC" + name: "SuperRare" + description: "The future of CryptoArt markets—a network governed by artists, collectors and curators." + members: 34 + popularity: 4 + available: true + } + + ListElement { + featured: true + communityId: "id3" + loaded: true + icon: "data:image/png;base64,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" + name: "Coinbase" + description: "Jump start your crypto portfolio with the easiest place to buy and sell crypto." + members: 34 + popularity: 4 + available: true + } + + ListElement { + featured: false + communityId: "id4" + loaded: true + icon: "data:image/png;base64,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" + name: "Dragonereum" + description: "A community of cat lovers, meow!" + members: 34 + popularity: 4 + available: true + } + + ListElement { + featured: false + communityId: "id5" + loaded: true + icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAoCAYAAABjPNNTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALiSURBVHgB1ZhPTxNBGId/24IWYiIeNEUikkg1EtL2APRSYoKUNl5EvEhjgn4Ba3rxqEc92MgXUE/WE9GDxCKSEIkJcqnBQAyYkCqIxQChBLG1xX2n2dp/6u7sbFOepNnuzM7uk3fm3ZlZ6f7NF9ekPekRqhQJ0uMaCGZ96xsWv8zmzrvaeqEX4ZKfZMGnr0K586qTDMtyG1txiEao5MzcOIxAiGR4LISZeWMECV2SSpKsJ8R3cT66JIuTxChM4ISSRE0Xs+t0jlXuSKp9sHJdp45XkWZJJUkWnt8pqbNd/FN290Y/Lp93sv8jE1EEhy9g0BPkklXd3ZQk7+So2E7WYaAn+3CTuRY1dYfZkaDyrvaWkrZNxxpY3Y9UjN3DMEklSeynzbgX6M82PlgPy5HjMMtHgsqV6OXjksWpzmRa5Eo07jFpaWhEJp3C7sYKMsmdEiFXmYjywi1ZU9+AXzubSCa+F5QrXSsSbsntlXlUCtWSzc0n4Pf70Wp3wmJtAQ/nepNy2zZoRbWk292N7kvXoYehM30Yko8Pb7/V1E615NTUGzZ7UDTdbjcre//VjJcLtQXXORvT8NpSqI1EYI5GC+pSPh/SDge0oloyFvssSz7JCRKr2yZEiiQJkiRBEs0n7XRySap6T9Js8TM9wWYZT1Mca5MPUEl0rYKshzLwtaYKyhxydxMUNUhSQV3GagUPuiRJSJEqJuX1sp8IVEtOf1jCreFnGJCnPZpNEh/HoJWR11F2n46jVzW1Uy25HN9kqxlaQLjagd3VOWhlcnyU3aMjYIBkKDDK1oVhFYsDkqCIK5Rb0mlF+L67qubuv+Fiw6EFIuHe4+RT3MWiESI5PbvERI1CSHfTIpd++XschapLHNEJoyBUUtn7iEZ4dpdDGbN76VZc8fRAK0IS538sr2VnK8uBZq7vlUIiSa+ff2U3fRCgWYsXod3debZ8lE412aEHoZKDfUEYQUXGpF72heRvWCUEXU7sGx8AAAAASUVORK5CYII=" + name: "CryptPunks" + description: "A group chat full of our favorite thinkers and creators." + members: 34 + popularity: 4 + available: true + } + + ListElement { + featured: false + communityId: "id6" + loaded: true + icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAoCAYAAABjPNNTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAhZSURBVHgBnVhdaBzHHf/P7N7unXQXyYosXyI7smQ7tmNoIElbaG1sAsF1cf3Qh9YvpW4JlBJa0kKpIYQqfmofGuhH+lDIS4gIxND0A9pCSNWHfAfHsR1iW3JyURRbspLIOvtOd3u7O//89+t2Zm7vJPnQ6nbmZv7zm//nb4bBbX6mJ6fNPUdHD4Mh9jHku0HgOPqszAXk0Ic6eDDPuDHjO95lYxXfHDm2+wJjDOE2PmwjgycnJ/lPjn3/AM/xHyPHowzYEPgABAogfEiciN4xace/oYeXuMun/Bo/PfqDicsbWXfdIBcuzB4yLHEKEfcTEJYAQi8GKCJAKFRwELfTjWANXP481J3f3v3ofXPrWXtNkMsvfzjgjnp/AAN/GC4oJO1IINYFUG4LtgxN/uToo9v/shaGniCvv3/5fvKwl+h1HDQAKJk2BawCVEyeaFrpo8flLzRX/J/uOLmjumGQn707exCL/j9IOwOZvqYAlBb1ZW1Jbeld3wS5zDus4X136693fbpukEtnrnwL+70pQBhSfE/XplAXjcBh+G3d2QfcMKC10AC/6ataztK8z85hzXh42+S2ZR2PqXfMvX1+QhS855jQAbIeC0CHeYu7BiG3yQZsITjXmtBaakLz4zoIx0/nBxuLZVPf/WDhFAJ+m7IGdtUkTqO5NDLzHr3uay+sA1xHcBi5HAwf2QrMTMWHGm7R33UHmpVVaFwKAAuSzxT5QsCpscmx38i4uNy4PjTzFJl4X7g7etCNAblxOxAYPtB+gj50k3b0uyDtoavmbWaQfgoM7O156H9gIJyTJY+77InZx2cfyAS5SGZmnP0sAScLQD9pgwQ47gs3EgHEuN8s5YHZ3ROH91kLRDOQJQNkiQwyRO5pysesA6TB87+iqlDCYKLPJE2ButsoGqO+xAdjgMl7YVsf0Ia7gqy/W49lpRtMlBG0uWfsr/x8/hEF5MIble302/FUK5BO6gZQ+lb6gsjeku8KkNwJ3EVX114soy3HMAT7pQKS++5hAjeYaDD0M91f2gATLcrC03HWUB64zRVQ8iMaAvwVD9K1INWquulDlRNL5TZIDLTogxQcoPhKGhwsQ3uqa9ijhUhqAkz7OPNO5IuuVPdD39Y27YLNmXMsBDk9PU25kn0NdYBSMEDb36SA0cBFVYeDfXcBmMUyzRykJ3fejcfHcl3JHxW3CeQaR4Kp5kRj870UR30dFUEqe13rrpbYrWGL9svSoNE0SYEJ3nVPKY86SUnlBm3x1RBkjtsPqpWDpSVQ6MK0qqP12WP9wHIaOFRBOhWnnRnaAMOEDh1Vi95HZo/M2iblozJzmTQgQ3u96i7NI2YOhb39YG2zKZexTF8MxolVCpovhKQElmYTjN1IsiDzeY7lSwMm7YKYQCfnyyyBGaQiN2xD/1dKYA6aYekzS4Zm4/iLKpC75KbBojCr7mW2iFA0Qw2KDO1lmVdqG3kT+vYWwRrLR4KJBljlnAoMU5UGG/AW/DQIE24g0kBRSXH07lCmMCmCaiy0Ra/gSHdNYQGFnUXI31uICARpyLjDBGPQ6ACmKJS6zWEzrVSiU4NqO3pvDeItk/m4AMg6oyzDtBaZtrCvBEbRiH2IzL05B7yPZ6DS3mk+D1zB62HeJFiTwBLMq3706YrJa+I9EVSIHsHBbQP67iuROe1oQYrSIECsuyw1J2IPkDQnONGip1pJN68c9Sjw2kNnHnJ5+ZOdM8xjNYV+JSb3osi94+ubwBqxInBeZF57qx0BxFRTeglMHmxE1K1xztEKBVOrjrI2OZaPZ4M9cjbJPCp5Z5XKIWX9/BgFv8UjuhYQ2qEcmENmRJdlYKCBE1FEi1uUdij1BABv/r0eacpl2TVbIjcRY+f/CsSGxwfRgufpduGAboYwivvN+NxCPnmPDbzAVVCaH4bAmsF4DMlv60oL6q81wfmgFWkv8UeEdhLHrGJCycC1jP+0QXrI/mn57PfkA8XUTyJhAWsJyEUATgGogcRkbAvDfqfSgurpGvhLfsYRQ47w5DfyWSGNoZucPa9tvhaaO/g3/tj4IgF5TmY9iSmCMhbsjOcN1c8wSjdC0FMnk1bpgOVguPCt/9bgxl+rEUAfVN9TiEpqauZrxxABv0sU0M4duTp/moQ5OlXzljxYPUv3T8QBSdMhsPDxSWtkVlEVkXkJnLfsw/KzVai90iDAnRtWaJ6v0j6UjyEA/9txtvxKB8gtT97zIfnQUzLJTTieM+tA9d/VMAhEDcMHq/S9im2zNc414Ys/rYBzqSXxUEkzGl8MD2ouaFQwiGiGromPS06lnhbtauGPNPh8TDoVjucvkpZeWAH/RmTWJJeJmoCVv92ElalbIG6KNLVIc7P5YueYcC5jp/aeKV+QcXWw07mTcxN0MXCGRg8qvC8pi5Q3zbuM0Ee9zz3wF4Ryu4EZGSKtXJiZvJNAIir6//GLmx/ueTmQfOZ/MX9QIL5E0bYpq1xm1dlMFpVVWeQx8lhgF3NW7ptjFwZv6HgyQYYafezqIxS6p2n2AEg8r4O16CTZy6Z5yoWVBDIAzji87gn+vd0zw1ezsPBuIMeeGX3Z81sH6Gqukp5lWHoZoJy3IQ2ORIOeBFAODj3KGbzYKC8d7gawpyaTT+VEZZD51p8p6o5TwjXW9r20T28rcwGqaPAndl0cfmYtDGuCbIM9vnCIe3iKdr8fw+togJ63vvomUr7a4Ca8yIpwcvydkcX1rL1ukG2w31k4SL76I1r4KD136hf4ai2OWRLlPpozR81nRQmm9rxdrmxgyY2DbIM9Ucmza6VvCNd9kLl8p0Cxi7JBWfiQoxRWI7BXueBXqGzOsAK8OvHWlvNwm58vAfPw1Ad4zHknAAAAAElFTkSuQmCC" + name: "Socks" + description: "A community of P2P crypto trades." + members: 34 + popularity: 4 + available: true + } + + ListElement { + featured: false + communityId: "id7" + loaded: true + icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAARRSURBVHgB1ZpNiBxFFMf/r6olxM1hEKJEicz6kWW97A54yUGcIDkKiSJ+XDZBDCJoshdPwk5U8KauKHhRN3jMIasXUdRsRNSTOznJqpgJURMSCJPvbHaqXl71bCcz07093TOd2Z4fDDNdXVP9XtV7Va9eNSEDeBEFM4JdGt4EmItSMsmKCmAUgjrEXANRTX5VDfj4ijELG8dRQ58QesQJjU1qP5jKDJTRAwQWZWi2H2VSKxAIzqADrT3cLyLI3HVjDqZVJJUC/JeayVrwToi4Qo/ag4nrJ6nEf6DI2jvibBuDobZszI4ko6G6VeC/9RR7enGAwjuKG7RebCzpXd0qxirgm4zF3J00mRgKinDEyRBXaU0T8oVnqiAHxPlFpAJu6Jz2yBHE2ENj5lCovLPAd1hn8+tjNnHUxbFLnY4d8gHW+mgOhXcUNmgVsoo2BVYdpojcQpNmSVXaSoIfzblen0D+qdMVM0ol1N3F7RHQegbDQcHerQ4EF/4IDFHvB9waBc9dGa3LXZfkVQ5/w/juZ0Y/aHnYphFg6xag9BjhicdJ5vpUTayOgq34CihiFxYn+ucvvzM+O9yfAu0wig8Ab+5TePXF5FoQ0ZPuWznzEeEHGeeEqP0HvDZj8fGXqTqm7EJ75cwHOeGdTyxsCh3MiB8x8Lr2fivnzgOn/k9enyxPego0kZVFvztN2L0z3o4bDeDQPOP9z6OfeqPhypP5grh+UZzYbcJ73hq3seVeYPyR7m299DQiFdh8D/DQ1hSyKEx4skUsIiO+/gH494ztWu/bn6J7f/8U+VNsCgoeMuSr71k+SM19m4G33yC88nw66eE2PcgB164Bp8/1Zsbiw82gaD25eBmofGTx1gfdza8TTzJmdfGDTOL/B+9vhgdx/HNKevts9L33PmXse0Ha6dJGCzVP1uSqW82RATOvE/Y+G2+VV8Rcdk5Z/FYNOzJL0Y+/Wux5JrFl15RlPokBMrIReGr72vcvXEJi2PJxJU5QxYDxMpr7JGtSVbjLzGNIWYFZUDTqz0ILGDJcZttlKPzBZOZjEl+Xk/xxe4lw+Wr0Spo0DHCbmJefi25j/OFkbRhDs+67uaU8gQI3ZEuZz3RKJJIjGnUj4M9XzozEo2cxJLizhCDBdTutMkSjEPS++31rxRiWUZCps+0UJ+Qx9k+16DJgyCNyUKjG7GhrUWjNJmN35yHAC8P1ZWt3dJaGFZDhsQ1MI2dYpr1RR06RUZM3buacrSEnOFm8seiIIXbVMEteRU5H1jVn6oTXY43KWve7Lnv+aY3CF4OfXrluoae9bStzcbWSH7MqdVT2DkUMBK4uy2SSyTGrwzm2m77uvF/I7lCeobbZUtIT+/SvGshoWKXFNzCFzHCCq1l1tfFhcHCRlN5f9hBFDCQtryWz3fvCtyA9fqwXwQMySckFykhIPkmKm6/ctPkL12USqEsev8qGTkr4XtXXzXyvQrdyE+WOr+82cauTAAAAAElFTkSuQmCC" + name: "Rarible" + description: "Multichain community-centric NFT marketplace. Create, sell and collect NFTs." + members: 34 + popularity: 4 + available: true + } + + ListElement { + featured: false + communityId: "id8" + loaded: true + icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAA1eSURBVHgBxVp5cFT1Hf/83nubzW6uTcjJmdQQtQEJGMZjWkpQsaIItNOxihc9HOsxxs50xraOCZb+0cuCOsPUoQPWUanTAqKoAxWCWtBBNIAECMQkHAm5N8nuZje77/36/b73drMJSQiB1O/wY7Pv/Y7vff1W4AqAlNJDH8tpzKGRT6OEhsegwe8Va1qDPappHKJRJYRowGWCwDjBRvopGgsl5EJBW0lJz4VEEGH0Gn3wh/vMuckON5JFIlzCYR5JU2D/V63r+jo1HK4SLlcDxgGXTEAU8YiU5QKGh5DH6XA7Pu7+Cgf7anGk7zTaIt0IyH4IYj2/VwyBRJGAbGc6rtEm44bkYtyUdDW+5cwm6Sig19AkNkFRVl+qVC6JAEK+gj7KiXcevx7ATm81Nnv34ovgKUQUw5ojSBL21kIOPDOfmBIilZKMsECxYwbunVSGOz2lSFYSo6sqiYjVY8VpTAQQ4vn0sZU+SwJ6EG90fISNnTtxTnTickEQIVPULDw4aRHuS/suklUXbCmUjUUaFyWAVOUhFVhrkOp86q/Bs02v46TeDEVEl0tcDkh7D5UImaHkoDLvx1iQeh0RJr1hoaxyCrEN4yVAJ5URhqyMwMCG9g/wl7YtpqrIi64cB0hrS7aJJz134fHspXCwOipqpTqKSolRkZeyslvvw+9b38S/vP81PcyEIB8Fmwj2aEtTbkBl7r1IV5PpXGVEIoZFhdRmOXF+a68M4NGG9dgfPnqZinLpoJBKzdOK8LeCx5ChJLEkHtaEePWCeUMfsMGqkBt1YeD5ljexv///jzyDTqz9InISFedeY20gguRa25kMAmWYtXsMCc/68zuwpWuf6fa+CWBnbBATdwQOYn3bu7Cj+tah8wYRwH7ekEb+gWAtXux8m8Q2Tt5L4EqJjRn4187tqOo9zJG+ROqyMv59jL+WeGR9nxHCkhOV+Botl26scvCmV1J6U5VsvFfwHFIdbi8ZeQHFCC8/1+LmVEg68Q3vx2iQrYNlw95BRPEjzy0VuA0NHi0VOY40ZDo8cCsuuDQnEhWNmGEgqIfRE/EhEAmh3ejB+XA3fJFe9KuGmTqYm0UjNORFBXbOaMNrHbvxeM5dHtKScnpUaa3lvfpkfsQp68MyhMUnK9Ao2+mFEUOep2XLVAowxbjOeRVKXPmY5spGquKE5bntcESEcb4QTRdkHGocS7oMP+oC51HTdwbVlH4c6qvHOb3DnG/OE6OQQfqTRWawa+YapKhuryYUUwqWBBz6Ql66o+tznGbux+kOu7MnMu7GY7lL4ITDTiLjJWMjSf8UJcpPa46Qlk/nf04iLkdNQ3ZKKm5OvpqQvsX0LicCZ7EncBhvd36KOuM8kWkMr7p0TrvswTvez3B/ZhkbtCkFSwJSfhmW4ZJ7vv4DDobr4ldhpjIF7xVWIEHRMBHAxIfJ7Qmh48tAPd71food/kNo1zuHJWRuQgHeKvgNEoTG9USZxsZLjCppDLXjcLAeUOM3ZwkY5iGUC1nfWUXoD8N8b8BnBNFFut2t+xHQQwjJiCkDp3AimWwigyJpuiMViUiwWTKQP0XxS1AsJZyfVIRSdyEe6b8Dr7R+gM3dVejXdFtBLTgcakBtXxNmuact5NSe2bqQX+/3H6c8Z7AOsvrUyiasb3kfP81dTAYZxGe+k6S/J3E02Ii6/lYTcZ24Z9jcNIRZ2pg1QHQ74hYmaxmYqmai2DkVc1IKMds9A9lqOlQqGkSMMOszNyETlVNXYvGk+VjV+Cf0CyOGEwe4T/zHUOyeziuWMwElfM4BejjU7XEgYT1e270Nr3h3gNEMkTmaOb+UlhNRBquDsDnLe+mK5Qp41SmjmcZ5VIWPQPgUJERUXOOeggXuYnwneRauT55JNYJq7kIpA6UzwI2JhbjGMR2HIw1xZxg46D8BZN3OX0uYgDl8cE1/E4ZGn2jGzO/9oh/xqIo4YqPOY8Af2YUMLPpkjL/RXSWpRhiH+xvNsb7zfRQpefhZ5u1YmnETqZ+DNFnCi3606d0YCjXBM+QAdCJUzWcC8rmGbQl2Qmoi6kMGgRRW4SGkFQNSqHoqdOShMDEP+VoOcikOkGujmtdJNqIgTJsHZB+8VLU1hTpRF2pCvd6K+r5mBNVIbD8mlD8iRGUNmvCr1o14pf19lOf9AGkiGZu6/4MWoxPx3GIMO/Re+EiqadI9xySglwwxSA/ECOGE9XmSloL7U8swP3EmZifnI4mIYCS4sDFsriq27lCgsQKfHQDZ1fKzXiLqS18DqvvqsK/vBHmdUwiLSEw6BhFynDKAx5rXW4sZIzFYr1kb+onh3n4/0hJcHo2F7Q8HSF9jrL6AACbsycyleNBzCyE5eENdWvMV2y7M+UJgoGBjdVNMY/WIFJSlzjZHOT2vDzVjS+d+/Lt3P5qJ01EblNHCYBiGsgYwoVyT084eDdGDRgnmzIVk6SRE4qOYFV17yQudD3vhNXy0adA8nGNGEoW9SaoH2S5KM+hQMYRwFk1+Qh5+mbcMj1CQfKNjDzZ4d6I90jO2HMpGVyNX53WrLo9CZOnkc4edS9z6e+cupJFPZ44eCtWTGz1N4ww6jF5SD0uvhx6sEOIOGjOcuZjpmIwiZx7muWeiNOUqiswJpsoJSsdSieCfZ34fy1JuxMvtO/C6bzcGfNpQZrJKA0lqouXxCLn6gAzlz68pR686vB1E/UrMU9vtEjHoAGn5HmGLmT5VGfeMDRaKuX+m8GBRYjFWUmyZTW6SUxDe0iAJ66ThC078mky6a8j+AxQ4dQ0Hvv0CG3oDa351IrmtLMoqRzLiwYojrTjAhklPdT5UMKKK3ROykBdRgkyHyN9Ue7VAm+zGW4H9WHFqDX5y5gUcJGPmYMherpfUMCTDI2bykmJTFnm9JMXNhzSwDTSy/y5OnIZ6/2g1gIWSyhkn/e2BC1MdWeRKJ5seinWe1UIVFq9DIgyfEkILudH6/nbUUfgP0nczMTEzVsNMWasCR/FRw1FSn5tQSDZRFTiCTuGHGIGdzIBrEyYTO8wIeogJqOaZpYlX4z3/5zBGRF5itjYdD2TcRjlLIaYkZFBuqtEb5QLPNBQiho5ectQ1/gbs6v4CO/1H0ExptGFHca6/t/j3kWuJR3R44CXXUzZrn1jNNsD9za6TwSbcUfccIqoxLN2Swvy26b/FHKoFTN4IxfK6iPZpxRCSLSyYcE5BovWBibCiY3dXNTZ07aa2ZC0RYoy5AuUd3pm2GrOTpvG3Ao2LAiKiqsCZs3Cu+yocCJ28EH2zQJH43F9r5i/dET+OBRpN1WinUN+qd6HHCJD+BhAyItSQUuGiYmeSIwWTlQyK1FlUCE1DER2qkQomSAcWUz90Udpc7Ok9gte6P8QngbF1P4oovS9y5zHy1dx6NFlCeUUlManin95P8EzrqxhalVvdcGEyOQtp6KbKiiOoIaSd50Rj8YDf4CdKzAsJM7PNpezz1sQ5uD9nEWaSHrPRsj2EyQU92PhnfBaqxei8B57PegArM74H6lut0jRtk6mFpMVriTHeJWmlyDbSMHxSJ011aKUUK6SETeStd3bItw+Ikm5ajbBTCVhG22x04NXAh1hStxqPnHkRNZGzFEPYT6nk1x24GOQRA5allJpsUtVwFT/TLAaRGtFFQ6rqqng4owx/7NqKWJ/vCgNHAkOJYFfgED4+9RWWpF5vuuG9vmPDd6liIHFP2gLqSiSz09gkhHUhEt9W4Tqzvifs89xZvwZn9JZYbTuRMGDsGPWsqUoWthc8iwyq7mhaQbT1HqPZ7rOsS9GS8Lvc+yydn2jsEWdtIxxlZrxkSM9k/gjpmon8oFucC5ZxgU/1b8nLrdvxAnXEpDDwTQK73yfS78ZTOcuogFEaCPmCQe+HWbOCkizvL7LuwtLkUrvwmHhJDAU+lx3D7UmleCJrKSciXoqFZUPnXUAAi4cykac5xq7OXYl5ahHG2yK9HGD3OkuZjjWEg4OwNAxllXBdeOU0rN0nkJVLujFM15KxoeBx3EmXDZZNTDywd+Y0/I7EediUX07BMI2j/mpNG/6qaVScwtQJVoVREaFA89L57Xip+92Y/58o4GTxUc8SlOcstxu3YrWqqpUjzb8oU0N0W5MAYyMlu569PYfwXMtmnNXbzBZgfJNqvBC1MY7ZeZR2VOasxG2euRy5vYaBp4nzm0ZdjzGAfTNCFx8yv4fyoDd7PsI/OvegKdIBXK5EaHkm1coPeG41r1o95MYpUFWTwa4YTufHRUDsLFIpuvSo4NrdR/dnb3sPYHPbhzimnzU7ZtKOSlYvaGB7w+5WczlqNbCtrt21iTPww6SbsSL9Rngo8aMo7SVBrBOqqBwrTpdslywNwzAqKZd/iBHRqbSvpX7PPrpDPuA7juPhJrSFuhFWItY9gLWKamMNk6jXM4taivOoB3pz0rW41jWF3KOp6V5K7NYpirI2enExYQTEE0IfC2k8RXwtsX5GIEzb8NE9g7ffRxca9o89NBfSHEnmzwnMik7EksAq8o97MQ7EL5uAEYjhn9lQqxL5MLve0SSbghAhKKyf2jTC+tw2XqTj4X/KtvDlFNnXzQAAAABJRU5ErkJggg==" + name: "Spotify" + description: "Listening is everything" + members: 34 + popularity: 4 + available: true + } + + ListElement { + featured: false + communityId: "id9" + loaded: true + icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAfpSURBVHgBtVlJcxtFFH49M9plWfKGV1lOOHGJ4Eax6QYUKcr5BVn+gJMqqAIulqsoQgoOzo0LZfMLYqrYbnHgxMniRg6O5MSOY1uWxlqtZdS817aMLM+MZiT5myiWpnt6vu5+ezPoAx5HbgVlGeYlLl3jDCKc8yhjEJyYmgwGAgHRh3NIMcZSwHhCakCipjWeTPzxZQp6BIMukYzFg4rCFrZSz2OcN2J6fWScVeTKHMiKrD8IZwlsWe5lMrYnQMT9ft8Ch8ZdDjy4/2oP1Kxq2N8/MACT05OdB+aw6uRKPPTbZ1tgA7YmcHD9u0V8kyDevFev1yG5+QwajYbhc9PhGfD5fGCNkBQf/eXzJbAISxPY/eh+RJKlRyi/Ub32IzUHe7u7hs+73G4Iz4aBSRbXC/UFdyNmZTekTh3Snz64iTK8YUSeEAwOgtdkhSvHxzhJYzFrR6lYjDxNPk38efXWfKe+phM4uP5gESVjFZckyMD4IoyPjwNaGcOx0gdpaNQ1MBtHw/a93Vewvb0DtWqd3vnoryt3Fs04yqbkgcfBIlDEhK0sl8q67Whaoa7VUan9F9qI+OHhIezuvIRj3K1zYBC7E3oLVrIbT/TG1V2yvY+/mQeSeZvgWgOSz5JCsXXb8UO64PF6xO96rQ4ZJH6kHokJmgGJ3np3c+UnnfvnQQorK9IGfg1CF8gdHcHuS2OF9vv9EBoaAlXNQiFf6EicIKE/GRsbU0cCQ9F2xVYudpYet5pJuwgMDooVLZVKuu2FQgHy+LFqvwcCAzA6NgaKQwlWubaGt95sbT+nxCT3aG0i0ANw8jA+OYF7a0zRCnmHwwHTMzMwOTVF5E8f5NG96/fjumOdik4SugSJQrlchlKhKFa/TMpoQTzaIUkSDA0Pw9BQCP2GrpFUi4Xy3Nx6XNjlMxGSZbbIofMLydyRNalWqnCMhElhj8vHwno0kHC3wZUkyUg8BIPBICiKInbSgE/Q6/fcxb/xEz5w6mkVlmwnqiE5IlipVqFSqUD1uCKI1jVNrHjXkeApaAyn0wmh4SEYRN2x6qmR29kuiB1Q1UxMYpIgW6MPEq7VaiK+4Q2uK7S9kie4XC4RrZo5QAPgLrjELogJpPfTC4aM+sHUAFVcqGKxCD6/tUCvFQzkD8RfTEYiisy6Vl4jkHhQPuD1eYX41ao13X4ujxtmI7PQDUqF45CC74hBn0CiQGJBpH3osDxIjqFoUpiQ3j/QfaZCBgDDD4/XC3bh87rmFVyoqF0RFAqMJs6JttqNJIm0A5XRiyRo1UWfUwtCf4NoWShkaGj6OcPhYQamTsMLWzwkiCoSY9fAjCjOjswaORaX2wVOJOvG+J6sRzvZ9u9NUKA3PDICB3v7uu8h70xm2elygh1g8jOroOlCHVCEA3E4HUhKQXIOJO0QAxJxamOmnrXzFpKZPKSQWidzo6cz6UPwojLXcCIN3gANd6uB5lqj/i0OkXgQH4qP8HuU7X3yrTDoTRJWnFm3yKCoGOlCl0A/cLp4l0Ychy2XS5DP5SGfz0OfEVTYJRl6DcONHObKKqaSZO8vC+TI1F7C53ZUMNygcPoI8wJuUqnoF8iMqrgJPU+A4qZ9tDIkKr2iaf3kE0UVCvu/IeEivKF4DJFCMwoJ7B6BLkFWJZvJwmE6bSm76gQiOoNppxXrh5NJKTifrW5fW8wXIY3EK+2JeA+gBaGPKBKAuXHBtn8UNLoJkOwpMlURyCnlcjlbzym4quQPBrGORHZfNagVUa7sseCZsZi8oTic7rVavboCFkEWZQfrNlUM0KyCwo1hzLIoPmqKBE3CaAJF9Mxjr411HNfB5XUptHYPR+HrHDpfajYLW8kta+SR6ACW1qkuGp6dBR/VgxicjeX2eEQMpQdaJEqczLjgvwRVKEQ+gDewaMRihmSw/wF60EwmY8lr0EqPjA5jzOQxlGG6T5OqGCxG7igHo+5RMMEy/Sc0xam4lylN0yv3kcl6hXWerAXyJOO04tMz04I8wayUSDUiI5AYmT1P4nM2ARIjrPc/bN8mSiu3X7zoqKyikjAyDHOYHlIuwC1eFNUqGDjqgcSIcnB98eGrzQLXWd2iuQvN3xS7v0RlNap1NkEkwphRjYyOWC+fN4HdAwMBw+acQeykaXyp+f1sAs1dEGKjcdh5sX2x0NoGKoGQ0yFlZF1eVHkzQjF/UYxw+Zdaj6MuLNnOh19vYJU4SkUqI1ANZ3xiXLy8H1FscjMpKiEXgENfef0qipnS/J167dcv5s5xaX/m+db2DSRveBohY3YWjoTBH/D3hTwhYLQL7CRbO/nKVDq1ae9yYQJv//tDCond0xvP4XCKCkIvIqN3mZVVqtWK6FPTtNt6R066xcf3N1dXUdPjrffI8YTnwqLQyvt8eTxekXfrgepGuM/xqd+/WtNrNzyhWckmntwJRcmjxpxOF0zPTp8l8ZeBKtaN9IJCPJaKv/H394anlqZnZO89W13iIN2YCU+rlPizS7zaKxKUp0jAbxMHM442jlnZY+wdgUsClVXoeEoQwjgHI835d5I/djxmtXnQbe/gzy6Sm5tqrVJb7rTqrbCd0Z/sBsSxZHgT+gaGTlR7WCpUlpsHF5afhC5BE0ENismStICWJNrNGPjydUxn10uF8kO7xFvG6B1nk5GxTIm1VuAswlvO2sgJYb6sYhkzgfdT0GCJYrH8c7ekW/EfbDrvnVt+CGwAAAAASUVORK5CYII=" + name: "Dribbble" + description: "Open source platform to write and distribute decentralized applications." + members: 34 + popularity: 4 + available: true + } +} diff --git a/ui/app/AppLayouts/CommunitiesPortal/stores/CommunitiesStore.qml b/ui/app/AppLayouts/CommunitiesPortal/stores/CommunitiesStore.qml index 0d4d196d65..1561110318 100644 --- a/ui/app/AppLayouts/CommunitiesPortal/stores/CommunitiesStore.qml +++ b/ui/app/AppLayouts/CommunitiesPortal/stores/CommunitiesStore.qml @@ -5,7 +5,11 @@ QtObject { id: root property var communitiesModuleInst: communitiesModule - property var curatedCommunitiesModel: root.communitiesModuleInst.curatedCommunities + + // TODO: should be replaced with root.communitiesModuleInst.curatedCommunities + // when backend is ready + readonly property var curatedCommunitiesModel: CommunitiesPortalDummyModel {} + property var discordFileList: root.communitiesModuleInst.discordFileList property var discordCategoriesModel: root.communitiesModuleInst.discordCategories property var discordChannelsModel: root.communitiesModuleInst.discordChannels diff --git a/ui/app/AppLayouts/CommunitiesPortal/views/CommunitiesGridView.qml b/ui/app/AppLayouts/CommunitiesPortal/views/CommunitiesGridView.qml new file mode 100644 index 0000000000..54f8af66fc --- /dev/null +++ b/ui/app/AppLayouts/CommunitiesPortal/views/CommunitiesGridView.qml @@ -0,0 +1,119 @@ +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 utils 1.0 + +import SortFilterProxyModel 0.2 + +StatusScrollView { + id: root + + property var locale + property var model + property bool searchLayout: false + + 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 { + locale: root.locale + communityId: model.communityId + loaded: model.available + logo: model.icon + name: model.name + description: model.description + members: model.members + popularity: model.popularity + // categories: model.categories + + onClicked: root.cardClicked(communityId) + } + } + + ColumnLayout { + id: contentColumn + + StatusBaseText { + id: featuredLabel + visible: !root.searchLayout + 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 + + Repeater { + model: root.searchLayout ? root.model : featuredModel + delegate: communityCardDelegate + } + } + + StatusBaseText { + visible: !root.searchLayout + 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 { + model: popularModel + delegate: communityCardDelegate + } + } + } +}