Add custom ListView widget

WhiteMagic · WhiteMagic · commit 888cad53eef5 · 2025-10-11T11:50:56.000+02:00
Disables annoying mobile device behaviors and always clips the content.
Also allows the specify whether the vertical scrollbar is always visible
or only as needed.
diff --git a/action_plugins/macro/MacroAction.qml b/action_plugins/macro/MacroAction.qml
@@ -151,15 +151,10 @@ Item {
         ListView {
             Layout.fillWidth: true
             implicitHeight: contentHeight
-
-            // Make it behave like a sensible scrolling container
-            ScrollBar.vertical: ScrollBar {}
-            flickableDirection: Flickable.VerticalFlick
-            boundsBehavior: Flickable.StopAtBounds
+            spacing: 5
 
             model: _root.action.actions
             delegate: _delegateChooser
-            spacing: 5
         }
     }
 
diff --git a/gremlin/ui/device.py b/gremlin/ui/device.py
@@ -1400,7 +1400,6 @@ def _update_calibration(self, index: int) -> None:
         )
 
     def _set_guid(self, guid: str) -> None:
-        print(guid)
         if self._device is not None and guid == str(self._device.device_guid):
             return
 
diff --git a/qml/BetterComboBox.qml b/qml/BetterComboBox.qml
@@ -55,16 +55,13 @@ ComboBox {
         Universal.theme: control.Universal.theme
         Universal.accent: control.Universal.accent
 
-        contentItem: ListView {
-            clip: true
+        contentItem: JGListView {
             implicitHeight: contentHeight
             model: control.delegateModel
-            currentIndex: control.highlightedIndex
             highlightMoveDuration: 0
+            scrollbarAlwaysVisible: true
 
-            ScrollBar.vertical: ScrollBar {
-                policy: ScrollBar.AlwaysOn
-            }
+            currentIndex: control.highlightedIndex
 
             MouseArea {
                 anchors.fill: parent
diff --git a/qml/ConfigSection.qml b/qml/ConfigSection.qml
@@ -24,19 +24,13 @@ import Gremlin.Config
 import "helpers.js" as Helpers
 
 
-ListView {
+JGListView {
     property ConfigGroupModel groupModel
 
-    spacing: 10
     rightMargin: 30
     bottomMargin: 10
-
-    // Make it behave like a sensible scrolling container
-    ScrollBar.vertical: ScrollBar {
-        policy: ScrollBar.AlwaysOn
-    }
-    flickableDirection: Flickable.VerticalFlick
-    boundsBehavior: Flickable.StopAtBounds
+    spacing: 10
+    scrollbarAlwaysVisible: true
 
     model: groupModel
     delegate: ConfigGroup {
diff --git a/qml/DeviceInputList.qml b/qml/DeviceInputList.qml
@@ -48,9 +48,10 @@ Item {
     }
 
     // List of all the inputs available on the device
-    ListView {
+    JGListView {
         id: _inputList
         anchors.fill: parent
+        scrollbarAlwaysVisible: true
 
         property int minimumWidth: 200
 
@@ -63,13 +64,6 @@ Item {
                 currentIndex
             )
         }
-
-        // Make it behave like a sensible scrolling container
-        ScrollBar.vertical: ScrollBar {
-            policy: ScrollBar.AlwaysOn
-        }
-        flickableDirection: Flickable.VerticalFlick
-        boundsBehavior: Flickable.StopAtBounds
     }
 
     // Renders the information about a single input, including name and
diff --git a/qml/DeviceTabBar.qml b/qml/DeviceTabBar.qml
@@ -29,54 +29,54 @@ T.TabBar {
                              contentHeight + topPadding + bottomPadding)
 
     contentItem: ListView {
-            model: control.contentModel
-            currentIndex: control.currentIndex
+        model: control.contentModel
+        currentIndex: control.currentIndex
 
-            spacing: control.spacing
-            orientation: ListView.Horizontal
-            boundsBehavior: Flickable.StopAtBounds
-            flickableDirection: Flickable.AutoFlickIfNeeded
-            snapMode: ListView.SnapToItem
+        spacing: control.spacing
+        orientation: ListView.Horizontal
+        boundsBehavior: Flickable.StopAtBounds
+        flickableDirection: Flickable.AutoFlickIfNeeded
+        snapMode: ListView.SnapToItem
 
-            ScrollBar.horizontal: ScrollBar {
-                policy: ScrollBar.AlwaysOn
-            }
-
-            highlightMoveDuration: 100
-            highlightRangeMode: ListView.ApplyRange
-            preferredHighlightBegin: 48
-            preferredHighlightEnd: width - 48
+        ScrollBar.horizontal: ScrollBar {
+            policy: ScrollBar.AlwaysOn
+        }
 
+        highlightMoveDuration: 100
+        highlightRangeMode: ListView.ApplyRange
+        preferredHighlightBegin: 48
+        preferredHighlightEnd: width - 48
 
-            MouseArea {
-                anchors.fill: parent
 
-                // Scroll the view without the need for a modifier
-                onWheel: function(evt) {
-                    if(parent.contentWidth < parent.width) {
-                        return
-                    }
+        MouseArea {
+            anchors.fill: parent
 
-                    if (evt.angleDelta.y > 0) {
-                        parent.contentX = Math.max(0, parent.contentX - 10)
-                    } else {
-                        parent.contentX = Math.min(
-                            parent.contentWidth - parent.width,
-                            parent.contentX + 10
-                        )
-                    }
+            // Scroll the view without the need for a modifier.
+            onWheel: function(evt) {
+                if(parent.contentWidth < parent.width) {
+                    return
                 }
 
-                // Ignore all other events and thus pass then  to the
-                // underlying ListView
-                onClicked: (mouse) => mouse.accepted = false
-                onPressed: (mouse) => mouse.accepted = false
-                onReleased: (mouse) => mouse.accepted = false
-                onDoubleClicked: (mouse) => mouse.accepted = false
-                onPositionChanged: (mouse) => mouse.accepted = false
-                onPressAndHold: (mouse) => mouse.accepted = false
+                if (evt.angleDelta.y > 0) {
+                    parent.contentX = Math.max(0, parent.contentX - 10)
+                } else {
+                    parent.contentX = Math.min(
+                        parent.contentWidth - parent.width,
+                        parent.contentX + 10
+                    )
+                }
             }
+
+            // Ignore all other events and thus pass then  to the
+            // underlying ListView.
+            onClicked: (mouse) => mouse.accepted = false
+            onPressed: (mouse) => mouse.accepted = false
+            onReleased: (mouse) => mouse.accepted = false
+            onDoubleClicked: (mouse) => mouse.accepted = false
+            onPositionChanged: (mouse) => mouse.accepted = false
+            onPressAndHold: (mouse) => mouse.accepted = false
         }
+    }
 
     background: Rectangle {
         implicitWidth: 200
diff --git a/qml/DialogCalibration.qml b/qml/DialogCalibration.qml
@@ -61,28 +61,21 @@ Window {
             }
         }
 
-        ListView {
+        JGListView {
             id: _axisView
 
+            scrollbarAlwaysVisible: true
+            spacing: 10
             Layout.fillWidth: true
             Layout.fillHeight: true
-            spacing: 10
 
             model: AxisCalibration {
                 guid: _deviceSelection.currentValue
             }
-            clip: true
 
             delegate: CalibrationItem {
                 width: ListView.view.width
             }
-
-            // Make it behave like a sensible scrolling container
-            ScrollBar.vertical: ScrollBar {
-                policy: ScrollBar.AlwaysOn
-            }
-            flickableDirection: Flickable.VerticalFlick
-            boundsBehavior: Flickable.StopAtBounds
         }
     }
 
diff --git a/qml/DialogManageModes.qml b/qml/DialogManageModes.qml
@@ -57,16 +57,14 @@ Window {
 
         anchors.fill: parent
 
-        ListView  {
+        JGListView  {
             Layout.fillWidth: true
             Layout.fillHeight: true
 
-            flickableDirection: Flickable.VerticalFlick
-            boundsBehavior: Flickable.StopAtBounds
+            scrollbarAlwaysVisible: true
             spacing: 10
 
             model: mode.modeList
-
             delegate: _delegate
         }
 
diff --git a/qml/DialogOptions.qml b/qml/DialogOptions.qml
@@ -43,7 +43,7 @@ Window {
         anchors.fill: parent
 
         // Shows the list of all option sections
-        ListView {
+        JGListView {
             id: _sectionSelector
 
             Layout.preferredWidth: 200
diff --git a/qml/InputConfiguration.qml b/qml/InputConfiguration.qml
@@ -51,18 +51,12 @@ Item {
         anchors.fill: parent
 
         // Show all actions associated with this input
-        ListView {
+        JGListView {
             id: _listView
 
             Layout.fillHeight: true
             Layout.fillWidth: true
-
-            // Make it behave like a sensible scrolling container
-            ScrollBar.vertical: ScrollBar {
-                policy: ScrollBar.AlwaysOn
-            }
-            flickableDirection: Flickable.VerticalFlick
-            boundsBehavior: Flickable.StopAtBounds
+            scrollbarAlwaysVisible: true
 
             // Content to visualize
             model: _root.inputItemModel
diff --git a/qml/JGListView.qml b/qml/JGListView.qml
@@ -0,0 +1,36 @@
+// -*- coding: utf-8; -*-
+//
+// Copyright (C) 2025 Lionel Ott
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+
+import QtQuick
+import QtQuick.Controls
+
+
+ListView {
+    property bool scrollbarAlwaysVisible: false
+
+    // Prevent content being shown outside the widget's bounds.
+    clip: true
+
+    // Scrollbar visibility behavior as configured.
+    ScrollBar.vertical: ScrollBar {
+        policy: scrollbarAlwaysVisible ? ScrollBar.AlwaysOn : ScrollBar.AsNeeded
+    }
+    // Disable mobile device scrolling behaviors.
+    flickableDirection: Flickable.VerticalFlick
+    boundsBehavior: Flickable.StopAtBounds
+}
diff --git a/qml/LogicalDevice.qml b/qml/LogicalDevice.qml
@@ -55,12 +55,13 @@ Item {
 
         anchors.fill: parent
 
-        ListView {
+        JGListView {
             id: _inputList
 
             Layout.minimumWidth: 200
             Layout.fillHeight: true
             Layout.fillWidth: true
+            scrollbarAlwaysVisible: true
 
             model: device
             delegate: _entryDelegate
@@ -69,13 +70,6 @@ Item {
                 inputIndex = currentIndex
                 inputIdentifier = device.inputIdentifier(currentIndex)
             }
-
-            // Make it behave like a sensible scrolling container
-            ScrollBar.vertical: ScrollBar {
-                policy: ScrollBar.AlwaysOn
-            }
-            flickableDirection: Flickable.VerticalFlick
-            boundsBehavior: Flickable.StopAtBounds
         }
 
         // Controls to add new logical device input instances
diff --git a/qml/ScriptConfiguration.qml b/qml/ScriptConfiguration.qml
@@ -25,7 +25,7 @@ import Qt.labs.qmlmodels
 import Gremlin.Plugin
 
 
-ListView {
+JGListView {
     model: []
     delegate: _variableRenderer
     spacing: 10
diff --git a/qml/ScriptManager.qml b/qml/ScriptManager.qml
@@ -73,23 +73,17 @@ Item {
             SplitView.fillHeight: true
             SplitView.fillWidth: true
 
-            ListView {
+            JGListView {
                 id: _view
-                model: scriptListModel
 
                 Layout.fillHeight: true
                 Layout.fillWidth: true
                 Layout.rightMargin: 5
 
                 spacing: 10
+                scrollbarAlwaysVisible: true
 
-                // Make it behave like a sensible scrolling container
-                ScrollBar.vertical: ScrollBar {
-                    policy: ScrollBar.AlwaysOn
-                }
-                flickableDirection: Flickable.VerticalFlick
-                boundsBehavior: Flickable.StopAtBounds
-
+                model: scriptListModel
                 delegate: ScriptUI {
                     Layout.margins: 10
                     width: _view.width

Original file line number	Diff line number	Diff line change
`@@ -1400,7 +1400,6 @@ def _update_calibration(self, index: int) -> None:`
`1400`	`1400`	`)`
`1401`	`1401`
`1402`	`1402`	`def _set_guid(self, guid: str) -> None:`
`1403`		`- print(guid)`
`1404`	`1403`	`if self._device is not None and guid == str(self._device.device_guid):`
`1405`	`1404`	`return`
`1406`	`1405`
Original file line number	Diff line number	Diff line change
`@@ -48,9 +48,10 @@ Item {`
`48`	`48`	`}`
`49`	`49`
`50`	`50`	`// List of all the inputs available on the device`
`51`		`- ListView {`
	`51`	`+ JGListView {`
`52`	`52`	`id: _inputList`
`53`	`53`	`anchors.fill: parent`
	`54`	`+ scrollbarAlwaysVisible: true`
`54`	`55`
`55`	`56`	`property int minimumWidth: 200`
`56`	`57`
`@@ -63,13 +64,6 @@ Item {`
`63`	`64`	`currentIndex`
`64`	`65`	`)`
`65`	`66`	`}`
`66`		`-`
`67`		`- // Make it behave like a sensible scrolling container`
`68`		`- ScrollBar.vertical: ScrollBar {`
`69`		`- policy: ScrollBar.AlwaysOn`
`70`		`- }`
`71`		`- flickableDirection: Flickable.VerticalFlick`
`72`		`- boundsBehavior: Flickable.StopAtBounds`
`73`	`67`	`}`
`74`	`68`
`75`	`69`	`// Renders the information about a single input, including name and`
Original file line number	Diff line number	Diff line change
`@@ -61,28 +61,21 @@ Window {`
`61`	`61`	`}`
`62`	`62`	`}`
`63`	`63`
`64`		`- ListView {`
	`64`	`+ JGListView {`
`65`	`65`	`id: _axisView`
`66`	`66`
	`67`	`+ scrollbarAlwaysVisible: true`
	`68`	`+ spacing: 10`
`67`	`69`	`Layout.fillWidth: true`
`68`	`70`	`Layout.fillHeight: true`
`69`		`- spacing: 10`
`70`	`71`
`71`	`72`	`model: AxisCalibration {`
`72`	`73`	`guid: _deviceSelection.currentValue`
`73`	`74`	`}`
`74`		`- clip: true`
`75`	`75`
`76`	`76`	`delegate: CalibrationItem {`
`77`	`77`	`width: ListView.view.width`
`78`	`78`	`}`
`79`		`-`
`80`		`- // Make it behave like a sensible scrolling container`
`81`		`- ScrollBar.vertical: ScrollBar {`
`82`		`- policy: ScrollBar.AlwaysOn`
`83`		`- }`
`84`		`- flickableDirection: Flickable.VerticalFlick`
`85`		`- boundsBehavior: Flickable.StopAtBounds`
`86`	`79`	`}`
`87`	`80`	`}`
`88`	`81`