Modules/Dashboard/Content.qml

@@ -81,9 +81,9 @@ Item {
 		anchors.right: parent.right
 		anchors.top: tabs.bottom
 		anchors.topMargin: Tokens.spacing.small
-		clip: view.currentIndex !== 3 || view.contentX !== (view.currentItem?.x ?? 0)
+		clip: view.currentIndex !== 3 || (!view.currentItem?.settled ?? true)
 
-		Flickable {
+		Item {
 			id: view
 
 			readonly property int currentIndex: root.screenState.dashboardTab
@@ -93,56 +93,41 @@ Item {
 			}
 
 			anchors.fill: parent
-			contentHeight: row.implicitHeight
-			contentWidth: row.implicitWidth
-			contentX: currentItem?.x ?? 0
 			implicitHeight: currentItem?.implicitHeight ?? 0
 			implicitWidth: currentItem?.implicitWidth ?? 0
-			interactive: false
 
-			Behavior on contentX {
+			Repeater {
-				Anim {
+				id: repeater
-					type: Anim.DefaultEffects
+
+				delegate: Loader {
+					id: paneLoader
+
+					required property int index
+					required property var modelData
+
+					readonly property real targetX: index < view.currentIndex ? -view.implicitWidth : index > view.currentIndex ? view.implicitWidth : 0
+					readonly property bool settled: x === targetX
+
+					active: index === view.currentIndex || opacity > 0
+					opacity: index === view.currentIndex ? 1 : 0
+					sourceComponent: modelData.component
+					visible: opacity > 0
+					x: targetX
+					y: 0
+
+					Behavior on opacity {
+						Anim {
+							type: Anim.DefaultEffects
+						}
+					}
+					Behavior on x {
+						Anim {
+							type: Anim.DefaultEffects
+						}
+					}
 				}
-			}
+				model: ScriptModel {
-
+					values: root.dashboardTabs
-			onContentXChanged: {
-				if (!moving || !currentItem)
-					return;
-
-				const x = contentX - currentItem.x;
-				if (x > currentItem.implicitWidth / 2)
-					root.screenState.dashboardTab = Math.min(root.screenState.dashboardTab + 1, tabs.count - 1);
-				else if (x < -currentItem.implicitWidth / 2)
-					root.screenState.dashboardTab = Math.max(root.screenState.dashboardTab - 1, 0);
-			}
-
-			RowLayout {
-				id: row
-
-				Repeater {
-					id: repeater
-
-					delegate: Loader {
-						id: paneLoader
-
-						required property int index
-						required property var modelData
-
-						Layout.alignment: Qt.AlignTop
-						sourceComponent: modelData.component
-
-						Component.onCompleted: active = Qt.binding(() => {
-							if (index === view.currentIndex)
-								return true;
-							const vx = Math.floor(view.visibleArea.xPosition * view.contentWidth);
-							const vex = Math.floor(vx + view.visibleArea.widthRatio * view.contentWidth);
-							return (vx >= x && vx <= x + implicitWidth) || (vex >= x && vex <= x + implicitWidth);
-						})
-					}
-					model: ScriptModel {
-						values: root.dashboardTabs
-					}
 				}
 			}