From f6fa2f023088bb4fae932e11c6db7221e39e973e Mon Sep 17 00:00:00 2001 From: zach Date: Mon, 28 Sep 2026 15:48:13 +0200 Subject: [PATCH] fix: remove clippingrectangle in favor of passing radius to sub-items --- Modules/Dashboard/Content.qml | 151 +++++++++++---------- Modules/Dashboard/Dash.qml | 2 +- Modules/Dashboard/Media.qml | 8 +- Modules/Dashboard/Processes/SystemInfo.qml | 4 +- Modules/Dashboard/ProcessesTab.qml | 3 + Modules/Dashboard/WeatherTab.qml | 5 +- 6 files changed, 95 insertions(+), 78 deletions(-) diff --git a/Modules/Dashboard/Content.qml b/Modules/Dashboard/Content.qml index b4173e7..0ca16cc 100644 --- a/Modules/Dashboard/Content.qml +++ b/Modules/Dashboard/Content.qml @@ -11,8 +11,8 @@ import qs.Components Item { id: root - readonly property real nonAnimWidth: view.implicitWidth + clipWrapper.anchors.margins * 2 - readonly property real nonAnimHeight: tabs.implicitHeight + tabs.anchors.topMargin + view.implicitHeight + clipWrapper.anchors.margins + clipWrapper.anchors.topMargin + readonly property real nonAnimWidth: view.implicitWidth + viewWrapper.anchors.margins * 2 + readonly property real nonAnimHeight: tabs.implicitHeight + tabs.anchors.topMargin + view.implicitHeight + viewWrapper.anchors.margins + viewWrapper.anchors.topMargin required property ScreenState screenState @@ -74,115 +74,118 @@ Item { anchors.margins: Tokens.padding.small } - CustomClippingRect { - id: clipWrapper + Item { + id: viewWrapper + + property int radius: Tokens.rounding.extraLarge - anchors.margins + anchors.top: tabs.bottom anchors.left: parent.left anchors.right: parent.right anchors.bottom: parent.bottom anchors.topMargin: Tokens.spacing.small anchors.margins: Tokens.padding.small - radius: Tokens.rounding.extraLarge - anchors.margins + clip: true - Item { - id: viewWrapper + Flickable { + id: view + + readonly property int currentIndex: root.screenState.dashboardTab + readonly property Item currentItem: { + repeater.count; + return repeater.itemAt(currentIndex); + } anchors.fill: parent - Flickable { - id: view + implicitWidth: currentItem?.implicitWidth ?? 0 + implicitHeight: currentItem?.implicitHeight ?? 0 - readonly property int currentIndex: root.screenState.dashboardTab - readonly property Item currentItem: { - repeater.count; - return repeater.itemAt(currentIndex); - } + contentX: currentItem?.x ?? 0 + contentWidth: row.implicitWidth + contentHeight: row.implicitHeight - anchors.fill: parent + interactive: false - implicitWidth: currentItem?.implicitWidth ?? 0 - implicitHeight: currentItem?.implicitHeight ?? 0 + onContentXChanged: { + if (!moving || !currentItem) + return; - contentX: currentItem?.x ?? 0 - contentWidth: row.implicitWidth - contentHeight: row.implicitHeight + 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); + } - interactive: false + RowLayout { + id: row - onContentXChanged: { - if (!moving || !currentItem) - return; + Repeater { + id: repeater - 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); - } + model: ScriptModel { + values: root.dashboardTabs + } - RowLayout { - id: row + delegate: Loader { + id: paneLoader - Repeater { - id: repeater + required property int index + required property var modelData - model: ScriptModel { - values: root.dashboardTabs - } + Layout.alignment: Qt.AlignTop - delegate: Loader { - id: paneLoader + sourceComponent: modelData.component - 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); - }) - } + 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); + }) } } + } - Component { - id: dashComponent + Component { + id: dashComponent - Dash { - screenState: root.screenState - } + Dash { + screenState: root.screenState + radius: viewWrapper.radius } + } - Component { - id: weatherComponent + Component { + id: weatherComponent - WeatherTab {} + WeatherTab { + radius: viewWrapper.radius } + } - Component { - id: mediaComponent + Component { + id: mediaComponent - Media { - screenState: root.screenState - } + Media { + screenState: root.screenState + radius: viewWrapper.radius } + } - Component { - id: procsComponent + Component { + id: procsComponent - ProcessesTab {} + ProcessesTab { + radius: viewWrapper.radius } + } - Behavior on contentX { - Anim { - type: Anim.DefaultEffects - } + Behavior on contentX { + Anim { + type: Anim.DefaultEffects } } } diff --git a/Modules/Dashboard/Dash.qml b/Modules/Dashboard/Dash.qml index 31a78b6..4f61d07 100644 --- a/Modules/Dashboard/Dash.qml +++ b/Modules/Dashboard/Dash.qml @@ -12,7 +12,7 @@ GridLayout { id: root readonly property bool dashboardVisible: screenState.dashboard - property int radius: Tokens.rounding.medium + required property int radius required property ScreenState screenState columnSpacing: Tokens.spacing.small diff --git a/Modules/Dashboard/Media.qml b/Modules/Dashboard/Media.qml index 297e996..acf4399 100644 --- a/Modules/Dashboard/Media.qml +++ b/Modules/Dashboard/Media.qml @@ -11,12 +11,18 @@ Item { id: root property ScreenState screenState + required property int radius implicitWidth: 1000 implicitHeight: 320 - BackgroundShapes { + CustomClippingRect { anchors.fill: parent + radius: root.radius + + BackgroundShapes { + anchors.fill: parent + } } RowLayout { diff --git a/Modules/Dashboard/Processes/SystemInfo.qml b/Modules/Dashboard/Processes/SystemInfo.qml index 086e90b..afaedce 100644 --- a/Modules/Dashboard/Processes/SystemInfo.qml +++ b/Modules/Dashboard/Processes/SystemInfo.qml @@ -11,6 +11,8 @@ import qs.Services Item { id: root + required property int radius + implicitHeight: layout.implicitHeight ServiceRef { @@ -53,7 +55,7 @@ Item { property list values color: Colors.tPalette.m3surfaceContainer - radius: Tokens.rounding.largeIncreased + radius: root.radius Layout.fillWidth: true Layout.fillHeight: true implicitHeight: mainLayout.implicitHeight + mainLayout.anchors.margins * 2 diff --git a/Modules/Dashboard/ProcessesTab.qml b/Modules/Dashboard/ProcessesTab.qml index 35687fc..646928c 100644 --- a/Modules/Dashboard/ProcessesTab.qml +++ b/Modules/Dashboard/ProcessesTab.qml @@ -9,6 +9,8 @@ import qs.Services Item { id: root + required property int radius + implicitWidth: Tokens.sizes.dashboard.processesWidth implicitHeight: Tokens.sizes.dashboard.processesHeight @@ -47,5 +49,6 @@ Item { anchors.bottom: parent.bottom anchors.left: parent.left anchors.right: parent.right + radius: root.radius } } diff --git a/Modules/Dashboard/WeatherTab.qml b/Modules/Dashboard/WeatherTab.qml index 24538a2..7069abb 100644 --- a/Modules/Dashboard/WeatherTab.qml +++ b/Modules/Dashboard/WeatherTab.qml @@ -1,3 +1,5 @@ +pragma ComponentBehavior: Bound + import QtQuick import QtQuick.Layouts import ZShell.Config @@ -9,6 +11,7 @@ import qs.Helpers Item { id: root + required property int radius readonly property var today: Weather.forecast && Weather.forecast.length > 0 ? Weather.forecast[0] : null implicitWidth: layout.implicitWidth > 800 ? layout.implicitWidth : 840 @@ -136,7 +139,7 @@ Item { Layout.fillWidth: true implicitHeight: forecastItemColumn.implicitHeight + Tokens.padding.medium * 2 - radius: Tokens.rounding.large + radius: root.radius color: Colors.tPalette.m3surfaceContainer ColumnLayout {