mirror of
https://github.com/AvengeMedia/DankMaterialShell.git
synced 2025-12-06 21:45:38 -05:00
revise notification position and animations
This commit is contained in:
@@ -7,44 +7,79 @@ import Quickshell
|
|||||||
Singleton {
|
Singleton {
|
||||||
id: root
|
id: root
|
||||||
|
|
||||||
|
// Durations match M3 token tiers: short4/medium4/long4
|
||||||
readonly property int durShort: 200
|
readonly property int durShort: 200
|
||||||
readonly property int durMed: 400
|
readonly property int durMed: 450
|
||||||
readonly property int durLong: 600
|
readonly property int durLong: 600
|
||||||
|
|
||||||
readonly property int slidePx: 80
|
readonly property int slidePx: 80
|
||||||
|
|
||||||
// Material Design 3 motion curves
|
|
||||||
readonly property var emphasized: [0.05, 0, 2/15, 0.06, 1/6, 0.4, 5/24, 0.82, 0.25, 1, 1, 1]
|
|
||||||
readonly property var emphasizedDecel: [0.05, 0.7, 0.1, 1, 1, 1]
|
|
||||||
readonly property var standard: [0.2, 0, 0, 1, 1, 1]
|
|
||||||
|
|
||||||
readonly property QtObject direction: QtObject {
|
// Material Design 3 motion curves (for QML BezierSpline)
|
||||||
readonly property int fromLeft: 0
|
// Use groups of: [cx1, cy1, cx2, cy2, endX, endY, ...]
|
||||||
readonly property int fromRight: 1
|
// Single-segment cubics end with 1,1.
|
||||||
readonly property int fadeOnly: 2
|
|
||||||
}
|
|
||||||
|
|
||||||
readonly property Component slideInLeft: Transition {
|
// Emphasized (multi-segment) – for on-screen-to-on-screen moves
|
||||||
NumberAnimation { properties: "x"; from: -Anims.slidePx; to: 0; duration: Anims.durMed; easing.type: Easing.OutQuart }
|
readonly property var emphasized: [
|
||||||
}
|
0.05, 0.00, 0.133333, 0.06, 0.166667, 0.40,
|
||||||
|
0.208333, 0.82, 0.25, 1.00, 1.00, 1.00
|
||||||
|
]
|
||||||
|
|
||||||
readonly property Component slideOutLeft: Transition {
|
// Emphasized decelerate – entering
|
||||||
NumberAnimation { properties: "x"; to: -Anims.slidePx; duration: Anims.durShort; easing.type: Easing.InQuart }
|
readonly property var emphasizedDecel: [ 0.05, 0.70, 0.10, 1.00, 1.00, 1.00 ]
|
||||||
}
|
|
||||||
|
|
||||||
readonly property Component slideInRight: Transition {
|
// Emphasized accelerate – exiting
|
||||||
NumberAnimation { properties: "x"; from: Anims.slidePx; to: 0; duration: Anims.durMed; easing.type: Easing.OutQuart }
|
readonly property var emphasizedAccel: [ 0.30, 0.00, 0.80, 0.15, 1.00, 1.00 ]
|
||||||
}
|
|
||||||
|
|
||||||
readonly property Component slideOutRight: Transition {
|
// Standard set – for small/subtle transitions
|
||||||
NumberAnimation { properties: "x"; to: Anims.slidePx; duration: Anims.durShort; easing.type: Easing.InQuart }
|
readonly property var standard: [ 0.20, 0.00, 0.00, 1.00, 1.00, 1.00 ]
|
||||||
}
|
readonly property var standardDecel: [ 0.00, 0.00, 0.00, 1.00, 1.00, 1.00 ]
|
||||||
|
readonly property var standardAccel: [ 0.30, 0.00, 1.00, 1.00, 1.00, 1.00 ]
|
||||||
|
|
||||||
readonly property Component fadeIn: Transition {
|
// readonly property QtObject direction: QtObject {
|
||||||
NumberAnimation { properties: "opacity"; from: 0.0; to: 1.0; duration: Anims.durMed; easing.type: Easing.OutQuart }
|
// readonly property int fromLeft: 0
|
||||||
}
|
// readonly property int fromRight: 1
|
||||||
|
// readonly property int fadeOnly: 2
|
||||||
|
// }
|
||||||
|
|
||||||
readonly property Component fadeOut: Transition {
|
// // Slide transitions (surface/large moves)
|
||||||
NumberAnimation { properties: "opacity"; to: 0.0; duration: Anims.durShort; easing.type: Easing.InQuart }
|
// // Enter = emphasizedDecel, Exit = emphasizedAccel
|
||||||
}
|
// readonly property Component slideInLeft: Transition {
|
||||||
}
|
// NumberAnimation {
|
||||||
|
// properties: "x"; from: -root.slidePx; to: 0; duration: root.durMed
|
||||||
|
// easing.type: Easing.BezierSpline; easing.bezierCurve: root.emphasizedDecel
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// readonly property Component slideOutLeft: Transition {
|
||||||
|
// NumberAnimation {
|
||||||
|
// properties: "x"; to: -root.slidePx; duration: root.durShort
|
||||||
|
// easing.type: Easing.BezierSpline; easing.bezierCurve: root.emphasizedAccel
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// readonly property Component slideInRight: Transition {
|
||||||
|
// NumberAnimation {
|
||||||
|
// properties: "x"; from: root.slidePx; to: 0; duration: root.durMed
|
||||||
|
// easing.type: Easing.BezierSpline; easing.bezierCurve: root.emphasizedDecel
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// readonly property Component slideOutRight: Transition {
|
||||||
|
// NumberAnimation {
|
||||||
|
// properties: "x"; to: root.slidePx; duration: root.durShort
|
||||||
|
// easing.type: Easing.BezierSpline; easing.bezierCurve: root.emphasizedAccel
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // Fade transitions (small/subtle moves)
|
||||||
|
// // Enter = standardDecel, Exit = standardAccel
|
||||||
|
// readonly property Component fadeIn: Transition {
|
||||||
|
// NumberAnimation {
|
||||||
|
// properties: "opacity"; from: 0.0; to: 1.0; duration: root.durMed
|
||||||
|
// easing.type: Easing.BezierSpline; easing.bezierCurve: root.standardDecel
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// readonly property Component fadeOut: Transition {
|
||||||
|
// NumberAnimation {
|
||||||
|
// properties: "opacity"; to: 0.0; duration: root.durShort
|
||||||
|
// easing.type: Easing.BezierSpline; easing.bezierCurve: root.standardAccel
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
}
|
||||||
@@ -70,7 +70,9 @@ Column {
|
|||||||
|
|
||||||
Behavior on width {
|
Behavior on width {
|
||||||
NumberAnimation {
|
NumberAnimation {
|
||||||
duration: 100
|
duration: Anims.durShort
|
||||||
|
easing.type: Easing.BezierSpline
|
||||||
|
easing.bezierCurve: Anims.standardDecel
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -90,7 +92,9 @@ Column {
|
|||||||
|
|
||||||
Behavior on scale {
|
Behavior on scale {
|
||||||
NumberAnimation {
|
NumberAnimation {
|
||||||
duration: 150
|
duration: Anims.durShort
|
||||||
|
easing.type: Easing.BezierSpline
|
||||||
|
easing.bezierCurve: Anims.standard
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -411,8 +411,8 @@ Item {
|
|||||||
|
|
||||||
SequentialAnimation on scale {
|
SequentialAnimation on scale {
|
||||||
running: root.unlocking
|
running: root.unlocking
|
||||||
NumberAnimation { from: 0; to: 1.2; duration: 200; easing.type: Easing.OutBack }
|
NumberAnimation { from: 0; to: 1.2; duration: Anims.durShort; easing.type: Easing.BezierSpline; easing.bezierCurve: Anims.emphasizedDecel }
|
||||||
NumberAnimation { from: 1.2; to: 1; duration: 150; easing.type: Easing.InBack }
|
NumberAnimation { from: 1.2; to: 1; duration: Anims.durShort; easing.type: Easing.BezierSpline; easing.bezierCurve: Anims.emphasizedAccel }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -450,7 +450,7 @@ Item {
|
|||||||
RotationAnimation on rotation {
|
RotationAnimation on rotation {
|
||||||
running: pam.active && !root.unlocking
|
running: pam.active && !root.unlocking
|
||||||
loops: Animation.Infinite
|
loops: Animation.Infinite
|
||||||
duration: 1000
|
duration: Anims.durLong
|
||||||
from: 0
|
from: 0
|
||||||
to: 360
|
to: 360
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -27,19 +27,23 @@ PanelWindow {
|
|||||||
}
|
}
|
||||||
|
|
||||||
margins {
|
margins {
|
||||||
top: Theme.barHeight + 16
|
top: Theme.barHeight + 4
|
||||||
right: 12
|
right: 12
|
||||||
}
|
}
|
||||||
|
|
||||||
// Manager drives vertical stacking with this proxy:
|
// Manager drives vertical stacking with this proxy:
|
||||||
property int screenY: 0
|
property int screenY: 0
|
||||||
onScreenYChanged: margins.top = Theme.barHeight + 16 + screenY
|
onScreenYChanged: margins.top = Theme.barHeight + 4 + screenY
|
||||||
|
|
||||||
// Disable vertical tween while exiting so there is never diagonal motion
|
// Disable vertical tween while exiting so there is never diagonal motion
|
||||||
Behavior on screenY {
|
Behavior on screenY {
|
||||||
id: screenYAnim
|
id: screenYAnim
|
||||||
enabled: !exiting
|
enabled: !exiting
|
||||||
NumberAnimation { duration: 220; easing.type: Easing.OutCubic }
|
NumberAnimation {
|
||||||
|
duration: Anims.durShort
|
||||||
|
easing.type: Easing.BezierSpline
|
||||||
|
easing.bezierCurve: Anims.standardDecel
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// State
|
// State
|
||||||
@@ -47,13 +51,12 @@ PanelWindow {
|
|||||||
signal entered()
|
signal entered()
|
||||||
signal exitFinished()
|
signal exitFinished()
|
||||||
|
|
||||||
// ---------------- CONTENT: animate this (not the Window) ----------------
|
|
||||||
Item {
|
Item {
|
||||||
id: content
|
id: content
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
|
|
||||||
// We animate a Translate so anchors never override horizontal motion
|
// We animate a Translate so anchors never override horizontal motion
|
||||||
transform: Translate { id: tx; x: 400 } // start off-screen right
|
transform: Translate { id: tx; x: Anims.slidePx } // start off-screen right
|
||||||
|
|
||||||
// Optional: layer while animating for smoothness
|
// Optional: layer while animating for smoothness
|
||||||
layer.enabled: (enterX.running || exitAnim.running)
|
layer.enabled: (enterX.running || exitAnim.running)
|
||||||
@@ -303,21 +306,37 @@ PanelWindow {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// ---------------- EXPLICIT ANIMATIONS (no Behavior races) ----------------
|
// Entrance: slide in from right using slowed Anims curves
|
||||||
// Entrance (guaranteed): 400 -> 0
|
|
||||||
NumberAnimation {
|
NumberAnimation {
|
||||||
id: enterX
|
id: enterX
|
||||||
target: tx; property: "x"; from: 400; to: 0
|
target: tx; property: "x"; from: Anims.slidePx; to: 0
|
||||||
duration: 240; easing.type: Easing.OutCubic
|
duration: Anims.durMed
|
||||||
|
easing.type: Easing.BezierSpline
|
||||||
|
easing.bezierCurve: Anims.emphasizedDecel
|
||||||
onStopped: if (!win.exiting && Math.abs(tx.x) < 0.5) win.entered();
|
onStopped: if (!win.exiting && Math.abs(tx.x) < 0.5) win.entered();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Exit (guaranteed): (x: 0 -> 96) + (opacity: 1 -> 0)
|
// Exit: slide out to right + fade using slowed Anims curves
|
||||||
ParallelAnimation {
|
ParallelAnimation {
|
||||||
id: exitAnim
|
id: exitAnim
|
||||||
PropertyAnimation { target: tx; property: "x"; from: 0; to: 96; duration: 200; easing.type: Easing.OutCubic }
|
PropertyAnimation {
|
||||||
NumberAnimation { target: content; property: "opacity"; from: 1; to: 0; duration: 200; easing.type: Easing.OutCubic }
|
target: tx; property: "x"; from: 0; to: Anims.slidePx
|
||||||
NumberAnimation { target: content; property: "scale"; from: 1; to: 0.98; duration: 160; easing.type: Easing.OutCubic }
|
duration: Anims.durShort
|
||||||
|
easing.type: Easing.BezierSpline
|
||||||
|
easing.bezierCurve: Anims.emphasizedAccel
|
||||||
|
}
|
||||||
|
NumberAnimation {
|
||||||
|
target: content; property: "opacity"; from: 1; to: 0
|
||||||
|
duration: Anims.durShort
|
||||||
|
easing.type: Easing.BezierSpline
|
||||||
|
easing.bezierCurve: Anims.standardAccel
|
||||||
|
}
|
||||||
|
NumberAnimation {
|
||||||
|
target: content; property: "scale"; from: 1; to: 0.98
|
||||||
|
duration: Anims.durShort
|
||||||
|
easing.type: Easing.BezierSpline
|
||||||
|
easing.bezierCurve: Anims.emphasizedAccel
|
||||||
|
}
|
||||||
onStopped: finalizeExit("animStopped")
|
onStopped: finalizeExit("animStopped")
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -5,8 +5,8 @@ import qs.Services
|
|||||||
|
|
||||||
QtObject {
|
QtObject {
|
||||||
id: manager
|
id: manager
|
||||||
property int topMargin: 48
|
property int topMargin: 0
|
||||||
property int baseNotificationHeight: 132
|
property int baseNotificationHeight: 120
|
||||||
property int maxTargetNotifications: 3
|
property int maxTargetNotifications: 3
|
||||||
property var popupWindows: [] // strong refs to windows (live until exitFinished)
|
property var popupWindows: [] // strong refs to windows (live until exitFinished)
|
||||||
|
|
||||||
|
|||||||
@@ -99,8 +99,9 @@ Item {
|
|||||||
|
|
||||||
Behavior on height {
|
Behavior on height {
|
||||||
NumberAnimation {
|
NumberAnimation {
|
||||||
duration: 80
|
duration: Anims.durShort
|
||||||
easing.type: Easing.OutQuad
|
easing.type: Easing.BezierSpline
|
||||||
|
easing.bezierCurve: Anims.standardDecel
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -44,14 +44,16 @@ Rectangle {
|
|||||||
|
|
||||||
NumberAnimation {
|
NumberAnimation {
|
||||||
to: 0.6
|
to: 0.6
|
||||||
duration: 1000
|
duration: Anims.durLong
|
||||||
easing.type: Easing.InOutQuad
|
easing.type: Easing.BezierSpline
|
||||||
|
easing.bezierCurve: Anims.standard
|
||||||
}
|
}
|
||||||
|
|
||||||
NumberAnimation {
|
NumberAnimation {
|
||||||
to: 1
|
to: 1
|
||||||
duration: 1000
|
duration: Anims.durLong
|
||||||
easing.type: Easing.InOutQuad
|
easing.type: Easing.BezierSpline
|
||||||
|
easing.bezierCurve: Anims.standard
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user