Salastil/DankMaterialShell
1
0
Fork 0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2026-04-09 15:22:13 -04:00
Code Packages Releases Activity

dms: Material Animation Refactor

Browse Source 
- Thanks Google for Material 3 Expressive stuffs
- Thanks Caelestia shell for pushing qml limits to showcase the blueprint
This commit is contained in:
purian23
2026-02-08 20:24:37 -05:00
parent d775974a90
commit 37cc4ab197
16 changed files with 442 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
quickshell/Modules/Notifications/Popup/NotificationPopup.qml
View File

@@ -718,7 +718,7 @@ PanelWindow {
target: content
property: "swipeOffset"
to: isTopCenter ? -content.height : (SettingsData.notificationPopupPosition === SettingsData.Position.Left || SettingsData.notificationPopupPosition === SettingsData.Position.Bottom ? -content.width : content.width)
duration: Anims.durShort
duration: Theme.shortDuration
easing.type: Easing.OutCubic
onStopped: {
NotificationService.dismissNotification(notificationData);
@@ -757,9 +757,9 @@ PanelWindow {
return isLeft ? -Anims.slidePx : Anims.slidePx;
}
to: 0
duration: Anims.durMed
duration: Theme.mediumDuration
easing.type: Easing.BezierSpline
easing.bezierCurve: isTopCenter ? Anims.standardDecel : Anims.emphasizedDecel
easing.bezierCurve: isTopCenter ? Theme.expressiveCurves.standardDecel : Theme.expressiveCurves.emphasizedDecel
onStopped: {
if (!win.exiting && !win._isDestroying) {
if (isTopCenter) {
@@ -788,9 +788,9 @@ PanelWindow {
const isLeft = SettingsData.notificationPopupPosition === SettingsData.Position.Left || SettingsData.notificationPopupPosition === SettingsData.Position.Bottom;
return isLeft ? -Anims.slidePx : Anims.slidePx;
}
duration: Anims.durShort
duration: Theme.shortDuration
easing.type: Easing.BezierSpline
easing.bezierCurve: Anims.emphasizedAccel
easing.bezierCurve: Theme.expressiveCurves.emphasizedAccel
}
NumberAnimation {
@@ -798,9 +798,9 @@ PanelWindow {
property: "opacity"
from: 1
to: 0
duration: Anims.durShort
duration: Theme.shortDuration
easing.type: Easing.BezierSpline
easing.bezierCurve: Anims.standardAccel
easing.bezierCurve: Theme.expressiveCurves.standardAccel
}
NumberAnimation {
@@ -808,9 +808,9 @@ PanelWindow {
property: "scale"
from: 1
to: 0.98
duration: Anims.durShort
duration: Theme.shortDuration
easing.type: Easing.BezierSpline
easing.bezierCurve: Anims.emphasizedAccel
easing.bezierCurve: Theme.expressiveCurves.emphasizedAccel
}
}
@@ -867,9 +867,9 @@ PanelWindow {
enabled: !exiting && !_isDestroying
NumberAnimation {
duration: Anims.durShort
duration: Theme.shortDuration
easing.type: Easing.BezierSpline
easing.bezierCurve: Anims.standardDecel
easing.bezierCurve: Theme.expressiveCurves.standardDecel
}
}
}

73
quickshell/Modules/Settings/TypographyMotionTab.qml
View File

@@ -239,10 +239,10 @@ Item {
tab: "typography"
tags: ["animation", "duration", "custom", "speed"]
settingKey: "customAnimationDuration"
text: I18n.tr("Custom Duration")
description: I18n.tr("Fine-tune animation timing in milliseconds")
text: I18n.tr("Animation Duration")
description: I18n.tr("Globally scale all animation durations")
minimum: 0
maximum: 750
maximum: 1000
value: Theme.currentAnimationBaseDuration
unit: "ms"
defaultValue: 200
@@ -269,11 +269,34 @@ Item {
}
}
}
Rectangle {
width: parent.width
height: 1
color: Theme.outline
opacity: 0.15
}
SettingsToggleRow {
tab: "typography"
tags: ["animation", "sync", "popout", "modal", "global"]
settingKey: "syncComponentAnimationSpeeds"
text: I18n.tr("Sync Popouts & Modals")
description: I18n.tr("Popouts and Modals follow global Animation Speed (disable to customize independently)")
checked: SettingsData.syncComponentAnimationSpeeds
onToggled: checked => SettingsData.set("syncComponentAnimationSpeeds", checked)
Connections {
target: SettingsData
function onSyncComponentAnimationSpeedsChanged() {
}
}
}
}
SettingsCard {
tab: "typography"
tags: ["animation", "speed", "motion", "duration", "popout"]
tags: ["animation", "speed", "motion", "duration", "popout", "sync"]
title: I18n.tr("%1 Animation Speed").arg(I18n.tr("Popouts"))
settingKey: "popoutAnimationSpeed"
iconName: "open_in_new"
@@ -295,6 +318,8 @@ Item {
onSelectionChanged: (index, selected) => {
if (!selected)
return;
if (SettingsData.syncComponentAnimationSpeeds)
SettingsData.set("syncComponentAnimationSpeeds", false);
SettingsData.set("popoutAnimationSpeed", index);
}
@@ -322,11 +347,13 @@ Item {
text: I18n.tr("Custom Duration")
description: I18n.tr("%1 custom animation duration").arg(I18n.tr("Popouts"))
minimum: 0
maximum: 2000
maximum: 1000
value: Theme.popoutAnimationDuration
unit: "ms"
defaultValue: 150
onSliderValueChanged: newValue => {
if (SettingsData.syncComponentAnimationSpeeds)
SettingsData.set("syncComponentAnimationSpeeds", false);
SettingsData.set("popoutAnimationSpeed", SettingsData.AnimationSpeed.Custom);
SettingsData.set("popoutCustomAnimationDuration", newValue);
}
@@ -343,7 +370,7 @@ Item {
Connections {
target: Theme
function onPopoutAnimationDurationChanged() {
if (SettingsData.popoutAnimationSpeed === SettingsData.AnimationSpeed.Custom)
if (!SettingsData.syncComponentAnimationSpeeds && SettingsData.popoutAnimationSpeed === SettingsData.AnimationSpeed.Custom)
return;
popoutDurationSlider.value = Theme.popoutAnimationDuration;
}
@@ -353,7 +380,7 @@ Item {
SettingsCard {
tab: "typography"
tags: ["animation", "speed", "motion", "duration", "modal"]
tags: ["animation", "speed", "motion", "duration", "modal", "sync"]
title: I18n.tr("%1 Animation Speed").arg(I18n.tr("Modals"))
settingKey: "modalAnimationSpeed"
iconName: "web_asset"
@@ -375,6 +402,8 @@ Item {
onSelectionChanged: (index, selected) => {
if (!selected)
return;
if (SettingsData.syncComponentAnimationSpeeds)
SettingsData.set("syncComponentAnimationSpeeds", false);
SettingsData.set("modalAnimationSpeed", index);
}
@@ -402,11 +431,13 @@ Item {
text: I18n.tr("Custom Duration")
description: I18n.tr("%1 custom animation duration").arg(I18n.tr("Modals"))
minimum: 0
maximum: 2000
maximum: 1000
value: Theme.modalAnimationDuration
unit: "ms"
defaultValue: 150
onSliderValueChanged: newValue => {
if (SettingsData.syncComponentAnimationSpeeds)
SettingsData.set("syncComponentAnimationSpeeds", false);
SettingsData.set("modalAnimationSpeed", SettingsData.AnimationSpeed.Custom);
SettingsData.set("modalCustomAnimationDuration", newValue);
}
@@ -423,13 +454,37 @@ Item {
Connections {
target: Theme
function onModalAnimationDurationChanged() {
if (SettingsData.modalAnimationSpeed === SettingsData.AnimationSpeed.Custom)
if (!SettingsData.syncComponentAnimationSpeeds && SettingsData.modalAnimationSpeed === SettingsData.AnimationSpeed.Custom)
return;
modalDurationSlider.value = Theme.modalAnimationDuration;
}
}
}
}
SettingsCard {
tab: "typography"
tags: ["animation", "ripple", "effect", "material", "feedback"]
title: I18n.tr("Ripple Effects")
settingKey: "enableRippleEffects"
iconName: "radio_button_unchecked"
SettingsToggleRow {
tab: "typography"
tags: ["animation", "ripple", "effect", "material", "click"]
settingKey: "enableRippleEffects"
text: I18n.tr("Enable Ripple Effects")
description: I18n.tr("Show Material Design ripple animations on interactive elements")
checked: SettingsData.enableRippleEffects ?? true
onToggled: newValue => SettingsData.set("enableRippleEffects", newValue)
Connections {
target: SettingsData
function onEnableRippleEffectsChanged() {
}
}
}
}
}
}
}