status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[ProfileShowcase] Updated delegates as per design + added web tab 

Closes #13421
Closes #13606
This commit is contained in:
Alexandra Betouni 2024-02-15 11:25:40 +02:00 committed by Alex Jbanca
parent 1d45243bc1
commit 4af2a97358
23 changed files with 882 additions and 316 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
storybook/pages/ProfileDialogViewPage.qml
View File

@ -124,6 +124,35 @@ SplitView {
} }
} }
ListModel {
id: linksModel
ListElement {
uuid: "0001"
text: "__github"
url: "https://github.com/caybro"
}
ListElement {
uuid: "0002"
text: "__twitter"
url: "https://twitter.com/caybro"
}
ListElement {
uuid: "0003"
text: "__personal_site"
url: "https://status.im"
}
ListElement {
uuid: "0004"
text: "__youtube"
url: "https://www.youtube.com/@LukasTinkl"
}
ListElement {
uuid: "0006"
text: "__telegram"
url: "https://t.me/ltinkl"
}
}
Logs { id: logs } Logs { id: logs }
Popups { Popups {
@ -281,9 +310,9 @@ SplitView {
sourceComponent: ProfileDialogView { sourceComponent: ProfileDialogView {
implicitWidth: 640 implicitWidth: 640
enabledNetworks: NetworksModel.allNetworks
readOnly: ctrlReadOnly.checked readOnly: ctrlReadOnly.checked
publicKey: switchOwnProfile.checked ? "0xdeadbeef" : "0xrandomguy" publicKey: switchOwnProfile.checked ? "0xdeadbeef" : "0xrandomguy"
onCloseRequested: logs.logEvent("closeRequested()") onCloseRequested: logs.logEvent("closeRequested()")
@ -293,9 +322,12 @@ SplitView {
showcaseCommunitiesModel: CommunitiesModel {} showcaseCommunitiesModel: CommunitiesModel {}
showcaseAccountsModel: WalletAccountsModel {} showcaseAccountsModel: WalletAccountsModel {}
showcaseCollectiblesModel: ManageCollectiblesModel {} showcaseCollectiblesModel: ManageCollectiblesModel {}
showcaseSocialLinksModel: assetsStore.groupedAccountAssetsModel showcaseSocialLinksModel: linksModel
// TODO: showcaseAssetsModel // TODO: showcaseAssetsModel
assetsModel: AssetsModel {}
collectiblesModel: CollectiblesModel {}
profileStore: QtObject { profileStore: QtObject {
readonly property string pubkey: "0xdeadbeef" readonly property string pubkey: "0xdeadbeef"
readonly property string ensName: name.text readonly property string ensName: name.text

32
storybook/src/Models/CommunitiesModel.qml
View File

@ -19,7 +19,9 @@ ListModel {
muted: false, muted: false,
members: [ { pubKey: "0xdeadbeef" } ], members: [ { pubKey: "0xdeadbeef" } ],
membersCount: 1, membersCount: 1,
loading: false loading: false,
permissionsModel: null,
allTokenRequirementsMet: false
}, },
{ {
id: "0x0002", id: "0x0002",
@ -36,7 +38,9 @@ ListModel {
muted: false, muted: false,
members: [ { pubKey: "0xdeadbeef" }, { pubKey: "0xdeadbeef" }, { pubKey: "0xdeadbeef" } ], members: [ { pubKey: "0xdeadbeef" }, { pubKey: "0xdeadbeef" }, { pubKey: "0xdeadbeef" } ],
membersCount: 3, membersCount: 3,
loading: false loading: false,
permissionsModel: null,
allTokenRequirementsMet: false
}, },
{ {
id: "0x0003", id: "0x0003",
@ -48,12 +52,14 @@ ListModel {
spectated: true, spectated: true,
memberRole: Constants.memberRole.none, memberRole: Constants.memberRole.none,
isControlNode: false, isControlNode: false,
image: ModelsData.icons.coinbase, image: ModelsData.icons.dragonereum,
color: "red", color: "red",
muted: false, muted: false,
members: [ { pubKey: "0xdeadbeef" } ], members: [ { pubKey: "0xdeadbeef" } ],
membersCount: 1, membersCount: 1,
loading: false loading: false,
permissionsModel: PermissionsModel.moreThanTwoInitialShortPermissionsModel,
allTokenRequirementsMet: false
}, },
{ {
id: "0x0004", id: "0x0004",
@ -65,12 +71,14 @@ ListModel {
spectated: false, spectated: false,
memberRole: Constants.memberRole.none, memberRole: Constants.memberRole.none,
isControlNode: false, isControlNode: false,
image: "", image: ModelsData.icons.coinbase,
color: "whitesmoke", color: "whitesmoke",
muted: true, muted: true,
members: [], members: [],
membersCount: 0, membersCount: 0,
loading: false loading: false,
permissionsModel: null,
allTokenRequirementsMet: false
}, },
{ {
id: "0x0005", id: "0x0005",
@ -87,7 +95,9 @@ ListModel {
muted: false, muted: false,
members: [{ pubKey: "0xdeadbeef" }, { pubKey: "0xdeadbeef" }, { pubKey: "0xdeadbeef" }, { pubKey: "0xdeadbeef" }], members: [{ pubKey: "0xdeadbeef" }, { pubKey: "0xdeadbeef" }, { pubKey: "0xdeadbeef" }, { pubKey: "0xdeadbeef" }],
membersCount: 4, membersCount: 4,
loading: false loading: false,
permissionsModel: null,
allTokenRequirementsMet: false
}, },
{ {
id: "0x0006", id: "0x0006",
@ -104,7 +114,9 @@ ListModel {
muted: false, muted: false,
members: [{ pubKey: "0xdeadbeef" }], members: [{ pubKey: "0xdeadbeef" }],
membersCount: 1, membersCount: 1,
loading: false loading: false,
permissionsModel: null,
allTokenRequirementsMet: false
}, },
{ {
id: "0x0007", id: "0x0007",
@ -120,7 +132,9 @@ ListModel {
muted: false, muted: false,
members: [{ pubKey: "0xdeadbeef" }, { pubKey: "0xdeadbeef" }], members: [{ pubKey: "0xdeadbeef" }, { pubKey: "0xdeadbeef" }],
membersCount: 2, membersCount: 2,
loading: false loading: false,
permissionsModel: null,
allTokenRequirementsMet: false
} }
]) ])
} }

9
storybook/src/Models/ManageCollectiblesModel.qml
View File

@ -19,12 +19,13 @@ ListModel {
{ {
uid: "123", uid: "123",
chainId: 5, chainId: 5,
userHas: 9,
name: "Punx not dead!", name: "Punx not dead!",
collectionUid: "", collectionUid: "",
collectionName: "", collectionName: "",
communityId: "", communityId: "",
communityName: "", communityName: "",
communityImage: "", communityImage: ModelsData.icons.status,
imageUrl: ModelsData.collectibles.cryptoPunks, imageUrl: ModelsData.collectibles.cryptoPunks,
isLoading: false, isLoading: false,
backgroundColor: "", backgroundColor: "",
@ -44,6 +45,7 @@ ListModel {
{ {
uid: "pp23", uid: "pp23",
chainId: 5, chainId: 5,
userHas: 0,
name: "pepepunk#23", name: "pepepunk#23",
collectionUid: "pepepunks", collectionUid: "pepepunks",
collectionName: "Pepepunks", collectionName: "Pepepunks",
@ -64,6 +66,7 @@ ListModel {
{ {
uid: "34545656768", uid: "34545656768",
chainId: 420, chainId: 420,
userHas: 1,
name: "Kitty 1", name: "Kitty 1",
collectionUid: "KT", collectionUid: "KT",
collectionName: "Kitties", collectionName: "Kitties",
@ -84,6 +87,7 @@ ListModel {
{ {
uid: "123456", uid: "123456",
chainId: 420, chainId: 420,
userHas: 0,
name: "Kitty 2", name: "Kitty 2",
collectionUid: "KT", collectionUid: "KT",
collectionName: "Kitties", collectionName: "Kitties",
@ -104,6 +108,7 @@ ListModel {
{ {
uid: "12345645459537432", uid: "12345645459537432",
chainId: 421613, chainId: 421613,
userHas: 0,
name: "Big Kitty", name: "Big Kitty",
collectionUid: "KT", collectionUid: "KT",
collectionName: "Kitties", collectionName: "Kitties",
@ -129,6 +134,7 @@ ListModel {
{ {
uid: "pp21", uid: "pp21",
chainId: 421613, chainId: 421613,
userHas: 0,
name: "pepepunk#21", name: "pepepunk#21",
collectionUid: "pepepunks", collectionUid: "pepepunks",
collectionName: "Pepepunks", collectionName: "Pepepunks",
@ -149,6 +155,7 @@ ListModel {
{ {
uid: "lp#666a", uid: "lp#666a",
chainId: 421613, chainId: 421613,
userHas: 0,
name: "Lonely Panda #666", name: "Lonely Panda #666",
collectionUid: "lpan_collection", collectionUid: "lpan_collection",
collectionName: "Lonely Panda Collection", collectionName: "Lonely Panda Collection",

4
ui/StatusQ/sandbox/demoapp/StatusAppCommunitiesPortalView.qml
View File

@ -100,7 +100,7 @@ StatusSectionLayout {
locale: Qt.locale("es") locale: Qt.locale("es")
communityId: model.communityId communityId: model.communityId
loaded: model.available loaded: model.available
logo: model.logo asset.source: model.logo
name: model.name name: model.name
description: model.description description: model.description
members: model.members members: model.members
@ -138,7 +138,7 @@ StatusSectionLayout {
locale: Qt.locale("es") locale: Qt.locale("es")
communityId: model.communityId communityId: model.communityId
loaded: model.available loaded: model.available
logo: model.logo asset.source: model.logo
name: model.name name: model.name
description: model.description description: model.description
members: model.members members: model.members

2
ui/StatusQ/sandbox/pages/StatusCommunityCardPage.qml
View File

@ -26,7 +26,7 @@ GridLayout {
locale: Qt.locale("en") locale: Qt.locale("en")
communityId: model.communityId communityId: model.communityId
loaded: model.available loaded: model.available
logo: model.logo asset.source: model.logo
banner: model.banner banner: model.banner
name: model.name name: model.name
description: model.description description: model.description

125
ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml
View File

@ -22,7 +22,7 @@ import StatusQ.Core.Theme 0.1
locale: "en" locale: "en"
communityId: model.communityId communityId: model.communityId
loaded: model.available loaded: model.available
logo: model.icon asset.source: model.icon
name: model.name name: model.name
description: model.description description: model.description
members: model.members members: model.members
@ -37,6 +37,31 @@ import StatusQ.Core.Theme 0.1
Rectangle { Rectangle {
id: root id: root
property int cardSize: StatusCommunityCard.Size.Big
enum Size {
Big,
Small
}
/*!
\qmlproperty bool StatusCommunityCard::memberCountVisible
This property sets the member's count visibility.
*/
property bool memberCountVisible: true
/*!
\qmlproperty bool StatusCommunityCard::hovered
This property indicates whether the card contains mouse.
*/
property bool hovered: sensor.containsMouse
/*!
\qmlproperty int StatusCommunityCard::titleFontSize
This property holds the title's font size.
*/
property int titleFontSize: 19
/*!
\qmlproperty int StatusCommunityCard::descriptionFontSize
This property holds the description's font size.
*/
property int descriptionFontSize: 15
/*! /*!
\qmlproperty string StatusCommunityCard::communityId \qmlproperty string StatusCommunityCard::communityId
This property holds the community identifier value. This property holds the community identifier value.
@ -47,11 +72,6 @@ Rectangle {
This property holds a boolean value that represents if the community information is loaded or not. This property holds a boolean value that represents if the community information is loaded or not.
*/ */
property bool loaded: true property bool loaded: true
/*!
\qmlproperty url StatusCommunityCard::logo
This property holds the community logo source.
*/
property url logo: ""
/*! /*!
\qmlproperty string StatusCommunityCard::name \qmlproperty string StatusCommunityCard::name
This property holds the community name. This property holds the community name.
@ -122,6 +142,28 @@ Rectangle {
*/ */
property alias rigthHeaderComponent: rightHeaderLoader.sourceComponent property alias rigthHeaderComponent: rightHeaderLoader.sourceComponent
/*!
\qmlproperty Item StatusCommunityCard::bottomRowComponent
This property holds an extra info bottom row component that will be displayed on bottom left of the card.
Example: Community token permissions row.
*/
property alias bottomRowComponent: bottomRowLoader.sourceComponent
/*!
\qmlproperty color StatusCommunityCard::descriptionFontColor
This property holds the description font color.
If not provided, default value in Light Theme is "#000000" and in Dark Theme is "#FFFFFF".
*/
property color descriptionFontColor: Theme.palette.directColor1
/*!
\qmlproperty StatusAssetSettings StatusCommunityCard::asset
This property holds the card's asset settings for the logo image.
*/
property StatusAssetSettings asset: StatusAssetSettings {
height: 40
width: 40
}
/*! /*!
\qmlsignal StatusCommunityCard::clicked(string communityId) \qmlsignal StatusCommunityCard::clicked(string communityId)
This signal is emitted when the card item is clicked. This signal is emitted when the card item is clicked.
@ -131,11 +173,12 @@ Rectangle {
QtObject { QtObject {
id: d id: d
readonly property int cardWidth: 335 readonly property int cardWidth: 335
readonly property int bannerHeigth: 64 readonly property int bannerHeight: (root.cardSize === StatusCommunityCard.Size.Big) ? 64 : 55
readonly property int cardHeigth: 190 readonly property int cardHeigth: (root.cardSize === StatusCommunityCard.Size.Big) ? 190 : 119
readonly property int totalHeigth: 230 readonly property int totalHeigth: (root.cardSize === StatusCommunityCard.Size.Big) ? 230 : 144
readonly property int margins: 12 readonly property int margins: 12
readonly property int bannerRadius: 20 readonly property int bannerRadius: (root.cardSize === StatusCommunityCard.Size.Big) ? 20 : 16
readonly property int bannerRadiusHovered: (root.cardSize === StatusCommunityCard.Size.Big) ? 30 : 16
readonly property int cardRadius: 16 readonly property int cardRadius: 16
readonly property color cardColor: Theme.palette.name === "light" ? Theme.palette.indirectColor1 : Theme.palette.baseColor2 readonly property color cardColor: Theme.palette.name === "light" ? Theme.palette.indirectColor1 : Theme.palette.baseColor2
readonly property color fontColor: Theme.palette.directColor1 readonly property color fontColor: Theme.palette.directColor1
@ -169,7 +212,7 @@ Rectangle {
source: root source: root
horizontalOffset: 0 horizontalOffset: 0
verticalOffset: 2 verticalOffset: 2
radius: sensor.containsMouse ? 30 : d.bannerRadius radius: sensor.containsMouse ? d.bannerRadiusHovered : d.bannerRadius
samples: 25 samples: 25
spread: 0 spread: 0
color: sensor.containsMouse ? Theme.palette.backdropColor : Theme.palette.dropShadow color: sensor.containsMouse ? Theme.palette.backdropColor : Theme.palette.dropShadow
@ -181,7 +224,7 @@ Rectangle {
anchors.top: parent.top anchors.top: parent.top
width: parent.width width: parent.width
height: d.bannerHeigth height: d.bannerHeight
Rectangle { Rectangle {
id: mask id: mask
@ -220,10 +263,10 @@ Rectangle {
Rectangle { Rectangle {
z: content.z + 1 z: content.z + 1
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 16 anchors.topMargin: (root.cardSize === StatusCommunityCard.Size.Big) ? 16 : 8
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 12 anchors.leftMargin: 12
width: 48 width: root.asset.width + 4
height: width height: width
radius: width / 2 radius: width / 2
color: root.loaded ? d.cardColor : d.loadingColor1 color: root.loaded ? d.cardColor : d.loadingColor1
@ -233,7 +276,7 @@ Rectangle {
anchors.centerIn: parent anchors.centerIn: parent
width: parent.width - 4 width: parent.width - 4
height: width height: width
image.source: root.logo image.source: root.asset.source
color: "transparent" color: "transparent"
} }
} // End of community logo } // End of community logo
@ -244,8 +287,8 @@ Rectangle {
z: banner.z + 1 z: banner.z + 1
visible: root.loaded visible: root.loaded
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 40 anchors.topMargin: (root.cardSize === StatusCommunityCard.Size.Big) ? 40 : 23
width: d.cardWidth width: parent.width
height: d.cardHeigth height: d.cardHeigth
color: d.cardColor color: d.cardColor
radius: d.cardRadius radius: d.cardRadius
@ -262,27 +305,29 @@ Rectangle {
// Community info // Community info
ColumnLayout { ColumnLayout {
anchors.fill: parent anchors.top: parent.top
anchors.topMargin: 32 anchors.topMargin: (root.cardSize === StatusCommunityCard.Size.Big) ? 32 : 26
anchors.left: parent.left
anchors.leftMargin: d.margins anchors.leftMargin: d.margins
anchors.right: parent.right
anchors.rightMargin: d.margins anchors.rightMargin: d.margins
anchors.bottomMargin: d.margins spacing: (root.cardSize === StatusCommunityCard.Size.Big) ? 6 : 0
clip: true
spacing: 6
StatusBaseText { StatusBaseText {
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
Layout.fillWidth: true
text: root.name text: root.name
font.weight: Font.Bold font.weight: Font.Bold
font.pixelSize: 19 font.pixelSize: root.titleFontSize
color: d.fontColor color: d.fontColor
elide: Text.ElideRight
} }
StatusBaseText { StatusBaseText {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
text: root.description text: root.description
font.pixelSize: 15 font.pixelSize: root.descriptionFontSize
lineHeight: 1.2 lineHeight: 1.2
color: d.fontColor color: root.descriptionFontColor
maximumLineCount: 2 maximumLineCount: 2
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
elide: Text.ElideRight elide: Text.ElideRight
@ -290,17 +335,18 @@ Rectangle {
} }
} }
ColumnLayout { ColumnLayout {
anchors.fill: parent anchors.bottom: parent.bottom
anchors.topMargin: 116 anchors.left: parent.left
anchors.leftMargin: d.margins anchors.leftMargin: d.margins
anchors.right: parent.right
anchors.rightMargin: d.margins anchors.rightMargin: d.margins
anchors.bottomMargin: d.margins anchors.bottomMargin: d.margins
clip: true spacing: (root.cardSize === StatusCommunityCard.Size.Big) ? 18 : 0
spacing: 18
Row { Row {
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
spacing: 20 spacing: 20
// Members // Members
visible: root.memberCountVisible
Row { Row {
height: membersTxt.height height: membersTxt.height
spacing: 4 spacing: 4
@ -338,11 +384,18 @@ Rectangle {
} }
} }
StatusRollArea { // Bottom Row extra info component
Layout.alignment: Qt.AlignVCenter Loader {
Layout.fillWidth: true id: bottomRowLoader
Layout.fillWidth: (!!item && item.width===0)
Layout.preferredHeight: 24
active: ((root.categories.count > 0) || !!root.bottomRowComponent)
sourceComponent: tagsListComponent
}
visible: root.categories.count > 0 Component {
id: tagsListComponent
StatusRollArea {
arrowsGradientColor: d.cardColor arrowsGradientColor: d.cardColor
// TODO: Replace by `StatusListItemTagRow` - To be done! // TODO: Replace by `StatusListItemTagRow` - To be done!
@ -370,7 +423,7 @@ Rectangle {
} }
} }
} }
}
} }
} // End of content card } // End of content card
@ -378,8 +431,8 @@ Rectangle {
Rectangle { Rectangle {
visible: !root.loaded visible: !root.loaded
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 40 anchors.topMargin: (root.cardSize === StatusCommunityCard.Size.Big) ? 40 : 23
width: d.cardWidth width: parent.width
height: d.cardHeigth height: d.cardHeigth
color: d.cardColor color: d.cardColor
radius: d.cardRadius radius: d.cardRadius

1
ui/StatusQ/src/StatusQ/Components/StatusSmartIdenticon.qml
View File

@ -3,6 +3,7 @@ import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1 import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1 import StatusQ.Controls 0.1
Loader { Loader {
id: root id: root

4
ui/StatusQ/src/assets/img/icons/tiny/locked.svg
View File

@ -1,3 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.76326 2.13863C6.37499 1.52689 7.20714 1.40039 8.00002 1.40039C8.79291 1.40039 9.62505 1.52689 10.2368 2.13863C10.8228 2.72464 11.082 3.63065 11.0991 4.86755C11.4564 5.02873 11.7689 5.24124 12.0342 5.51905C12.8917 6.41698 13.1003 7.83827 13.1003 9.75039C13.1003 11.6625 12.8917 13.0838 12.0342 13.9817C11.1669 14.89 9.79528 15.1004 8.00027 15.1004C6.20526 15.1004 4.83368 14.89 3.96634 13.9817C3.10887 13.0838 2.90027 11.6625 2.90027 9.75039C2.90027 7.83827 3.10887 6.41698 3.96634 5.51905C4.23151 5.24137 4.54381 5.02892 4.90093 4.86777C4.91797 3.63076 5.17721 2.72468 5.76326 2.13863ZM9.38826 2.98715C9.61778 3.21668 9.82926 3.65266 9.88548 4.52256C9.32331 4.43176 8.69335 4.40039 8.00027 4.40039C7.30698 4.40039 6.67686 4.43178 6.11456 4.52263C6.17078 3.65269 6.38226 3.21668 6.61179 2.98715C6.87505 2.72389 7.29291 2.60039 8.00002 2.60039C8.70714 2.60039 9.12499 2.72389 9.38826 2.98715ZM4.83419 6.3478C4.34167 6.86356 4.10027 7.81727 4.10027 9.75039C4.10027 11.6835 4.34167 12.6372 4.83419 13.153C5.31685 13.6584 6.19528 13.9004 8.00027 13.9004C9.80526 13.9004 10.6837 13.6584 11.1663 13.153C11.6589 12.6372 11.9003 11.6835 11.9003 9.75039C11.9003 7.81727 11.6589 6.86356 11.1663 6.3478C10.6837 5.84237 9.80526 5.60039 8.00027 5.60039C6.19528 5.60039 5.31685 5.84237 4.83419 6.3478ZM6.50002 10.3504H9.50002V9.15044H6.50002V10.3504Z" fill="#647084"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M5 8.5V6.75641C5 4.97326 6.32593 3.5 8 3.5C9.67407 3.5 11 4.97326 11 6.75641V8.5H11.5C12.3284 8.5 13 9.17157 13 10V13C13 13.8284 12.3284 14.5 11.5 14.5H4.5C3.67157 14.5 3 13.8284 3 13V10C3 9.17157 3.67157 8.5 4.5 8.5H5ZM6.38452 8.50003H9.61529V6.75644C9.61529 5.70736 8.87484 4.88464 7.99991 4.88464C7.12497 4.88464 6.38452 5.70736 6.38452 6.75644V8.50003Z" fill="black"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 525 B

4
ui/StatusQ/src/assets/img/icons/tiny/unlocked.svg
View File

@ -1,3 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.47378 0.778159C8.31207 0.573936 9.0847 0.866836 9.71359 1.22993C10.3425 1.59302 10.9825 2.11568 11.2247 2.94377C11.3914 3.51343 11.3475 4.14886 11.0897 4.86257C11.4508 5.02424 11.7663 5.238 12.0339 5.51817C12.8914 6.4161 13.1 7.83739 13.1 9.74951C13.1 11.6616 12.8914 13.0829 12.0339 13.9809C11.1665 14.8891 9.79497 15.0995 7.99996 15.0995C6.20495 15.0995 4.83338 14.8891 3.96604 13.9809C3.10856 13.0829 2.89996 11.6616 2.89996 9.74951C2.89996 7.83739 3.10856 6.4161 3.96604 5.51817C4.83338 4.60991 6.20495 4.39951 7.99996 4.39951C8.71299 4.39951 9.3592 4.43271 9.93353 4.52966C10.1555 3.95284 10.1537 3.5565 10.073 3.28074C9.9596 2.8931 9.64204 2.57426 9.11359 2.26916C8.58514 1.96406 8.15023 1.84846 7.75782 1.94406C7.36888 2.03881 6.85379 2.38325 6.26814 3.39762L5.22891 2.79762C5.89326 1.64693 6.63203 0.983226 7.47378 0.778159ZM4.83389 6.34692C4.34136 6.86269 4.09996 7.81639 4.09996 9.74951C4.09996 11.6826 4.34136 12.6363 4.83389 13.1521C5.31655 13.6575 6.19497 13.8995 7.99996 13.8995C9.80495 13.8995 10.6834 13.6575 11.166 13.1521C11.6586 12.6363 11.9 11.6826 11.9 9.74951C11.9 7.81639 11.6586 6.86269 11.166 6.34692C10.6834 5.84149 9.80495 5.59951 7.99996 5.59951C6.19497 5.59951 5.31655 5.84149 4.83389 6.34692ZM7.39987 8.49941V10.9994H8.59986V8.49941H7.39987Z" fill="#647084"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M8 3.5C6.40698 3.5 5.12915 4.83423 5.00928 6.5H6.39941C6.5083 5.57629 7.19775 4.88464 8 4.88464C8.87476 4.88464 9.61523 5.7074 9.61523 6.75647V8.5H7H6.38452H5H4.5C3.67163 8.5 3 9.17163 3 10V13C3 13.8284 3.67163 14.5 4.5 14.5H11.5C12.3284 14.5 13 13.8284 13 13V10C13 9.17163 12.3284 8.5 11.5 8.5H11V6.75647C11 4.97327 9.67407 3.5 8 3.5Z" fill="black"/>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 504 B

2
ui/app/AppLayouts/Communities/views/CommunitiesGridView.qml
View File

@ -74,7 +74,7 @@ StatusScrollView {
communityId: model.id communityId: model.id
loaded: model.available loaded: model.available
logo: model.icon asset.source: model.icon
banner: model.banner banner: model.banner
communityColor: model.color communityColor: model.color
name: model.name name: model.name

3
ui/app/AppLayouts/Profile/ProfileLayout.qml
View File

@ -150,6 +150,9 @@ StatusSectionLayout {
accountsShowcaseModel: root.store.ownShowcaseAccountsModel accountsShowcaseModel: root.store.ownShowcaseAccountsModel
collectiblesShowcaseModel: root.store.ownShowcaseCollectiblesModel collectiblesShowcaseModel: root.store.ownShowcaseCollectiblesModel
socialLinksShowcaseModel: root.store.ownShowcaseSocialLinksModel socialLinksShowcaseModel: root.store.ownShowcaseSocialLinksModel
assetsModel: root.globalStore.globalAssetsModel
collectiblesModel: root.globalStore.globalCollectiblesModel
} }
} }

1
ui/app/AppLayouts/Profile/stores/ProfileSectionStore.qml
View File

@ -81,6 +81,7 @@ QtObject {
property bool walletMenuItemEnabled: profileStore.isWalletEnabled property bool walletMenuItemEnabled: profileStore.isWalletEnabled
property var communitiesModuleInst: Global.appIsReady? communitiesModule : null property var communitiesModuleInst: Global.appIsReady? communitiesModule : null
property var communitiesList: SortFilterProxyModel { property var communitiesList: SortFilterProxyModel {
sourceModel: root.mainModuleInst.sectionsModel sourceModel: root.mainModuleInst.sectionsModel
filters: ValueFilter { filters: ValueFilter {

9
ui/app/AppLayouts/Profile/views/MyProfileView.qml
View File

@ -38,6 +38,9 @@ SettingsContentBase {
property alias collectiblesShowcaseModel: showcaseModels.collectiblesSourceModel property alias collectiblesShowcaseModel: showcaseModels.collectiblesSourceModel
property alias socialLinksShowcaseModel: showcaseModels.socialLinksSourceModel property alias socialLinksShowcaseModel: showcaseModels.socialLinksSourceModel
property var assetsModel
property var collectiblesModel
property bool sideBySidePreview property bool sideBySidePreview
property bool toastClashesWithDirtyBubble property bool toastClashesWithDirtyBubble
readonly property alias sideBySidePreviewComponent: myProfilePreviewComponent readonly property alias sideBySidePreviewComponent: myProfilePreviewComponent
@ -400,6 +403,9 @@ SettingsContentBase {
showcaseCollectiblesModel: priv.showcaseModels.collectiblesVisibleModel showcaseCollectiblesModel: priv.showcaseModels.collectiblesVisibleModel
showcaseSocialLinksModel: priv.showcaseModels.socialLinksVisibleModel showcaseSocialLinksModel: priv.showcaseModels.socialLinksVisibleModel
//showcaseAssetsModel: priv.showcaseModels.assetsVisibleModel //showcaseAssetsModel: priv.showcaseModels.assetsVisibleModel
assetsModel: root.assetsModel
collectiblesModel: root.collectiblesModel
} }
} }
@ -417,6 +423,9 @@ SettingsContentBase {
showcaseCollectiblesModel: priv.showcaseModels.collectiblesVisibleModel showcaseCollectiblesModel: priv.showcaseModels.collectiblesVisibleModel
showcaseSocialLinksModel: priv.showcaseModels.socialLinksVisibleModel showcaseSocialLinksModel: priv.showcaseModels.socialLinksVisibleModel
//showcaseAssetsModel: priv.showcaseModels.assetsVisibleModel //showcaseAssetsModel: priv.showcaseModels.assetsVisibleModel
assetsModel: root.assetsModel
collectiblesModel: root.collectiblesModel
} }
} }

2
ui/app/AppLayouts/Profile/views/profile/MyProfilePreview.qml
View File

@ -21,6 +21,8 @@ Item {
property alias showcaseSocialLinksModel: profilePreview.showcaseSocialLinksModel property alias showcaseSocialLinksModel: profilePreview.showcaseSocialLinksModel
property alias showcaseAssetsModel: profilePreview.showcaseAssetsModel property alias showcaseAssetsModel: profilePreview.showcaseAssetsModel
property alias assetsModel: profilePreview.assetsModel
property alias collectiblesModel: profilePreview.collectiblesModel
implicitHeight: profilePreview.implicitHeight implicitHeight: profilePreview.implicitHeight
+ layout.anchors.topMargin + layout.anchors.topMargin

6
ui/app/AppLayouts/Wallet/controls/ManageTokensCommunityTag.qml
View File

@ -49,8 +49,8 @@ Control {
visible: !root.loading visible: !root.loading
StatusSmartIdenticon { StatusSmartIdenticon {
id: identicon id: identicon
Layout.preferredWidth: visible ? 16 : 0 Layout.preferredWidth: visible ? asset.width : 0
Layout.preferredHeight: visible ? 16 : 0 Layout.preferredHeight: visible ? asset.width : 0
asset.width: 16 asset.width: 16
asset.height: 16 asset.height: 16
visible: root.useLongTextDescription && !!asset.source visible: root.useLongTextDescription && !!asset.source
@ -64,7 +64,7 @@ Control {
StatusBaseText { StatusBaseText {
Layout.fillWidth: true Layout.fillWidth: true
visible: (!!root.communityName || d.unknownCommunityName)
font.pixelSize: Style.current.tertiaryTextFontSize font.pixelSize: Style.current.tertiaryTextFontSize
font.weight: Font.Medium font.weight: Font.Medium
text: { text: {

29
ui/app/AppLayouts/stores/RootStore.qml
View File

@ -58,8 +58,10 @@ QtObject {
root.communitiesModuleInst.myRevealedAirdropAddressForCurrentCommunity.toLowerCase() root.communitiesModuleInst.myRevealedAirdropAddressForCurrentCommunity.toLowerCase()
property var walletAccountsModel: WalletStore.RootStore.nonWatchAccounts property var walletAccountsModel: WalletStore.RootStore.nonWatchAccounts
property var assetsModel: SortFilterProxyModel {
readonly property var globalAssetsModel: SortFilterProxyModel {
sourceModel: communitiesModuleInst.tokenList sourceModel: communitiesModuleInst.tokenList
proxyRoles: ExpressionRole { proxyRoles: ExpressionRole {
function tokenIcon(symbol) { function tokenIcon(symbol) {
return Constants.tokenIcon(symbol) return Constants.tokenIcon(symbol)
@ -67,6 +69,22 @@ QtObject {
name: "iconSource" name: "iconSource"
expression: !!model.icon ? model.icon : tokenIcon(model.symbol) expression: !!model.icon ? model.icon : tokenIcon(model.symbol)
} }
}
readonly property var globalCollectiblesModel: SortFilterProxyModel {
sourceModel: communitiesModuleInst.collectiblesModel
proxyRoles: ExpressionRole {
function icon(icon) {
return !!icon ? icon : Style.png("tokens/DEFAULT-TOKEN")
}
name: "iconSource"
expression: icon(model.icon)
}
}
property var assetsModel: SortFilterProxyModel {
sourceModel: globalAssetsModel
filters: [ filters: [
AnyOf { AnyOf {
// We accept tokens from this community or general (empty community ID) // We accept tokens from this community or general (empty community ID)
@ -83,14 +101,7 @@ QtObject {
] ]
} }
property var collectiblesModel: SortFilterProxyModel { property var collectiblesModel: SortFilterProxyModel {
sourceModel: communitiesModuleInst.collectiblesModel sourceModel: globalCollectiblesModel
proxyRoles: ExpressionRole {
function collectibleIcon(icon) {
return !!icon ? icon : Style.png("tokens/DEFAULT-TOKEN")
}
name: "iconSource"
expression: collectibleIcon(model.icon)
}
filters: [ filters: [
AnyOf { AnyOf {
// We accept tokens from this community or general (empty community ID) // We accept tokens from this community or general (empty community ID)

24
ui/app/mainui/AppMain.qml
View File

@ -1270,28 +1270,8 @@ Item {
CommunitiesPortalLayout { CommunitiesPortalLayout {
anchors.fill: parent anchors.fill: parent
communitiesStore: appMain.communitiesStore communitiesStore: appMain.communitiesStore
assetsModel: SortFilterProxyModel { assetsModel: appMain.rootStore.globalAssetsModel
sourceModel: appMain.communitiesStore.communitiesModuleInst.tokenList collectiblesModel: appMain.rootStore.globalCollectiblesModel
proxyRoles: ExpressionRole {
function tokenIcon(symbol) {
return Constants.tokenIcon(symbol)
}
name: "iconSource"
expression: !!model.icon ? model.icon : tokenIcon(model.symbol)
}
}
collectiblesModel: SortFilterProxyModel {
sourceModel: appMain.communitiesStore.communitiesModuleInst.collectiblesModel
proxyRoles: ExpressionRole {
function icon(icon) {
return !!icon ? icon : Style.png("tokens/DEFAULT-TOKEN")
}
name: "iconSource"
expression: icon(model.icon)
}
}
notificationCount: appMain.activityCenterStore.unreadNotificationsCount notificationCount: appMain.activityCenterStore.unreadNotificationsCount
hasUnseenNotifications: activityCenterStore.hasUnseenNotifications hasUnseenNotifications: activityCenterStore.hasUnseenNotifications
} }

3
ui/app/mainui/Popups.qml
View File

@ -545,6 +545,9 @@ QtObject {
showcaseCollectiblesModel: isCurrentUser ? rootStore.profileSectionStore.ownShowcaseCollectiblesModel : rootStore.profileSectionStore.contactShowcaseCollectiblesModel showcaseCollectiblesModel: isCurrentUser ? rootStore.profileSectionStore.ownShowcaseCollectiblesModel : rootStore.profileSectionStore.contactShowcaseCollectiblesModel
showcaseSocialLinksModel: isCurrentUser ? rootStore.profileSectionStore.ownShowcaseSocialLinksModel : rootStore.profileSectionStore.contactShowcaseSocialLinksModel showcaseSocialLinksModel: isCurrentUser ? rootStore.profileSectionStore.ownShowcaseSocialLinksModel : rootStore.profileSectionStore.contactShowcaseSocialLinksModel
assetsModel: rootStore.globalAssetsModel
collectiblesModel: rootStore.globalCollectiblesModel
onOpened: { onOpened: {
isCurrentUser ? rootStore.profileSectionStore.requestOwnShowcase() isCurrentUser ? rootStore.profileSectionStore.requestOwnShowcase()
: rootStore.profileSectionStore.requestContactShowcase(publicKey) : rootStore.profileSectionStore.requestContactShowcase(publicKey)

120
ui/imports/shared/controls/delegates/InfoCard.qml Normal file
View File

@ -0,0 +1,120 @@
import QtQuick 2.14
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import StatusQ.Core 0.1
import StatusQ.Controls 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
import AppLayouts.Wallet.controls 1.0
import utils 1.0
Control {
id: root
padding: 12
property string title: ""
property string subTitle: ""
property string tagIcon: ""
property var enabledNetworks
property bool loading: false
property alias rightSideButtons: rightSideButtonsLoader.sourceComponent
property StatusAssetSettings asset: StatusAssetSettings {
height: 32
width: 32
bgRadius: bgWidth / 2
}
background: Rectangle {
anchors.fill: parent
color: Style.current.background
radius: Style.current.radius
border.width: 1
border.color: Theme.palette.baseColor2
}
contentItem: Item {
ColumnLayout {
id: titleColumn
anchors.fill: parent
spacing: 0
RowLayout {
Layout.fillWidth: true
Layout.preferredHeight: root.asset.height
StatusSmartIdenticon {
asset: root.asset
active: ((root.asset.isLetterIdenticon ||
!!root.asset.name ||
!!root.asset.emoji) && !root.showLoadingIndicator)
loading: root.loading
}
Item { Layout.fillWidth: true }
Loader {
id: rightSideButtonsLoader
Layout.alignment: Qt.AlignRight
}
}
StatusTextWithLoadingState {
text: root.title
Layout.preferredHeight: 22
Layout.topMargin: Style.current.halfPadding
Layout.fillWidth: true
elide: Text.ElideRight
font.weight: Font.Medium
loading: root.loading
}
StatusTextWithLoadingState {
id: statusListItemSubTitle
objectName: "statusListItemSubTitle"
Layout.fillWidth: true
Layout.preferredHeight: 16
text: root.subTitle
font.pixelSize: Style.current.tertiaryTextFontSize
lineHeight: 16
customColor: !root.enabled || !root.tertiaryTitle ?
Theme.palette.baseColor1 : Theme.palette.directColor1
visible: !!root.subTitle
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
loading: root.loading
maximumLineCount: 3
elide: Text.ElideRight
}
Item { Layout.fillHeight: true }
Row {
Layout.fillWidth: true
Layout.preferredHeight: 20
spacing: -4
visible: (chainRepeater.count > 0)
Repeater {
id: chainRepeater
model: root.enabledNetworks
delegate: StatusRoundedImage {
width: 20
height: 20
visible: image.source !== ""
image.source: Style.svg(model.iconUrl)
z: index + 1
}
}
}
ManageTokensCommunityTag {
Layout.preferredWidth: 24
Layout.preferredHeight: 24
horizontalPadding: 2
verticalPadding: 0
spacing: 0
visible: !!root.tagIcon
asset.name: root.tagIcon
asset.width: 20
asset.height: 20
}
}
}
}

1
ui/imports/shared/controls/delegates/qmldir
View File

@ -2,3 +2,4 @@ ContactListItemDelegate 1.0 ContactListItemDelegate.qml
LinkPreviewCardDelegate 1.0 LinkPreviewCardDelegate.qml LinkPreviewCardDelegate 1.0 LinkPreviewCardDelegate.qml
LinkPreviewGifDelegate 1.0 LinkPreviewGifDelegate.qml LinkPreviewGifDelegate 1.0 LinkPreviewGifDelegate.qml
LinkPreviewMiniCardDelegate 1.0 LinkPreviewMiniCardDelegate.qml LinkPreviewMiniCardDelegate 1.0 LinkPreviewMiniCardDelegate.qml
InfoCard 1.0 InfoCard.qml

3
ui/imports/shared/popups/ProfileDialog.qml
View File

@ -23,6 +23,9 @@ StatusDialog {
property alias showcaseSocialLinksModel: profileView.showcaseSocialLinksModel property alias showcaseSocialLinksModel: profileView.showcaseSocialLinksModel
property alias showcaseAssetsModel: profileView.showcaseAssetsModel property alias showcaseAssetsModel: profileView.showcaseAssetsModel
property alias assetsModel: profileView.assetsModel
property alias collectiblesModel: profileView.collectiblesModel
property alias dirtyValues: profileView.dirtyValues property alias dirtyValues: profileView.dirtyValues
property alias dirty: profileView.dirty property alias dirty: profileView.dirty

10
ui/imports/shared/views/ProfileDialogView.qml
View File

@ -35,6 +35,7 @@ Pane {
property var contactsStore property var contactsStore
property alias sendToAccountEnabled: showcaseView.sendToAccountEnabled property alias sendToAccountEnabled: showcaseView.sendToAccountEnabled
property alias enabledNetworks: showcaseView.enabledNetworks
property var dirtyValues: ({}) property var dirtyValues: ({})
property bool dirty: false property bool dirty: false
@ -47,6 +48,9 @@ Pane {
property alias showcaseMaxVisibility: showcaseView.maxVisibility property alias showcaseMaxVisibility: showcaseView.maxVisibility
property alias assetsModel: showcaseView.globalAssetsModel
property alias collectiblesModel: showcaseView.globalCollectiblesModel
signal closeRequested() signal closeRequested()
padding: 0 padding: 0
@ -604,6 +608,10 @@ Pane {
// width: implicitWidth // width: implicitWidth
// text: qsTr("Assets") // text: qsTr("Assets")
// } // }
StatusTabButton {
width: implicitWidth
text: qsTr("Web")
}
} }
// Profile Showcase // Profile Showcase
@ -621,7 +629,7 @@ Pane {
communitiesModel: root.showcaseCommunitiesModel communitiesModel: root.showcaseCommunitiesModel
accountsModel: root.showcaseAccountsModel accountsModel: root.showcaseAccountsModel
collectiblesModel: root.showcaseCollectiblesModel collectiblesModel: root.showcaseCollectiblesModel
// socialLinksModel: root.showcaseSocialLinksModel socialLinksModel: root.showcaseSocialLinksModel
// assetsModel: root.showcaseAssetsModel // assetsModel: root.showcaseAssetsModel
onCloseRequested: root.closeRequested() onCloseRequested: root.closeRequested()

632
ui/imports/shared/views/profile/ProfileShowcaseView.qml
View File

@ -10,10 +10,12 @@ import StatusQ.Components 0.1
import StatusQ.Popups.Dialog 0.1 import StatusQ.Popups.Dialog 0.1
import StatusQ.Core.Utils 0.1 as StatusQUtils import StatusQ.Core.Utils 0.1 as StatusQUtils
import SortFilterProxyModel 0.2
import utils 1.0 import utils 1.0
import shared.controls 1.0 // Timer import shared.controls 1.0 // Timer
import shared.controls.delegates 1.0
import SortFilterProxyModel 0.2 import AppLayouts.Communities.controls 1.0
Control { Control {
id: root id: root
@ -28,9 +30,13 @@ Control {
property alias assetsModel: assetsProxyModel.sourceModel property alias assetsModel: assetsProxyModel.sourceModel
property alias socialLinksModel: socialLinksProxyModel.sourceModel property alias socialLinksModel: socialLinksProxyModel.sourceModel
property var globalAssetsModel
property var globalCollectiblesModel
required property string mainDisplayName required property string mainDisplayName
required property bool readOnly required property bool readOnly
required property bool sendToAccountEnabled required property bool sendToAccountEnabled
property var enabledNetworks
signal closeRequested() signal closeRequested()
signal copyToClipboard(string text) signal copyToClipboard(string text)
@ -41,6 +47,11 @@ Control {
StatusQUtils.QObject { StatusQUtils.QObject {
id: d id: d
property int delegateWidthS: 152
property int delegateHeightS: 152
property int delegateWidthM: 202
property int delegateHeightM: 160
readonly property string copyLiteral: qsTr("Copy") readonly property string copyLiteral: qsTr("Copy")
} }
@ -91,7 +102,6 @@ Control {
background: StatusDialogBackground { background: StatusDialogBackground {
color: Theme.palette.baseColor4 color: Theme.palette.baseColor4
Rectangle { Rectangle {
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
@ -99,13 +109,24 @@ Control {
height: parent.radius height: parent.radius
color: parent.color color: parent.color
} }
Rectangle {
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
height: 1
color: Theme.palette.baseColor2
visible: ((communitiesView.contentY + accountsView.contentY + collectiblesView.contentY
/*+ assetsView.contentY*/ + webView.contentY) > Style.current.xlPadding)
}
} }
contentItem: StackLayout { contentItem: StackLayout {
id: stackLayout id: stackLayout
// communities // communities
anchors.fill:parent
ColumnLayout { ColumnLayout {
width: parent.width
height: parent.height
StatusBaseText { StatusBaseText {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
@ -114,52 +135,121 @@ Control {
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
color: Theme.palette.directColor1 color: Theme.palette.directColor1
text: qsTr("%1 hasn't joined any communities yet").arg(root.mainDisplayName) text: qsTr("%1 has not shared any communities").arg(root.mainDisplayName)
} }
Item {
StatusGridView {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
Layout.topMargin: (communitiesView.contentY > Style.current.padding) ? 1 : Style.current.padding
Behavior on Layout.topMargin { NumberAnimation { duration: 50 } }
clip: true
StatusGridView {
id: communitiesView id: communitiesView
model: communitiesProxyModel width: 606
rightMargin: Style.current.halfPadding height: parent.height
cellWidth: (width-rightMargin)/2 anchors.top: parent.top
cellHeight: cellWidth/2 anchors.topMargin: Style.current.halfPadding
anchors.bottom: parent.bottom
anchors.bottomMargin: Style.current.halfPadding
anchors.horizontalCenter: parent.horizontalCenter
anchors.horizontalCenterOffset: Style.current.halfPadding
clip: false
cellWidth: d.delegateWidthM
cellHeight: d.delegateHeightM
visible: count visible: count
model: communitiesProxyModel
ScrollBar.vertical: StatusScrollBar { } ScrollBar.vertical: StatusScrollBar { }
delegate: StatusListItem { // TODO custom delegate delegate: StatusCommunityCard {
width: GridView.view.cellWidth - Style.current.smallPadding id: profileDialogCommunityCard
height: GridView.view.cellHeight - Style.current.smallPadding readonly property var permissionsList: model.permissionsModel //TODO: Add permissions model in the community model
title: model.name ?? "" readonly property bool requirementsMet: !!model.allTokenRequirementsMet ? model.allTokenRequirementsMet : false
statusListItemTitle.font.pixelSize: 17 cardSize: StatusCommunityCard.Size.Small
statusListItemTitle.font.bold: true width: GridView.view.cellWidth - Style.current.padding
subTitle: model.description ?? "" height: GridView.view.cellHeight - Style.current.padding
tertiaryTitle: qsTr("%n member(s)", "", model.membersCount ?? 0) titleFontSize: 15
asset.name: model.image ?? model.name ?? "" descriptionFontSize: 12
asset.isImage: asset.name.startsWith(Constants.dataImagePrefix) communityId: model.id ?? ""
asset.isLetterIdenticon: !model.image loaded: !!model.id
asset.color: model.color ?? "" asset.source: model.image ?? ""
asset.width: 40 asset.isImage: !!model.image
asset.height: 40 asset.width: 32
border.width: 1 asset.height: 32
name: model.name ?? ""
memberCountVisible: false
layer.enabled: hovered
border.width: hovered ? 0 : 1
border.color: Theme.palette.baseColor2 border.color: Theme.palette.baseColor2
loading: !model.id descriptionFontColor: Theme.palette.baseColor1
components: [ description: {
StatusIcon { switch (model.memberRole) {
visible: !!model.memberRole && case (Constants.memberRole.owner):
model.memberRole === Constants.memberRole.owner || return qsTr("Owner");
model.memberRole === Constants.memberRole.admin || case (Constants.memberRole.admin) :
model.memberRole === Constants.memberRole.tokenMaster return qsTr("Admin");
anchors.verticalCenter: parent.verticalCenter case (Constants.memberRole.tokenMaster):
icon: "crown" return qsTr("Token Master");
color: Theme.palette.directColor1 default:
return qsTr("Member");
} }
] }
communityColor: model.color ?? ""
// Community restrictions
bottomRowComponent: model.memberRole ?? -1 === Constants.memberRole.tokenMaster ?
communityMembershipComponent :
!!profileDialogCommunityCard.permissionsList && profileDialogCommunityCard.permissionsList.count > 0 ?
permissionsRowComponent : null
Component {
id: communityMembershipComponent
Item {
width: 125
height: 24
Rectangle {
anchors.fill: parent
radius: 20
color: Theme.palette.successColor1
opacity: .1
border.color: Theme.palette.successColor1
}
Row {
anchors.centerIn: parent
spacing: 2
StatusIcon {
width: 16
height: 16
color: Theme.palette.successColor1
icon: "tiny/checkmark"
}
StatusBaseText {
font.pixelSize: Theme.tertiaryTextFontSize
color: Theme.palette.successColor1
text: qsTr("You’re there too")
}
}
}
}
Component {
id: permissionsRowComponent
PermissionsRow {
hoverEnabled: false
assetsModel: root.globalAssetsModel
collectiblesModel: root.globalCollectiblesModel
model: profileDialogCommunityCard.permissionsList
requirementsMet: profileDialogCommunityCard.requirementsMet
}
}
onClicked: { onClicked: {
if (root.readOnly || loading) print ("!!communitiesProxyModel", JSON.stringify(StatusQUtils.ModelUtils.modelToArray(communitiesProxyModel)))
if (root.readOnly)
return return
root.closeRequested() root.closeRequested()
Global.switchToCommunity(model.id) Global.switchToCommunity(model.id)
//TODO https://github.com/status-im/status-desktop/issues/13702
//on right click add menu
}
} }
} }
} }
@ -167,6 +257,8 @@ Control {
// wallets/accounts // wallets/accounts
ColumnLayout { ColumnLayout {
width: parent.width
height: parent.height
StatusBaseText { StatusBaseText {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
@ -175,22 +267,32 @@ Control {
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
color: Theme.palette.directColor1 color: Theme.palette.directColor1
text: qsTr("%1 doesn't have any wallet accounts yet").arg(root.mainDisplayName) text: qsTr("%1 has not shared any accounts").arg(root.mainDisplayName)
} }
Item {
StatusListView {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
Layout.topMargin: (accountsView.contentY > Style.current.padding) ? 1 : Style.current.padding
Behavior on Layout.topMargin { NumberAnimation { duration: 50 } }
clip: true
StatusGridView {
id: accountsView id: accountsView
model: accountsProxyModel width: 606
spacing: Style.current.halfPadding height: parent.height
anchors.top: parent.top
anchors.topMargin: Style.current.halfPadding
anchors.bottom: parent.bottom
anchors.bottomMargin: Style.current.halfPadding
anchors.horizontalCenter: parent.horizontalCenter
cellWidth: d.delegateWidthM
cellHeight: d.delegateHeightM
visible: count visible: count
delegate: StatusListItem { clip: false
id: accountDelegate ScrollBar.vertical: StatusScrollBar { }
model: accountsProxyModel
border.width: 1 delegate: InfoCard {
border.color: Theme.palette.baseColor2 implicitWidth: GridView.view.cellWidth - Style.current.padding
width: ListView.view.width implicitHeight: GridView.view.cellHeight - Style.current.padding
title: model.name title: model.name
subTitle: StatusQUtils.Utils.elideText(model.address, 6, 4).replace("0x", "0×") subTitle: StatusQUtils.Utils.elideText(model.address, 6, 4).replace("0x", "0×")
asset.color: Utils.getColorForId(model.colorId) asset.color: Utils.getColorForId(model.colorId)
@ -200,47 +302,104 @@ Control {
asset.letterSize: 14 asset.letterSize: 14
asset.bgColor: Theme.palette.primaryColor3 asset.bgColor: Theme.palette.primaryColor3
asset.isImage: asset.emoji asset.isImage: asset.emoji
components: [ enabledNetworks: root.enabledNetworks
StatusIcon { rightSideButtons: RowLayout {
anchors.verticalCenter: parent.verticalCenter
icon: "show"
color: Theme.palette.directColor1
},
StatusFlatButton {
anchors.verticalCenter: parent.verticalCenter
size: StatusBaseButton.Size.Small
enabled: !model.saved
text: model.saved ? qsTr("Address saved") : qsTr("Save Address")
onClicked: {
// From here, we should just run add saved address popup
Global.openAddEditSavedAddressesPopup({
addAddress: true,
address: model.address
})
}
},
StatusFlatRoundButton { StatusFlatRoundButton {
anchors.verticalCenter: parent.verticalCenter Layout.preferredWidth: 32
Layout.preferredHeight: 32
type: StatusFlatRoundButton.Type.Secondary type: StatusFlatRoundButton.Type.Secondary
icon.name: "send" icon.name: "send"
tooltip.text: qsTr("Send") icon.color: Theme.palette.baseColor1
enabled: root.sendToAccountEnabled enabled: root.sendToAccountEnabled
onClicked: { onClicked: {
Global.openSendModal(model.address) Global.openSendModal(model.address)
} }
}, }
StatusFlatRoundButton { StatusFlatRoundButton {
anchors.verticalCenter: parent.verticalCenter Layout.preferredWidth: 32
Layout.preferredHeight: 32
type: StatusFlatRoundButton.Type.Secondary type: StatusFlatRoundButton.Type.Secondary
icon.name: "copy" icon.name: "more"
tooltip.text: d.copyLiteral icon.color: Theme.palette.baseColor1
onClicked: { onClicked: {
tooltip.text = qsTr("Copied") //TODO https://github.com/status-im/status-desktop/issues/13702
root.copyToClipboard(model.address) //open menu
Backpressure.setTimeout(this, 2000, () => tooltip.text = d.copyLiteral)
} }
} }
] }
}
//TODO remove when https://github.com/status-im/status-desktop/issues/13702
// delegate: StatusListItem {
// id: accountDelegate
// property bool saved: {
// let savedAddress = root.walletStore.getSavedAddress(model.address)
// if (savedAddress.name !== "")
// return true
// if (!!root.walletStore.lastCreatedSavedAddress) {
// if (root.walletStore.lastCreatedSavedAddress.address.toLowerCase() === model.address.toLowerCase()) {
// return !!root.walletStore.lastCreatedSavedAddress.error
// }
// }
// return false
// }
// border.width: 1
// border.color: Theme.palette.baseColor2
// width: ListView.view.width
// title: model.name
// subTitle: StatusQUtils.Utils.elideText(model.address, 6, 4).replace("0x", "0×")
// asset.color: Utils.getColorForId(model.colorId)
// asset.emoji: model.emoji ?? ""
// asset.name: asset.emoji || "filled-account"
// asset.isLetterIdenticon: asset.emoji
// asset.letterSize: 14
// asset.bgColor: Theme.palette.primaryColor3
// asset.isImage: asset.emoji
// components: [
// StatusIcon {
// anchors.verticalCenter: parent.verticalCenter
// icon: "show"
// color: Theme.palette.directColor1
// },
// StatusFlatButton {
// anchors.verticalCenter: parent.verticalCenter
// size: StatusBaseButton.Size.Small
// enabled: !accountDelegate.saved
// text: accountDelegate.saved ? qsTr("Address saved") : qsTr("Save Address")
// onClicked: {
// // From here, we should just run add saved address popup
// Global.openAddEditSavedAddressesPopup({
// addAddress: true,
// address: model.address
// })
// }
// },
// StatusFlatRoundButton {
// anchors.verticalCenter: parent.verticalCenter
// type: StatusFlatRoundButton.Type.Secondary
// icon.name: "send"
// tooltip.text: qsTr("Send")
// enabled: root.sendToAccountEnabled
// onClicked: {
// Global.openSendModal(model.address)
// }
// },
// StatusFlatRoundButton {
// anchors.verticalCenter: parent.verticalCenter
// type: StatusFlatRoundButton.Type.Secondary
// icon.name: "copy"
// tooltip.text: d.copyLiteral
// onClicked: {
// tooltip.text = qsTr("Copied")
// root.profileStore.copyToClipboard(model.address)
// d.timer.setTimeout(function() {
// tooltip.text = d.copyLiteral
// }, 2000);
// }
// }
// ]
// }
} }
} }
} }
@ -255,22 +414,34 @@ Control {
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
color: Theme.palette.directColor1 color: Theme.palette.directColor1
text: qsTr("%1 doesn't have any collectibles/NFTs yet").arg(root.mainDisplayName) text: qsTr("%1 has not shared any collectibles").arg(root.mainDisplayName)
} }
Item {
StatusGridView {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
Layout.topMargin: (collectiblesView.contentY > Style.current.padding) ? 1 : Style.current.padding
Behavior on Layout.topMargin { NumberAnimation { duration: 50 } }
clip: true
StatusGridView {
id: collectiblesView id: collectiblesView
model: collectiblesProxyModel width: 608
rightMargin: Style.current.halfPadding height: parent.height
cellWidth: (width-rightMargin)/4 anchors.top: parent.top
cellHeight: cellWidth anchors.topMargin: Style.current.halfPadding
anchors.bottom: parent.bottom
anchors.bottomMargin: Style.current.halfPadding
anchors.horizontalCenter: parent.horizontalCenter
anchors.horizontalCenterOffset: Style.current.halfPadding
cellWidth: d.delegateWidthS
cellHeight: d.delegateHeightS
visible: count visible: count
clip: false
// TODO Issue #11637: Dedicated controller for user's list of collectibles (no watch-only entries)
model: collectiblesProxyModel
ScrollBar.vertical: StatusScrollBar { } ScrollBar.vertical: StatusScrollBar { }
delegate: StatusRoundedImage { delegate: StatusRoundedImage {
width: GridView.view.cellWidth - Style.current.smallPadding width: GridView.view.cellWidth - Style.current.padding
height: GridView.view.cellHeight - Style.current.smallPadding height: GridView.view.cellHeight - Style.current.padding
border.width: 1 border.width: 1
border.color: Theme.palette.directColor7 border.color: Theme.palette.directColor7
color: !!model.backgroundColor ? model.backgroundColor : "transparent" color: !!model.backgroundColor ? model.backgroundColor : "transparent"
@ -280,44 +451,51 @@ Control {
image.fillMode: Image.PreserveAspectCrop image.fillMode: Image.PreserveAspectCrop
image.source: model.imageUrl ?? "" image.source: model.imageUrl ?? ""
RowLayout {
anchors.left: parent.left
anchors.leftMargin: Style.current.halfPadding
anchors.bottom: parent.bottom
anchors.bottomMargin: Style.current.halfPadding
anchors.right: parent.right
anchors.rightMargin: Style.current.halfPadding
Control { Control {
Layout.maximumWidth: parent.width width: (amountText.contentWidth + Style.current.padding)
horizontalPadding: Style.current.halfPadding height: 24
verticalPadding: Style.current.halfPadding/2 anchors.left: parent.left
visible: !!model.id anchors.leftMargin: 12
anchors.top: parent.top
anchors.topMargin: 12
//TODO TBD, we need to show the number if the user has more than 1 of each collectible
//not sure how to name the role
visible: (model.userHas > 1)
background: Rectangle { background: Rectangle {
radius: Style.current.halfPadding/2 radius: 30
color: Theme.palette.indirectColor2 color: Theme.palette.indirectColor2
} }
contentItem: StatusBaseText { contentItem: StatusBaseText {
font.pixelSize: 13 id: amountText
font.weight: Font.Medium horizontalAlignment: Text.AlignHCenter
maximumLineCount: 1 verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight font.pixelSize: Style.current.asideTextFontSize
text: `#${model.id}` text: "x"+model.userHas
}
}
}
StatusToolTip {
visible: hhandler.hovered && (!!model.name || !!model.collectionName)
text: {
const name = model.name
const descr = model.collectionName
const sep = !!name && !!descr ? "<br>" : ""
return `<b>${name}</b>${sep}${descr}`
} }
} }
Control {
width: 24
height: 24
anchors.left: parent.left
anchors.leftMargin: 12
anchors.bottom: parent.bottom
anchors.bottomMargin: 12
visible: !!model.communityImage
background: Rectangle {
radius: parent.width/2
color: Theme.palette.indirectColor2
}
contentItem: StatusRoundedImage {
anchors.fill: parent
anchors.margins: 4
image.fillMode: Image.PreserveAspectFit
image.source: model.communityImage
}
}
HoverHandler { HoverHandler {
id: hhandler id: hhandler
cursorShape: hovered ? Qt.PointingHandCursor : undefined cursorShape: hovered ? Qt.PointingHandCursor : undefined
@ -325,69 +503,209 @@ Control {
TapHandler { TapHandler {
onSingleTapped: { onSingleTapped: {
//TODO https://github.com/status-im/status-desktop/issues/13702
Global.openLink(model.permalink) Global.openLink(model.permalink)
} }
} }
} }
} }
} }
}
// assets/tokens // assets/tokens
// ColumnLayout {
// StatusBaseText {
// Layout.fillWidth: true
// Layout.fillHeight: true
// Layout.alignment: Qt.AlignCenter
// visible: assetsView.count == 0
// horizontalAlignment: Text.AlignHCenter
// verticalAlignment: Text.AlignVCenter
// color: Theme.palette.directColor1
// text: qsTr("%1 has not shared any assets").arg(root.mainDisplayName)
// }
// Item {
// Layout.fillWidth: true
// Layout.fillHeight: true
// Layout.topMargin: (assetsView.contentY > Style.current.padding) ? 1 : Style.current.padding
// Behavior on Layout.topMargin { NumberAnimation { duration: 50 } }
// clip: true
// StatusGridView {
// id: assetsView
// width: 608
// height: parent.height
// anchors.top: parent.top
// anchors.topMargin: Style.current.halfPadding
// anchors.bottom: parent.bottom
// anchors.bottomMargin: Style.current.halfPadding
// anchors.horizontalCenter: parent.horizontalCenter
// anchors.horizontalCenterOffset: Style.current.halfPadding
// cellWidth: d.delegateWidthS
// cellHeight: d.delegateHeightS
// visible: count
// clip: false
// model: assetsProxyModel
// ScrollBar.vertical: StatusScrollBar { }
// delegate: InfoCard {
// width: GridView.view.cellWidth - Style.current.padding
// height: GridView.view.cellHeight - Style.current.padding
// title: model.name
// subTitle: LocaleUtils.currencyAmountToLocaleString(model.enabledNetworkBalance)
// asset.name: Constants.tokenIcon(model.symbol)
// asset.isImage: true
// tagIcon: !!model.communityImage ? model.communityImage : ""
// rightSideButtons: RowLayout {
// StatusFlatRoundButton {
// implicitWidth: 24
// implicitHeight: 24
// type: StatusFlatRoundButton.Type.Secondary
// icon.name: "external"
// icon.width: 16
// icon.height: 16
// icon.color: Theme.palette.baseColor1
// enabled: root.sendToAccountEnabled
// onClicked: {
// //TODO https://github.com/status-im/status-desktop/issues/13702
// //Global.openSendModal(model.address)
// //on right click open menu
// }
// }
// }
// }
// //TODO remove when https://github.com/status-im/status-desktop/issues/13702
// // delegate: StatusListItem {
// // readonly property double changePct24hour: model.changePct24hour ?? 0
// // readonly property string textColor: changePct24hour === 0
// // ? Theme.palette.baseColor1 : changePct24hour < 0
// // ? Theme.palette.dangerColor1 : Theme.palette.successColor1
// // readonly property string arrow: changePct24hour === 0 ? "" : changePct24hour < 0 ? "↓" : "↑"
// // width: GridView.view.cellWidth - Style.current.halfPadding
// // height: GridView.view.cellHeight - Style.current.halfPadding
// // title: model.name
// // //subTitle: LocaleUtils.currencyAmountToLocaleString(model.enabledNetworkBalance)
// // statusListItemTitle.font.weight: Font.Medium
// // tertiaryTitle: qsTr("%1% today %2")
// // .arg(LocaleUtils.numberToLocaleString(changePct24hour, changePct24hour === 0 ? 0 : 2)).arg(arrow)
// // statusListItemTertiaryTitle.color: textColor
// // statusListItemTertiaryTitle.font.pixelSize: Theme.asideTextFontSize
// // statusListItemTertiaryTitle.anchors.topMargin: 6
// // leftPadding: Style.current.halfPadding
// // rightPadding: Style.current.halfPadding
// // border.width: 1
// // border.color: Theme.palette.baseColor2
// // components: [
// // Image {
// // width: 40
// // height: 40
// // anchors.verticalCenter: parent.verticalCenter
// // source: Constants.tokenIcon(model.symbol)
// // }
// // ]
// // onClicked: {
// // if (root.readOnly)
// // return
// // // TODO what to do here?
// // }
// // }
// }
// }
// }
// social links
ColumnLayout { ColumnLayout {
StatusBaseText { StatusBaseText {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
Layout.alignment: Qt.AlignCenter Layout.alignment: Qt.AlignCenter
visible: assetsView.count == 0 visible: webView.count == 0
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
color: Theme.palette.directColor1 color: Theme.palette.directColor1
text: qsTr("%1 doesn't have any assets/tokens yet").arg(root.mainDisplayName) text: qsTr("%1 has not shared any links").arg(root.mainDisplayName)
} }
StatusGridView { Item {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
id: assetsView Layout.topMargin: (webView.contentY > Style.current.padding) ? 1 : Style.current.padding
model: assetsProxyModel Behavior on Layout.topMargin { NumberAnimation { duration: 50 } }
rightMargin: Style.current.halfPadding clip: true
cellWidth: (width-rightMargin)/3
cellHeight: cellWidth/2.5
visible: count
ScrollBar.vertical: StatusScrollBar { }
delegate: StatusListItem {
readonly property double changePct24hour: model.changePct24hour ?? 0
readonly property string textColor: changePct24hour === 0
? Theme.palette.baseColor1 : changePct24hour < 0
? Theme.palette.dangerColor1 : Theme.palette.successColor1
readonly property string arrow: changePct24hour === 0 ? "" : changePct24hour < 0 ? "↓" : "↑"
width: GridView.view.cellWidth - Style.current.halfPadding StatusGridView {
height: GridView.view.cellHeight - Style.current.halfPadding id: webView
title: model.name width: 608
//subTitle: LocaleUtils.currencyAmountToLocaleString(model.enabledNetworkBalance) height: parent.height
statusListItemTitle.font.weight: Font.Medium anchors.top: parent.top
tertiaryTitle: qsTr("%1% today %2") anchors.topMargin: Style.current.halfPadding
.arg(LocaleUtils.numberToLocaleString(changePct24hour, changePct24hour === 0 ? 0 : 2)).arg(arrow) anchors.bottom: parent.bottom
statusListItemTertiaryTitle.color: textColor anchors.bottomMargin: Style.current.halfPadding
statusListItemTertiaryTitle.font.pixelSize: Theme.asideTextFontSize anchors.horizontalCenter: parent.horizontalCenter
statusListItemTertiaryTitle.anchors.topMargin: 6 anchors.horizontalCenterOffset: Style.current.halfPadding
leftPadding: Style.current.halfPadding cellWidth: d.delegateWidthS
rightPadding: Style.current.halfPadding cellHeight: d.delegateHeightS
border.width: 1 visible: count
border.color: Theme.palette.baseColor2 clip: false
components: [ model: socialLinksProxyModel
Image { ScrollBar.vertical: StatusScrollBar { }
width: 40 delegate: InfoCard {
height: 40 readonly property int linkType: ProfileUtils.linkTextToType(model.text)
anchors.verticalCenter: parent.verticalCenter width: GridView.view.cellWidth - Style.current.padding
source: Constants.tokenIcon(model.symbol) height: GridView.view.cellHeight - Style.current.padding
} title: ProfileUtils.linkTypeToText(linkType)
] asset.bgColor: Style.current.translucentBlue
asset.name: ProfileUtils.linkTypeToIcon(linkType)
asset.color: ProfileUtils.linkTypeColor(linkType)
asset.width: 20
asset.height: 20
asset.bgWidth: 32
asset.bgHeight: 32
asset.isImage: false
subTitle: ProfileUtils.stripSocialLinkPrefix(model.url, linkType)
rightSideButtons: RowLayout {
StatusFlatRoundButton {
implicitWidth: 24
implicitHeight: 24
type: StatusFlatRoundButton.Type.Secondary
icon.name: "external"
icon.width: 16
icon.height: 16
icon.color: Theme.palette.baseColor1
enabled: root.sendToAccountEnabled
onClicked: { onClicked: {
if (root.readOnly) //TODO https://github.com/status-im/status-desktop/issues/13702
return //on right click open menu
// TODO what to do here? }
}
}
}
}
Item {
width: 279
height: 32
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: 20
Rectangle {
anchors.fill: parent
color: Style.current.background
radius: 30
border.color: Theme.palette.baseColor2
}
Row {
anchors.centerIn: parent
spacing: 4
StatusIcon {
width: 16
height: 16
icon: "info"
color: Theme.palette.directColor1
}
StatusBaseText {
font.pixelSize: 13
text: qsTr("Social handles and links are unverified")
}
} }
} }
} }