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(StatusCard): fix some visual glitches 

- correct propagation of hover events, fixes card flicker
- improve the ugly thick border
- token icons are now correctly rounded
- fix text descent lines are cut of ("y" and "p" truncated at the
bottom) due to excessive clipping, set correct max line count
- fix tag outline not being visible in dark mode
- add/update the corresponding SB page, with more controls to play
around with the different params

Fixes #14555
This commit is contained in:
Lukáš Tinkl 2024-05-01 15:19:57 +02:00 committed by Lukáš Tinkl
parent d191a2d9ec
commit 22a9ca72b3
6 changed files with 98 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
storybook/pages/CommunityInfoEditor.qml
View File

@ -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: 12
property bool adminControlsEnabled: true
ColumnLayout {
Label {
@ -59,7 +58,7 @@ ColumnLayout {
Slider {
value: root.membersCount
from: 0
to: 1000
to: 3000
onValueChanged: root.membersCount = value
}
}
@ -108,6 +107,7 @@ ColumnLayout {
}
RowLayout {
visible: root.adminControlsEnabled
Label {
text: "Is community admin:"
}
@ -118,6 +118,7 @@ ColumnLayout {
}
}
RowLayout {
visible: root.adminControlsEnabled
Label {
text: "Is community editable:"
}
@ -142,6 +143,7 @@ ColumnLayout {
}
}
RowLayout {
visible: root.adminControlsEnabled
Layout.fillWidth: true
CheckBox {
id: ctrlShardingEnabled

103
storybook/pages/StatusCommunityCardPage.qml
View File

@ -1,23 +1,16 @@
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 }
@ -25,72 +18,60 @@ SplitView {
SplitView.fillWidth: true
SplitView.fillHeight: true
HotLoader {
id: loader
StatusCommunityCard {
anchors.centerIn: parent
source: sourceCodeBox.sourceCode
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
Connections {
target: loader.item
function onClicked() {
logs.logEvent("StatusCommunityCard::clicked",
["communityId"], arguments)
}
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
CommunityInfoEditor {
id: infoEditor
colorVisible: true
adminControlsEnabled: false
Item {
Layout.fillWidth: true
Layout.fillHeight: true
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
ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml
View File

@ -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
@ -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.
@ -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.
@ -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.
*/
@ -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
@ -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:
@ -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 {
@ -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
@ -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 {
@ -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
@ -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
}
}
@ -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
}
}
@ -404,16 +404,16 @@ 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
@ -421,7 +421,7 @@ Rectangle {
asset.color: "transparent"
asset.isLetterIdenticon: true
title: model.name
titleText.font.pixelSize: 13
titleText.font.pixelSize: 12
titleText.color: d.fontColor
}
}
@ -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)
}
}

7
ui/StatusQ/src/StatusQ/Components/StatusCommunityTags.qml
View File

@ -1,5 +1,6 @@
import QtQuick 2.14
import StatusQ 0.1
import StatusQ.Core 0.1
import StatusQ.Controls 0.1
@ -53,19 +54,21 @@ Item {
}
filters: [
ExpressionFilter {
FastExpressionFilter {
enabled: root.filterString !== ""
expression: {
root.filterString
return model.name.toUpperCase().indexOf(root.filterString.toUpperCase()) !== -1
}
expectedRoles: ["name"]
},
ExpressionFilter {
FastExpressionFilter {
enabled: root.mode !== StatusCommunityTags.Highlight
expression: {
root.mode
return filterModel.selectionPredicate(model.selected)
}
expectedRoles: ["selected"]
}
]
}

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

@ -93,6 +93,7 @@ StatusScrollView {
collectiblesModel: root.collectiblesModel
model: card.permissionsList
requirementsMet: card.requirementsMet
overlappingBorder: 0
}
onClicked: root.cardClicked(communityId)

13
ui/imports/shared/views/profile/ProfileShowcaseCommunitiesView.qml
View File

@ -132,12 +132,13 @@ Item {
onClicked: {
if (root.readOnly)
return
if (mouse.button === Qt.LeftButton) {
Global.switchToCommunity(model.id);
root.closeRequested();
} else {
Global.openMenu(delegatesActionsMenu, this, { communityId: model.id, url: Utils.getCommunityShareLink(model.id) });
}
Global.switchToCommunity(model.id)
root.closeRequested()
}
onRightClicked: {
if (root.readOnly)
return
Global.openMenu(delegatesActionsMenu, this, { communityId: model.id, url: Utils.getCommunityShareLink(model.id) })
}
}
}