From d301b94c7070ac5a557c1a486282f4fda6c3491e Mon Sep 17 00:00:00 2001 From: Pascal Precht Date: Thu, 28 Oct 2021 15:25:49 +0200 Subject: [PATCH] feat(StatusQ.Platform): introduce StatusMacNotification component --- sandbox/StatusMacNotificationPage.qml | 16 +++ sandbox/main.qml | 11 ++ .../Platform/StatusMacNotification.qml | 129 ++++++++++++++++++ src/StatusQ/Platform/qmldir | 1 + src/assets/img/status-logo-icon.svg | 107 +++++++++++++++ 5 files changed, 264 insertions(+) create mode 100644 sandbox/StatusMacNotificationPage.qml create mode 100644 src/StatusQ/Platform/StatusMacNotification.qml create mode 100644 src/assets/img/status-logo-icon.svg diff --git a/sandbox/StatusMacNotificationPage.qml b/sandbox/StatusMacNotificationPage.qml new file mode 100644 index 00000000..7c6614f1 --- /dev/null +++ b/sandbox/StatusMacNotificationPage.qml @@ -0,0 +1,16 @@ +import QtQuick 2.14 +import QtQuick.Controls 2.14 +import QtQuick.Layouts 1.14 + +import StatusQ.Platform 0.1 + +import Sandbox 0.1 + +Column { + spacing: 8 + + StatusMacNotification { + name: "Some name" + message: "Some message here" + } +} diff --git a/sandbox/main.qml b/sandbox/main.qml index a7829b43..b7175c47 100644 --- a/sandbox/main.qml +++ b/sandbox/main.qml @@ -231,6 +231,12 @@ StatusWindow { selected: page.sourceComponent == statusModalComponent onClicked: page.sourceComponent = statusModalComponent } + StatusListSectionHeadline { text: "StatusQ.Platform" } + StatusNavigationListItem { + title: "StatusMacNotification" + selected: page.sourceComponent == notificationComponent + onClicked: page.sourceComponent = notificationComponent + } } } } @@ -391,6 +397,11 @@ StatusWindow { StatusExpandableSettingsItemPage{} } + Component { + id: notificationComponent + StatusMacNotificationPage {} + } + Component { id: demoAppCmp diff --git a/src/StatusQ/Platform/StatusMacNotification.qml b/src/StatusQ/Platform/StatusMacNotification.qml new file mode 100644 index 00000000..466f621b --- /dev/null +++ b/src/StatusQ/Platform/StatusMacNotification.qml @@ -0,0 +1,129 @@ +import QtQuick 2.13 +import QtQuick.Controls 2.13 +import QtGraphicalEffects 1.13 + +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 +import StatusQ.Components 0.1 + +Rectangle { + id: root + property string chatId: "" + property string name: "channelName" + property string message: "My latest message\n with a return" + property string identicon: "" + + // TODO: what about dark theme? + color: "#F7F7F7" + width: 366 + height: 75 + + radius: 8 + + Loader { + id: identicon + sourceComponent: root.identicon === "" ? statusIdenticon : userOrChannelIdenticon + anchors.left: parent.left + anchors.leftMargin: 16 + anchors.verticalCenter: parent.verticalCenter + height: 40 + width: 40 + } + + Component { + id: userOrChannelIdenticon + StatusSmartIdenticon { + id: contactImage + anchors.left: parent.left + anchors.leftMargin: 8 + anchors.verticalCenter: parent.verticalCenter + image: StatusImageSettings { + width: 40 + height: 40 + source: root.identicon + isIdenticon: true + } + icon: StatusIconSettings { + width: 40 + height: 40 + letterSize: 15 + color: Theme.palette.miscColor5 + } + name: root.name + } + } + + Component { + id: statusIdenticon + Image { + source: "../../assets/img/status-logo-icon.svg" + width: 40 + height: 40 + sourceSize.width: width * 2 + sourceSize.height: height * 2 + cache: true + fillMode: Image.PreserveAspectFit + } + /* SVGImage { */ + /* source: Style.svg("status-logo-icon") */ + /* width: 40 */ + /* height: 40 */ + /* } */ + } + + StatusBaseText { + id: name + anchors.bottom: messagePreview.top + anchors.bottomMargin: 2 + anchors.left: identicon.right + anchors.leftMargin: 8 + anchors.right: openButton.left + anchors.rightMargin: 8 + elide: Text.ElideRight + text: root.name + font.weight: Font.Medium + font.pixelSize: 15 + color: "#4b4b4b" + } + + StatusBaseText { + id: messagePreview + anchors.bottom: identicon.bottom + anchors.bottomMargin: 2 + anchors.left: identicon.right + anchors.leftMargin: 8 + anchors.right: openButton.left + anchors.rightMargin: 16 + elide: Text.ElideRight + clip: true // This is needed because emojis don't ellide correctly + font.pixelSize: 14 + color: "#4b4b4b" + 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" + } + + StatusBaseText { + font.weight: Font.Medium + font.pixelSize: 14 + anchors.verticalCenter: parent.verticalCenter + anchors.horizontalCenter: parent.horizontalCenter + text: "Open" + color: "black" + } + } +} + + diff --git a/src/StatusQ/Platform/qmldir b/src/StatusQ/Platform/qmldir index 477c3640..8eb7b5b9 100644 --- a/src/StatusQ/Platform/qmldir +++ b/src/StatusQ/Platform/qmldir @@ -1,5 +1,6 @@ module StatusQ.Platform StatusMacTrafficLights 0.1 StatusMacTrafficLights.qml +StatusMacNotification 0.1 StatusMacNotification.qml StatusWindowsTitleBar 0.1 StatusWindowsTitleBar.qml diff --git a/src/assets/img/status-logo-icon.svg b/src/assets/img/status-logo-icon.svg new file mode 100644 index 00000000..10142c21 --- /dev/null +++ b/src/assets/img/status-logo-icon.svg @@ -0,0 +1,107 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +