Salastil/DankMaterialShell
1
0
Fork 0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2026-04-04 12:52:06 -04:00
Code Packages Releases Activity

animations: fine-grained anim settings for modals and popouts

Browse Source
This commit is contained in:
bbedward
2026-02-05 12:10:17 -05:00
parent 2583dbd3f2
commit 7d5c20125a
7 changed files with 192 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
quickshell/Common/SettingsData.qml
View File

@@ -154,6 +154,10 @@ Singleton {
property bool nightModeEnabled: false
property int animationSpeed: SettingsData.AnimationSpeed.Short
property int customAnimationDuration: 500
property int popoutAnimationSpeed: SettingsData.AnimationSpeed.Short
property int popoutCustomAnimationDuration: 150
property int modalAnimationSpeed: SettingsData.AnimationSpeed.Short
property int modalCustomAnimationDuration: 150
property string wallpaperFillMode: "Fill"
property bool blurredWallpaperLayer: false
property bool blurWallpaperOnOverview: false

18
quickshell/Common/Theme.qml
View File

@@ -766,6 +766,24 @@ Singleton {
};
}
readonly property int popoutAnimationDuration: {
if (typeof SettingsData === "undefined")
return 150;
const presetMap = [0, 150, 300, 500];
if (SettingsData.popoutAnimationSpeed === SettingsData.AnimationSpeed.Custom)
return SettingsData.popoutCustomAnimationDuration;
return presetMap[SettingsData.popoutAnimationSpeed] ?? 150;
}
readonly property int modalAnimationDuration: {
if (typeof SettingsData === "undefined")
return 150;
const presetMap = [0, 150, 300, 500];
if (SettingsData.modalAnimationSpeed === SettingsData.AnimationSpeed.Custom)
return SettingsData.modalCustomAnimationDuration;
return presetMap[SettingsData.modalAnimationSpeed] ?? 150;
}
property real cornerRadius: {
if (typeof SessionData !== "undefined" && SessionData.isGreeterMode && typeof GreetdSettings !== "undefined") {
return GreetdSettings.cornerRadius;

4
quickshell/Common/settings/SettingsSpec.js
View File

@@ -40,6 +40,10 @@ var SPEC = {
nightModeEnabled: { def: false },
animationSpeed: { def: 1 },
customAnimationDuration: { def: 500 },
popoutAnimationSpeed: { def: 1 },
popoutCustomAnimationDuration: { def: 150 },
modalAnimationSpeed: { def: 1 },
modalCustomAnimationDuration: { def: 150 },
wallpaperFillMode: { def: "Fill" },
blurredWallpaperLayer: { def: false },
blurWallpaperOnOverview: { def: false },

2
quickshell/Modals/Common/DankModal.qml
View File

@@ -26,7 +26,7 @@ Item {
property bool closeOnEscapeKey: true
property bool closeOnBackgroundClick: true
property string animationType: "scale"
property int animationDuration: Theme.expressiveDurations.expressiveDefaultSpatial
property int animationDuration: Theme.modalAnimationDuration
property real animationScaleCollapsed: 0.96
property real animationOffset: Theme.spacingL
property list<real> animationEnterCurve: Theme.expressiveCurves.expressiveDefaultSpatial

8
quickshell/Modals/DankLauncherV2/DankLauncherV2Modal.qml
View File

@@ -198,7 +198,7 @@ Item {
Timer {
id: closeCleanupTimer
interval: Theme.expressiveDurations.expressiveFastSpatial + 50
interval: Theme.modalAnimationDuration + 50
repeat: false
onTriggered: {
isClosing = false;
@@ -310,7 +310,7 @@ Item {
Behavior on opacity {
NumberAnimation {
duration: Theme.expressiveDurations.expressiveFastSpatial
duration: Theme.modalAnimationDuration
easing.type: Easing.BezierSpline
easing.bezierCurve: contentVisible ? Theme.expressiveCurves.expressiveFastSpatial : Theme.expressiveCurves.emphasized
}
@@ -346,7 +346,7 @@ Item {
Behavior on opacity {
NumberAnimation {
duration: Theme.expressiveDurations.fast
duration: Theme.modalAnimationDuration
easing.type: Easing.BezierSpline
easing.bezierCurve: contentVisible ? Theme.expressiveCurves.expressiveFastSpatial : Theme.expressiveCurves.standardAccel
}
@@ -354,7 +354,7 @@ Item {
Behavior on scale {
NumberAnimation {
duration: Theme.expressiveDurations.fast
duration: Theme.modalAnimationDuration
easing.type: Easing.BezierSpline
easing.bezierCurve: contentVisible ? Theme.expressiveCurves.expressiveFastSpatial : Theme.expressiveCurves.standardAccel
}

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

@@ -270,6 +270,166 @@ Item {
}
}
}
SettingsCard {
tab: "typography"
tags: ["animation", "speed", "motion", "duration", "popout"]
title: I18n.tr("%1 Animation Speed").arg(I18n.tr("Popouts"))
settingKey: "popoutAnimationSpeed"
iconName: "open_in_new"
Item {
width: parent.width
height: popoutSpeedGroup.implicitHeight
clip: true
DankButtonGroup {
id: popoutSpeedGroup
anchors.horizontalCenter: parent.horizontalCenter
buttonPadding: parent.width < 480 ? Theme.spacingS : Theme.spacingL
minButtonWidth: parent.width < 480 ? 44 : 64
textSize: parent.width < 480 ? Theme.fontSizeSmall : Theme.fontSizeMedium
model: [I18n.tr("None"), I18n.tr("Short"), I18n.tr("Medium"), I18n.tr("Long"), I18n.tr("Custom")]
selectionMode: "single"
currentIndex: SettingsData.popoutAnimationSpeed
onSelectionChanged: (index, selected) => {
if (!selected)
return;
SettingsData.set("popoutAnimationSpeed", index);
}
Connections {
target: SettingsData
function onPopoutAnimationSpeedChanged() {
popoutSpeedGroup.currentIndex = SettingsData.popoutAnimationSpeed;
}
}
}
}
Rectangle {
width: parent.width
height: 1
color: Theme.outline
opacity: 0.15
}
SettingsSliderRow {
id: popoutDurationSlider
tab: "typography"
tags: ["animation", "duration", "custom", "speed", "popout"]
settingKey: "popoutCustomAnimationDuration"
text: I18n.tr("Custom Duration")
description: I18n.tr("%1 custom animation duration").arg(I18n.tr("Popouts"))
minimum: 0
maximum: 500
value: Theme.popoutAnimationDuration
unit: "ms"
defaultValue: 150
onSliderValueChanged: newValue => {
SettingsData.set("popoutAnimationSpeed", SettingsData.AnimationSpeed.Custom);
SettingsData.set("popoutCustomAnimationDuration", newValue);
}
Connections {
target: SettingsData
function onPopoutAnimationSpeedChanged() {
if (SettingsData.popoutAnimationSpeed === SettingsData.AnimationSpeed.Custom)
return;
popoutDurationSlider.value = Theme.popoutAnimationDuration;
}
}
Connections {
target: Theme
function onPopoutAnimationDurationChanged() {
if (SettingsData.popoutAnimationSpeed === SettingsData.AnimationSpeed.Custom)
return;
popoutDurationSlider.value = Theme.popoutAnimationDuration;
}
}
}
}
SettingsCard {
tab: "typography"
tags: ["animation", "speed", "motion", "duration", "modal"]
title: I18n.tr("%1 Animation Speed").arg(I18n.tr("Modals"))
settingKey: "modalAnimationSpeed"
iconName: "web_asset"
Item {
width: parent.width
height: modalSpeedGroup.implicitHeight
clip: true
DankButtonGroup {
id: modalSpeedGroup
anchors.horizontalCenter: parent.horizontalCenter
buttonPadding: parent.width < 480 ? Theme.spacingS : Theme.spacingL
minButtonWidth: parent.width < 480 ? 44 : 64
textSize: parent.width < 480 ? Theme.fontSizeSmall : Theme.fontSizeMedium
model: [I18n.tr("None"), I18n.tr("Short"), I18n.tr("Medium"), I18n.tr("Long"), I18n.tr("Custom")]
selectionMode: "single"
currentIndex: SettingsData.modalAnimationSpeed
onSelectionChanged: (index, selected) => {
if (!selected)
return;
SettingsData.set("modalAnimationSpeed", index);
}
Connections {
target: SettingsData
function onModalAnimationSpeedChanged() {
modalSpeedGroup.currentIndex = SettingsData.modalAnimationSpeed;
}
}
}
}
Rectangle {
width: parent.width
height: 1
color: Theme.outline
opacity: 0.15
}
SettingsSliderRow {
id: modalDurationSlider
tab: "typography"
tags: ["animation", "duration", "custom", "speed", "modal"]
settingKey: "modalCustomAnimationDuration"
text: I18n.tr("Custom Duration")
description: I18n.tr("%1 custom animation duration").arg(I18n.tr("Modals"))
minimum: 0
maximum: 500
value: Theme.modalAnimationDuration
unit: "ms"
defaultValue: 150
onSliderValueChanged: newValue => {
SettingsData.set("modalAnimationSpeed", SettingsData.AnimationSpeed.Custom);
SettingsData.set("modalCustomAnimationDuration", newValue);
}
Connections {
target: SettingsData
function onModalAnimationSpeedChanged() {
if (SettingsData.modalAnimationSpeed === SettingsData.AnimationSpeed.Custom)
return;
modalDurationSlider.value = Theme.modalAnimationDuration;
}
}
Connections {
target: Theme
function onModalAnimationDurationChanged() {
if (SettingsData.modalAnimationSpeed === SettingsData.AnimationSpeed.Custom)
return;
modalDurationSlider.value = Theme.modalAnimationDuration;
}
}
}
}
}
}
}

2
quickshell/Widgets/DankPopout.qml
View File

@@ -21,7 +21,7 @@ Item {
property real triggerWidth: 40
property string triggerSection: ""
property string positioning: "center"
property int animationDuration: Theme.expressiveDurations.expressiveDefaultSpatial
property int animationDuration: Theme.popoutAnimationDuration
property real animationScaleCollapsed: 0.96
property real animationOffset: Theme.spacingL
property list<real> animationEnterCurve: Theme.expressiveCurves.expressiveDefaultSpatial