workaround for all the terrible default QT scrolling behavior

- DankGridView, DankFlickable, DankListView\ - Touchpad behavior greatly improved by preserving momentum - Fixed janky nested scrollers in control center
2026-01-24 21:42:51 -05:00 · 2025-08-07 15:22:40 -04:00
parent 02ab8e2db5
commit 98d2ca24a8
25 changed files with 973 additions and 788 deletions
--- a/Modules/Settings/AppearanceTab.qml
+++ b/Modules/Settings/AppearanceTab.qml
@@ -5,35 +5,49 @@ import qs.Common
 import qs.Services
 import qs.Widgets

-ScrollView {
+Item {
    id: appearanceTab

-    // Qt 6.9+ scrolling: Enhanced mouse wheel and touchpad responsiveness
-    // Custom wheel handler for Qt 6.9+ responsive mouse wheel scrolling
-    WheelHandler {
-        acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
-        onWheel: (event) => {
-            let delta = event.pixelDelta.y !== 0 ? event.pixelDelta.y * 1.8 : event.angleDelta.y / 120 * 80
-            let flickable = appearanceTab.contentItem
-            let newY = flickable.contentY - delta
-            newY = Math.max(0, Math.min(flickable.contentHeight - flickable.height, newY))
-            flickable.contentY = newY
-            event.accepted = true
+    DankFlickable {
+        anchors.fill: parent
+        anchors.topMargin: Theme.spacingL
+        anchors.bottomMargin: Theme.spacingXL
+        clip: true
+        contentHeight: mainColumn.height
+        contentWidth: width
+        mouseWheelSpeed: 20
+        
+        Column {
+            id: mainColumn
+            width: parent.width
+            spacing: Theme.spacingXL
+            
+            Loader {
+                width: parent.width
+                sourceComponent: displayComponent
+            }
+            
+            Loader {
+                width: parent.width
+                sourceComponent: transparencyComponent
+            }
+            
+            Loader {
+                width: parent.width
+                sourceComponent: themeComponent
+            }
+            
+            Loader {
+                width: parent.width
+                sourceComponent: systemThemingComponent
+            }
        }
    }

-    contentWidth: availableWidth
-    contentHeight: column.implicitHeight + Theme.spacingXL
-    clip: true
-
-    Column {
-        id: column
-
-        width: parent.width
-        spacing: Theme.spacingXL
-        topPadding: Theme.spacingL
-        bottomPadding: Theme.spacingXL
-
+    // Display Settings Component
+    Component {
+        id: displayComponent
+        
        StyledRect {
            width: parent.width
            height: displaySection.implicitHeight + Theme.spacingL * 2
@@ -273,9 +287,13 @@ ScrollView {
                }

            }
-
        }
+    }

+    // Transparency Settings Component
+    Component {
+        id: transparencyComponent
+        
        StyledRect {
            width: parent.width
            height: transparencySection.implicitHeight + Theme.spacingL * 2
@@ -391,9 +409,13 @@ ScrollView {
                }

            }
-
        }
+    }

+    // Theme Color Component
+    Component {
+        id: themeComponent
+        
        StyledRect {
            width: parent.width
            height: themeSection.implicitHeight + Theme.spacingL * 2
@@ -759,9 +781,13 @@ ScrollView {
                }

            }
-
        }
+    }

+    // System App Theming Component
+    Component {
+        id: systemThemingComponent
+        
        StyledRect {
            width: parent.width
            height: systemThemingSection.implicitHeight + Theme.spacingL * 2
@@ -828,9 +854,7 @@ ScrollView {
                }

            }
-
        }
-
    }

    Process {
--- a/Modules/Settings/LauncherTab.qml
+++ b/Modules/Settings/LauncherTab.qml
@@ -4,34 +4,44 @@ import Quickshell.Widgets
 import qs.Common
 import qs.Widgets

-ScrollView {
+Item {
    id: launcherTab

-    // Qt 6.9+ scrolling: Enhanced mouse wheel and touchpad responsiveness
-    // Custom wheel handler for Qt 6.9+ responsive mouse wheel scrolling
-    WheelHandler {
-        acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
-        onWheel: (event) => {
-            let delta = event.pixelDelta.y !== 0 ? event.pixelDelta.y * 1.8 : event.angleDelta.y / 120 * 80
-            let flickable = launcherTab.contentItem
-            let newY = flickable.contentY - delta
-            newY = Math.max(0, Math.min(flickable.contentHeight - flickable.height, newY))
-            flickable.contentY = newY
-            event.accepted = true
+    DankFlickable {
+        anchors.fill: parent
+        anchors.topMargin: Theme.spacingL
+        anchors.bottomMargin: Theme.spacingXL
+        clip: true
+        contentHeight: mainColumn.height
+        contentWidth: width
+        mouseWheelSpeed: 20
+        
+        Column {
+            id: mainColumn
+            width: parent.width
+            spacing: Theme.spacingXL
+            
+            Loader {
+                width: parent.width
+                sourceComponent: appLauncherComponent
+            }
+            
+            Loader {
+                width: parent.width
+                sourceComponent: dockComponent
+            }
+            
+            Loader {
+                width: parent.width
+                sourceComponent: recentlyUsedComponent
+            }
        }
    }

-    contentHeight: column.implicitHeight + Theme.spacingXL
-    clip: true
-
-    Column {
-        id: column
-
-        width: parent.width
-        spacing: Theme.spacingXL
-        topPadding: Theme.spacingL
-        bottomPadding: Theme.spacingXL
-
+    // App Launcher Component
+    Component {
+        id: appLauncherComponent
+        
        StyledRect {
            width: parent.width
            height: appLauncherSection.implicitHeight + Theme.spacingL * 2
@@ -159,9 +169,13 @@ ScrollView {
                }

            }
-
        }
+    }

+    // Dock Component
+    Component {
+        id: dockComponent
+        
        StyledRect {
            width: parent.width
            height: dockSection.implicitHeight + Theme.spacingL * 2
@@ -262,7 +276,12 @@ ScrollView {

            }
        }
+    }

+    // Recently Used Apps Component
+    Component {
+        id: recentlyUsedComponent
+        
        StyledRect {
            width: parent.width
            height: recentlyUsedSection.implicitHeight + Theme.spacingL * 2
@@ -474,9 +493,6 @@ ScrollView {
                }

            }
-
        }
-
    }
-
 }
--- a/Modules/Settings/PersonalizationTab.qml
+++ b/Modules/Settings/PersonalizationTab.qml
@@ -7,35 +7,47 @@ import qs.Modals
 import qs.Services
 import qs.Widgets

-ScrollView {
+Item {
    id: personalizationTab

-    // Qt 6.9+ scrolling: Enhanced mouse wheel and touchpad responsiveness
-    // Custom wheel handler for Qt 6.9+ responsive mouse wheel scrolling
-    WheelHandler {
-        acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
-        onWheel: (event) => {
-            let delta = event.pixelDelta.y !== 0 ? event.pixelDelta.y * 1.8 : event.angleDelta.y / 120 * 80
-            let flickable = personalizationTab.contentItem
-            let newY = flickable.contentY - delta
-            newY = Math.max(0, Math.min(flickable.contentHeight - flickable.height, newY))
-            flickable.contentY = newY
-            event.accepted = true
-        }
-    }
-
    property alias profileBrowser: profileBrowserLoader.item
    property alias wallpaperBrowser: wallpaperBrowserLoader.item

-    contentHeight: column.implicitHeight
-    clip: true
-
-    Column {
-        id: column
-
-        width: parent.width
-        spacing: Theme.spacingXL
+    DankFlickable {
+        anchors.fill: parent
+        anchors.topMargin: Theme.spacingL
+        anchors.bottomMargin: Theme.spacingXL
+        clip: true
+        contentHeight: mainColumn.height
+        contentWidth: width
+        mouseWheelSpeed: 20
+        
+        Column {
+            id: mainColumn
+            width: parent.width
+            spacing: Theme.spacingXL
+            
+            Loader {
+                width: parent.width
+                sourceComponent: profileComponent
+            }
+            
+            Loader {
+                width: parent.width
+                sourceComponent: wallpaperComponent
+            }
+            
+            Loader {
+                width: parent.width
+                sourceComponent: dynamicThemeComponent
+            }
+        }
+    }

+    // Profile Image Component
+    Component {
+        id: profileComponent
+        
        StyledRect {
            width: parent.width
            height: profileSection.implicitHeight + Theme.spacingL * 2
@@ -294,9 +306,13 @@ ScrollView {
                }

            }
-
        }
+    }

+    // Wallpaper Component
+    Component {
+        id: wallpaperComponent
+        
        StyledRect {
            width: parent.width
            height: wallpaperSection.implicitHeight + Theme.spacingL * 2
@@ -491,9 +507,13 @@ ScrollView {
                }

            }
-
        }
+    }

+    // Dynamic Theme Component
+    Component {
+        id: dynamicThemeComponent
+        
        StyledRect {
            width: parent.width
            height: dynamicThemeSection.implicitHeight + Theme.spacingL * 2
@@ -568,9 +588,7 @@ ScrollView {
                }

            }
-
        }
-
    }

    LazyLoader {
--- a/Modules/Settings/TimeWeatherTab.qml
+++ b/Modules/Settings/TimeWeatherTab.qml
@@ -3,32 +3,39 @@ import QtQuick.Controls
 import qs.Common
 import qs.Widgets

-ScrollView {
+Item {
    id: timeWeatherTab

-    // Qt 6.9+ scrolling: Enhanced mouse wheel and touchpad responsiveness
-    // Custom wheel handler for Qt 6.9+ responsive mouse wheel scrolling
-    WheelHandler {
-        acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
-        onWheel: (event) => {
-            let delta = event.pixelDelta.y !== 0 ? event.pixelDelta.y * 1.8 : event.angleDelta.y / 120 * 80
-            let flickable = timeWeatherTab.contentItem
-            let newY = flickable.contentY - delta
-            newY = Math.max(0, Math.min(flickable.contentHeight - flickable.height, newY))
-            flickable.contentY = newY
-            event.accepted = true
+    DankFlickable {
+        anchors.fill: parent
+        anchors.topMargin: Theme.spacingL
+        anchors.bottomMargin: Theme.spacingXL
+        clip: true
+        contentHeight: mainColumn.height
+        contentWidth: width
+        mouseWheelSpeed: 20
+        
+        Column {
+            id: mainColumn
+            width: parent.width
+            spacing: Theme.spacingXL
+            
+            Loader {
+                width: parent.width
+                sourceComponent: timeComponent
+            }
+            
+            Loader {
+                width: parent.width
+                sourceComponent: weatherComponent
+            }
        }
    }

-    contentHeight: column.implicitHeight
-    clip: true
-
-    Column {
-        id: column
-
-        width: parent.width
-        spacing: Theme.spacingXL
-
+    // Time Format Component
+    Component {
+        id: timeComponent
+        
        StyledRect {
            width: parent.width
            height: timeSection.implicitHeight + Theme.spacingL * 2
@@ -76,9 +83,13 @@ ScrollView {
                }

            }
-
        }
+    }

+    // Weather Component
+    Component {
+        id: weatherComponent
+        
        StyledRect {
            width: parent.width
            height: weatherSection.implicitHeight + Theme.spacingL * 2
@@ -171,9 +182,6 @@ ScrollView {
                }

            }
-
        }
-
    }
-
 }
--- a/Modules/Settings/WidgetsTab.qml
+++ b/Modules/Settings/WidgetsTab.qml
@@ -3,23 +3,9 @@ import QtQuick.Controls
 import qs.Common
 import qs.Widgets

-ScrollView {
+Item {
    id: widgetsTab

-    // Qt 6.9+ scrolling: Enhanced mouse wheel and touchpad responsiveness
-    // Custom wheel handler for Qt 6.9+ responsive mouse wheel scrolling
-    WheelHandler {
-        acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad
-        onWheel: (event) => {
-            let delta = event.pixelDelta.y !== 0 ? event.pixelDelta.y * 1.8 : event.angleDelta.y / 120 * 80
-            let flickable = widgetsTab.contentItem
-            let newY = flickable.contentY - delta
-            newY = Math.max(0, Math.min(flickable.contentHeight - flickable.height, newY))
-            flickable.contentY = newY
-            event.accepted = true
-        }
-    }
-
    property var baseWidgetDefinitions: [{
        "id": "launcherButton",
        "text": "App Launcher",
@@ -305,8 +291,6 @@ ScrollView {
        return widgets;
    }

-    contentHeight: column.implicitHeight + Theme.spacingXL
-    clip: true
    Component.onCompleted: {
        if (!SettingsData.topBarLeftWidgets || SettingsData.topBarLeftWidgets.length === 0)
            SettingsData.setTopBarLeftWidgets(defaultLeftWidgets);
@@ -347,14 +331,46 @@ ScrollView {
        });
    }

-    Column {
-        id: column
-
-        width: parent.width
-        spacing: Theme.spacingXL
-        topPadding: Theme.spacingL
-        bottomPadding: Theme.spacingXL
+    DankFlickable {
+        anchors.fill: parent
+        anchors.topMargin: Theme.spacingL
+        anchors.bottomMargin: Theme.spacingXL
+        clip: true
+        contentHeight: mainColumn.height
+        contentWidth: width
+        mouseWheelSpeed: 20
+        
+        Column {
+            id: mainColumn
+            width: parent.width
+            spacing: Theme.spacingXL
+            
+            Loader {
+                width: parent.width
+                sourceComponent: headerComponent
+            }
+            
+            Loader {
+                width: parent.width
+                sourceComponent: messageComponent
+            }
+            
+            Loader {
+                width: parent.width
+                sourceComponent: sectionsComponent
+            }
+            
+            Loader {
+                width: parent.width
+                sourceComponent: workspaceComponent
+            }
+        }
+    }

+    // Header Component
+    Component {
+        id: headerComponent
+        
        Row {
            width: parent.width
            spacing: Theme.spacingM
@@ -406,7 +422,6 @@ ScrollView {
                        color: Theme.surfaceText
                        anchors.verticalCenter: parent.verticalCenter
                    }
-
                }

                MouseArea {
@@ -427,7 +442,6 @@ ScrollView {
                        duration: Theme.shortDuration
                        easing.type: Theme.standardEasing
                    }
-
                }

                Behavior on border.color {
@@ -435,13 +449,15 @@ ScrollView {
                        duration: Theme.shortDuration
                        easing.type: Theme.standardEasing
                    }
-
                }
-
            }
-
        }
+    }

+    // Message Component
+    Component {
+        id: messageComponent
+        
        Rectangle {
            width: parent.width
            height: messageText.contentHeight + Theme.spacingM * 2
@@ -449,9 +465,6 @@ ScrollView {
            color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
            border.color: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
            border.width: 1
-            visible: true
-            opacity: 1
-            z: 1

            StyledText {
                id: messageText
@@ -463,9 +476,13 @@ ScrollView {
                width: parent.width - Theme.spacingM * 2
                wrapMode: Text.WordWrap
            }
-
        }
+    }

+    // Sections Component
+    Component {
+        id: sectionsComponent
+        
        Column {
            width: parent.width
            spacing: Theme.spacingL
@@ -568,9 +585,13 @@ ScrollView {
                    }
                }
            }
-
        }
+    }

+    // Workspace Settings Component
+    Component {
+        id: workspaceComponent
+        
        StyledRect {
            width: parent.width
            height: workspaceSection.implicitHeight + Theme.spacingL * 2
@@ -604,7 +625,6 @@ ScrollView {
                        color: Theme.surfaceText
                        anchors.verticalCenter: parent.verticalCenter
                    }
-
                }

                DankToggle {
@@ -626,44 +646,10 @@ ScrollView {
                        return SettingsData.setShowWorkspacePadding(checked);
                    }
                }
-
            }
-
        }
-
    }

-    Rectangle {
-        width: tooltipText.contentWidth + Theme.spacingM * 2
-        height: tooltipText.contentHeight + Theme.spacingS * 2
-        radius: Theme.cornerRadius
-        color: Theme.surfaceContainer
-        border.color: Theme.outline
-        border.width: 1
-        visible: resetArea.containsMouse
-        opacity: resetArea.containsMouse ? 1 : 0
-        y: column.y + 48
-        x: parent.width - width - Theme.spacingM
-        z: 100
-
-        StyledText {
-            id: tooltipText
-
-            anchors.centerIn: parent
-            text: "Reset widget layout to defaults"
-            font.pixelSize: Theme.fontSizeSmall
-            color: Theme.surfaceText
-        }
-
-        Behavior on opacity {
-            NumberAnimation {
-                duration: Theme.shortDuration
-                easing.type: Theme.standardEasing
-            }
-
-        }
-
-    }

    DankWidgetSelectionPopup {
        id: widgetSelectionPopup