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

167
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,39 +384,46 @@ 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 {
arrowsGradientColor: d.cardColor id: tagsListComponent
StatusRollArea {
arrowsGradientColor: d.cardColor
// TODO: Replace by `StatusListItemTagRow` - To be done! // TODO: Replace by `StatusListItemTagRow` - To be done!
content: Row { content: Row {
spacing: 8 spacing: 8
clip: true clip: true
Repeater { Repeater {
model: root.categories model: root.categories
delegate: StatusListItemTag { delegate: StatusListItemTag {
bgColor: "transparent" bgColor: "transparent"
bgRadius: 20 bgRadius: 20
bgBorderColor: Theme.palette.baseColor2 bgBorderColor: Theme.palette.baseColor2
height: 24 height: 24
closeButtonVisible: false closeButtonVisible: false
asset.emoji: model.emoji asset.emoji: model.emoji
asset.width: 24 asset.width: 24
asset.height: 24 asset.height: 24
asset.color: "transparent" asset.color: "transparent"
asset.isLetterIdenticon: true asset.isLetterIdenticon: true
title: model.name title: model.name
titleText.font.pixelSize: 13 titleText.font.pixelSize: 13
titleText.color: d.fontColor titleText.color: d.fontColor
}
} }
} }
} }
} }
} }
} // 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()

