diff --git a/sandbox/demoapp/StatusAppCommunitiesPortalView.qml b/sandbox/demoapp/StatusAppCommunitiesPortalView.qml
index 1b49c799..a9f4e23d 100644
--- a/sandbox/demoapp/StatusAppCommunitiesPortalView.qml
+++ b/sandbox/demoapp/StatusAppCommunitiesPortalView.qml
@@ -100,11 +100,12 @@ ScrollView {
locale: "es"
communityId: model.communityId
loaded: model.available
- logo: model.icon
+ logo: model.logo
name: model.name
description: model.description
members: model.members
popularity: model.popularity
+ communityColor: model.communityColor
categories: ListModel {
ListElement { name: "sport"; emoji: "๐พ"}
ListElement { name: "food"; emoji: "๐ฅ"}
@@ -137,11 +138,15 @@ ScrollView {
locale: "es"
communityId: model.communityId
loaded: model.available
- logo: model.icon
+ logo: model.logo
name: model.name
description: model.description
members: model.members
+ activeUsers: model.activeUsers
popularity: model.popularity
+ tokenLogo: model.tokenLogo
+ isPrivate: model.isPrivate
+ banner: model.banner
onClicked: { d.navigateToCommunity(communityId) }
}
diff --git a/sandbox/demoapp/data/Models.qml b/sandbox/demoapp/data/Models.qml
index 34d360d1..a64a3af4 100644
--- a/sandbox/demoapp/data/Models.qml
+++ b/sandbox/demoapp/data/Models.qml
@@ -1326,125 +1326,164 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
ListElement {
name: "CryptoKitties";
description: "A community of cat lovers, meow!";
- icon:"qrc:/images/CryptoKitties.png";
+ logo:"qrc:/images/CryptoKitties.png";
members: 1045;
categories: [];
communityId: "341";
available: true;
- popularity: 1
+ popularity: 1;
+ communityColor: "pink"
}
ListElement {
name: "Friends with Benefits";
description: "A group chat full of out favorite thinkers and creators.";
- icon:"qrc:/images/FriendsBenefits.png";
+ logo:"qrc:/images/FriendsBenefits.png";
members: 452;
categories: [];
communityId: "232";
available: true;
- popularity: 2
+ popularity: 2;
+ communityColor: "grey"
}
ListElement {
name: "Status Hi!!";
description: "A new community description with long long long and repetitive repetitive repetitive repetitive explanation!!";
- icon:"qrc:/images/SNT.png";
+ logo:"qrc:/images/SNT.png";
members: 89;
categories: [];
communityId: "223";
available: true;
popularity: 3
+ communityColor: "blue"
}
}
property ListModel curatedCommunitiesModel : ListModel {
ListElement {
- name: "CryptoKitties";
- description: "A community of cat lovers, meow!";
- icon:"qrc:/images/CryptoKitties.png";
- members: 1000;
+ name: "Status.im";
+ description: "Your portal to Web3. Secure wallet. dApp browser. Private messaging. All-in-one.";
+ logo: "qrc:/images/SNT.png";
+ banner: "qrc:/images/CommunityBanner1.png";
+ members: 299500;
+ activeUsers: 71400;
categories: [];
communityId: "1";
available: true;
popularity: 1
+ isPrivate: true
+ tokenLogo: "qrc:/images/SNT.png";
}
ListElement {
- name: "Friends with Benefits";
- description: "A group chat full of out favorite thinkers and creators.";
- icon:"qrc:/images/FriendsBenefits.png";
- members: 452;
+ name: "SuperRare";
+ description: "The future of CryptoArt marketsโa network governed by artists, collectors and curators.";
+ logo:"qrc:/images/SR.png";
+ banner: "qrc:/images/SuperRareCommunityBanner.png";
+ members: 299500;
+ activeUsers: 71400;
categories: [];
communityId: "2";
available: true;
popularity: 2
+ isPrivate: true
+ tokenLogo: "qrc:/images/SRToken.png";
}
ListElement {
- name: "Teller";
- description: "A community of P2P crypto trades";
- icon:"qrc:/images/P2PCrypto.png";
- members: 50;
+ name: "Coinbase";
+ description: "Jump start your crypto portfolio with the easiest place to buy and sell crypto. ";
+ logo:"qrc:/images/Coinbase.png";
+ banner: "qrc:/images/CoinBaseCommunityBanner.png";
+ members: 4900000;
+ activeUsers: 245600;
categories: [];
communityId: "3";
available: true;
popularity: 3
+ isPrivate: false
+ tokenLogo: "";
}
ListElement {
- name: "Status";
- description: "Community description goes here.";
- icon:"qrc:/images/SNT.png";
- members: 5288;
+ name: "Rarible";
+ description: "Multichain community-centric NFT marketplace. Create, sell and collect NFTs.";
+ logo:"qrc:/images/Rarible.png";
+ banner: "qrc:/images/RaribleCommunityBanner.png";
+ members: 629200;
+ activeUsers: 112100;
categories: [];
communityId: "4";
available: true;
popularity: 4
+ isPrivate: true
+ tokenLogo: "qrc:/images/RARI.png";
}
ListElement {
- name: "Status Punks";
- description: "Community description goes here.Community description goes here. Community description goes here. Community description goes here.";
- icon:"qrc:/images/StatusPunks.png";
- members: 4125;
+ name: "Spotify";
+ description: "Listening is everything";
+ logo:"qrc:/images/Spotify.png";
+ banner: "qrc:/images/SpotifyCommunityBanner.png";
+ members: 207500;
+ activeUsers: 52200;
categories: [];
communityId: "5";
- available: false;
+ available: true;
popularity: 5
+ isPrivate: false
+ tokenLogo: "";
}
ListElement {
- name: "Uniswap";
- description: "Community description goes here.";
- icon:"qrc:/images/CryptoKitties.png";
- members: 45;
+ name: "Dribbble";
+ description: "Open source platform to write and distribute decentralized applications..";
+ logo:"qrc:/images/Fluff.png";
+ banner: "qrc:/images/DribbbleCommunityBanner.png";
+ members: 2300000;
+ activeUsers: 112100;
categories: [];
communityId: "6";
- available: false;
+ available: true;
popularity: 6
+ isPrivate: false
+ tokenLogo: "";
}
ListElement {
- name: "Dragonereum";
- description: "Community description goes here.";
- icon:"qrc:/images/Dragonerum.png";
- members: 968;
+ name: "Status.im";
+ description: "Your portal to Web3. Secure wallet. dApp browser. Private messaging. All-in-one.";
+ logo:"qrc:/images/SNT.png";
+ banner: ""
+ members: 299500;
+ activeUsers: 71400;
categories: [];
communityId: "7";
available: true;
- popularity: 7
+ popularity: 1
+ isPrivate: false
+ tokenLogo: "";
}
ListElement {
name: "CryptoPunks";
description: "Community description goes here. Community description goes here. Community description goes here. Community description goes here. Community description goes here. Community description goes here.";
- icon:"qrc:/images/CryptoPunks.png";
- members: 4200;
+ logo:"qrc:/images/CryptoPunks.png";
+ banner: "";
+ members: 4900;
+ activeUsers: 245600;
categories: [];
communityId: "8";
- available: true;
+ available: false;
popularity: 8
+ isPrivate: false
+ tokenLogo: "";
}
ListElement {
name: "Socks";
description: "Community description goes here.";
- icon:"qrc:/images/Socks.png"
- members: 12;
+ logo:"qrc:/images/Socks.png";
+ banner: "";
+ members: 4900;
+ activeUsers: 245600;
categories: [];
communityId: "9";
- available: true;
+ available: false;
popularity: 9
+ isPrivate: false
+ tokenLogo: "";
}
}
diff --git a/sandbox/images/CoinBaseCommunityBanner.png b/sandbox/images/CoinBaseCommunityBanner.png
new file mode 100644
index 00000000..0fc7a1c5
Binary files /dev/null and b/sandbox/images/CoinBaseCommunityBanner.png differ
diff --git a/sandbox/images/Coinbase.png b/sandbox/images/Coinbase.png
new file mode 100644
index 00000000..daa9c9cb
Binary files /dev/null and b/sandbox/images/Coinbase.png differ
diff --git a/sandbox/images/CommunityBanner1.png b/sandbox/images/CommunityBanner1.png
new file mode 100644
index 00000000..3edc2d76
Binary files /dev/null and b/sandbox/images/CommunityBanner1.png differ
diff --git a/sandbox/images/DribbbleCommunityBanner.png b/sandbox/images/DribbbleCommunityBanner.png
new file mode 100644
index 00000000..e0d713bb
Binary files /dev/null and b/sandbox/images/DribbbleCommunityBanner.png differ
diff --git a/sandbox/images/Ethereum.png b/sandbox/images/Ethereum.png
new file mode 100644
index 00000000..95cfc651
Binary files /dev/null and b/sandbox/images/Ethereum.png differ
diff --git a/sandbox/images/EthereumCommunityBanner.png b/sandbox/images/EthereumCommunityBanner.png
new file mode 100644
index 00000000..9f994d15
Binary files /dev/null and b/sandbox/images/EthereumCommunityBanner.png differ
diff --git a/sandbox/images/Fluff.png b/sandbox/images/Fluff.png
new file mode 100644
index 00000000..76bed826
Binary files /dev/null and b/sandbox/images/Fluff.png differ
diff --git a/sandbox/images/RARI.png b/sandbox/images/RARI.png
new file mode 100644
index 00000000..d7f75513
Binary files /dev/null and b/sandbox/images/RARI.png differ
diff --git a/sandbox/images/Rarible.png b/sandbox/images/Rarible.png
new file mode 100644
index 00000000..d92f355f
Binary files /dev/null and b/sandbox/images/Rarible.png differ
diff --git a/sandbox/images/RaribleCommunityBanner.png b/sandbox/images/RaribleCommunityBanner.png
new file mode 100644
index 00000000..b5f53372
Binary files /dev/null and b/sandbox/images/RaribleCommunityBanner.png differ
diff --git a/sandbox/images/SR.png b/sandbox/images/SR.png
new file mode 100644
index 00000000..33973f72
Binary files /dev/null and b/sandbox/images/SR.png differ
diff --git a/sandbox/images/SRToken.png b/sandbox/images/SRToken.png
new file mode 100644
index 00000000..d51df2ac
Binary files /dev/null and b/sandbox/images/SRToken.png differ
diff --git a/sandbox/images/Spotify.png b/sandbox/images/Spotify.png
new file mode 100644
index 00000000..196ca1db
Binary files /dev/null and b/sandbox/images/Spotify.png differ
diff --git a/sandbox/images/SpotifyCommunityBanner.png b/sandbox/images/SpotifyCommunityBanner.png
new file mode 100644
index 00000000..7b6d383d
Binary files /dev/null and b/sandbox/images/SpotifyCommunityBanner.png differ
diff --git a/sandbox/images/SuperRareCommunityBanner.png b/sandbox/images/SuperRareCommunityBanner.png
new file mode 100644
index 00000000..dbc1ec2d
Binary files /dev/null and b/sandbox/images/SuperRareCommunityBanner.png differ
diff --git a/sandbox/pages/StatusCommunityCardPage.qml b/sandbox/pages/StatusCommunityCardPage.qml
index ba17aaa0..74b2268e 100644
--- a/sandbox/pages/StatusCommunityCardPage.qml
+++ b/sandbox/pages/StatusCommunityCardPage.qml
@@ -17,8 +17,8 @@ GridLayout {
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
columns: 2
- columnSpacing: 16
- rowSpacing: 16
+ columnSpacing: 28
+ rowSpacing: 28
Repeater {
model: Models.curatedCommunitiesModel
@@ -26,15 +26,19 @@ GridLayout {
locale: "en"
communityId: model.communityId
loaded: model.available
- logo: model.icon
+ logo: model.logo
+ banner: model.banner
name: model.name
description: model.description
members: model.members
+ activeUsers: model.activeUsers
popularity: model.popularity
+ isPrivate: model.isPrivate
+ tokenLogo: model.tokenLogo
categories: ListModel {
- ListElement { name: "sport"; emoji: "๐พ"}
- ListElement { name: "food"; emoji: "๐ฅ"}
- ListElement { name: "privacy"; emoji: "๐ป"}
+ ListElement { name: "Crypto"; emoji: "๐"}
+ ListElement { name: "Privacy"; emoji: "๐ป"}
+ ListElement { name: "Social"; emoji: "โ"}
}
onClicked: { d.navigateToCommunity(communityId) }
diff --git a/sandbox/qml.qrc b/sandbox/qml.qrc
index 7c807e59..082509d6 100644
--- a/sandbox/qml.qrc
+++ b/sandbox/qml.qrc
@@ -53,5 +53,20 @@
images/SNT.png
images/Socks.png
images/StatusPunks.png
+ images/CommunityBanner1.png
+ images/Coinbase.png
+ images/CoinBaseCommunityBanner.png
+ images/DribbbleCommunityBanner.png
+ images/Ethereum.png
+ images/EthereumCommunityBanner.png
+ images/Fluff.png
+ images/Rarible.png
+ images/RaribleCommunityBanner.png
+ images/Spotify.png
+ images/SpotifyCommunityBanner.png
+ images/SR.png
+ images/SuperRareCommunityBanner.png
+ images/RARI.png
+ images/SRToken.png
diff --git a/src/StatusQ/Components/StatusCommunityCard.qml b/src/StatusQ/Components/StatusCommunityCard.qml
index 52de3d0f..f8d2ffac 100644
--- a/src/StatusQ/Components/StatusCommunityCard.qml
+++ b/src/StatusQ/Components/StatusCommunityCard.qml
@@ -1,5 +1,6 @@
import QtQuick 2.13
import QtQuick.Layouts 1.14
+import QtGraphicalEffects 1.0
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
@@ -66,6 +67,11 @@ Rectangle {
This property holds the community members value.
*/
property int members: 0
+ /*!
+ \qmlproperty int StatusCommunityCard::activeUsers
+ This property holds the community active users value.
+ */
+ property int activeUsers: 0
/*!
\qmlproperty int StatusCommunityCard::popularity
This property holds the community popularity (community rate).
@@ -93,6 +99,28 @@ Rectangle {
If not provided, default value is "en".
*/
property string locale: "en"
+ /*!
+ \qmlproperty url StatusCommunityCard::banner
+ This property holds the community banner image url.
+ */
+ property url banner: ""
+ /*!
+ \qmlproperty color StatusCommunityCard::communityColor
+ This property holds the community color.
+ If not provided, default value in Light Theme is "#4360DF" and in Dark Theme is "#88B0FF".
+ */
+ property color communityColor: Theme.palette.primaryColor1
+ /*!
+ \qmlproperty bool StatusCommunityCard::isPrivate
+ This property holds if the community is private.
+ If not provided, default value is false.
+ */
+ property bool isPrivate: false
+ /*!
+ \qmlproperty url StatusCommunityCard::tokenLogo
+ This property holds the image of the token needed if the community is private.
+ */
+ property url tokenLogo: ""
/*!
\qmlsignal StatusCommunityCard::clicked(string communityId)
@@ -102,180 +130,330 @@ Rectangle {
QtObject {
id: d
- property int dMargins: 12
+ property int cardWidth: 335
+ property int bannerHeigth: 64
+ property int cardHeigth: 190
+ property int totalHeigth: 230
+ property int margins: 12
+ property int bannerRadius: 20
+ property int cardRadius: 16
+ property color cardColor: Theme.palette.indirectColor1
+ property color fontColor: Theme.palette.directColor1
+ property color loadingColor1: Theme.palette.baseColor5
+ property color loadingColor2: Theme.palette.baseColor4
+
+ function numberFormat(number) {
+ var res = number
+ const million = 1000000
+ const ks = 1000
+ if(number > million) {
+ res = number / million
+ res = Number(number / million).toLocaleString(Qt.locale(root.locale), 'f', 1) + 'M'
+ }
+ else if(number > ks) {
+ res = number / ks
+ res = Number(number / ks).toLocaleString(Qt.locale(root.locale), 'f', 1) + 'K'
+ }
+ else
+ res = Number(number).toLocaleString(Qt.locale(root.locale), 'f', 0)
+ return res
+ }
}
- width: 400 // by design
- height: 230 // by design
- border.color: Theme.palette.baseColor2
- color: sensor.containsMouse ? Theme.palette.baseColor4 : "transparent"
- radius: 8
- clip: true
+ width: d.cardWidth
+ height: d.totalHeigth
+ radius: d.bannerRadius
+ color: "transparent"
+ layer.enabled: true
+ layer.effect: DropShadow {
+ source: root
+ horizontalOffset: 0
+ verticalOffset: 2
+ radius: sensor.containsMouse ? 30 : d.bannerRadius
+ samples: 25
+ spread: 0
+ color: sensor.containsMouse ? Theme.palette.backdropColor : Theme.palette.dropShadow
+ }
- // Community Card:
- ColumnLayout {
- visible: root.loaded
- anchors.fill: parent
- anchors.margins: d.dMargins
- clip: true
- spacing: 4
+ // Community banner:
+ Item {
+ id: banner
+ anchors.top: parent.top
+ width: d.cardWidth
+ height: d.bannerHeigth
+ Rectangle {
+ id: mask
+ anchors.fill: parent
+ radius: d.bannerRadius
+ color: root.loaded ? root.communityColor : d.loadingColor2
+ }
+ Image {
+ id: image
+ source: root.banner
+ anchors.fill: parent
+ anchors.centerIn: parent
+ fillMode: Image.PreserveAspectFit
+ smooth: true
+ visible: !root.loaded || !root.banner
+ }
+ OpacityMask {
+ anchors.fill: image
+ source: image
+ maskSource: mask
+ }
+ }
+
+ // Community logo:
+ Rectangle {
+ z: parent.z + 1
+ anchors.top: parent.top
+ anchors.topMargin: 16
+ anchors.left: parent.left
+ anchors.leftMargin: 12
+ width: 48
+ height: width
+ radius: width / 2
+ color: root.loaded ? d.cardColor : d.loadingColor1
StatusRoundedImage {
- width: 40
- height: 40
+ visible: root.loaded
+ anchors.centerIn: parent
+ width: parent.width - 4
+ height: width
image.source: root.logo
color: "transparent"
}
+ } // End of community logo
- // TODO: Add here new component for community permissions / restrictions
- // ...
-
- RowLayout {
- Layout.topMargin: 8
-
+ // Content card
+ Rectangle {
+ visible: root.loaded
+ anchors.top: parent.top
+ anchors.topMargin: 40
+ width: d.cardWidth
+ height: d.cardHeigth
+ color: d.cardColor
+ radius: d.cardRadius
+ clip: true
+ // Community restriccions
+ Rectangle {
+ visible: root.isPrivate
+ anchors.top: parent.top
+ anchors.topMargin: 8
+ anchors.right: parent.right
+ anchors.rightMargin: anchors.topMargin
+ width: 48
+ height: 24
+ color: d.loadingColor2
+ radius: 200
+ StatusIcon {
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.leftMargin: 6
+ anchors.left: parent.left
+ icon: "tiny/unlocked"
+ width: 16
+ height: 16
+ color: Theme.palette.baseColor1
+ }
+ StatusRoundedImage {
+ anchors.rightMargin: 2
+ anchors.right: parent.right
+ anchors.verticalCenter: parent.verticalCenter
+ width: 20
+ height: width
+ image.source: root.tokenLogo
+ color: "transparent"
+ }
+ }
+ // Community info
+ ColumnLayout {
+ anchors.fill: parent
+ anchors.topMargin: 32
+ anchors.leftMargin: d.margins
+ anchors.rightMargin: d.margins
+ anchors.bottomMargin: d.margins
+ clip: true
+ spacing: 6
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
text: root.name
font.weight: Font.Bold
- font.pixelSize: 17
- color: Theme.palette.directColor1
+ font.pixelSize: 19
+ color: d.fontColor
}
-
- StatusIcon {
- Layout.alignment: Qt.AlignVCenter
- Layout.leftMargin: 6
- icon: "tiny/tiny-contact"
- width: 10
- height: 10
- color: Theme.palette.baseColor1
- }
-
StatusBaseText {
- Layout.alignment: Qt.AlignVCenter
- text: Number(root.members).toLocaleString(Qt.locale(locale), 'f', 0)
- font.pixelSize: 13
- color: Theme.palette.directColor1
- horizontalAlignment: Text.AlignLeft
+ Layout.fillWidth: true
+ Layout.fillHeight: true
+ text: root.description
+ font.pixelSize: 15
+ lineHeight: 1.2
+ color: d.fontColor
+ maximumLineCount: 2
+ wrapMode: Text.WordWrap
+ elide: Text.ElideRight
+ clip: true
}
}
-
- StatusBaseText {
- Layout.fillHeight: true
- Layout.fillWidth: true
- text: root.description
- font.pixelSize: 15
- color: Theme.palette.directColor1
- wrapMode: Text.WordWrap
- elide: Text.ElideRight
+ ColumnLayout {
+ anchors.fill: parent
+ anchors.topMargin: 116
+ anchors.leftMargin: d.margins
+ anchors.rightMargin: d.margins
+ anchors.bottomMargin: d.margins
clip: true
- }
+ spacing: 18
+ Row {
+ Layout.alignment: Qt.AlignVCenter
+ spacing: 20
+ // Members
+ Row {
+ height: membersTxt.height
+ spacing: 4
+ StatusIcon {
+ anchors.verticalCenter: parent.verticalCenter
+ icon: "tiny/members"
+ width: 16
+ height: 16
+ }
+ StatusBaseText {
+ id: membersTxt
+ Layout.alignment: Qt.AlignVCenter
+ text: d.numberFormat(root.members)
+ font.pixelSize: 15
+ color: d.fontColor
+ }
+ }
+ // Active users:
+ Row {
+ height: activeUsersTxt.height
+ spacing: 4
+ StatusIcon {
+ anchors.verticalCenter: parent.verticalCenter
+ icon: "tiny/flash"
+ width: 14
+ height: 14
+ }
+ StatusBaseText {
+ id: activeUsersTxt
+ Layout.alignment: Qt.AlignVCenter
+ text: d.numberFormat(root.activeUsers)
+ font.pixelSize: 15
+ color: d.fontColor
+ }
+ }
+ }
+ // TODO: Replace by `StatusListItemTagRow` - To be done!
+ Row {
+ visible: root.categories.count > 0
+ Layout.alignment: Qt.AlignVCenter
+ Layout.fillWidth: true
+ spacing: 8
+ clip: true
- // TODO: Replace by `StatusListItemTagRow` - To be done!
- Row {
- visible: root.categories.count > 0
- Layout.bottomMargin: 4
- width: 324 // by design
- spacing: 8
- clip: true
-
- Repeater {
- model: root.categories
- delegate: StatusListItemTag {
- border.color: Theme.palette.baseColor2
- color: "transparent"
- height: 32
- radius: 36
- closeButtonVisible: false
- icon.emoji: model.emoji
- icon.height: 32
- icon.width: icon.height
- icon.color: "transparent"
- icon.isLetterIdenticon: true
- title: model.name
- titleText.font.pixelSize: 15
- titleText.color: Theme.palette.primaryColor1
+ Repeater {
+ model: root.categories
+ delegate: StatusListItemTag {
+ border.color: Theme.palette.baseColor2
+ color: "transparent"
+ height: 24
+ radius: 20
+ closeButtonVisible: false
+ icon.emoji: model.emoji
+ icon.height: 24
+ icon.width: icon.height
+ icon.color: "transparent"
+ icon.isLetterIdenticon: true
+ title: model.name
+ titleText.font.pixelSize: 13
+ titleText.color: d.fontColor
+ }
}
}
}
- }
+ } // End of content card
- // Loading Card
- ColumnLayout {
+ // Loading card
+ Rectangle {
visible: !root.loaded
- anchors.fill: parent
- anchors.margins: d.dMargins
+ anchors.top: parent.top
+ anchors.topMargin: 40
+ width: d.cardWidth
+ height: d.cardHeigth
+ color: d.cardColor
+ radius: d.cardRadius
clip: true
- spacing: 9
-
Rectangle {
- width: 40
- height: 40
- color: Theme.palette.baseColor2
- radius: width / 2
+ anchors.top: parent.top
+ anchors.topMargin: 8
+ anchors.right: parent.right
+ anchors.rightMargin: anchors.topMargin
+ width: 48
+ height: 24
+ color: d.loadingColor2
+ radius: 200
}
-
- RowLayout {
- Layout.topMargin: 8
+ ColumnLayout {
+ anchors.fill: parent
+ anchors.topMargin: 32
+ anchors.margins: d.margins
+ clip: true
+ spacing: 9
Rectangle {
- Layout.alignment: Qt.AlignBottom
- Layout.topMargin: 8
width: 84
height: 16
- color: Theme.palette.baseColor2
+ color: d.loadingColor1
radius: 5
}
-
Rectangle {
- Layout.leftMargin: 8
- Layout.alignment: Qt.AlignBottom
- width: 14
- height: 14
- color: Theme.palette.baseColor2
- radius: width / 2
- }
-
- Rectangle {
- Layout.alignment: Qt.AlignBottom
- width: 50
- height: 12
- color: Theme.palette.baseColor2
+ width: 311
+ height: 16
+ color: d.loadingColor1
radius: 5
}
- }
-
- Rectangle {
- width: 311
- height: 16
- color: Theme.palette.baseColor2
- radius: 5
- }
-
- Rectangle {
- width: 271
- height: 16
- color: Theme.palette.baseColor2
- radius: 5
- }
-
- // Filler
- Item { Layout.fillHeight: true }
-
- Row {
- Layout.bottomMargin: 4
- spacing: 8
-
- Repeater {
- model: 3
- delegate:
- Rectangle {
- width: 76
- height: 24
- color: Theme.palette.baseColor2
- radius: 20
+ Rectangle {
+ width: 271
+ height: 16
+ color: d.loadingColor1
+ radius: 5
+ }
+ Row {
+ Layout.topMargin: 22 - 9
+ spacing: 16
+ Repeater {
+ model: 2
+ delegate: Row {
+ spacing: 4
+ Rectangle {
+ width: 14
+ height: 14
+ color: d.loadingColor1
+ radius: width / 2
+ }
+ Rectangle {
+ width: 50
+ height: 12
+ color: d.loadingColor2
+ radius: 5
+ }
+ }
+ }
+ }
+ Row {
+ Layout.topMargin: 21 - 9
+ spacing: 8
+ Repeater {
+ model: 3
+ delegate:
+ Rectangle {
+ width: 76
+ height: 24
+ color: d.loadingColor2
+ radius: 20
+ }
}
}
}
- }
+ } // End of loading card
MouseArea {
id: sensor
diff --git a/src/assets/img/icons/tiny/flash.svg b/src/assets/img/icons/tiny/flash.svg
new file mode 100644
index 00000000..8ebfe083
--- /dev/null
+++ b/src/assets/img/icons/tiny/flash.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/img/icons/tiny/members.svg b/src/assets/img/icons/tiny/members.svg
new file mode 100644
index 00000000..33925f18
--- /dev/null
+++ b/src/assets/img/icons/tiny/members.svg
@@ -0,0 +1,6 @@
+
diff --git a/src/assets/img/icons/tiny/unlocked.svg b/src/assets/img/icons/tiny/unlocked.svg
new file mode 100644
index 00000000..2d2ed428
--- /dev/null
+++ b/src/assets/img/icons/tiny/unlocked.svg
@@ -0,0 +1,5 @@
+