Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CHERRY-PICK: fix(StatusCommunityCard): fix some visual glitches #14583

Merged
merged 1 commit into from
May 2, 2024
Merged

CHERRY-PICK: fix(StatusCommunityCard): fix some visual glitches #14583

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions storybook/pages/CommunityInfoEditor.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,7 @@ ColumnLayout {
property url banner: ctrlCommunityBanner.checked ? Style.png("settings/communities@2x") : ""
readonly property bool shardingEnabled: ctrlShardingEnabled.checked
property alias shardIndex: ctrlShardIndex.value

spacing: 24
property bool adminControlsEnabled: true

ColumnLayout {
Label {
Expand Down Expand Up @@ -59,7 +58,7 @@ ColumnLayout {
Slider {
value: root.membersCount
from: 0
to: 1000
to: 3000
onValueChanged: root.membersCount = value
}
}
Expand Down Expand Up @@ -108,6 +107,7 @@ ColumnLayout {
}

RowLayout {
visible: root.adminControlsEnabled
Label {
text: "Is community admin:"
}
Expand All @@ -118,6 +118,7 @@ ColumnLayout {
}
}
RowLayout {
visible: root.adminControlsEnabled
Label {
text: "Is community editable:"
}
Expand All @@ -142,6 +143,7 @@ ColumnLayout {
}
}
RowLayout {
visible: root.adminControlsEnabled
Layout.fillWidth: true
CheckBox {
id: ctrlShardingEnabled
Expand Down
105 changes: 43 additions & 62 deletions storybook/pages/StatusCommunityCardPage.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,96 +1,77 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

import StatusQ.Components 0.1
import StatusQ.Core.Theme 0.1

import Storybook 1.0

SplitView {
id: root

orientation: Qt.Vertical

readonly property string source: `
import QtQml 2.14
import StatusQ.Components 0.1
Component {
StatusCommunityCard {
name: nameTextField.text
}
}
`
orientation: Qt.Horizontal

Logs { id: logs }

Item {
SplitView.fillWidth: true
SplitView.fillHeight: true

HotLoader {
id: loader

StatusCommunityCard {
anchors.centerIn: parent
source: sourceCodeBox.sourceCode

Connections {
target: loader.item

function onClicked() {
logs.logEvent("StatusCommunityCard::clicked",
["communityId"], arguments)
}
cardSize: ctrlSize.checked ? StatusCommunityCard.Size.Big : StatusCommunityCard.Size.Small
communityId: "community_id"
name: infoEditor.name
description: infoEditor.description
members: infoEditor.membersCount
activeUsers: members/2
//popularity: 4 // not visualized?
banner: infoEditor.banner
asset.source: infoEditor.image
asset.isImage: true
communityColor: infoEditor.color
loaded: !ctrlLoading.checked

categories: ListModel {
ListElement { name: "gaming"; emoji: "🎮"; selected: false }
ListElement { name: "art"; emoji: "🖼️️"; selected: false }
ListElement { name: "crypto"; emoji: "💸"; selected: true }
ListElement { name: "nsfw"; emoji: "🍆"; selected: false }
ListElement { name: "markets"; emoji: "💎"; selected: false }
}
}

Pane {
anchors.fill: parent
visible: !!loader.errors

CompilationErrorsBox {
anchors.fill: parent
errors: loader.errors
}
onClicked: logs.logEvent("StatusCommunityCard::onClicked", ["communityId"], arguments)
onRightClicked: logs.logEvent("StatusCommunityCard::onRightClicked", ["communityId"], arguments)
}
}

LogsAndControlsPanel {
id: logsAndControlsPanel

SplitView.minimumHeight: 100
SplitView.preferredHeight: 200
SplitView.preferredWidth: 250

logsView.logText: logs.logText

RowLayout {
anchors.fill: parent

Item {
Layout.fillWidth: true
Layout.fillHeight: true
CommunityInfoEditor {
id: infoEditor
colorVisible: true
adminControlsEnabled: false

ColumnLayout {
anchors.fill: parent

TextField {
id: nameTextField
text: "Card name!"
}
}
Switch {
id: ctrlSize
text: "Big card"
checked: true
}

SourceCodeBox {
id: sourceCodeBox

Layout.preferredWidth: root.width / 2
Layout.fillHeight: true

sourceCode: root.source
hasErrors: !!loader.errors
Switch {
id: ctrlLoading
text: "Loading"
checked: false
}
}
}
}

// category: Panels
// category: Components

// https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=8159%3A416159
// https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=8159%3A416160
70 changes: 38 additions & 32 deletions ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import QtQuick 2.13
import QtQuick.Layouts 1.14
import QtGraphicalEffects 1.0
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtGraphicalEffects 1.15

import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
Expand Down Expand Up @@ -51,7 +51,7 @@ Rectangle {
\qmlproperty bool StatusCommunityCard::hovered
This property indicates whether the card contains mouse.
*/
property bool hovered: sensor.containsMouse
readonly property bool hovered: sensor.hovered
/*!
\qmlproperty int StatusCommunityCard::titleFontSize
This property holds the title's font size.
Expand All @@ -61,7 +61,7 @@ Rectangle {
\qmlproperty int StatusCommunityCard::descriptionFontSize
This property holds the description's font size.
*/
property int descriptionFontSize: 15
property int descriptionFontSize: cardSize === StatusCommunityCard.Size.Big ? 15 : 13
/*!
\qmlproperty string StatusCommunityCard::communityId
This property holds the community identifier value.
Expand Down Expand Up @@ -136,14 +136,14 @@ Rectangle {
property url tokenLogo: ""

/*!
\qmlproperty Item StatusCommunityCard::rigthHeaderComponent
\qmlproperty Component StatusCommunityCard::rigthHeaderComponent
This property holds an extra info header component that will be displayed on top right of the card.
Example: Community token permissions row.
*/
property alias rigthHeaderComponent: rightHeaderLoader.sourceComponent

/*!
\qmlproperty Item StatusCommunityCard::bottomRowComponent
\qmlproperty Component 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.
*/
Expand All @@ -168,7 +168,13 @@ Rectangle {
\qmlsignal StatusCommunityCard::clicked(string communityId)
This signal is emitted when the card item is clicked.
*/
signal clicked(var mouse, string communityId)
signal clicked(string communityId)

/*!
\qmlsignal StatusCommunityCard::rightClicked(string communityId)
This signal is emitted when the card item is clicked with RMB.
*/
signal rightClicked(string communityId)

QtObject {
id: d
Expand Down Expand Up @@ -208,15 +214,16 @@ Rectangle {
implicitHeight: d.totalHeigth
radius: d.bannerRadius
color: "transparent"
border.color: Theme.palette.directColor8
layer.enabled: true
layer.effect: DropShadow {
source: root
horizontalOffset: 0
verticalOffset: 2
radius: sensor.containsMouse ? d.bannerRadiusHovered : d.bannerRadius
radius: root.hovered ? d.bannerRadiusHovered : d.bannerRadius
samples: 25
spread: 0
color: sensor.containsMouse ? Theme.palette.backdropColor : Theme.palette.dropShadow
color: root.hovered ? Theme.palette.backdropColor : Theme.palette.dropShadow
}

// Community banner:
Expand Down Expand Up @@ -293,8 +300,6 @@ Rectangle {
height: d.cardHeigth
color: d.cardColor
radius: d.cardRadius
border.color: root.border.color
clip: true

// Right header extra info component
Loader {
Expand All @@ -315,8 +320,7 @@ Rectangle {
anchors.rightMargin: d.margins
spacing: (root.cardSize === StatusCommunityCard.Size.Big) ? 6 : 0
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
Layout.fillWidth: (root.cardSize === StatusCommunityCard.Size.Big)
Layout.fillWidth: true
Layout.preferredHeight: 22
text: root.name
font.weight: d.titleFontWeight
Expand All @@ -326,16 +330,13 @@ Rectangle {
}
StatusBaseText {
Layout.fillWidth: true
Layout.fillHeight: (root.cardSize === StatusCommunityCard.Size.Big)
Layout.preferredHeight: 16
text: root.description
font.pixelSize: root.descriptionFontSize
lineHeight: 1.2
color: root.descriptionFontColor
maximumLineCount: 2
maximumLineCount: root.cardSize === StatusCommunityCard.Size.Big ? 2 : 1
wrapMode: Text.WordWrap
elide: Text.ElideRight
clip: true
}
}
ColumnLayout {
Expand All @@ -347,7 +348,6 @@ Rectangle {
anchors.bottomMargin: d.margins
spacing: (root.cardSize === StatusCommunityCard.Size.Big) ? 18 : 0
Row {
Layout.alignment: Qt.AlignVCenter
spacing: 20
// Members
visible: root.memberCountVisible
Expand All @@ -364,7 +364,7 @@ Rectangle {
id: membersTxt
Layout.alignment: Qt.AlignVCenter
text: d.numberFormat(root.members)
font.pixelSize: 15
font.pixelSize: root.descriptionFontSize
color: d.fontColor
}
}
Expand All @@ -382,7 +382,7 @@ Rectangle {
id: activeUsersTxt
Layout.alignment: Qt.AlignVCenter
text: d.numberFormat(root.activeUsers)
font.pixelSize: 15
font.pixelSize: root.descriptionFontSize
color: d.fontColor
}
}
Expand All @@ -404,24 +404,24 @@ Rectangle {

// TODO: Replace by `StatusListItemTagRow` - To be done!
content: Row {
spacing: 8
clip: true
spacing: 4

Repeater {
model: root.categories
delegate: StatusListItemTag {
bgColor: "transparent"
bgRadius: 20
bgBorderColor: Theme.palette.baseColor2
bgBorderColor: Theme.palette.directColor8
height: 24
spacing: 0
closeButtonVisible: false
asset.emoji: model.emoji
asset.width: 24
asset.height: 24
asset.color: "transparent"
asset.isLetterIdenticon: true
title: model.name
titleText.font.pixelSize: 13
titleText.font.pixelSize: 12
titleText.color: d.fontColor
}
}
Expand Down Expand Up @@ -514,14 +514,20 @@ Rectangle {
}
} // End of loading card

MouseArea {
HoverHandler {
id: sensor
enabled: root.loaded
anchors.fill: parent
cursorShape: root.loaded ? Qt.PointingHandCursor : Qt.ArrowCursor
hoverEnabled: true
acceptedButtons: Qt.LeftButton | Qt.RightButton
cursorShape: root.loaded ? Qt.PointingHandCursor : undefined
}

onClicked: root.clicked(mouse ,root.communityId)
TapHandler {
enabled: root.loaded
acceptedButtons: Qt.LeftButton
onTapped: root.clicked(root.communityId)
onLongPressed: root.rightClicked(root.communityId)
}
TapHandler {
enabled: root.loaded
acceptedButtons: Qt.RightButton
onTapped: root.rightClicked(root.communityId)
}
}
Loading