From c97e9c4ffc8608d924e7163a657b24bd28d5c8de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Tinkl?= Date: Tue, 19 Sep 2023 10:25:48 +0200 Subject: [PATCH] fix: Gradient mask of replied message doesn't work - improve the respective storybook page - some minor cleanups/fixes Fixes #11385 --- storybook/pages/FeeRowPage.qml | 2 +- storybook/pages/StatusMessagePage.qml | 62 +++++++++++++------ .../statusMessage/StatusMessageReply.qml | 4 +- .../statusMessage/StatusTextMessage.qml | 2 +- .../Core/StatusIdenticonRingSettings.qml | 2 +- 5 files changed, 49 insertions(+), 23 deletions(-) diff --git a/storybook/pages/FeeRowPage.qml b/storybook/pages/FeeRowPage.qml index f2fc879466..c83115e522 100644 --- a/storybook/pages/FeeRowPage.qml +++ b/storybook/pages/FeeRowPage.qml @@ -71,7 +71,7 @@ SplitView { } RadioButton { - readonly property string title: ModelsData.descriptions.medium + readonly property string title: ModelsData.descriptions.mediumLoremIpsum text: "Very Long" } diff --git a/storybook/pages/StatusMessagePage.qml b/storybook/pages/StatusMessagePage.qml index b39505aed1..94de8c6877 100644 --- a/storybook/pages/StatusMessagePage.qml +++ b/storybook/pages/StatusMessagePage.qml @@ -17,27 +17,41 @@ SplitView { QtObject { id: d - property var messagesModel: ListModel { + readonly property var messagesModel: ListModel { ListElement { - timestamp: 1656937930 + timestamp: 1656937930123 + senderId: "zq123456789" senderDisplayName: "simon" profileImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/ nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC" contentType: StatusMessage.ContentType.Text - message: "Hello, this is awesome! Feels like decentralized Discord!" + message: "Hello, this is awesome! Feels like decentralized Discord! And it even supports HTML markup, like bold, italics or underline" isContact: true + isAReply: false trustIndicator: StatusContactVerificationIcons.TrustedType.Verified } ListElement { - timestamp: 1657937930 + timestamp: 1657937930135 + senderId: "zqABCDEFG" senderDisplayName: "Mark Cuban" contentType: StatusMessage.ContentType.Text message: "I know a lot of you really seem to get off or be validated by arguing with strangers online but please know it's a complete waste of your time and energy" isContact: false + isAReply: false trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy } + ListElement { + timestamp: 1667937930159 + senderId: "zqdeadbeef" + senderDisplayName: "replicator.stateofus.eth" + contentType: StatusMessage.ContentType.Text + message: "Test reply; the original text above should have a horizontal gradient mask" + isContact: true + isAReply: true + trustIndicator: StatusContactVerificationIcons.TrustedType.None + } } - property var colorHash: ListModel { + readonly property var colorHash: ListModel { ListElement { colorId: 13; segmentLength: 5 } ListElement { colorId: 31; segmentLength: 5 } ListElement { colorId: 10; segmentLength: 1 } @@ -59,29 +73,46 @@ SplitView { color: Theme.palette.statusAppLayout.rightPanelBackgroundColor ListView { - anchors.margins: 50 + anchors.margins: 16 anchors.fill: parent spacing: 16 model: d.messagesModel delegate: StatusMessage { width: ListView.view.width timestamp: model.timestamp - messageDetails: StatusMessageDetails { + messageDetails { + readonly property bool isEnsVerified: model.senderDisplayName.endsWith(".eth") messageText: model.message contentType: model.contentType + sender.id: isEnsVerified ? "" : model.senderId sender.displayName: model.senderDisplayName sender.isContact: model.isContact sender.trustIndicator: model.trustIndicator - sender.profileImage: StatusProfileImageSettings { - width: 40 - height: 40 + sender.isEnsVerified: isEnsVerified + sender.profileImage { name: model.profileImage || "" - colorId: 1 + colorId: index colorHash: d.colorHash } } - onSenderNameClicked: logs.logEvent("StatusMessage::onSenderNameClicked(): ") - onProfilePictureClicked: logs.logEvent("StatusMessage::profilePictureClicked(): ") + + isAReply: model.isAReply + replyDetails { + amISender: true + sender.id: "0xdeadbeef" + sender.profileImage { + width: 20 + height: 20 + name: ModelsData.icons.dribble + colorHash: d.colorHash + } + messageText: ModelsData.descriptions.mediumLoremIpsum + } + + onSenderNameClicked: logs.logEvent("StatusMessage::senderNameClicked") + onProfilePictureClicked: logs.logEvent("StatusMessage::profilePictureClicked") + onReplyProfileClicked: logs.logEvent("StatusMessage::replyProfileClicked") + onReplyMessageClicked: logs.logEvent("StatusMessage::replyMessageClicked") } } } @@ -95,11 +126,6 @@ SplitView { logsView.logText: logs.logText } } - - Pane { - SplitView.minimumWidth: 300 - SplitView.preferredWidth: 300 - } } // category: Components diff --git a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageReply.qml b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageReply.qml index b0b5d29705..99893e86f3 100644 --- a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageReply.qml +++ b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageReply.qml @@ -106,8 +106,8 @@ Item { } Item { - implicitWidth: messageContentsLayout.implicitWidth - implicitHeight: messageContentsLayout.implicitHeight + Layout.fillWidth: true + Layout.preferredHeight: messageContentsLayout.implicitHeight ColumnLayout { id: messageContentsLayout diff --git a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml index eab532c3ad..5e1f6610d1 100644 --- a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml +++ b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml @@ -91,7 +91,7 @@ Item { color: d.isQuote ? Theme.palette.baseColor1 : Theme.palette.directColor1 font.family: Theme.palette.baseFont.name font.pixelSize: Theme.primaryTextFontSize - textFormat: Text.RichText + textFormat: root.stripHtmlTags ? Text.PlainText : Text.RichText wrapMode: root.convertToSingleLine ? Text.NoWrap : Text.Wrap readOnly: true selectByMouse: true diff --git a/ui/StatusQ/src/StatusQ/Core/StatusIdenticonRingSettings.qml b/ui/StatusQ/src/StatusQ/Core/StatusIdenticonRingSettings.qml index 5c042b0ba3..e19a4442db 100644 --- a/ui/StatusQ/src/StatusQ/Core/StatusIdenticonRingSettings.qml +++ b/ui/StatusQ/src/StatusQ/Core/StatusIdenticonRingSettings.qml @@ -32,7 +32,7 @@ QtObject { id: statusIdenticonRingSettings /*! - \qmlproperty ListModel StatusIdenticonRingSettings::ringSpecModel + \qmlproperty var StatusIdenticonRingSettings::ringSpecModel This is a REQUIRED property that contains a ListModel or array of objects that describes each ring segment color and length. Examples: