NotificationHistory panel
This commit is contained in:
parent
30722975f3
commit
c7e82517f2
3 changed files with 154 additions and 248 deletions
|
|
@ -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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue