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

fix(StatusCommunityCard): fixup margins/padding and spacing 

- according to the Figma designs; looks much better now in both
small/big views
- don't stretch the bottomRow component unnecessarily in the Loader;
provide implicit width for the tags container instead
This commit is contained in:
Lukáš Tinkl 2024-10-03 18:39:31 +02:00 committed by Lukáš Tinkl
parent 7c5af79b19
commit fe9308fa1e
1 changed files with 8 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -273,7 +273,7 @@ Rectangle {
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: (root.cardSize === StatusCommunityCard.Size.Big) ? 16 : 8 anchors.topMargin: (root.cardSize === StatusCommunityCard.Size.Big) ? 16 : 8
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 12 anchors.leftMargin: d.margins
width: root.asset.width + 4 width: root.asset.width + 4
height: width height: width
radius: width / 2 radius: width / 2
@ -313,15 +313,14 @@ Rectangle {
// Community info // Community info
ColumnLayout { ColumnLayout {
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: (root.cardSize === StatusCommunityCard.Size.Big) ? 32 : 26 anchors.topMargin: (root.cardSize === StatusCommunityCard.Size.Big) ? 32 : 22
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: d.margins anchors.leftMargin: d.margins
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: d.margins anchors.rightMargin: d.margins
spacing: (root.cardSize === StatusCommunityCard.Size.Big) ? 6 : 0 spacing: (root.cardSize === StatusCommunityCard.Size.Big) ? 6 : 2
StatusBaseText { StatusBaseText {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 22
text: root.name text: root.name
font.weight: d.titleFontWeight font.weight: d.titleFontWeight
font.pixelSize: root.titleFontSize font.pixelSize: root.titleFontSize
@ -345,8 +344,8 @@ Rectangle {
anchors.leftMargin: d.margins anchors.leftMargin: d.margins
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: d.margins anchors.rightMargin: d.margins
anchors.bottomMargin: d.margins anchors.bottomMargin: 8
spacing: (root.cardSize === StatusCommunityCard.Size.Big) ? 18 : 0 spacing: (root.cardSize === StatusCommunityCard.Size.Big) ? 18 : 4
Row { Row {
spacing: 20 spacing: 20
// Members // Members
@ -391,7 +390,8 @@ Rectangle {
// Bottom Row extra info component // Bottom Row extra info component
Loader { Loader {
id: bottomRowLoader id: bottomRowLoader
Layout.fillWidth: true Layout.maximumWidth: parent.width
Layout.alignment: Qt.AlignHCenter
Layout.preferredHeight: 24 Layout.preferredHeight: 24
active: ((root.categories.count > 0) || !!root.bottomRowComponent) active: ((root.categories.count > 0) || !!root.bottomRowComponent)
sourceComponent: tagsListComponent sourceComponent: tagsListComponent
@ -400,6 +400,7 @@ Rectangle {
Component { Component {
id: tagsListComponent id: tagsListComponent
StatusRollArea { StatusRollArea {
implicitWidth: d.cardWidth
arrowsGradientColor: d.cardColor arrowsGradientColor: d.cardColor
// TODO: Replace by `StatusListItemTagRow` - To be done! // TODO: Replace by `StatusListItemTagRow` - To be done!