use loader for updates popout

Modules/Updates/UpdatesPopout.qml

@@ -11,150 +11,161 @@ import qs.Helpers
 CustomClippingRect {
 	id: root
 
+	readonly property bool hasUpdates: Object.keys(Updates.updates)?.length > 0
 	readonly property int itemHeight: 50 + Appearance.padding.smaller * 2
 	required property var wrapper
 
 	color: DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: updatesList.visible ? updatesList.implicitHeight + Appearance.padding.small * 2 : noUpdates.height
+	implicitHeight: hasUpdates ? updatesListLoader.item?.implicitHeight + Appearance.padding.small * 2 : noUpdatesLoader.item.height
-	implicitWidth: updatesList.visible ? updatesList.contentWidth + Appearance.padding.small * 2 : noUpdates.width
+	implicitWidth: hasUpdates ? updatesListLoader.item?.contentWidth + Appearance.padding.small * 2 : noUpdatesLoader.item.width
 	radius: Appearance.rounding.small
 
-	Item {
+	Loader {
-		id: noUpdates
+		id: noUpdatesLoader
 
+		active: !root.hasUpdates
 		anchors.centerIn: parent
-		height: 200
-		visible: script.values.length === 0
-		width: 600
 
-		MaterialIcon {
+		sourceComponent: Item {
-			id: noUpdatesIcon
+			id: noUpdates
 
-			anchors.horizontalCenter: parent.horizontalCenter
+			height: 200
-			anchors.top: parent.top
+			width: 300
-			color: DynamicColors.tPalette.m3onSurfaceVariant
-			font.pointSize: Appearance.font.size.extraLarge * 3
-			horizontalAlignment: Text.AlignHCenter
-			text: "check"
-		}
 
-		CustomText {
+			MaterialIcon {
-			anchors.horizontalCenter: parent.horizontalCenter
+				id: noUpdatesIcon
-			anchors.top: noUpdatesIcon.bottom
+
-			color: DynamicColors.tPalette.m3onSurfaceVariant
+				anchors.horizontalCenter: parent.horizontalCenter
-			horizontalAlignment: Text.AlignHCenter
+				anchors.top: parent.top
-			text: qsTr("No updates available")
+				color: DynamicColors.tPalette.m3onSurfaceVariant
-			verticalAlignment: Text.AlignVCenter
+				font.pointSize: Appearance.font.size.extraLarge * 3
+				horizontalAlignment: Text.AlignHCenter
+				text: "check"
+			}
+
+			CustomText {
+				anchors.horizontalCenter: parent.horizontalCenter
+				anchors.top: noUpdatesIcon.bottom
+				color: DynamicColors.tPalette.m3onSurfaceVariant
+				horizontalAlignment: Text.AlignHCenter
+				text: qsTr("No updates available")
+				verticalAlignment: Text.AlignVCenter
+			}
 		}
 	}
 
-	CustomListView {
+	Loader {
-		id: updatesList
+		id: updatesListLoader
 
+		active: root.hasUpdates
 		anchors.centerIn: parent
-		contentHeight: childrenRect.height
-		contentWidth: 600
-		displayMarginBeginning: root.itemHeight
-		displayMarginEnd: root.itemHeight
-		implicitHeight: Math.min(contentHeight, (root.itemHeight + spacing) * 5 - spacing)
-		implicitWidth: contentWidth
-		spacing: Appearance.spacing.normal
-		visible: script.values.length > 0
 
-		delegate: CustomRect {
+		sourceComponent: CustomListView {
-			id: update
+			id: updatesList
 
-			required property var modelData
+			contentHeight: childrenRect.height
-			readonly property list<string> sections: modelData.update.split(" ")
+			contentWidth: 600
+			displayMarginBeginning: root.itemHeight
+			displayMarginEnd: root.itemHeight
+			implicitHeight: Math.min(contentHeight, (root.itemHeight + spacing) * 5 - spacing)
+			implicitWidth: contentWidth
+			spacing: Appearance.spacing.normal
 
-			// anchors.left: parent.left
+			delegate: CustomRect {
-			// anchors.right: parent.right
+				id: update
-			color: DynamicColors.tPalette.m3surfaceContainer
-			implicitHeight: root.itemHeight
-			implicitWidth: 600
-			radius: Appearance.rounding.small - Appearance.padding.small
 
-			RowLayout {
+				required property var modelData
-				anchors.fill: parent
+				readonly property list<string> sections: modelData.update.split(" ")
-				anchors.leftMargin: Appearance.padding.smaller
-				anchors.rightMargin: Appearance.padding.smaller
 
-				MaterialIcon {
+				// anchors.left: parent.left
-					font.pointSize: Appearance.font.size.large * 2
+				// anchors.right: parent.right
-					text: "package_2"
+				color: DynamicColors.tPalette.m3surfaceContainer
-				}
+				implicitHeight: root.itemHeight
-
+				implicitWidth: 600
-				ColumnLayout {
+				radius: Appearance.rounding.small - Appearance.padding.small
-					Layout.fillWidth: true
-
-					CustomText {
-						Layout.fillWidth: true
-						Layout.preferredHeight: 25
-						elide: Text.ElideRight
-						font.pointSize: Appearance.font.size.large
-						text: update.sections[0]
-					}
-
-					CustomText {
-						Layout.fillWidth: true
-						color: DynamicColors.palette.m3onSurfaceVariant
-						text: Updates.formatUpdateTime(update.modelData.timestamp)
-					}
-				}
 
 				RowLayout {
-					Layout.fillHeight: true
+					anchors.fill: parent
-					Layout.preferredWidth: 300
+					anchors.leftMargin: Appearance.padding.smaller
-
+					anchors.rightMargin: Appearance.padding.smaller
-					MarqueeText {
-						id: versionFrom
-
-						Layout.fillHeight: true
-						Layout.preferredWidth: 125
-						animate: true
-						color: DynamicColors.palette.m3tertiary
-						font.pointSize: Appearance.font.size.large
-						horizontalAlignment: Text.AlignHCenter
-						marqueeEnabled: true
-						pauseMs: 4000
-						text: update.sections[1]
-						width: 125
-					}
 
 					MaterialIcon {
-						Layout.fillHeight: true
+						font.pointSize: Appearance.font.size.large * 2
-						color: DynamicColors.palette.m3secondary
+						text: "package_2"
-						font.pointSize: Appearance.font.size.extraLarge
-						horizontalAlignment: Text.AlignHCenter
-						text: "arrow_right_alt"
-						verticalAlignment: Text.AlignVCenter
 					}
 
-					MarqueeText {
+					ColumnLayout {
-						id: versionTo
+						Layout.fillWidth: true
 
+						CustomText {
+							Layout.fillWidth: true
+							Layout.preferredHeight: 25
+							elide: Text.ElideRight
+							font.pointSize: Appearance.font.size.large
+							text: update.sections[0]
+						}
+
+						CustomText {
+							Layout.fillWidth: true
+							color: DynamicColors.palette.m3onSurfaceVariant
+							text: Updates.formatUpdateTime(update.modelData.timestamp)
+						}
+					}
+
+					RowLayout {
 						Layout.fillHeight: true
-						Layout.preferredWidth: 120
+						Layout.preferredWidth: 300
-						animate: true
+
-						color: DynamicColors.palette.m3primary
+						MarqueeText {
-						font.pointSize: Appearance.font.size.large
+							id: versionFrom
-						horizontalAlignment: Text.AlignHCenter
+
-						marqueeEnabled: true
+							Layout.fillHeight: true
-						pauseMs: 4000
+							Layout.preferredWidth: 125
-						text: update.sections[3]
+							animate: true
-						width: 125
+							color: DynamicColors.palette.m3tertiary
+							font.pointSize: Appearance.font.size.large
+							horizontalAlignment: Text.AlignHCenter
+							marqueeEnabled: true
+							pauseMs: 4000
+							text: update.sections[1]
+							width: 125
+						}
+
+						MaterialIcon {
+							Layout.fillHeight: true
+							color: DynamicColors.palette.m3secondary
+							font.pointSize: Appearance.font.size.extraLarge
+							horizontalAlignment: Text.AlignHCenter
+							text: "arrow_right_alt"
+							verticalAlignment: Text.AlignVCenter
+						}
+
+						MarqueeText {
+							id: versionTo
+
+							Layout.fillHeight: true
+							Layout.preferredWidth: 120
+							animate: true
+							color: DynamicColors.palette.m3primary
+							font.pointSize: Appearance.font.size.large
+							horizontalAlignment: Text.AlignHCenter
+							marqueeEnabled: true
+							pauseMs: 4000
+							text: update.sections[3]
+							width: 125
+						}
 					}
 				}
 			}
-		}
+			model: ScriptModel {
-		model: ScriptModel {
+				id: script
-			id: script
 
-			objectProp: "update"
+				objectProp: "update"
-			values: Object.entries(Updates.updates).sort((a, b) => b[1] - a[1]).map(([update, timestamp]) => ({
+				values: Object.entries(Updates.updates).sort((a, b) => b[1] - a[1]).map(([update, timestamp]) => ({
-						update,
+							update,
-						timestamp
+							timestamp
-					}))
+						}))
+			}
 		}
 	}
 }

Modules/Wrapper.qml

@@ -15,9 +15,8 @@ Item {
 	property real currentCenter
 	property alias currentName: popoutState.currentName
 	property string detachedMode
-	readonly property bool isDetached: detachedMode.length > 0
 	property alias hasCurrent: popoutState.hasCurrent
-	readonly property real nonAnimHeight: children.find(c => c.shouldBeActive)?.implicitHeight ?? content.implicitHeight
+	readonly property real nonAnimHeight: content.implicitHeight || 150
 	readonly property real nonAnimWidth: children.find(c => c.shouldBeActive)?.implicitWidth ?? content.implicitWidth
 	required property real offsetScale
 	property string queuedMode
@@ -28,29 +27,13 @@ Item {
 		detachedMode = "";
 	}
 
-	function detach(mode: string): void {
-		setAnims(true);
-		if (mode === "winfo") {
-			detachedMode = mode;
-		} else {
-			queuedMode = mode;
-			detachedMode = "any";
-		}
-		setAnims(false);
-		focus = true;
-	}
-
-	function setAnims(detach: bool): void {
-		const type = `expressive${detach ? "Slow" : "Default"}Spatial`;
-		animLength = Appearance.anim.durations[type];
-		animCurve = Appearance.anim.curves[type];
-	}
-
 	focus: hasCurrent
 	implicitHeight: nonAnimHeight
 	implicitWidth: nonAnimWidth
 
 	Behavior on implicitHeight {
+		enabled: root.offsetScale < 1
+
 		Anim {
 			duration: root.animLength
 			easing.bezierCurve: root.animCurve
@@ -72,41 +55,15 @@ Item {
 	Comp {
 		id: content
 
-		// anchors.horizontalCenter: parent.horizontalCenter
-		// anchors.top: parent.top
 		anchors.centerIn: parent
-		shouldBeActive: root.hasCurrent && !root.detachedMode
+		shouldBeActive: root.hasCurrent
 
 		sourceComponent: Content {
 			popouts: popoutState
 		}
-	}
 
-	// Comp {
+		onActiveChanged: console.log("active:", content.implicitHeight)
-	// 	id: winfo
+	}
-	//
-	// 	anchors.centerIn: parent
-	// 	shouldBeActive: root.detachedMode === "winfo"
-	//
-	// 	sourceComponent: WindowInfo {
-	// 		client: Hypr.activeToplevel
-	// 		screen: root.screen
-	// 	}
-	// }
-	//
-	// Comp {
-	// 	id: controlCenter
-	//
-	// 	anchors.centerIn: parent
-	// 	shouldBeActive: root.detachedMode === "any"
-	//
-	// 	sourceComponent: ControlCenter {
-	// 		active: root.queuedMode
-	// 		screen: root.screen
-	//
-	// 		onClose: root.close()
-	// 	}
-	// }
 
 	component Comp: Loader {
 		id: comp