diff --git a/ui/app/img/status-logo-icon.svg b/ui/app/img/status-logo-icon.svg new file mode 100644 index 0000000000..86457355c9 --- /dev/null +++ b/ui/app/img/status-logo-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/ui/imports/Constants.qml b/ui/imports/Constants.qml index 5dbd5dbde9..2e205c62d5 100644 --- a/ui/imports/Constants.qml +++ b/ui/imports/Constants.qml @@ -25,6 +25,9 @@ QtObject { readonly property int notifyAllMessages: 0 readonly property int notifyJustMentions: 1 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 chatIdentifier: -1 readonly property int unknownContentType: 0 diff --git a/ui/imports/Theme.qml b/ui/imports/Theme.qml index b17f9e5f8c..66eb0c7195 100644 --- a/ui/imports/Theme.qml +++ b/ui/imports/Theme.qml @@ -18,6 +18,8 @@ QtObject { readonly property color blue: "#4360DF" readonly property color transparent: "#00000000" readonly property color darkGrey: "#939BA1" + readonly property color darkerGrey: "#717171" + readonly property color evenDarkerGrey: "#4C4C4C" readonly property color lightBlueText: "#8f9fec" readonly property color darkBlue: "#3c55c9" readonly property color darkBlueBtn: "#5a70dd" diff --git a/ui/imports/Themes/DarkTheme.qml b/ui/imports/Themes/DarkTheme.qml index a8ae129d80..789652eb7c 100644 --- a/ui/imports/Themes/DarkTheme.qml +++ b/ui/imports/Themes/DarkTheme.qml @@ -14,7 +14,7 @@ Theme { property color darkAccentBlue: "#2946C4" property color transparent: "#00000000" property color darkGrey: "#838C91" - property color darkerGrey: "#252528" + property color evenDarkerGrey: "#252528" property color lightBlueText: "#8f9fec" property color darkBlue: "#3c55c9" property color darkBlueBtn: "#5a70dd" @@ -26,7 +26,7 @@ Theme { property color tenPercentBlue: Qt.rgba(67, 96, 223, 0.1) property color background: almostBlack - property color border: darkerGrey + property color border: evenDarkerGrey property color borderSecondary: tenPercentWhite property color borderTertiary: blue property color textColor: white @@ -37,7 +37,7 @@ Theme { property color inputBorderFocus: blue property color inputColor: darkGrey property color modalBackground: background - property color backgroundHover: darkerGrey + property color backgroundHover: evenDarkerGrey property color secondaryText: darkGrey property color secondaryHover: tenPercentWhite property color primary: blue @@ -47,14 +47,14 @@ Theme { property color primaryMenuItemTextHover: almostBlack property color backgroundTertiary: tenPercentBlue property color pillButtonTextColor: almostBlack - property color chatReplyCurrentUser: darkerGrey - property color topBarChatInfoColor: darkerGrey + property color chatReplyCurrentUser: evenDarkerGrey + property color topBarChatInfoColor: evenDarkerGrey property color buttonForegroundColor: blue property color buttonBackgroundColor: secondaryBackground property color buttonSecondaryColor: darkGrey property color buttonDisabledForegroundColor: buttonSecondaryColor - property color buttonDisabledBackgroundColor: darkerGrey + property color buttonDisabledBackgroundColor: evenDarkerGrey property color roundedButtonForegroundColor: white property color roundedButtonBackgroundColor: secondaryBackground diff --git a/ui/imports/Themes/Theme.qml b/ui/imports/Themes/Theme.qml index b55aec1c49..7748ed1320 100644 --- a/ui/imports/Themes/Theme.qml +++ b/ui/imports/Themes/Theme.qml @@ -19,6 +19,8 @@ QtObject { property color blue property color transparent property color darkGrey + property color darkerGrey + property color evenDarkerGrey property color lightBlueText property color darkBlue property color darkBlueBtn diff --git a/ui/shared/status/StatusNotification.qml b/ui/shared/status/StatusNotification.qml new file mode 100644 index 0000000000..a0b4320b37 --- /dev/null +++ b/ui/shared/status/StatusNotification.qml @@ -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 + } + } +} +