fix blob positioning + deforming

Config/Appearance.qml

@@ -4,6 +4,7 @@ import Quickshell
 
 Singleton {
 	readonly property AppearanceConf.Anim anim: Config.appearance.anim
+	readonly property AppearanceConf.Deform deform: Config.appearance.deform
 	readonly property AppearanceConf.FontStuff font: Config.appearance.font
 	readonly property AppearanceConf.Padding padding: Config.appearance.padding
 	// Literally just here to shorten accessing stuff :woe:

Config/AppearanceConf.qml

@@ -3,6 +3,8 @@ import Quickshell.Io
 JsonObject {
 	property Anim anim: Anim {
 	}
+	property Deform deform: Deform {
+	}
 	property FontStuff font: FontStuff {
 	}
 	property Padding padding: Padding {
@@ -43,6 +45,9 @@ JsonObject {
 		property real scale: 1
 		property int small: 200 * scale
 	}
+	component Deform: JsonObject {
+		property real scale: 1
+	}
 	component FontFamily: JsonObject {
 		property string clock: "Rubik"
 		property string material: "Material Symbols Rounded"

Config/Config.qml

@@ -48,6 +48,9 @@ Singleton {
 			padding: {
 				scale: appearance.padding.scale
 			},
+			deform: {
+				scale: appearance.deform.scale
+			},
 			font: {
 				family: {
 					sans: appearance.font.family.sans,

Drawers/Windows.qml

@@ -170,7 +170,7 @@ Variants {
 				PanelBg {
 					id: dashBg
 
-					deformAmount: 0
+					deformAmount: 0.15 * Config.appearance.deform.scale
 					panel: panels.dashboard
 					radius: Appearance.rounding.normal
 				}
@@ -178,7 +178,7 @@ Variants {
 				PanelBg {
 					id: launcherBg
 
-					deformAmount: 0
+					deformAmount: 0.15 * Config.appearance.deform.scale
 					panel: panels.launcher
 					radius: Appearance.rounding.smallest + 5
 				}
@@ -187,7 +187,7 @@ Variants {
 					id: sidebarBg
 
 					bottomLeftRadius: 0
-					deformAmount: 0
+					deformAmount: 0.1 * Config.appearance.deform.scale
 					exclude: panels.sidebar.offsetscale > 0.08 ? [] : [utilsBg]
 					implicitHeight: panel.height * (1 / rawDeformMatrix.m22) + 2
 					panel: panels.sidebar
@@ -196,7 +196,7 @@ Variants {
 				PanelBg {
 					id: osdBg
 
-					deformAmount: 0
+					deformAmount: 0.1 * Config.appearance.deform.scale
 					panel: panels.osd
 					radius: 20
 				}
@@ -210,7 +210,7 @@ Variants {
 				PanelBg {
 					id: utilsBg
 
-					deformAmount: panels.sidebar.visible ? 0 : 0
+					deformAmount: panels.sidebar.visible ? (0.1 * Config.appearance.deform.scale) : (0.1 * Config.appearance.deform.scale)
 					exclude: panels.sidebar.offsetScale > 0.08 ? [] : [sidebarBg]
 					panel: panels.utilities
 					topLeftRadius: 0
@@ -219,15 +219,16 @@ Variants {
 				PanelBg {
 					id: popoutBg
 
-					deformAmount: 0
+					deformAmount: 0.15 * Config.appearance.deform.scale
 					implicitWidth: panels.popouts.width
 					panel: panels.popoutsWrapper
+					radius: (panels.popouts.currentName.startsWith("audio") || panels.popouts.currentName.startsWith("updates")) ? Appearance.rounding.normal : Appearance.rounding.smallest
 				}
 
 				PanelBg {
 					id: resourcesBg
 
-					deformAmount: 0
+					deformAmount: 0.15 * Config.appearance.deform.scale
 					panel: panels.resources
 					radius: Appearance.rounding.normal
 				}
@@ -235,7 +236,7 @@ Variants {
 				PanelBg {
 					id: settingsBg
 
-					deformAmount: 0
+					deformAmount: 0.1 * Config.appearance.deform.scale
 					panel: panels.settings
 					radius: Appearance.rounding.large
 					topLeftRadius: Appearance.rounding.large + Appearance.padding.smaller
@@ -245,7 +246,7 @@ Variants {
 				PanelBg {
 					id: dockBg
 
-					deformAmount: 0
+					deformAmount: 0.15 * Config.appearance.deform.scale
 					panel: panels.dock
 					radius: Appearance.rounding.normal
 				}

Modules/ClipWrapper.qml

@@ -26,8 +26,8 @@ Item {
 
 	Behavior on offsetScale {
 		Anim {
-			duration: MaterialEasing.expressiveEffectsTime
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
-			easing.bezierCurve: MaterialEasing.expressiveEffects
+			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
 		}
 	}
 	Behavior on x {

Modules/Content.qml

@@ -101,9 +101,10 @@ Item {
 		readonly property bool shouldBeActive: root.popouts.currentName === name
 
 		active: false
-		anchors.horizontalCenter: parent.horizontalCenter
+		// anchors.horizontalCenter: parent.horizontalCenter
-		anchors.top: parent.top
+		// anchors.top: parent.top
-		anchors.topMargin: 5
+		// anchors.topMargin: 5
+		anchors.centerIn: parent
 		opacity: 0
 		scale: 0.8
 

Modules/Settings/Categories/Appearance.qml

@@ -57,6 +57,16 @@ SettingsPage {
 			setting: "scale"
 			step: 0.1
 		}
+
+		Separator {
+		}
+
+		SettingSpinBox {
+			name: "Deform animation scale"
+			object: Config.appearance.deform
+			setting: "scale"
+			step: 0.1
+		}
 	}
 
 	SettingsSection {
@@ -118,9 +128,9 @@ SettingsPage {
 		}
 
 		SettingSpinBox {
-			name: "Session GIF speed"
 			max: 5
 			min: 0
+			name: "Session GIF speed"
 			object: Config.appearance.anim
 			setting: "sessionGifSpeed"
 			step: 0.1
@@ -144,9 +154,9 @@ SettingsPage {
 		}
 
 		SettingSpinBox {
-			name: "Base opacity"
 			max: 1
 			min: 0
+			name: "Base opacity"
 			object: Config.appearance.transparency
 			setting: "base"
 			step: 0.05
@@ -156,9 +166,9 @@ SettingsPage {
 		}
 
 		SettingSpinBox {
-			name: "Layer opacity"
 			max: 1
 			min: 0
+			name: "Layer opacity"
 			object: Config.appearance.transparency
 			setting: "layers"
 			step: 0.05

Modules/Settings/SettingsIndex.mjs

@@ -815,7 +815,14 @@ export const settingsIndex = [
     category: "appearance",
     categoryName: "Appearance",
     section: "Scale",
-    keywords: ["animation", "speed", "duration"],
+    keywords: ["animation", "speed", "duration", "scale"],
+  },
+  {
+    name: "Deform animation scale",
+    category: "appearance",
+    categoryName: "Appearance",
+    section: "Scale",
+    keywords: ["animation", "deform", "scale"],
   },
   // Fonts section
   {

Modules/SysTray/Popouts/AudioPopup.qml

@@ -24,6 +24,7 @@ Item {
 	CustomRect {
 		anchors.left: parent.left
 		anchors.right: parent.right
+		anchors.top: parent.top
 		color: DynamicColors.tPalette.m3surfaceContainer
 		implicitHeight: parent.implicitHeight
 		radius: Appearance.rounding.small
@@ -31,8 +32,8 @@ Item {
 
 		Behavior on implicitHeight {
 			Anim {
-				duration: MaterialEasing.emphasizedDecelTime
+				duration: MaterialEasing.expressiveEffectsTime
-				easing.bezierCurve: MaterialEasing.emphasized
+				easing.bezierCurve: MaterialEasing.expressiveEffects
 			}
 		}
 	}
@@ -40,7 +41,11 @@ Item {
 	ColumnLayout {
 		id: layout
 
-		anchors.centerIn: parent
+		// anchors.centerIn: parent
+		anchors.left: parent.left
+		anchors.margins: Appearance.padding.small
+		anchors.right: parent.right
+		anchors.top: parent.top
 		implicitWidth: stack.currentItem ? stack.currentItem.childrenRect.height : 0
 		spacing: 12
 
@@ -98,6 +103,12 @@ Item {
 			Layout.preferredHeight: currentIndex === 0 ? vol.childrenRect.height : dev.childrenRect.height
 			currentIndex: 0
 
+			// Behavior on Layout.preferredHeight {
+			// 	Anim {
+			// 		duration: MaterialEasing.expressiveEffectsTime
+			// 		easing.bezierCurve: MaterialEasing.expressiveEffects
+			// 	}
+			// }
 			Behavior on currentIndex {
 				SequentialAnimation {
 					ParallelAnimation {

Modules/Wrapper.qml

@@ -8,8 +8,8 @@ import qs.Config
 Item {
 	id: root
 
-	property list<real> animCurve: MaterialEasing.expressiveEffects
+	property list<real> animCurve: Appearance.anim.curves.expressiveDefaultSpatial
-	property int animLength: MaterialEasing.expressiveEffectsTime
+	property int animLength: Appearance.anim.durations.expressiveDefaultSpatial
 	readonly property alias content: content
 	readonly property Item current: (content.item as Content)?.current ?? null
 	property real currentCenter
@@ -73,9 +73,9 @@ Item {
 	Comp {
 		id: content
 
-		anchors.horizontalCenter: parent.horizontalCenter
+		// anchors.horizontalCenter: parent.horizontalCenter
-		anchors.top: parent.top
+		// anchors.top: parent.top
-		// anchors.centerIn: parent
+		anchors.centerIn: parent
 		shouldBeActive: root.hasCurrent && !root.detachedMode
 
 		sourceComponent: Content {