status-desktop/ui/imports/shared/views/profile/ProfileShowcaseView.qml

317 lines
10 KiB
QML

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQml.Models 2.15
import StatusQ 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Components 0.1
import StatusQ.Popups.Dialog 0.1
import StatusQ.Core.Utils 0.1 as StatusQUtils
import SortFilterProxyModel 0.2
import utils 1.0
import AppLayouts.Wallet.stores 1.0 as WalletStores
Control {
id: root
property alias currentTabIndex: stackLayout.currentIndex
property int maxVisibility: Constants.ShowcaseVisibility.Everyone
property alias communitiesModel: communitiesProxyModel.sourceModel
property alias accountsModel: accountsProxyModel.sourceModel
property alias collectiblesModel: collectiblesProxyModel.sourceModel
property alias assetsModel: assetsProxyModel.sourceModel
property alias socialLinksModel: socialLinksProxyModel.sourceModel
property var globalAssetsModel
property var globalCollectiblesModel
property WalletStores.RootStore walletStore
required property string mainDisplayName
required property bool readOnly
required property bool sendToAccountEnabled
signal closeRequested()
signal copyToClipboard(string text)
horizontalPadding: readOnly ? 20 : 40 // smaller in settings/preview
topPadding: Style.current.bigPadding
StatusQUtils.QObject {
id: d
property int delegateWidthS: 152
property int delegateHeightS: 152
property int delegateWidthM: 202
property int delegateHeightM: 160
readonly property string displayNameVerySmallEmoji: StatusQUtils.Emoji.parse(root.mainDisplayName, StatusQUtils.Emoji.size.verySmall)
}
component PositionSFPM: SortFilterProxyModel {
sorters: [
RoleSorter {
roleName: "showcasePosition"
}
]
filters: [
AnyOf {
inverted: true
UndefinedFilter {
roleName: "showcaseVisibility"
}
ValueFilter {
roleName: "showcaseVisibility"
value: Constants.ShowcaseVisibility.NoOne
}
},
FastExpressionFilter {
expression: model.showcaseVisibility >= root.maxVisibility
expectedRoles: ["showcaseVisibility"]
}
]
}
PositionSFPM {
id: communitiesProxyModel
}
PositionSFPM {
id: accountsProxyModel
}
PositionSFPM {
id: collectiblesProxyModel
}
PositionSFPM {
id: assetsProxyModel
}
PositionSFPM {
id: socialLinksProxyModel
}
background: StatusDialogBackground {
color: Theme.palette.baseColor4
Rectangle {
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
height: parent.radius
color: parent.color
}
Rectangle {
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
height: 1
color: Theme.palette.baseColor2
}
}
contentItem: StackLayout {
id: stackLayout
anchors.fill:parent
ProfileShowcaseCommunitiesView {
width: parent.width
height: parent.height
cellWidth: d.delegateWidthM
cellHeight: d.delegateHeightM
mainDisplayName: d.displayNameVerySmallEmoji
readOnly: root.readOnly
globalAssetsModel: root.globalAssetsModel
globalCollectiblesModel: root.globalCollectiblesModel
communitiesProxyModel: communitiesProxyModel
onCloseRequested: root.closeRequested()
onCopyToClipboard: root.copyToClipboard(text)
}
ProfileShowcaseAccountsView {
width: parent.width
height: parent.height
mainDisplayName: d.displayNameVerySmallEmoji
sendToAccountEnabled: root.sendToAccountEnabled
accountsModel: accountsProxyModel
walletStore: root.walletStore
cellWidth: d.delegateWidthM
cellHeight: d.delegateHeightM
onCopyToClipboard: root.copyToClipboard(text)
}
ProfileShowcaseCollectiblesView {
width: parent.width
height: parent.height
cellWidth: d.delegateWidthS
cellHeight: d.delegateHeightS
mainDisplayName: d.displayNameVerySmallEmoji
collectiblesModel: collectiblesProxyModel
walletStore: root.walletStore
onCloseRequested: root.closeRequested()
onVisitCommunity: {
Global.openPopup(visitComunityPopupComponent, {communityId: model.communityId, communityName: model.communityName,
communityLogo: model.communityImage, tokenName: model.name,
tokenImage: model.imageUrl, isAssetType: false });
}
}
// ProfileShowcaseAssetsView {
// width: parent.width
// height: parent.height
// mainDisplayName: root.mainDisplayName
// assetsModel: assetsProxyModel
// sendToAccountEnabled: root.sendToAccountEnabled
// delegatesActionsMenu: delegatesActionsMenu
// cellHeight: d.delegateHeightS
// cellWidth: d.delegateWidthS
// onCloseRequested: root.closeRequested()
// onVisitCommunity: {
// Global.openPopup(visitComunityPopupComponent, {communityId: model.communityId, communityName: model.communityName,
// communityLogo: model.communityImage, tokenName: model.name,
// tokenImage: Constants.tokenIcon(model.symbol), isAssetType: false });
// }
// }
ProfileShowcaseSocialLinksView {
width: parent.width
height: parent.height
cellWidth: d.delegateWidthS
cellHeight: d.delegateHeightS
mainDisplayName: d.displayNameVerySmallEmoji
socialLinksModel: socialLinksProxyModel
onCopyToClipboard: root.copyToClipboard(text)
}
}
Component {
id: visitComunityPopupComponent
StatusDialog {
id: visitComunityPopup
// Community related props:
property string communityId
property string communityName
property string communityLogo
// Token related props:
property string tokenName
property string tokenImage
property bool isAssetType: false
width: 521 // by design
padding: 0
contentItem: StatusScrollView {
id: scrollView
padding: Style.current.padding
contentWidth: availableWidth
ColumnLayout {
width: scrollView.availableWidth
spacing: Style.current.padding
StatusBaseText {
Layout.fillWidth: true
text: visitComunityPopup.isAssetType ? qsTr("%1 is a community minted asset. Would you like to visit the community that minted it?").arg(visitComunityPopup.tokenName) :
qsTr("%1 is a community minted collectible. Would you like to visit the community that minted it?").arg(visitComunityPopup.tokenName)
textFormat: Text.RichText
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
lineHeight: 1.2
}
// Navigate to community button
StatusListItem {
Layout.fillWidth: true
Layout.bottomMargin: Style.current.halfPadding
title: visitComunityPopup.communityName
border.color: Theme.palette.baseColor2
asset.name: visitComunityPopup.communityLogo
asset.isImage: true
asset.isLetterIdenticon: !asset.name
components: [
RowLayout {
StatusIcon {
Layout.alignment: Qt.AlignVCenter
icon: "arrow-right"
color: Theme.palette.primaryColor1
}
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
Layout.rightMargin: Style.current.padding
text: visitComunityPopup.tokenName
font.pixelSize: Style.current.additionalTextSize
color: Theme.palette.primaryColor1
}
}
]
onClicked: {
Global.switchToCommunity(visitComunityPopup.communityId);
visitComunityPopup.close();
root.closeRequested();
}
}
}
}
header: StatusDialogHeader {
leftComponent: StatusRoundedImage {
Layout.alignment: Qt.AlignHCenter
Layout.margins: Style.current.padding
Layout.preferredWidth: 68
Layout.preferredHeight: Layout.preferredWidth
radius: visitComunityPopup.isAssetType ? width / 2 : 8
image.source: visitComunityPopup.tokenImage
showLoadingIndicator: false
image.fillMode: Image.PreserveAspectCrop
}
headline.title: visitComunityPopup.tokenName
headline.subtitle: qsTr("Minted by %1").arg(visitComunityPopup.communityName)
actions.closeButton.onClicked: { visitComunityPopup.close(); }
}
footer: StatusDialogFooter {
spacing: Style.current.padding
rightButtons: ObjectModel {
StatusFlatButton {
text: qsTr("Cancel")
onClicked: {
visitComunityPopup.close();
}
}
}
}
}
}
}