status-desktop/storybook/pages/StatusMessagePage.qml

215 lines
8.9 KiB
QML

import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import StatusQ.Core 0.1
import StatusQ.Components 0.1
import StatusQ.Core.Theme 0.1
import Storybook 1.0
import Models 1.0
SplitView {
id: root
Logs { id: logs }
QtObject {
id: d
readonly property var messagesModel: ListModel {
ListElement {
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! And it even supports HTML markup, like <b>bold</b>, <i>italics</i> or <u>underline</u>"
isContact: true
isAReply: false
trustIndicator: StatusContactVerificationIcons.TrustedType.Verified
outgoingStatus: StatusMessage.OutgoingStatus.Delivered
}
ListElement {
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
outgoingStatus: StatusMessage.OutgoingStatus.Delivered
}
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
outgoingStatus: StatusMessage.OutgoingStatus.Delivered
}
ListElement {
timestamp: 1667937930489
senderId: "zqdeadbeef"
senderDisplayName: "replicator.stateofus.eth"
contentType: StatusMessage.ContentType.Text
message: "Test message with a link https://github.com/. Try to copy the link!"
isContact: true
isAReply: true
trustIndicator: StatusContactVerificationIcons.TrustedType.None
outgoingStatus: StatusMessage.OutgoingStatus.Delivered
}
ListElement {
timestamp: 1719769718000
senderId: "zq123456790"
senderDisplayName: "Alice"
contentType: StatusMessage.ContentType.Text
message: "Sending message"
isAReply: false
isContact: true
amISender: true
trustIndicator: StatusContactVerificationIcons.TrustedType.None
outgoingStatus: StatusMessage.OutgoingStatus.Sending
}
ListElement {
timestamp: 1719769718000
senderId: "zq123456790"
senderDisplayName: "Alice"
contentType: StatusMessage.ContentType.Text
message: "Sent message"
isAReply: false
isContact: true
amISender: true
trustIndicator: StatusContactVerificationIcons.TrustedType.None
outgoingStatus: StatusMessage.OutgoingStatus.Sent
resendError: ""
}
ListElement {
timestamp: 1719769718000
senderId: "zq123456790"
senderDisplayName: "Alice"
contentType: StatusMessage.ContentType.Text
message: "Delivered message"
isAReply: false
isContact: true
amISender: true
trustIndicator: StatusContactVerificationIcons.TrustedType.None
outgoingStatus: StatusMessage.OutgoingStatus.Delivered
resendError: ""
}
ListElement {
timestamp: 1719769718000
senderId: "zq123456790"
senderDisplayName: "Alice"
contentType: StatusMessage.ContentType.Text
message: "Expired message"
isAReply: false
isContact: true
amISender: true
trustIndicator: StatusContactVerificationIcons.TrustedType.None
outgoingStatus: StatusMessage.OutgoingStatus.Expired
resendError: ""
}
ListElement {
timestamp: 1719769718000
senderId: "zq123456790"
senderDisplayName: "Alice"
contentType: StatusMessage.ContentType.Text
message: "Message with resend error"
isAReply: false
isContact: true
amISender: true
trustIndicator: StatusContactVerificationIcons.TrustedType.None
outgoingStatus: StatusMessage.OutgoingStatus.Expired
resendError: "can't send message on Tuesday"
}
}
readonly property var colorHash: ListModel {
ListElement { colorId: 13; segmentLength: 5 }
ListElement { colorId: 31; segmentLength: 5 }
ListElement { colorId: 10; segmentLength: 1 }
ListElement { colorId: 2; segmentLength: 5 }
ListElement { colorId: 26; segmentLength: 2 }
ListElement { colorId: 19; segmentLength: 4 }
ListElement { colorId: 28; segmentLength: 3 }
}
}
SplitView {
orientation: Qt.Vertical
SplitView.fillWidth: true
Rectangle {
SplitView.fillWidth: true
SplitView.fillHeight: true
color: Theme.palette.statusAppLayout.rightPanelBackgroundColor
ListView {
anchors.margins: 16
anchors.fill: parent
spacing: 16
model: d.messagesModel
delegate: StatusMessage {
width: ListView.view.width
timestamp: model.timestamp
isAReply: model.isAReply
outgoingStatus: model.outgoingStatus
resendError: model.outgoingStatus === StatusMessage.OutgoingStatus.Expired ? model.resendError : ""
messageDetails {
readonly property bool isEnsVerified: model.senderDisplayName.endsWith(".eth")
messageText: model.message
contentType: model.contentType
amISender: model.amISender
sender.id: isEnsVerified ? "" : model.senderId
sender.displayName: model.senderDisplayName
sender.isContact: model.isContact
sender.trustIndicator: model.trustIndicator
sender.isEnsVerified: isEnsVerified
sender.profileImage {
name: model.profileImage || ""
colorId: index
colorHash: d.colorHash
}
}
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")
onResendClicked: logs.logEvent("StatusMessage::resendClicked")
}
}
}
LogsAndControlsPanel {
id: logsAndControlsPanel
SplitView.minimumHeight: 100
SplitView.preferredHeight: 200
logsView.logText: logs.logText
}
}
}
// category: Components