Add animations everywhere

This commit is contained in:
Ly-sec 2025-08-13 15:08:54 +02:00
parent e2a0e491a0
commit bf94ebe46d
11 changed files with 618 additions and 28 deletions

View file

@ -133,13 +133,19 @@ Variants {
const localCenterX = width / 2
const localCenterY = height / 2
const globalPoint = mapToItem(null, localCenterX, localCenterY)
if (sidePanel.isLoaded)
sidePanel.isLoaded = false
else if (sidePanel.openAt)
if (sidePanel.isLoaded) {
// Call hide() instead of directly setting isLoaded to false
if (sidePanel.item && sidePanel.item.hide) {
sidePanel.item.hide()
} else {
sidePanel.isLoaded = false
}
} else if (sidePanel.openAt) {
sidePanel.openAt(globalPoint.x, screen)
else
} else {
// Fallback: toggle if API unavailable
sidePanel.isLoaded = true
}
}
}
}

View file

@ -19,7 +19,17 @@ NIconButton {
notificationHistoryPanelLoader.isLoaded = true
}
if (notificationHistoryPanelLoader.item) {
notificationHistoryPanelLoader.item.visible = !notificationHistoryPanelLoader.item.visible
if (notificationHistoryPanelLoader.item.visible) {
// Panel is visible, hide it with animation
if (notificationHistoryPanelLoader.item.hide) {
notificationHistoryPanelLoader.item.hide()
} else {
notificationHistoryPanelLoader.item.visible = false
}
} else {
// Panel is hidden, show it
notificationHistoryPanelLoader.item.visible = true
}
}
}

View file

@ -15,17 +15,56 @@ NLoader {
NPanel {
id: notificationPanel
// Override hide function to animate first
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
color: Colors.backgroundSecondary
radius: Style.radiusMedium * scaling
border.color: Colors.backgroundTertiary
@ -37,6 +76,36 @@ NLoader {
anchors.topMargin: Style.marginTiny * scaling
anchors.rightMargin: Style.marginTiny * scaling
// Animation properties
property real scaleValue: 0.8
property real opacityValue: 0.0
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
}
}
ColumnLayout {
anchors.fill: parent
anchors.margins: Style.marginLarge * scaling
@ -72,7 +141,7 @@ NLoader {
icon: "close"
sizeMultiplier: 0.8
onClicked: {
notificationPanel.visible = false
notificationPanel.hide()
}
}
}

View file

@ -122,16 +122,91 @@ Item {
NPanel {
id: trayPanel
showOverlay: false // no colors overlay even if activated in settings
// Override hide function to animate first
function hide() {
// Start hide animation
trayMenuRect.scaleValue = 0.8
trayMenuRect.opacityValue = 0.0
// Hide after animation completes
hideTimer.start()
}
Connections {
target: trayPanel
ignoreUnknownSignals: true
function onDismissed() {
function onDismissed() {
// Start hide animation
trayMenuRect.scaleValue = 0.8
trayMenuRect.opacityValue = 0.0
// Hide after animation completes
hideTimer.start()
}
}
// Also handle visibility changes from external sources
onVisibleChanged: {
if (!visible && trayMenuRect.opacityValue > 0) {
// Start hide animation
trayMenuRect.scaleValue = 0.8
trayMenuRect.opacityValue = 0.0
// Hide after animation completes
hideTimer.start()
}
}
// Timer to hide panel after animation
Timer {
id: hideTimer
interval: Style.animationSlow
repeat: false
onTriggered: {
trayPanel.visible = false
trayMenu.hideMenu()
}
}
TrayMenu {
id: trayMenu
Rectangle {
id: trayMenuRect
color: "transparent"
anchors.fill: parent
// Animation properties
property real scaleValue: 0.8
property real opacityValue: 0.0
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
}
}
TrayMenu {
id: trayMenu
}
}
}
}

View file

@ -29,11 +29,18 @@ NIconButton {
wifiMenuLoader.isLoaded = true
}
if (wifiMenuLoader.item) {
wifiMenuLoader.item.visible = !wifiMenuLoader.item.visible
if (wifiMenuLoader.item.visible) {
network.onMenuOpened()
// Panel is visible, hide it with animation
if (wifiMenuLoader.item.hide) {
wifiMenuLoader.item.hide()
} else {
wifiMenuLoader.item.visible = false
network.onMenuClosed()
}
} else {
network.onMenuClosed()
// Panel is hidden, show it
wifiMenuLoader.item.visible = true
network.onMenuOpened()
}
}
}

View file

@ -18,11 +18,47 @@ NLoader {
property string passwordInput: ""
property bool showPasswordPrompt: false
function hide() {
wifiMenuRect.scaleValue = 0.8
wifiMenuRect.opacityValue = 0.0
hideTimer.start()
}
// Connect to NPanel's dismissed signal to handle external close events
Connections {
target: wifiPanel
ignoreUnknownSignals: true
function onDismissed() {
// Start hide animation
wifiMenuRect.scaleValue = 0.8
wifiMenuRect.opacityValue = 0.0
// Hide after animation completes
hideTimer.start()
}
}
// Also handle visibility changes from external sources
onVisibleChanged: {
if (!visible && wifiMenuRect.opacityValue > 0) {
// Start hide animation
wifiMenuRect.scaleValue = 0.8
wifiMenuRect.opacityValue = 0.0
// Hide after animation completes
hideTimer.start()
}
}
// Timer to hide panel after animation
Timer {
id: hideTimer
interval: Style.animationSlow
repeat: false
onTriggered: {
wifiPanel.visible = false
wifiPanel.dismissed()
network.onMenuClosed()
}
}
@ -30,6 +66,7 @@ NLoader {
WlrLayershell.keyboardFocus: WlrKeyboardFocus.OnDemand
Rectangle {
id: wifiMenuRect
color: Colors.backgroundSecondary
radius: Style.radiusMedium * scaling
border.color: Colors.backgroundTertiary
@ -41,6 +78,34 @@ NLoader {
anchors.topMargin: Style.marginTiny * scaling
anchors.rightMargin: Style.marginTiny * scaling
// Animation properties
property real scaleValue: 0.8
property real opacityValue: 0.0
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
}
}
ColumnLayout {
anchors.fill: parent
anchors.margins: Style.marginLarge * scaling
@ -87,8 +152,7 @@ NLoader {
icon: "close"
sizeMultiplier: 0.8
onClicked: {
wifiPanel.visible = false
network.onMenuClosed()
wifiPanel.hide()
}
}
}