NotificationHistory panel

This commit is contained in:
quadbyte 2025-08-20 09:38:26 -04:00
parent 30722975f3
commit c7e82517f2
3 changed files with 154 additions and 248 deletions

View file

@ -20,21 +20,6 @@ NIconButton {
colorBorderHover: Color.transparent colorBorderHover: Color.transparent
onClicked: { onClicked: {
if (!notificationHistoryPanel.active) { notificationHistoryPanel.toggle(screen)
notificationHistoryPanel.isLoaded = true
}
if (notificationHistoryPanel.item) {
if (notificationHistoryPanel.item.visible) {
// Panel is visible, hide it with animation
if (notificationHistoryPanel.item.hide) {
notificationHistoryPanel.item.hide()
} else {
notificationHistoryPanel.item.visible = false
}
} else {
// Panel is hidden, show it
notificationHistoryPanel.item.visible = true
}
}
} }
} }

View file

@ -8,104 +8,28 @@ import qs.Commons
import qs.Services import qs.Services
import qs.Widgets import qs.Widgets
// Loader for Notification History panel // Notification History panel
NLoader { NPanel {
id: root id: root
content: Component { rWidth: 400 * scaling
NPanel { rHeight: 500 * scaling
id: notificationPanel rAnchorRight: true
// Override hide function to animate first panelContent: Rectangle {
function hide() {
// Start hide animation
notificationRect.scaleValue = 0.8
notificationRect.opacityValue = 0.0
// Hide after animation completes
hideTimer.start()
}
Connections {
target: notificationPanel
ignoreUnknownSignals: true
function onDismissed() {
// Start hide animation
notificationRect.scaleValue = 0.8
notificationRect.opacityValue = 0.0
// Hide after animation completes
hideTimer.start()
}
}
// Also handle visibility changes from external sources
onVisibleChanged: {
if (!visible && notificationRect.opacityValue > 0) {
// Start hide animation
notificationRect.scaleValue = 0.8
notificationRect.opacityValue = 0.0
// Hide after animation completes
hideTimer.start()
}
}
// Timer to hide panel after animation
Timer {
id: hideTimer
interval: Style.animationSlow
repeat: false
onTriggered: {
notificationPanel.visible = false
notificationPanel.dismissed()
}
}
WlrLayershell.keyboardFocus: WlrKeyboardFocus.OnDemand
Rectangle {
id: notificationRect id: notificationRect
color: Color.mSurface color: Color.transparent
radius: Style.radiusL * scaling
border.color: Color.mOutline
border.width: Math.max(1, Style.borderS * scaling)
width: 400 * scaling
height: 500 * scaling
anchors.top: parent.top
anchors.right: parent.right
anchors.topMargin: Style.marginXS * scaling
anchors.rightMargin: Style.marginXS * scaling
clip: true
// Animation properties // color: Color.mSurface
property real scaleValue: 0.8 // radius: Style.radiusL * scaling
property real opacityValue: 0.0 // border.color: Color.mOutline
// border.width: Math.max(1, Style.borderS * scaling)
scale: scaleValue
opacity: opacityValue
// Animate in when component is completed
Component.onCompleted: {
scaleValue = 1.0
opacityValue = 1.0
}
// Animation behaviors
Behavior on scale {
NumberAnimation {
duration: Style.animationSlow
easing.type: Easing.OutExpo
}
}
Behavior on opacity {
NumberAnimation {
duration: Style.animationNormal
easing.type: Easing.OutQuad
}
}
// anchors.top: parent.top
// anchors.right: parent.right
// anchors.topMargin: Style.marginXS * scaling
// anchors.rightMargin: Style.marginXS * scaling
// clip: true
ColumnLayout { ColumnLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginL * scaling anchors.margins: Style.marginL * scaling
@ -141,12 +65,14 @@ NLoader {
tooltipText: "Close" tooltipText: "Close"
sizeMultiplier: 0.8 sizeMultiplier: 0.8
onClicked: { onClicked: {
notificationPanel.hide() root.close()
} }
} }
} }
NDivider {} NDivider {
Layout.fillWidth: true
}
// Empty state when no notifications // Empty state when no notifications
Item { Item {
@ -271,6 +197,4 @@ NLoader {
} }
} }
} }
}
}
} }

View file

@ -14,9 +14,6 @@ NPanel {
rHeight: 700 * scaling rHeight: 700 * scaling
rAnchorRight: true rAnchorRight: true
// rectX: Math.max(Style.marginS * scaling, Math.min(parent.width - width - Style.marginS * scaling,
// Math.round(anchorX - width / 2)))
// rectY: Settings.data.bar.position === "top" ? Style.marginS * scaling : undefined
panelContent: Item { panelContent: Item {
id: content id: content