Drawers/Interactions.qml

@@ -96,25 +96,25 @@ CustomMouseArea {
 			if (dragY < -10)
 				visibilities.dock = true;
 
-		if (panels.sidebar.width === 0) {
-			const showOsd = inRightPanel(panels.osd, x, y);
+			if (panels.sidebar.width === 0) {
+				const showOsd = inRightPanel(panels.osdWrapper, x, y);
 
-			if (showOsd) {
-				osdShortcutActive = false;
-				root.panels.osd.hovered = true;
-			}
-		} else {
-			const outOfSidebar = x < width - panels.sidebar.width;
-			const showOsd = outOfSidebar && inRightPanel(panels.osd, x, y);
+				if (showOsd) {
+					osdShortcutActive = false;
+					root.panels.osd.hovered = true;
+				}
+			} else {
+				const outOfSidebar = x < width - panels.sidebar.width;
+				const showOsd = outOfSidebar && inRightPanel(panels.osdWrapper, x, y);
 
-			if (!osdShortcutActive) {
-				visibilities.osd = showOsd;
-				root.panels.osd.hovered = showOsd;
-			} else if (showOsd) {
-				osdShortcutActive = false;
-				root.panels.osd.hovered = true;
+				if (!osdShortcutActive) {
+					visibilities.osd = showOsd;
+					root.panels.osd.hovered = showOsd;
+				} else if (showOsd) {
+					osdShortcutActive = false;
+					root.panels.osd.hovered = true;
+				}
 			}
-		}
 
 		if (Config.dock.enable && !Config.dock.hoverToReveal && !visibilities.dock && !visibilities.launcher && inBottomPanel(panels.dock, x, y))
 			visibilities.dock = true;

Drawers/Panels.qml

@@ -26,6 +26,7 @@ Item {
 	readonly property alias launcher: launcher
 	readonly property alias notifications: notifications
 	readonly property alias osd: osd
+	readonly property alias osdWrapper: osdWrapper
 	readonly property alias popouts: popouts.content
 	readonly property alias popoutsWrapper: popouts
 	readonly property alias resources: resources
@@ -48,6 +49,28 @@ Item {
 		visibilities: root.visibilities
 	}
 
+	Item {
+		id: osdWrapper
+
+		anchors.right: parent.right
+		anchors.rightMargin: sidebar.width * (1 - sidebar.offsetScale)
+		anchors.verticalCenter: parent.verticalCenter
+		clip: sidebar.visible
+
+		implicitHeight: osd.implicitHeight
+		implicitWidth: osd.implicitWidth * (1 - osd.offsetScale)
+
+		Osd.Wrapper {
+			id: osd
+
+			anchors.right: parent.right
+			anchors.verticalCenter: parent.verticalCenter
+			screen: root.screen
+			sidebarOrSessionVisible: sidebar.visible
+			visibilities: root.visibilities
+		}
+	}
+
 	Drawing.Wrapper {
 		id: drawing
 
@@ -58,17 +81,6 @@ Item {
 		visibilities: root.visibilities
 	}
 
-	Osd.Wrapper {
-		id: osd
-
-		anchors.right: parent.right
-		anchors.rightMargin: sidebar.width
-		anchors.verticalCenter: parent.verticalCenter
-		clip: sidebar.width > 0
-		screen: root.screen
-		visibilities: root.visibilities
-	}
-
 	Modules.ClipWrapper {
 		id: popouts
 

Drawers/Windows.qml

@@ -188,7 +188,7 @@ Variants {
 
 					bottomLeftRadius: 0
 					deformAmount: 0.1 * Config.appearance.deform.scale
-					exclude: panels.sidebar.offsetscale > 0.08 ? [] : [utilsBg]
+					exclude: panels.sidebar.offsetScale > 0.08 ? [] : [utilsBg]
 					implicitHeight: panel.height * (1 / rawDeformMatrix.m22) + 2
 					panel: panels.sidebar
 				}
@@ -197,8 +197,10 @@ Variants {
 					id: osdBg
 
 					deformAmount: 0.1 * Config.appearance.deform.scale
-					panel: panels.osd
+					implicitWidth: panels.osd.width
+					panel: panels.osdWrapper
 					radius: 20
+					x: panels.osdWrapper.x + panels.osd.x + Config.barConfig.border
 				}
 
 				PanelBg {

Modules/Dashboard/Wrapper.qml

@@ -17,76 +17,33 @@ Item {
 	readonly property real nonAnimHeight: state === "visible" ? (content.item?.nonAnimHeight ?? 0) : 0
 	required property PersistentProperties visibilities
 
-	implicitHeight: 0
-	implicitWidth: content.implicitWidth
-	visible: height > 0
+	readonly property bool shouldBeActive: root.visibilities.dashboard && Config.dashboard.enabled
+	property real offsetScale: shouldBeActive ? 0 : 1
 
-	states: State {
-		name: "visible"
-		when: root.visibilities.dashboard && Config.dashboard.enabled
+	visible: offsetScale < 1
+	anchors.topMargin: (-implicitHeight - 5) * offsetScale
+	implicitHeight: content.implicitHeight
+	implicitWidth: content.implicitWidth || 854 // Hard coded fallback for first open
+	opacity: 1 - offsetScale
 
-		PropertyChanges {
-			root.implicitHeight: content.implicitHeight
-		}
-	}
-	transitions: [
-		Transition {
-			from: ""
-			to: "visible"
-
-			Anim {
-				duration: MaterialEasing.expressiveEffectsTime
-				easing.bezierCurve: MaterialEasing.expressiveEffects
-				property: "implicitHeight"
-				target: root
-			}
-		},
-		Transition {
-			from: "visible"
-			to: ""
-
-			Anim {
-				easing.bezierCurve: MaterialEasing.expressiveEffects
-				property: "implicitHeight"
-				target: root
-			}
-		}
-	]
-
-	onStateChanged: {
-		if (state === "visible" && timer.running) {
-			timer.triggered();
-			timer.stop();
+	Behavior on offsetScale {
+		Anim {
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
 		}
 	}
 
-	Timer {
-		id: timer
+	Loader {
+		id: content
 
-		interval: Appearance.anim.durations.extraLarge
-		running: true
+		anchors.bottom: parent.bottom
+		anchors.horizontalCenter: parent.horizontalCenter
 
-		onTriggered: {
-			content.active = Qt.binding(() => (root.visibilities.dashboard && Config.dashboard.enabled) || root.visible);
-			content.visible = true;
-		}
-	}
+		active: root.shouldBeActive || root.visible
 
-	CustomClippingRect {
-		anchors.fill: parent
-
-		Loader {
-			id: content
-
-			active: true
-			anchors.bottom: parent.bottom
-			anchors.horizontalCenter: parent.horizontalCenter
-			visible: false
-
-			sourceComponent: Content {
-				state: root.dashState
-				visibilities: root.visibilities
-			}
+		sourceComponent: Content {
+			state: root.dashState
+			visibilities: root.visibilities
 		}
 	}
 }

Modules/Dock/Wrapper.qml

@@ -11,97 +11,36 @@ Item {
 	property int contentHeight
 	required property var panels
 	required property ShellScreen screen
-	readonly property bool shouldBeActive: visibilities.dock
 	required property PersistentProperties visibilities
 
-	implicitHeight: 0
-	implicitWidth: content.implicitWidth
-	visible: height > 0
+	readonly property bool shouldBeActive: visibilities.dock
+	property real offsetScale: shouldBeActive ? 0 : 1
 
-	Behavior on implicitWidth {
+	visible: offsetScale < 1
+	anchors.bottomMargin: (-implicitHeight - 5) * offsetScale
+	implicitHeight: content.implicitHeight
+	implicitWidth: content.implicitWidth || 400
+	opacity: 1 - offsetScale
+
+	Behavior on offsetScale {
 		Anim {
-			duration: Appearance.anim.durations.small
-		}
-	}
-
-	onShouldBeActiveChanged: {
-		if (shouldBeActive) {
-			timer.stop();
-			hideAnim.stop();
-			showAnim.start();
-		} else {
-			showAnim.stop();
-			hideAnim.start();
-		}
-	}
-
-	SequentialAnimation {
-		id: showAnim
-
-		Anim {
-			duration: Appearance.anim.durations.small
-			easing.bezierCurve: Appearance.anim.curves.expressiveEffects
-			property: "implicitHeight"
-			target: root
-			to: root.contentHeight
-		}
-
-		ScriptAction {
-			script: root.implicitHeight = Qt.binding(() => content.implicitHeight)
-		}
-	}
-
-	SequentialAnimation {
-		id: hideAnim
-
-		ScriptAction {
-			script: root.implicitHeight = root.implicitHeight
-		}
-
-		Anim {
-			easing.bezierCurve: Appearance.anim.curves.expressiveEffects
-			property: "implicitHeight"
-			target: root
-			to: 0
-		}
-	}
-
-	Timer {
-		id: timer
-
-		interval: Appearance.anim.durations.small
-
-		onRunningChanged: {
-			if (running && !root.shouldBeActive) {
-				content.visible = false;
-				content.active = true;
-			} else {
-				content.active = Qt.binding(() => root.shouldBeActive || root.visible);
-				content.visible = true;
-				if (showAnim.running) {
-					showAnim.stop();
-					showAnim.start();
-				}
-			}
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
 		}
 	}
 
 	Loader {
 		id: content
 
-		active: false
 		anchors.left: parent.left
 		anchors.top: parent.top
-		visible: false
+
+		active: root.shouldBeActive || root.visible
 
 		sourceComponent: Content {
 			panels: root.panels
 			screen: root.screen
 			visibilities: root.visibilities
-
-			Component.onCompleted: root.contentHeight = implicitHeight
 		}
-
-		Component.onCompleted: timer.start()
 	}
 }

Modules/Launcher/Wrapper.qml

@@ -21,53 +21,27 @@ Item {
 	}
 	required property var panels
 	required property ShellScreen screen
-	readonly property bool shouldBeActive: visibilities.launcher
 	required property PersistentProperties visibilities
+	readonly property bool shouldBeActive: visibilities.launcher
+	property real offsetScale: shouldBeActive ? 0 : 1
 
-	implicitHeight: 0
-	implicitWidth: content.implicitWidth
-	visible: height > 0
+	visible: offsetScale < 1
+	anchors.bottomMargin: (-implicitHeight - 5) * offsetScale
+	implicitHeight: contentHeight
+	implicitWidth: content.implicitWidth || 400
+	opacity: 1 - offsetScale
+
+	Behavior on offsetScale {
+		Anim {
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+		}
+	}
 
 	onMaxHeightChanged: timer.start()
 	onShouldBeActiveChanged: {
 		if (shouldBeActive) {
 			timer.stop();
-			hideAnim.stop();
-			showAnim.start();
-		} else {
-			showAnim.stop();
-			hideAnim.start();
-		}
-	}
-
-	SequentialAnimation {
-		id: showAnim
-
-		Anim {
-			duration: Appearance.anim.durations.small
-			easing.bezierCurve: Appearance.anim.curves.expressiveEffects
-			property: "implicitHeight"
-			target: root
-			to: root.contentHeight
-		}
-
-		ScriptAction {
-			script: root.implicitHeight = Qt.binding(() => content.implicitHeight)
-		}
-	}
-
-	SequentialAnimation {
-		id: hideAnim
-
-		ScriptAction {
-			script: root.implicitHeight = root.implicitHeight
-		}
-
-		Anim {
-			easing.bezierCurve: Appearance.anim.curves.expressiveEffects
-			property: "implicitHeight"
-			target: root
-			to: 0
 		}
 	}
 
@@ -105,10 +79,6 @@ Item {
 				root.contentHeight = Math.min(root.maxHeight, content.implicitHeight);
 				content.active = Qt.binding(() => root.shouldBeActive || root.visible);
 				content.visible = true;
-				if (showAnim.running) {
-					showAnim.stop();
-					showAnim.start();
-				}
 			}
 		}
 	}
@@ -119,7 +89,6 @@ Item {
 		active: false
 		anchors.horizontalCenter: parent.horizontalCenter
 		anchors.top: parent.top
-		visible: false
 
 		sourceComponent: Content {
 			maxHeight: root.maxHeight

Modules/Notifications/Sidebar/Utils/Wrapper.qml

@@ -20,69 +20,29 @@ Item {
 	required property Item sidebar
 	required property var visibilities
 
-	implicitHeight: 0
-	implicitWidth: sidebar.visible ? sidebar.width : Config.utilities.sizes.width
-	visible: height > 0
+	property real offsetScale: shouldBeActive ? 0 : 1
 
-	states: State {
-		name: "visible"
-		when: root.shouldBeActive
+	visible: offsetScale < 1
+	anchors.bottomMargin: (-implicitHeight - 5) * offsetScale
+	implicitHeight: content.implicitHeight + 8 * 2
+	implicitWidth: sidebar.width * (1 - sidebar.offsetScale)
+	opacity: 1 - offsetScale
 
-		PropertyChanges {
-			root.implicitHeight: content.implicitHeight + 8 * 2
-		}
-	}
-	transitions: [
-		Transition {
-			from: ""
-			to: "visible"
-
-			Anim {
-				duration: MaterialEasing.expressiveEffectsTime
-				easing.bezierCurve: MaterialEasing.expressiveEffects
-				property: "implicitHeight"
-				target: root
-			}
-		},
-		Transition {
-			from: "visible"
-			to: ""
-
-			Anim {
-				easing.bezierCurve: MaterialEasing.expressiveEffects
-				property: "implicitHeight"
-				target: root
-			}
-		}
-	]
-
-	onStateChanged: {
-		if (state === "visible" && timer.running) {
-			timer.triggered();
-			timer.stop();
-		}
-	}
-
-	Timer {
-		id: timer
-
-		interval: 1000
-		running: true
-
-		onTriggered: {
-			content.active = Qt.binding(() => root.shouldBeActive || root.visible);
-			content.visible = true;
+	Behavior on offsetScale {
+		Anim {
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
 		}
 	}
 
 	Loader {
 		id: content
 
-		active: true
 		anchors.left: parent.left
 		anchors.margins: 8
 		anchors.top: parent.top
-		visible: false
+
+		active: root.shouldBeActive || root.visible
 
 		sourceComponent: Content {
 			implicitWidth: root.implicitWidth - 8 * 2

Modules/Notifications/Sidebar/Wrapper.qml

@@ -12,57 +12,36 @@ Item {
 	}
 	required property var visibilities
 
-	implicitWidth: 0
-	visible: width > 0
+	readonly property bool shouldBeActive: root.visibilities.sidebar && Config.sidebar.enabled
+	property real offsetScale: shouldBeActive ? 0 : 1
 
-	states: State {
-		name: "visible"
-		when: root.visibilities.sidebar
+	visible: offsetScale < 1
+	anchors.rightMargin: (-implicitWidth - 5) * offsetScale
+	implicitWidth: Config.sidebar.sizes.width
+	opacity: 1 - offsetScale
 
-		PropertyChanges {
-			root.implicitWidth: Config.sidebar.sizes.width
+	Behavior on offsetScale {
+		Anim {
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
 		}
 	}
-	transitions: [
-		Transition {
-			from: ""
-			to: "visible"
-
-			Anim {
-				duration: MaterialEasing.expressiveEffectsTime
-				easing.bezierCurve: MaterialEasing.expressiveEffects
-				property: "implicitWidth"
-				target: root
-			}
-		},
-		Transition {
-			from: "visible"
-			to: ""
-
-			Anim {
-				easing.bezierCurve: MaterialEasing.expressiveEffects
-				property: "implicitWidth"
-				target: root
-			}
-		}
-	]
 
 	Loader {
 		id: content
 
-		active: true
 		anchors.bottom: parent.bottom
 		anchors.bottomMargin: 0
 		anchors.left: parent.left
 		anchors.margins: 8
 		anchors.top: parent.top
 
+		active: root.shouldBeActive || root.visible
+
 		sourceComponent: Content {
 			implicitWidth: Config.sidebar.sizes.width - 8 * 2
 			props: root.props
 			visibilities: root.visibilities
 		}
-
-		Component.onCompleted: active = Qt.binding(() => (root.visibilities.sidebar && Config.sidebar.enabled) || root.visible)
 	}
 }

Modules/Notifications/Wrapper.qml

@@ -22,8 +22,8 @@ Item {
 	}
 	transitions: Transition {
 		Anim {
-			duration: MaterialEasing.expressiveEffectsTime
-			easing.bezierCurve: MaterialEasing.expressiveEffects
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
 			property: "implicitHeight"
 			target: root
 		}

Modules/Osd/Wrapper.qml

@@ -26,40 +26,22 @@ Item {
 		timer.restart();
 	}
 
+	property real offsetScale: shouldBeActive ? 0 : 1
+	required property bool sidebarOrSessionVisible
+	property real sidebarOffset: sidebarOrSessionVisible ? 12 : 0
+
+	visible: offsetScale < 1
+	anchors.rightMargin: (-implicitWidth - 5 - sidebarOffset) * offsetScale
+	implicitWidth: content.implicitWidth
 	implicitHeight: content.implicitHeight
-	implicitWidth: 0
-	visible: width > 0
+	opacity: 1 - offsetScale
 
-	states: State {
-		name: "visible"
-		when: root.shouldBeActive
-
-		PropertyChanges {
-			root.implicitWidth: content.implicitWidth
+	Behavior on offsetScale {
+		Anim {
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
 		}
 	}
-	transitions: [
-		Transition {
-			from: ""
-			to: "visible"
-
-			Anim {
-				easing.bezierCurve: MaterialEasing.expressiveEffects
-				property: "implicitWidth"
-				target: root
-			}
-		},
-		Transition {
-			from: "visible"
-			to: ""
-
-			Anim {
-				easing.bezierCurve: MaterialEasing.expressiveEffects
-				property: "implicitWidth"
-				target: root
-			}
-		}
-	]
 
 	Component.onCompleted: {
 		volume = Audio.volume;
@@ -113,26 +95,22 @@ Item {
 		}
 	}
 
-	CustomClippingRect {
-		anchors.fill: parent
+	Loader {
+		id: content
 
-		Loader {
-			id: content
+		anchors.left: parent.left
+		anchors.verticalCenter: parent.verticalCenter
 
-			anchors.left: parent.left
-			anchors.verticalCenter: parent.verticalCenter
+		active: root.shouldBeActive || root.visible
 
-			sourceComponent: Content {
-				brightness: root.brightness
-				monitor: root.monitor
-				muted: root.muted
-				sourceMuted: root.sourceMuted
-				sourceVolume: root.sourceVolume
-				visibilities: root.visibilities
-				volume: root.volume
-			}
-
-			Component.onCompleted: active = Qt.binding(() => root.shouldBeActive || root.visible)
+		sourceComponent: Content {
+			brightness: root.brightness
+			monitor: root.monitor
+			muted: root.muted
+			sourceMuted: root.sourceMuted
+			sourceVolume: root.sourceVolume
+			visibilities: root.visibilities
+			volume: root.volume
 		}
 	}
 }

Modules/Resources/Wrapper.qml

@@ -11,76 +11,33 @@ Item {
 	readonly property real nonAnimHeight: state === "visible" ? (content.item?.nonAnimHeight ?? 0) : 0
 	required property PersistentProperties visibilities
 
-	implicitHeight: 0
-	implicitWidth: content.implicitWidth
-	visible: height > 0
+	readonly property bool shouldBeActive: root.visibilities.resources
+	property real offsetScale: shouldBeActive ? 0 : 1
 
-	states: State {
-		name: "visible"
-		when: root.visibilities.resources
+	visible: offsetScale < 1
+	anchors.topMargin: (-implicitHeight - 5) * offsetScale
+	implicitHeight: content.implicitHeight
+	implicitWidth: content.implicitWidth || 854 // Hard coded fallback for first open
+	opacity: 1 - offsetScale
 
-		PropertyChanges {
-			root.implicitHeight: content.implicitHeight
-		}
-	}
-	transitions: [
-		Transition {
-			from: ""
-			to: "visible"
-
-			Anim {
-				duration: MaterialEasing.expressiveEffectsTime
-				easing.bezierCurve: MaterialEasing.expressiveEffects
-				property: "implicitHeight"
-				target: root
-			}
-		},
-		Transition {
-			from: "visible"
-			to: ""
-
-			Anim {
-				easing.bezierCurve: MaterialEasing.expressiveEffects
-				property: "implicitHeight"
-				target: root
-			}
-		}
-	]
-
-	onStateChanged: {
-		if (state === "visible" && timer.running) {
-			timer.triggered();
-			timer.stop();
+	Behavior on offsetScale {
+		Anim {
+			duration: Appearance.anim.durations.expressiveDefaultSpatial
+			easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
 		}
 	}
 
-	Timer {
-		id: timer
+	Loader {
+		id: content
 
-		interval: Appearance.anim.durations.extraLarge
-		running: true
+		anchors.bottom: parent.bottom
+		anchors.horizontalCenter: parent.horizontalCenter
 
-		onTriggered: {
-			content.active = Qt.binding(() => (root.visibilities.resources) || root.visible);
-			content.visible = true;
-		}
-	}
+		active: root.shouldBeActive || root.visible
 
-	CustomClippingRect {
-		anchors.fill: parent
-
-		Loader {
-			id: content
-
-			active: true
-			anchors.bottom: parent.bottom
-			anchors.horizontalCenter: parent.horizontalCenter
-			visible: false
-
-			sourceComponent: Content {
-				padding: Appearance.padding.normal
-				visibilities: root.visibilities
-			}
+		sourceComponent: Content {
+			padding: Appearance.padding.normal
+			visibilities: root.visibilities
 		}
 	}
 }