726
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,10 +30,14 @@ 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
id: communitiesView Layout.topMargin: (communitiesView.contentY > Style.current.padding) ? 1 : Style.current.padding
model: communitiesProxyModel Behavior on Layout.topMargin { NumberAnimation { duration: 50 } }
rightMargin: Style.current.halfPadding clip: true
cellWidth: (width-rightMargin)/2 StatusGridView {
cellHeight: cellWidth/2 id: communitiesView
visible: count width: 606
ScrollBar.vertical: StatusScrollBar { } height: parent.height
delegate: StatusListItem { // TODO custom delegate anchors.top: parent.top
width: GridView.view.cellWidth - Style.current.smallPadding anchors.topMargin: Style.current.halfPadding
height: GridView.view.cellHeight - Style.current.smallPadding anchors.bottom: parent.bottom
title: model.name ?? "" anchors.bottomMargin: Style.current.halfPadding
statusListItemTitle.font.pixelSize: 17 anchors.horizontalCenter: parent.horizontalCenter
statusListItemTitle.font.bold: true anchors.horizontalCenterOffset: Style.current.halfPadding
subTitle: model.description ?? "" clip: false
tertiaryTitle: qsTr("%n member(s)", "", model.membersCount ?? 0) cellWidth: d.delegateWidthM
asset.name: model.image ?? model.name ?? "" cellHeight: d.delegateHeightM
asset.isImage: asset.name.startsWith(Constants.dataImagePrefix) visible: count
asset.isLetterIdenticon: !model.image model: communitiesProxyModel
asset.color: model.color ?? "" ScrollBar.vertical: StatusScrollBar { }
asset.width: 40 delegate: StatusCommunityCard {
asset.height: 40 id: profileDialogCommunityCard
border.width: 1 readonly property var permissionsList: model.permissionsModel //TODO: Add permissions model in the community model
border.color: Theme.palette.baseColor2 readonly property bool requirementsMet: !!model.allTokenRequirementsMet ? model.allTokenRequirementsMet : false
loading: !model.id cardSize: StatusCommunityCard.Size.Small
components: [ width: GridView.view.cellWidth - Style.current.padding
StatusIcon { height: GridView.view.cellHeight - Style.current.padding
visible: !!model.memberRole && titleFontSize: 15
model.memberRole === Constants.memberRole.owner || descriptionFontSize: 12
model.memberRole === Constants.memberRole.admin || communityId: model.id ?? ""
model.memberRole === Constants.memberRole.tokenMaster loaded: !!model.id
anchors.verticalCenter: parent.verticalCenter asset.source: model.image ?? ""
icon: "crown" asset.isImage: !!model.image
color: Theme.palette.directColor1 asset.width: 32
asset.height: 32
name: model.name ?? ""
memberCountVisible: false
layer.enabled: hovered
border.width: hovered ? 0 : 1
border.color: Theme.palette.baseColor2
descriptionFontColor: Theme.palette.baseColor1
description: {
switch (model.memberRole) {
case (Constants.memberRole.owner):
return qsTr("Owner");
case (Constants.memberRole.admin) :
return qsTr("Admin");
case (Constants.memberRole.tokenMaster):
return qsTr("Token Master");
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: {
print ("!!communitiesProxyModel", JSON.stringify(StatusQUtils.ModelUtils.modelToArray(communitiesProxyModel)))
if (root.readOnly)
return
root.closeRequested()
Global.switchToCommunity(model.id)
//TODO https://github.com/status-im/status-desktop/issues/13702
//on right click add menu
} }
]
onClicked: {
if (root.readOnly || loading)
return
root.closeRequested()
Global.switchToCommunity(model.id)
} }
} }
} }
@ -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,72 +267,139 @@ 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
id: accountsView Layout.topMargin: (accountsView.contentY > Style.current.padding) ? 1 : Style.current.padding
model: accountsProxyModel Behavior on Layout.topMargin { NumberAnimation { duration: 50 } }
spacing: Style.current.halfPadding clip: true
visible: count StatusGridView {
delegate: StatusListItem { id: accountsView
id: accountDelegate width: 606
height: parent.height
border.width: 1 anchors.top: parent.top
border.color: Theme.palette.baseColor2 anchors.topMargin: Style.current.halfPadding
width: ListView.view.width anchors.bottom: parent.bottom
title: model.name anchors.bottomMargin: Style.current.halfPadding
subTitle: StatusQUtils.Utils.elideText(model.address, 6, 4).replace("0x", "0×") anchors.horizontalCenter: parent.horizontalCenter
asset.color: Utils.getColorForId(model.colorId) cellWidth: d.delegateWidthM
asset.emoji: model.emoji ?? "" cellHeight: d.delegateHeightM
asset.name: asset.emoji || "filled-account" visible: count
asset.isLetterIdenticon: asset.emoji clip: false
asset.letterSize: 14 ScrollBar.vertical: StatusScrollBar { }
asset.bgColor: Theme.palette.primaryColor3 model: accountsProxyModel
asset.isImage: asset.emoji delegate: InfoCard {
components: [ implicitWidth: GridView.view.cellWidth - Style.current.padding
StatusIcon { implicitHeight: GridView.view.cellHeight - Style.current.padding
anchors.verticalCenter: parent.verticalCenter title: model.name
icon: "show" subTitle: StatusQUtils.Utils.elideText(model.address, 6, 4).replace("0x", "0×")
color: Theme.palette.directColor1 asset.color: Utils.getColorForId(model.colorId)
}, asset.emoji: model.emoji ?? ""
StatusFlatButton { asset.name: asset.emoji || "filled-account"
anchors.verticalCenter: parent.verticalCenter asset.isLetterIdenticon: asset.emoji
size: StatusBaseButton.Size.Small asset.letterSize: 14
enabled: !model.saved asset.bgColor: Theme.palette.primaryColor3
text: model.saved ? qsTr("Address saved") : qsTr("Save Address") asset.isImage: asset.emoji
onClicked: { enabledNetworks: root.enabledNetworks
// From here, we should just run add saved address popup rightSideButtons: RowLayout {
Global.openAddEditSavedAddressesPopup({ StatusFlatRoundButton {
addAddress: true, Layout.preferredWidth: 32
address: model.address Layout.preferredHeight: 32
}) type: StatusFlatRoundButton.Type.Secondary
icon.name: "send"
icon.color: Theme.palette.baseColor1
enabled: root.sendToAccountEnabled
onClicked: {
Global.openSendModal(model.address)
}
} }
}, StatusFlatRoundButton {
StatusFlatRoundButton { Layout.preferredWidth: 32
anchors.verticalCenter: parent.verticalCenter Layout.preferredHeight: 32
type: StatusFlatRoundButton.Type.Secondary type: StatusFlatRoundButton.Type.Secondary
icon.name: "send" icon.name: "more"
tooltip.text: qsTr("Send") icon.color: Theme.palette.baseColor1
enabled: root.sendToAccountEnabled onClicked: {
onClicked: { //TODO https://github.com/status-im/status-desktop/issues/13702
Global.openSendModal(model.address) //open menu
} }
},
StatusFlatRoundButton {
anchors.verticalCenter: parent.verticalCenter
type: StatusFlatRoundButton.Type.Secondary
icon.name: "copy"
tooltip.text: d.copyLiteral
onClicked: {
tooltip.text = qsTr("Copied")
root.copyToClipboard(model.address)
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,77 +414,98 @@ 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
id: collectiblesView Layout.topMargin: (collectiblesView.contentY > Style.current.padding) ? 1 : Style.current.padding
model: collectiblesProxyModel Behavior on Layout.topMargin { NumberAnimation { duration: 50 } }
rightMargin: Style.current.halfPadding clip: true
cellWidth: (width-rightMargin)/4 StatusGridView {
cellHeight: cellWidth id: collectiblesView
visible: count width: 608
ScrollBar.vertical: StatusScrollBar { } height: parent.height
delegate: StatusRoundedImage { anchors.top: parent.top
width: GridView.view.cellWidth - Style.current.smallPadding anchors.topMargin: Style.current.halfPadding
height: GridView.view.cellHeight - Style.current.smallPadding anchors.bottom: parent.bottom
border.width: 1 anchors.bottomMargin: Style.current.halfPadding
border.color: Theme.palette.directColor7 anchors.horizontalCenter: parent.horizontalCenter
color: !!model.backgroundColor ? model.backgroundColor : "transparent" anchors.horizontalCenterOffset: Style.current.halfPadding
radius: Style.current.radius cellWidth: d.delegateWidthS
showLoadingIndicator: true cellHeight: d.delegateHeightS
isLoading: image.isLoading || !model.imageUrl visible: count
image.fillMode: Image.PreserveAspectCrop clip: false
image.source: model.imageUrl ?? "" // TODO Issue #11637: Dedicated controller for user's list of collectibles (no watch-only entries)
model: collectiblesProxyModel
RowLayout { ScrollBar.vertical: StatusScrollBar { }
anchors.left: parent.left delegate: StatusRoundedImage {
anchors.leftMargin: Style.current.halfPadding width: GridView.view.cellWidth - Style.current.padding
anchors.bottom: parent.bottom height: GridView.view.cellHeight - Style.current.padding
anchors.bottomMargin: Style.current.halfPadding border.width: 1
anchors.right: parent.right border.color: Theme.palette.directColor7
anchors.rightMargin: Style.current.halfPadding color: !!model.backgroundColor ? model.backgroundColor : "transparent"
radius: Style.current.radius
showLoadingIndicator: true
isLoading: image.isLoading || !model.imageUrl
image.fillMode: Image.PreserveAspectCrop
image.source: model.imageUrl ?? ""
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 { Control {
visible: hhandler.hovered && (!!model.name || !!model.collectionName) width: 24
text: { height: 24
const name = model.name anchors.left: parent.left
const descr = model.collectionName anchors.leftMargin: 12
const sep = !!name && !!descr ? "<br>" : "" anchors.bottom: parent.bottom
return `<b>${name}</b>${sep}${descr}` 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 {
id: hhandler
cursorShape: hovered ? Qt.PointingHandCursor : undefined
} }
}
HoverHandler { TapHandler {
id: hhandler onSingleTapped: {
cursorShape: hovered ? Qt.PointingHandCursor : undefined //TODO https://github.com/status-im/status-desktop/issues/13702
} Global.openLink(model.permalink)
}
TapHandler {
onSingleTapped: {
Global.openLink(model.permalink)
} }
} }
} }
@ -333,61 +513,199 @@ Control {
} }
// 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: {
//TODO https://github.com/status-im/status-desktop/issues/13702
//on right click open menu
}
}
}
}
}
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")
} }
]
onClicked: {
if (root.readOnly)
return
// TODO what to do here?
} }
} }
} }