Create Styled things and finish notifications module
This commit is contained in:
Amaro Lopes
@@ -1,41 +1,91 @@
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import Quickshell
|
||||
import Quickshell.Widgets
|
||||
import qs.Services
|
||||
import qs.Widgets
|
||||
import qs.Common.Styled
|
||||
import qs.Common
|
||||
import QtQuick.Window
|
||||
|
||||
PopupWindow {
|
||||
id: notificationRoot
|
||||
|
||||
anchor.item: root
|
||||
anchor.rect.y: parentWindow?.height
|
||||
implicitWidth: 400
|
||||
implicitHeight: Math.min(listView.contentHeight, 900)
|
||||
color: "white"
|
||||
implicitWidth: screen.width
|
||||
// implicitWidth: 400
|
||||
implicitHeight: screen.height
|
||||
color: "transparent"
|
||||
visible: true
|
||||
signal clear
|
||||
|
||||
ListView {
|
||||
id: listView
|
||||
mask: Region { item: listView }
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
model: NotificationService.trackedNotifications.values
|
||||
orientation: ListView.Vertical
|
||||
verticalLayoutDirection: ListView.BottomToTop
|
||||
clip: true
|
||||
spacing: 5
|
||||
onClicked: notificationRoot.clear()
|
||||
}
|
||||
|
||||
delegate: NotificationWrapper {
|
||||
required property var modelData
|
||||
notification: modelData
|
||||
width: ListView.width
|
||||
onDismissed: {
|
||||
if (notification && typeof notification.dismiss === "function") {
|
||||
notification.dismiss();
|
||||
Rectangle {
|
||||
id: notifWindow
|
||||
|
||||
anchors{
|
||||
top: parent.top
|
||||
left: parent.left
|
||||
topMargin: 40
|
||||
}
|
||||
border.width: 1
|
||||
color: Theme.color2
|
||||
implicitWidth: 400
|
||||
implicitHeight: Math.min(listView.contentHeight, 1090) + 50
|
||||
|
||||
ColumnLayout {
|
||||
id: windowLayout
|
||||
|
||||
anchors.fill: parent
|
||||
spacing: 0
|
||||
|
||||
BackgroundRectangle {
|
||||
implicitWidth: parent.width
|
||||
implicitHeight: 25
|
||||
radius: 0
|
||||
border.width: 0
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
onClicked: {
|
||||
while (NotificationService.notificationsNumber != 0) {
|
||||
NotificationService.trackedNotifications.values[0].dismiss();
|
||||
}
|
||||
}
|
||||
}
|
||||
StyledText {
|
||||
anchors.centerIn: parent
|
||||
text: "NOTIFICAÇÕES"
|
||||
}
|
||||
}
|
||||
|
||||
ListView {
|
||||
id: listView
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
model: NotificationService.globalList
|
||||
clip: true
|
||||
spacing: 5
|
||||
leftMargin: 10
|
||||
rightMargin: 10
|
||||
|
||||
delegate: NotificationWrapper {
|
||||
required property var modelData
|
||||
notification: modelData
|
||||
implicitWidth: listView.width - 20
|
||||
onDismissed: {
|
||||
NotificationService.notificationDismiss(notification);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Component.onCompleted: positionViewAtEnd()
|
||||
onModelChanged: positionViewAtEnd()
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,134 +2,137 @@ import Quickshell
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import Quickshell.Widgets
|
||||
import qs.Common.Styled
|
||||
|
||||
Rectangle {
|
||||
BackgroundRectangle {
|
||||
id: notificationWrapper
|
||||
|
||||
signal dismissed
|
||||
signal timedout
|
||||
|
||||
property bool hasImage: notification?.image ? true : false
|
||||
property bool clicked: false
|
||||
property var notification: null
|
||||
property bool startTimer: false
|
||||
property int timerDuration: 2000
|
||||
property bool firstTime: true
|
||||
|
||||
property string image: {
|
||||
if (hasImage) {
|
||||
return notification.image;
|
||||
return notification?.image;
|
||||
}
|
||||
if (notification?.appIcon === "") {
|
||||
return "";
|
||||
}
|
||||
return Quickshell.iconPath(notification?.appIcon);
|
||||
}
|
||||
property real targetHeight: notifLayout.implicitHeight + 20
|
||||
|
||||
implicitWidth: 400
|
||||
implicitHeight: notifLayout.implicitHeight
|
||||
topLeftRadius: image ? 100 : 20
|
||||
bottomLeftRadius: image ? 100 : 20
|
||||
topRightRadius: 20
|
||||
bottomRightRadius: 20
|
||||
color: "#80000000"
|
||||
implicitHeight: 0
|
||||
// implicitHeight: Math.max(notifLayout.implicitHeight, 100)
|
||||
|
||||
Component.onCompleted: {
|
||||
notificationWrapper.implicitHeight = targetHeight
|
||||
}
|
||||
clip: true
|
||||
|
||||
Behavior on implicitHeight {
|
||||
SequentialAnimation {
|
||||
NumberAnimation {
|
||||
duration: 150
|
||||
easing.type: Easing.OutCubic
|
||||
}
|
||||
ScriptAction {
|
||||
script: {
|
||||
if(clicked) notificationWrapper.dismissed()
|
||||
if(notificationWrapper.implicitHeight === 0) notificationWrapper.timedout()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
onClicked: {
|
||||
notificationWrapper.dismissed();
|
||||
notificationWrapper.clicked = true
|
||||
notificationWrapper.implicitHeight = 0
|
||||
}
|
||||
}
|
||||
|
||||
Timer {
|
||||
id: notifTimer
|
||||
|
||||
interval: timerDuration
|
||||
running: notificationWrapper.startTimer
|
||||
|
||||
onTriggered: {
|
||||
notificationWrapper.implicitHeight = 0;
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
id: notifLayout
|
||||
|
||||
implicitHeight: Math.max(iconImage.implicitHeight, gridRoot.implicitHeight)
|
||||
|
||||
anchors {
|
||||
fill: parent
|
||||
}
|
||||
|
||||
ClippingRectangle {
|
||||
IconImage {
|
||||
id: iconImage
|
||||
|
||||
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
|
||||
|
||||
implicitWidth: 100
|
||||
implicitHeight: 100
|
||||
visible: notificationWrapper.image ? true : false
|
||||
|
||||
color: "grey"
|
||||
|
||||
radius: 100
|
||||
|
||||
IconImage {
|
||||
anchors.centerIn: parent
|
||||
implicitSize: 100
|
||||
source: notificationWrapper.image
|
||||
}
|
||||
Layout.alignment: Qt.AlignLeft| Qt.AlignVCenter
|
||||
Layout.leftMargin: 10
|
||||
implicitSize: 80
|
||||
visible: notificationWrapper.image? true: false
|
||||
source: notificationWrapper.image
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
id: gridRoot
|
||||
|
||||
Layout.leftMargin: 10
|
||||
Layout.rightMargin: 10
|
||||
implicitHeight: summaryRectangle.implicitHeight + bodyRectangle.implicitHeight
|
||||
|
||||
spacing: 5
|
||||
|
||||
ForegroundRectangle {
|
||||
id: summaryRectangle
|
||||
|
||||
Rectangle {
|
||||
Layout.fillWidth: true
|
||||
|
||||
implicitHeight: summaryText.implicitHeight + 10
|
||||
radius: 20
|
||||
color: "#50ffffff"
|
||||
|
||||
Rectangle {
|
||||
anchors {
|
||||
left: parent.left
|
||||
top: parent.top
|
||||
bottom: parent.bottom
|
||||
}
|
||||
visible: summaryText.text ? true : false
|
||||
|
||||
implicitWidth: parent.width
|
||||
radius: parent.radius
|
||||
color: "white"
|
||||
StyledText {
|
||||
id: summaryText
|
||||
|
||||
Text {
|
||||
id: summaryText
|
||||
anchors.fill: parent
|
||||
|
||||
anchors.fill: parent
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
font.pixelSize: 12
|
||||
wrapMode: Text.WordWrap
|
||||
textFormat: Text.MarkdownText
|
||||
|
||||
text: notificationWrapper.notification.summary
|
||||
}
|
||||
text: notificationWrapper.notification? notificationWrapper.notification.summary : ""
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
ForegroundRectangle {
|
||||
id: bodyRectangle
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.columnSpan: 5
|
||||
|
||||
implicitHeight: bodyText.implicitHeight + 10
|
||||
radius: 20
|
||||
|
||||
Rectangle {
|
||||
anchors {
|
||||
left: parent.left
|
||||
top: parent.top
|
||||
bottom: parent.bottom
|
||||
}
|
||||
visible: bodyText.text ? true : false
|
||||
|
||||
implicitWidth: parent.width
|
||||
radius: parent.radius
|
||||
color: "white"
|
||||
StyledText {
|
||||
id: bodyText
|
||||
|
||||
Text {
|
||||
id: bodyText
|
||||
anchors.fill: parent
|
||||
|
||||
anchors.fill: parent
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
font.pixelSize: 14
|
||||
wrapMode: Text.WordWrap
|
||||
textFormat: Text.MarkdownText
|
||||
|
||||
text: notificationWrapper.notification.body
|
||||
onLinkActivated: link => Qt.openUrlExternally(link)
|
||||
}
|
||||
text: notificationWrapper.notification? notificationWrapper.notification.body : ""
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user