qml format
This commit is contained in:
quadbyte
parent
9418d94f6d
commit
eda4bc8a6a
4 changed files with 159 additions and 161 deletions
|
|
@ -25,17 +25,17 @@ PanelWindow {
|
|||
WlrLayershell.exclusionMode: ExclusionMode.Ignore
|
||||
|
||||
// Use the notification service
|
||||
property var notificationService: NotificationService { }
|
||||
|
||||
property var notificationService: NotificationService {}
|
||||
|
||||
// Access the notification model from the service
|
||||
property ListModel notificationModel: notificationService.notificationModel
|
||||
|
||||
|
||||
// Track notifications being removed for animation
|
||||
property var removingNotifications: ({})
|
||||
|
||||
|
||||
// Connect to animation signal from service
|
||||
Component.onCompleted: {
|
||||
notificationService.animateAndRemove.connect(function(notification, index) {
|
||||
notificationService.animateAndRemove.connect(function (notification, index) {
|
||||
// Find the delegate and trigger its animation
|
||||
if (notificationStack.children && notificationStack.children[index]) {
|
||||
let delegate = notificationStack.children[index]
|
||||
|
|
@ -46,8 +46,6 @@ PanelWindow {
|
|||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Main notification container
|
||||
Column {
|
||||
id: notificationStack
|
||||
|
|
@ -57,8 +55,6 @@ PanelWindow {
|
|||
width: 360 * scaling
|
||||
visible: true
|
||||
|
||||
|
||||
|
||||
// Multiple notifications display
|
||||
Repeater {
|
||||
model: notificationModel
|
||||
|
|
@ -70,29 +66,29 @@ PanelWindow {
|
|||
radius: Style.radiusMedium * scaling
|
||||
border.color: Colors.backgroundTertiary
|
||||
border.width: Math.min(1, Style.borderThin * scaling)
|
||||
|
||||
|
||||
// Animation properties
|
||||
property real scaleValue: 0.8
|
||||
property real opacityValue: 0.0
|
||||
property bool isRemoving: false
|
||||
|
||||
|
||||
// Scale and fade-in animation
|
||||
scale: scaleValue
|
||||
opacity: opacityValue
|
||||
|
||||
|
||||
// Animate in when the item is created
|
||||
Component.onCompleted: {
|
||||
scaleValue = 1.0
|
||||
opacityValue = 1.0
|
||||
}
|
||||
|
||||
|
||||
// Animate out when being removed
|
||||
function animateOut() {
|
||||
isRemoving = true
|
||||
scaleValue = 0.8
|
||||
opacityValue = 0.0
|
||||
}
|
||||
|
||||
|
||||
// Timer for delayed removal after animation
|
||||
Timer {
|
||||
id: removalTimer
|
||||
|
|
@ -102,7 +98,7 @@ PanelWindow {
|
|||
notificationService.forceRemoveNotification(model.rawNotification)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Check if this notification is being removed
|
||||
onIsRemovingChanged: {
|
||||
if (isRemoving) {
|
||||
|
|
@ -110,7 +106,7 @@ PanelWindow {
|
|||
removalTimer.start()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Animation behaviors
|
||||
Behavior on scale {
|
||||
NumberAnimation {
|
||||
|
|
@ -118,22 +114,20 @@ PanelWindow {
|
|||
easing.type: Easing.OutBack
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Behavior on opacity {
|
||||
NumberAnimation {
|
||||
duration: Style.animationNormal
|
||||
easing.type: Easing.OutQuad
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Column {
|
||||
id: contentColumn
|
||||
anchors.fill: parent
|
||||
anchors.margins: Style.marginMedium * scaling
|
||||
spacing: Style.marginSmall * scaling
|
||||
|
||||
|
||||
RowLayout {
|
||||
spacing: Style.marginSmall * scaling
|
||||
NText {
|
||||
|
|
@ -142,19 +136,22 @@ PanelWindow {
|
|||
font.pointSize: Style.fontSizeSmall
|
||||
}
|
||||
Rectangle {
|
||||
width: 6 * scaling; height: 6 * scaling; radius: 3 * scaling
|
||||
color: (model.urgency === NotificationUrgency.Critical) ? Colors.error :
|
||||
(model.urgency === NotificationUrgency.Low) ? Colors.textSecondary : Colors.accentPrimary
|
||||
width: 6 * scaling
|
||||
height: 6 * scaling
|
||||
radius: 3 * scaling
|
||||
color: (model.urgency === NotificationUrgency.Critical) ? Colors.error : (model.urgency === NotificationUrgency.Low) ? Colors.textSecondary : Colors.accentPrimary
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
}
|
||||
Item { Layout.fillWidth: true }
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
NText {
|
||||
text: notificationService.formatTimestamp(model.timestamp)
|
||||
color: Colors.textSecondary
|
||||
font.pointSize: Style.fontSizeSmall
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
NText {
|
||||
text: model.summary || "No summary"
|
||||
font.pointSize: Style.fontSizeLarge
|
||||
|
|
@ -165,7 +162,7 @@ PanelWindow {
|
|||
maximumLineCount: 3
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
|
||||
|
||||
NText {
|
||||
text: model.body || ""
|
||||
font.pointSize: Style.fontSizeSmall
|
||||
|
|
@ -176,13 +173,13 @@ PanelWindow {
|
|||
elide: Text.ElideRight
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
NIconButton {
|
||||
anchors.top: parent.top
|
||||
anchors.right: parent.right
|
||||
anchors.margins: Style.marginSmall * scaling
|
||||
icon: "close"
|
||||
onClicked: function() {
|
||||
onClicked: function () {
|
||||
animateOut()
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,9 @@ NBox {
|
|||
anchors.margins: Style.marginMedium * scaling
|
||||
spacing: Style.marginMedium * scaling
|
||||
|
||||
Item { height: Style.marginLarge * scaling }
|
||||
Item {
|
||||
height: Style.marginLarge * scaling
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "music_note"
|
||||
|
|
@ -38,6 +40,8 @@ NBox {
|
|||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
|
||||
Item { height: Style.marginLarge * scaling }
|
||||
Item {
|
||||
height: Style.marginLarge * scaling
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,9 +46,9 @@ NBox {
|
|||
color: Colors.backgroundTertiary
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
spacing: Style.marginMedium * scaling
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
spacing: Style.marginMedium * scaling
|
||||
Repeater {
|
||||
model: 5
|
||||
delegate: ColumnLayout {
|
||||
|
|
|
|||
|
|
@ -2,138 +2,135 @@ import QtQuick
|
|||
import qs.Services
|
||||
import Quickshell.Services.Notifications
|
||||
|
||||
|
||||
QtObject {
|
||||
id: root
|
||||
|
||||
// Notification server instance
|
||||
property NotificationServer server: NotificationServer {
|
||||
id: notificationServer
|
||||
|
||||
// Server capabilities
|
||||
keepOnReload: false
|
||||
imageSupported: true
|
||||
actionsSupported: true
|
||||
actionIconsSupported: true
|
||||
bodyMarkupSupported: true
|
||||
bodySupported: true
|
||||
persistenceSupported: true
|
||||
inlineReplySupported: true
|
||||
bodyHyperlinksSupported: true
|
||||
bodyImagesSupported: true
|
||||
|
||||
// Signal when notification is received
|
||||
onNotification: function(notification) {
|
||||
|
||||
// Track the notification
|
||||
notification.tracked = true
|
||||
|
||||
// Connect to closed signal for cleanup
|
||||
notification.closed.connect(function() {
|
||||
root.removeNotification(notification)
|
||||
})
|
||||
|
||||
// Add to our model
|
||||
root.addNotification(notification)
|
||||
}
|
||||
id: root
|
||||
|
||||
// Notification server instance
|
||||
property NotificationServer server: NotificationServer {
|
||||
id: notificationServer
|
||||
|
||||
// Server capabilities
|
||||
keepOnReload: false
|
||||
imageSupported: true
|
||||
actionsSupported: true
|
||||
actionIconsSupported: true
|
||||
bodyMarkupSupported: true
|
||||
bodySupported: true
|
||||
persistenceSupported: true
|
||||
inlineReplySupported: true
|
||||
bodyHyperlinksSupported: true
|
||||
bodyImagesSupported: true
|
||||
|
||||
// Signal when notification is received
|
||||
onNotification: function (notification) {
|
||||
|
||||
// Track the notification
|
||||
notification.tracked = true
|
||||
|
||||
// Connect to closed signal for cleanup
|
||||
notification.closed.connect(function () {
|
||||
root.removeNotification(notification)
|
||||
})
|
||||
|
||||
// Add to our model
|
||||
root.addNotification(notification)
|
||||
}
|
||||
|
||||
// List model to hold notifications
|
||||
property ListModel notificationModel: ListModel { }
|
||||
|
||||
// Maximum visible notifications
|
||||
property int maxVisible: 5
|
||||
|
||||
// Auto-hide timer
|
||||
property Timer hideTimer: Timer {
|
||||
interval: 5000 // 5 seconds
|
||||
repeat: true
|
||||
running: notificationModel.count > 0
|
||||
|
||||
onTriggered: {
|
||||
if (notificationModel.count === 0) {
|
||||
return
|
||||
}
|
||||
|
||||
// Always remove the oldest notification (last in the list)
|
||||
let oldestNotification = notificationModel.get(notificationModel.count - 1).rawNotification
|
||||
if (oldestNotification && !oldestNotification.transient) {
|
||||
// Trigger animation signal instead of direct dismiss
|
||||
animateAndRemove(oldestNotification, notificationModel.count - 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// List model to hold notifications
|
||||
property ListModel notificationModel: ListModel {}
|
||||
|
||||
// Maximum visible notifications
|
||||
property int maxVisible: 5
|
||||
|
||||
// Auto-hide timer
|
||||
property Timer hideTimer: Timer {
|
||||
interval: 5000 // 5 seconds
|
||||
repeat: true
|
||||
running: notificationModel.count > 0
|
||||
|
||||
onTriggered: {
|
||||
if (notificationModel.count === 0) {
|
||||
return
|
||||
}
|
||||
|
||||
// Always remove the oldest notification (last in the list)
|
||||
let oldestNotification = notificationModel.get(notificationModel.count - 1).rawNotification
|
||||
if (oldestNotification && !oldestNotification.transient) {
|
||||
// Trigger animation signal instead of direct dismiss
|
||||
animateAndRemove(oldestNotification, notificationModel.count - 1)
|
||||
}
|
||||
}
|
||||
|
||||
// Function to add notification to model
|
||||
function addNotification(notification) {
|
||||
notificationModel.insert(0, {
|
||||
rawNotification: notification,
|
||||
summary: notification.summary,
|
||||
body: notification.body,
|
||||
appName: notification.appName,
|
||||
urgency: notification.urgency,
|
||||
timestamp: new Date()
|
||||
})
|
||||
|
||||
// Remove oldest notifications if we exceed maxVisible
|
||||
while (notificationModel.count > maxVisible) {
|
||||
let oldestNotification = notificationModel.get(notificationModel.count - 1).rawNotification
|
||||
if (oldestNotification) {
|
||||
oldestNotification.dismiss()
|
||||
}
|
||||
notificationModel.remove(notificationModel.count - 1)
|
||||
}
|
||||
}
|
||||
|
||||
// Function to add notification to model
|
||||
function addNotification(notification) {
|
||||
notificationModel.insert(0, {
|
||||
"rawNotification": notification,
|
||||
"summary": notification.summary,
|
||||
"body": notification.body,
|
||||
"appName": notification.appName,
|
||||
"urgency": notification.urgency,
|
||||
"timestamp": new Date()
|
||||
})
|
||||
|
||||
// Remove oldest notifications if we exceed maxVisible
|
||||
while (notificationModel.count > maxVisible) {
|
||||
let oldestNotification = notificationModel.get(notificationModel.count - 1).rawNotification
|
||||
if (oldestNotification) {
|
||||
oldestNotification.dismiss()
|
||||
}
|
||||
notificationModel.remove(notificationModel.count - 1)
|
||||
}
|
||||
|
||||
// Signal to trigger animation before removal
|
||||
signal animateAndRemove(var notification, int index)
|
||||
|
||||
// Function to remove notification from model
|
||||
function removeNotification(notification) {
|
||||
for (let i = 0; i < notificationModel.count; i++) {
|
||||
if (notificationModel.get(i).rawNotification === notification) {
|
||||
// Emit signal to trigger animation first
|
||||
animateAndRemove(notification, i)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Signal to trigger animation before removal
|
||||
signal animateAndRemove(var notification, int index)
|
||||
|
||||
// Function to remove notification from model
|
||||
function removeNotification(notification) {
|
||||
for (var i = 0; i < notificationModel.count; i++) {
|
||||
if (notificationModel.get(i).rawNotification === notification) {
|
||||
// Emit signal to trigger animation first
|
||||
animateAndRemove(notification, i)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// Function to actually remove notification after animation
|
||||
function forceRemoveNotification(notification) {
|
||||
for (let i = 0; i < notificationModel.count; i++) {
|
||||
if (notificationModel.get(i).rawNotification === notification) {
|
||||
notificationModel.remove(i)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Function to actually remove notification after animation
|
||||
function forceRemoveNotification(notification) {
|
||||
for (var i = 0; i < notificationModel.count; i++) {
|
||||
if (notificationModel.get(i).rawNotification === notification) {
|
||||
notificationModel.remove(i)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// Function to format timestamp
|
||||
function formatTimestamp(timestamp) {
|
||||
if (!timestamp) return ""
|
||||
|
||||
const now = new Date()
|
||||
const diff = now - timestamp
|
||||
|
||||
// Less than 1 minute
|
||||
if (diff < 60000) {
|
||||
return "now"
|
||||
}
|
||||
// Less than 1 hour
|
||||
else if (diff < 3600000) {
|
||||
const minutes = Math.floor(diff / 60000)
|
||||
return `${minutes}m ago`
|
||||
}
|
||||
// Less than 24 hours
|
||||
else if (diff < 86400000) {
|
||||
const hours = Math.floor(diff / 3600000)
|
||||
return `${hours}h ago`
|
||||
}
|
||||
// More than 24 hours
|
||||
else {
|
||||
const days = Math.floor(diff / 86400000)
|
||||
return `${days}d ago`
|
||||
}
|
||||
}
|
||||
|
||||
// Function to format timestamp
|
||||
function formatTimestamp(timestamp) {
|
||||
if (!timestamp)
|
||||
return ""
|
||||
|
||||
const now = new Date()
|
||||
const diff = now - timestamp
|
||||
|
||||
// Less than 1 minute
|
||||
if (diff < 60000) {
|
||||
return "now"
|
||||
} // Less than 1 hour
|
||||
else if (diff < 3600000) {
|
||||
const minutes = Math.floor(diff / 60000)
|
||||
return `${minutes}m ago`
|
||||
} // Less than 24 hours
|
||||
else if (diff < 86400000) {
|
||||
const hours = Math.floor(diff / 3600000)
|
||||
return `${hours}h ago`
|
||||
} // More than 24 hours
|
||||
else {
|
||||
const days = Math.floor(diff / 86400000)
|
||||
return `${days}d ago`
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue