feat(StatusScrollView): New scrollview component without twitches (#766)

ui/StatusQ/sandbox/demoapp/StatusAppCommunitiesPortalView.qml

@@ -10,7 +10,7 @@ import StatusQ.Components 0.1
 import "../demoapp/data" 1.0
 
 
-ScrollView {
+StatusScrollView {
     id: root
 
     QtObject {

ui/StatusQ/sandbox/demoapp/StatusAppCommunityView.qml

@@ -59,7 +59,7 @@ StatusAppThreePanelLayout {
             }
         }
 
-        ScrollView {
+        StatusScrollView {
             id: scrollView
 
             anchors.top: statusChatInfoToolBar.bottom

ui/StatusQ/sandbox/demoapp/StatusAppProfileSettingsView.qml

@@ -3,6 +3,7 @@ import QtQuick.Controls 2.14
 
 import StatusQ.Components 0.1
 import StatusQ.Layout 0.1
+import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 
 import "data" 1.0
@@ -21,7 +22,7 @@ StatusAppTwoPanelLayout {
             text: "Profile"
         }
 
-        ScrollView {
+        StatusScrollView {
             anchors.top: profileHeadline.bottom
             anchors.topMargin: 16
             anchors.bottom: parent.bottom

ui/StatusQ/sandbox/main.qml

@@ -132,20 +132,12 @@ StatusWindow {
                 storeSettings.fillPage = false
             }
 
-            leftPanel: Item {
+            leftPanel: StatusScrollView {
                 anchors.fill: parent
-                ScrollView {
-                    anchors.top: parent.top
-                    anchors.bottom: parent.bottom
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    contentHeight: navigation.height + 56
-                    contentWidth: navigation.width
-                    clip: true
+                anchors.topMargin: 48
+
                 Column {
                     id: navigation
-                        anchors.top: parent.top
-                        anchors.topMargin: 48
-                        anchors.horizontalCenter: parent.horizontalCenter
                     spacing: 0
 
                     StatusListSectionHeadline { text: "StatusQ.Core" }
@@ -294,11 +286,6 @@ StatusWindow {
                         selected: viewLoader.source.toString().includes(title)
                         onClicked: mainPageView.page(title);
                     }
-                        StatusNavigationListItem {
-                            title: "StatusItemSelector"
-                            selected: viewLoader.source.toString().includes(title)
-                            onClicked: mainPageView.page(title);
-                        }
                     StatusListSectionHeadline { text: "StatusQ.Popup" }
                     StatusNavigationListItem {
                         title: "StatusPopupMenu"
@@ -343,13 +330,12 @@ StatusWindow {
                     }
                 }
             }
-            }
 
             rightPanel: Item {
                 id: rightPanel
                 anchors.fill: parent
 
-                ScrollView {
+                StatusScrollView {
                     visible: !storeSettings.fillPage
                     anchors.fill: parent
                     anchors.topMargin: 64

ui/StatusQ/src/StatusQ/Controls/StatusScrollBar.qml

@@ -0,0 +1,24 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14 as T
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+T.ScrollBar {
+    id: root
+
+    // TODO: add this sizes to Theme
+    implicitWidth: 14
+    implicitHeight: 14
+
+    background: null
+
+    contentItem: Rectangle {
+        color: root.hovered || root.active ? Theme.palette.primaryColor3 : Theme.palette.baseColor2
+        opacity: enabled ? 1.0 : 0.0
+        radius: Math.min(width, height) / 2
+
+        Behavior on opacity { NumberAnimation { duration: 100 } }
+    }
+}
+

ui/StatusQ/src/StatusQ/Controls/qmldir

@@ -47,3 +47,4 @@ StatusFloatingButtonsSelector 0.1 StatusFloatingButtonsSelector.qml
 StatusActivityCenterButton 0.1 StatusActivityCenterButton.qml
 StatusDropdown 0.1 StatusDropdown.qml
 StatusIconTextButton 0.1 StatusIconTextButton.qml
+StatusScrollBar 0.1 StatusScrollBar.qml

ui/StatusQ/src/StatusQ/Core/StatusScrollView.qml

@@ -0,0 +1,48 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+import StatusQ.Controls 0.1
+
+/*!
+   \qmltype StatusScrollView
+   \inherits ScrollView
+   \inqmlmodule StatusQ.Core
+   \since StatusQ.Core 0.1
+   \brief ScrollView wrapper with tuned flickable.
+
+   The \c StatusScrollView can be used just like a plain ScrollView but with tuned scrolling parameters.
+
+   Example of how to use it:
+
+   \qml
+        StatusScrollView {
+            id: scrollView
+            anchors.fill: parent
+
+            ColumnView {
+                width: scrollView.avaiulableWidth
+            }
+        }
+   \endqml
+
+   For a list of components available see StatusQ.
+*/
+ScrollView {
+    id: root
+
+    clip: true // NOTE: in Qt6 clip true will be default
+    background: null
+
+    ScrollBar.horizontal.policy: ScrollBar.AsNeeded
+    ScrollBar.vertical.policy: ScrollBar.AsNeeded
+
+    Flickable {
+        id: flickable
+
+        contentWidth: contentItem.childrenRect.width
+        contentHeight: contentItem.childrenRect.height
+        boundsBehavior: Flickable.StopAtBounds
+        maximumFlickVelocity: 0
+        synchronousDrag: true
+    }
+}

ui/StatusQ/src/StatusQ/Core/qmldir

@@ -11,3 +11,5 @@ StatusModalHeaderSettings 0.1 StatusModalHeaderSettings.qml
 StatusTooltipSettings 0.1 StatusTooltipSettings.qml
 StatusAppNavBarFilterModel 0.1 StatusAppNavBarFilterModel.qml
 StatusAnimatedStack 0.1 StatusAnimatedStack.qml
+StatusScrollView 0.1 StatusScrollView.qml
+

ui/StatusQ/src/StatusQ/Popups/StatusColorDialog.qml

@@ -33,7 +33,7 @@ StatusModal {
     width: 680
     implicitHeight: 820
 
-    contentItem: ScrollView {
+    contentItem: StatusScrollView {
         id: scroll
         width: parent.width
         topPadding: 30