import QtQuick 2.13 import QtQuick.Controls 2.13 import QtGraphicalEffects 1.13 import utils 1.0 import shared 1.0 import shared.panels 1.0 import StatusQ.Components 0.1 import StatusQ.Core.Theme 0.1 import StatusQ.Core 0.1 Rectangle { id: root property string chatId: "" property string name: "channelName" property string message: "My latest message\n with a return" property int chatType: Constants.chatType.unknown color: "#F7F7F7" width: 366 height: 75 anchors.top: Global.applicationWindow.top radius: Style.current.radius Loader { id: identicon sourceComponent: localAccountSensitiveSettings.notificationMessagePreviewSetting === Constants.settingsSection.notificationsBubble.previewAnonymous ? statusIdenticon : userOrChannelIdenticon anchors.left: parent.left anchors.leftMargin: Style.current.padding anchors.verticalCenter: parent.verticalCenter height: 40 width: 40 } Component { id: userOrChannelIdenticon StatusSmartIdenticon { id: contactImage anchors.left: parent.left anchors.leftMargin: Style.current.smallPadding anchors.verticalCenter: parent.verticalCenter asset.width: 40 asset.height: 40 asset.letterSize: 15 asset.color: Theme.palette.miscColor5 name: root.name } } Component { id: statusIdenticon SVGImage { source: Style.svg("status-logo-icon") width: 40 height: 40 } } StyledText { id: name anchors.bottom: messagePreview.top anchors.bottomMargin: 2 anchors.left: identicon.right anchors.leftMargin: Style.current.smallPadding anchors.right: openButton.left anchors.rightMargin: Style.current.smallPadding elide: Text.ElideRight text: root.name font.weight: Font.Medium font.pixelSize: 15 color: Style.current.evenDarkerGrey } StyledText { id: messagePreview anchors.bottom: identicon.bottom anchors.bottomMargin: 2 anchors.left: identicon.right anchors.leftMargin: Style.current.smallPadding anchors.right: openButton.left anchors.rightMargin: Style.current.padding elide: Text.ElideRight clip: true // This is needed because emojis don't ellide correctly font.pixelSize: 14 color: Style.current.evenDarkerGrey text: root.message } Rectangle { id: openButton anchors.right: parent.right height: parent.height width: 85 color: "transparent" Rectangle { height: parent.height width: 1.2 anchors.left: parent.left color: "#D9D9D9" } StyledText { font.weight: Font.Medium font.pixelSize: 14 anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: parent.horizontalCenter text: qsTr("Open") color: Style.current.darkerGrey } } }