feat: introduce StatusNotification component
This component renders a macos like notification and can be used in the notification settings for message previews.
This commit is contained in:
parent
693214a940
commit
60a939d29e
|
@ -0,0 +1 @@
|
||||||
|
<svg fill="none" height="41" viewBox="0 0 39 41" width="39" xmlns="http://www.w3.org/2000/svg"><path d="m19.402 40.4286c10.655 0 19.2926-8.869 19.2926-19.8095s-8.6376-19.80953-19.2926-19.80953c-10.65504 0-19.292625 8.86903-19.292625 19.80953s8.637585 19.8095 19.292625 19.8095z" fill="#4360df"/><g clip-rule="evenodd" fill="#fff" fill-rule="evenodd"><path d="m16.1669 21.464c-3.0002.1732-4.8181 1.773-4.6898 4.164.1316 2.4326 2.5502 3.9272 4.9699 3.7909 3.9373-.231 6.8419-3.8232 7.1692-7.933-.5359.128-1.0817.208-1.6311.2391-2.215.1282-3.6032-.3893-5.8182-.261z"/><path d="m22.6544 20.4367c3.133-.1849 5.0296-1.8944 4.8957-4.4494-.1372-2.5989-2.6615-4.201-5.187-4.0508-4.1161.2437-7.1433 4.0855-7.4842 8.4771.5588-.1372 1.1284-.2227 1.702-.2553 2.3129-.1375 3.7641.4158 6.0735.2784z"/></g></svg>
|
After Width: | Height: | Size: 796 B |
|
@ -25,6 +25,9 @@ QtObject {
|
||||||
readonly property int notifyAllMessages: 0
|
readonly property int notifyAllMessages: 0
|
||||||
readonly property int notifyJustMentions: 1
|
readonly property int notifyJustMentions: 1
|
||||||
readonly property int notifyNone: 2
|
readonly property int notifyNone: 2
|
||||||
|
readonly property int notificationPreviewAnonymous: 0
|
||||||
|
readonly property int notificationPreviewNameOnly: 1
|
||||||
|
readonly property int notificationPreviewNameAndMessage: 2
|
||||||
readonly property int fetchMoreMessagesButton: -2
|
readonly property int fetchMoreMessagesButton: -2
|
||||||
readonly property int chatIdentifier: -1
|
readonly property int chatIdentifier: -1
|
||||||
readonly property int unknownContentType: 0
|
readonly property int unknownContentType: 0
|
||||||
|
|
|
@ -18,6 +18,8 @@ QtObject {
|
||||||
readonly property color blue: "#4360DF"
|
readonly property color blue: "#4360DF"
|
||||||
readonly property color transparent: "#00000000"
|
readonly property color transparent: "#00000000"
|
||||||
readonly property color darkGrey: "#939BA1"
|
readonly property color darkGrey: "#939BA1"
|
||||||
|
readonly property color darkerGrey: "#717171"
|
||||||
|
readonly property color evenDarkerGrey: "#4C4C4C"
|
||||||
readonly property color lightBlueText: "#8f9fec"
|
readonly property color lightBlueText: "#8f9fec"
|
||||||
readonly property color darkBlue: "#3c55c9"
|
readonly property color darkBlue: "#3c55c9"
|
||||||
readonly property color darkBlueBtn: "#5a70dd"
|
readonly property color darkBlueBtn: "#5a70dd"
|
||||||
|
|
|
@ -14,7 +14,7 @@ Theme {
|
||||||
property color darkAccentBlue: "#2946C4"
|
property color darkAccentBlue: "#2946C4"
|
||||||
property color transparent: "#00000000"
|
property color transparent: "#00000000"
|
||||||
property color darkGrey: "#838C91"
|
property color darkGrey: "#838C91"
|
||||||
property color darkerGrey: "#252528"
|
property color evenDarkerGrey: "#252528"
|
||||||
property color lightBlueText: "#8f9fec"
|
property color lightBlueText: "#8f9fec"
|
||||||
property color darkBlue: "#3c55c9"
|
property color darkBlue: "#3c55c9"
|
||||||
property color darkBlueBtn: "#5a70dd"
|
property color darkBlueBtn: "#5a70dd"
|
||||||
|
@ -26,7 +26,7 @@ Theme {
|
||||||
property color tenPercentBlue: Qt.rgba(67, 96, 223, 0.1)
|
property color tenPercentBlue: Qt.rgba(67, 96, 223, 0.1)
|
||||||
|
|
||||||
property color background: almostBlack
|
property color background: almostBlack
|
||||||
property color border: darkerGrey
|
property color border: evenDarkerGrey
|
||||||
property color borderSecondary: tenPercentWhite
|
property color borderSecondary: tenPercentWhite
|
||||||
property color borderTertiary: blue
|
property color borderTertiary: blue
|
||||||
property color textColor: white
|
property color textColor: white
|
||||||
|
@ -37,7 +37,7 @@ Theme {
|
||||||
property color inputBorderFocus: blue
|
property color inputBorderFocus: blue
|
||||||
property color inputColor: darkGrey
|
property color inputColor: darkGrey
|
||||||
property color modalBackground: background
|
property color modalBackground: background
|
||||||
property color backgroundHover: darkerGrey
|
property color backgroundHover: evenDarkerGrey
|
||||||
property color secondaryText: darkGrey
|
property color secondaryText: darkGrey
|
||||||
property color secondaryHover: tenPercentWhite
|
property color secondaryHover: tenPercentWhite
|
||||||
property color primary: blue
|
property color primary: blue
|
||||||
|
@ -47,14 +47,14 @@ Theme {
|
||||||
property color primaryMenuItemTextHover: almostBlack
|
property color primaryMenuItemTextHover: almostBlack
|
||||||
property color backgroundTertiary: tenPercentBlue
|
property color backgroundTertiary: tenPercentBlue
|
||||||
property color pillButtonTextColor: almostBlack
|
property color pillButtonTextColor: almostBlack
|
||||||
property color chatReplyCurrentUser: darkerGrey
|
property color chatReplyCurrentUser: evenDarkerGrey
|
||||||
property color topBarChatInfoColor: darkerGrey
|
property color topBarChatInfoColor: evenDarkerGrey
|
||||||
|
|
||||||
property color buttonForegroundColor: blue
|
property color buttonForegroundColor: blue
|
||||||
property color buttonBackgroundColor: secondaryBackground
|
property color buttonBackgroundColor: secondaryBackground
|
||||||
property color buttonSecondaryColor: darkGrey
|
property color buttonSecondaryColor: darkGrey
|
||||||
property color buttonDisabledForegroundColor: buttonSecondaryColor
|
property color buttonDisabledForegroundColor: buttonSecondaryColor
|
||||||
property color buttonDisabledBackgroundColor: darkerGrey
|
property color buttonDisabledBackgroundColor: evenDarkerGrey
|
||||||
|
|
||||||
property color roundedButtonForegroundColor: white
|
property color roundedButtonForegroundColor: white
|
||||||
property color roundedButtonBackgroundColor: secondaryBackground
|
property color roundedButtonBackgroundColor: secondaryBackground
|
||||||
|
|
|
@ -19,6 +19,8 @@ QtObject {
|
||||||
property color blue
|
property color blue
|
||||||
property color transparent
|
property color transparent
|
||||||
property color darkGrey
|
property color darkGrey
|
||||||
|
property color darkerGrey
|
||||||
|
property color evenDarkerGrey
|
||||||
property color lightBlueText
|
property color lightBlueText
|
||||||
property color darkBlue
|
property color darkBlue
|
||||||
property color darkBlueBtn
|
property color darkBlueBtn
|
||||||
|
|
|
@ -0,0 +1,106 @@
|
||||||
|
import QtQuick 2.13
|
||||||
|
import QtQuick.Controls 2.13
|
||||||
|
import QtGraphicalEffects 1.13
|
||||||
|
import "../../imports"
|
||||||
|
import "../../shared"
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
id: root
|
||||||
|
property string chatId: ""
|
||||||
|
property string name: "channelName"
|
||||||
|
property string message: "My latest message\n with a return"
|
||||||
|
property int chatType: Constants.chatTypePublic
|
||||||
|
property string identicon: ""
|
||||||
|
|
||||||
|
color: "#F7F7F7"
|
||||||
|
width: 366
|
||||||
|
height: 75
|
||||||
|
|
||||||
|
anchors.top: applicationWindow.top
|
||||||
|
radius: Style.current.radius
|
||||||
|
|
||||||
|
Loader {
|
||||||
|
id: identicon
|
||||||
|
sourceComponent: root.identicon === "" || appSettings.notificationMessagePreviewSetting === Constants.notificationPreviewAnonymous ? statusIdenticon : userOrChannelIdenticon
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.leftMargin: Style.current.padding
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
height: 40
|
||||||
|
width: 40
|
||||||
|
}
|
||||||
|
|
||||||
|
Component {
|
||||||
|
id: userOrChannelIdenticon
|
||||||
|
StatusIdenticon {
|
||||||
|
height: 40
|
||||||
|
width: 40
|
||||||
|
chatName: root.name
|
||||||
|
chatType: root.chatType
|
||||||
|
identicon: root.identicon
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Component {
|
||||||
|
id: statusIdenticon
|
||||||
|
SVGImage {
|
||||||
|
source: "../../app/img/status-logo-icon.svg"
|
||||||
|
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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue