Fix styling of scrollbar in marketplace

CURA-8561

plugins/Marketplace/resources/qml/PackageCard.qml

@@ -12,7 +12,7 @@ Rectangle
 {
     property var packageData
 
-    width: parent ? parent.width - UM.Theme.getSize("default_margin").width : 0
+    width: parent ? parent.width - UM.Theme.getSize("default_margin").width - UM.Theme.getSize("narrow_margin").width: 0
     height: UM.Theme.getSize("card").height
     color: UM.Theme.getColor("main_background")
     radius: UM.Theme.getSize("default_radius").width

plugins/Marketplace/resources/qml/Packages.qml

@@ -5,181 +5,197 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15
 import UM 1.4 as UM
 
-ScrollView
+
+ListView
 {
     id: packages
-    clip: true
-    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
 
-    property alias model: packagesListview.model
     property string pageTitle
+    width: parent.width
+
+    clip: true
 
     Component.onCompleted: model.updatePackages()
     Component.onDestruction: model.abortUpdating()
 
-    ListView
-    {
-        id: packagesListview
-        width: parent.width
+    //ScrollBar.vertical.policy: ScrollBar.AlwaysOff
 
-        spacing: UM.Theme.getSize("default_margin").height
+    spacing: UM.Theme.getSize("default_margin").height
 
-        section.property: "package.sectionTitle"
-        section.delegate: Rectangle
-        {
-            width: packagesListview.width
-            height: sectionHeaderText.height + UM.Theme.getSize("default_margin").height
+    section.property: "package.sectionTitle"
+    section.delegate: Rectangle
+    {
+        width: packages.width
+        height: sectionHeaderText.height + UM.Theme.getSize("default_margin").height
 
-            color: UM.Theme.getColor("detail_background")
+        color: UM.Theme.getColor("detail_background")
 
-            required property string section
+        required property string section
 
-            Label
-            {
-                id: sectionHeaderText
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.left: parent.left
+        Label
+        {
+            id: sectionHeaderText
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.left
 
-                text: parent.section
-                font: UM.Theme.getFont("large")
-                color: UM.Theme.getColor("text")
-            }
+            text: parent.section
+            font: UM.Theme.getFont("large")
+            color: UM.Theme.getColor("text")
         }
+    }
+
+    ScrollBar.vertical: ScrollBar
+    {
+        // Vertical ScrollBar, styled similarly to the scrollBar in the settings panel
+        id: verticalScrollBar
+        visible: packages.contentHeight > packages.height
 
-        delegate: PackageCard
+        background: Item{}
+
+        contentItem: Rectangle
         {
-            packageData: model.package
+            id: scrollViewHandle
+            implicitWidth: UM.Theme.getSize("scrollbar").width
+            radius: Math.round(implicitWidth / 2)
+            color: verticalScrollBar.pressed ? UM.Theme.getColor("scrollbar_handle_down") : verticalScrollBar.hovered ? UM.Theme.getColor("scrollbar_handle_hover") : UM.Theme.getColor("scrollbar_handle")
+            Behavior on color { ColorAnimation { duration: 50; } }
         }
+    }
 
-        //Wrapper item to add spacing between content and footer.
-        footer: Item
+    delegate: PackageCard
+    {
+        packageData: model.package
+    }
+
+    //Wrapper item to add spacing between content and footer.
+    footer: Item
+    {
+        width: parent.width
+        height: model.hasFooter || packages.model.errorMessage != "" ? UM.Theme.getSize("card").height + packages.spacing : 0
+        visible: model.hasFooter || packages.model.errorMessage != ""
+        Button
         {
+            id: loadMoreButton
             width: parent.width
-            height: model.hasFooter || packages.model.errorMessage != "" ? UM.Theme.getSize("card").height + packagesListview.spacing : 0
-            visible: model.hasFooter || packages.model.errorMessage != ""
-            Button
-            {
-                id: loadMoreButton
-                width: parent.width
-                height: UM.Theme.getSize("card").height
-                anchors.bottom: parent.bottom
+            height: UM.Theme.getSize("card").height
+            anchors.bottom: parent.bottom
 
-                enabled: packages.model.hasMore && !packages.model.isLoading || packages.model.errorMessage != ""
-                onClicked: packages.model.updatePackages()  //Load next page in plug-in list.
+            enabled: packages.model.hasMore && !packages.model.isLoading || packages.model.errorMessage != ""
+            onClicked: packages.model.updatePackages()  //Load next page in plug-in list.
 
-                background: Rectangle
-                {
-                    anchors.fill: parent
-                    radius: UM.Theme.getSize("default_radius").width
-                    color: UM.Theme.getColor("main_background")
-                }
+            background: Rectangle
+            {
+                anchors.fill: parent
+                radius: UM.Theme.getSize("default_radius").width
+                color: UM.Theme.getColor("main_background")
+            }
 
-                Row
-                {
-                    anchors.centerIn: parent
+            Row
+            {
+                anchors.centerIn: parent
 
-                    spacing: UM.Theme.getSize("thin_margin").width
+                spacing: UM.Theme.getSize("thin_margin").width
 
-                    states:
-                    [
-                        State
+                states:
+                [
+                    State
+                    {
+                        name: "Error"
+                        when: packages.model.errorMessage != ""
+                        PropertyChanges
                         {
-                            name: "Error"
-                            when: packages.model.errorMessage != ""
-                            PropertyChanges
-                            {
-                                target: errorIcon
-                                visible: true
-                            }
-                            PropertyChanges
-                            {
-                                target: loadMoreIcon
-                                visible: false
-                            }
-                            PropertyChanges
-                            {
-                                target: loadMoreLabel
-                                text: catalog.i18nc("@button", "Failed to load packages:") + " " + packages.model.errorMessage + "\n" + catalog.i18nc("@button", "Retry?")
-                            }
-                        },
-                        State
+                            target: errorIcon
+                            visible: true
+                        }
+                        PropertyChanges
                         {
-                            name: "Loading"
-                            when: packages.model.isLoading
-                            PropertyChanges
-                            {
-                                target: loadMoreIcon
-                                source: UM.Theme.getIcon("ArrowDoubleCircleRight")
-                                color: UM.Theme.getColor("action_button_disabled_text")
-                            }
-                            PropertyChanges
-                            {
-                                target: loadMoreLabel
-                                text: catalog.i18nc("@button", "Loading")
-                                color: UM.Theme.getColor("action_button_disabled_text")
-                            }
-                        },
-                        State
+                            target: loadMoreIcon
+                            visible: false
+                        }
+                        PropertyChanges
                         {
-                            name: "LastPage"
-                            when: !packages.model.hasMore
-                            PropertyChanges
-                            {
-                                target: loadMoreIcon
-                                visible: false
-                            }
-                            PropertyChanges
-                            {
-                                target: loadMoreLabel
-                                text: catalog.i18nc("@button", "No more results to load")
-                                color: UM.Theme.getColor("action_button_disabled_text")
-                            }
+                            target: loadMoreLabel
+                            text: catalog.i18nc("@button", "Failed to load packages:") + " " + packages.model.errorMessage + "\n" + catalog.i18nc("@button", "Retry?")
                         }
-                    ]
-
-                    Item
+                    },
+                    State
                     {
-                        width: (errorIcon.visible || loadMoreIcon.visible) ? UM.Theme.getSize("small_button_icon").width : 0
-                        height: UM.Theme.getSize("small_button_icon").height
-                        anchors.verticalCenter: loadMoreLabel.verticalCenter
-
-                        UM.StatusIcon
+                        name: "Loading"
+                        when: packages.model.isLoading
+                        PropertyChanges
                         {
-                            id: errorIcon
-                            anchors.fill: parent
-
-                            status: UM.StatusIcon.Status.ERROR
+                            target: loadMoreIcon
+                            source: UM.Theme.getIcon("ArrowDoubleCircleRight")
+                            color: UM.Theme.getColor("action_button_disabled_text")
+                        }
+                        PropertyChanges
+                        {
+                            target: loadMoreLabel
+                            text: catalog.i18nc("@button", "Loading")
+                            color: UM.Theme.getColor("action_button_disabled_text")
+                        }
+                    },
+                    State
+                    {
+                        name: "LastPage"
+                        when: !packages.model.hasMore
+                        PropertyChanges
+                        {
+                            target: loadMoreIcon
                             visible: false
                         }
-                        UM.RecolorImage
+                        PropertyChanges
                         {
-                            id: loadMoreIcon
-                            anchors.fill: parent
-
-                            source: UM.Theme.getIcon("ArrowDown")
-                            color: UM.Theme.getColor("secondary_button_text")
-
-                            RotationAnimator
-                            {
-                                target: loadMoreIcon
-                                from: 0
-                                to: 360
-                                duration: 1000
-                                loops: Animation.Infinite
-                                running: packages.model.isLoading
-                                alwaysRunToEnd: true
-                            }
+                            target: loadMoreLabel
+                            text: catalog.i18nc("@button", "No more results to load")
+                            color: UM.Theme.getColor("action_button_disabled_text")
                         }
                     }
-                    Label
+                ]
+
+                Item
+                {
+                    width: (errorIcon.visible || loadMoreIcon.visible) ? UM.Theme.getSize("small_button_icon").width : 0
+                    height: UM.Theme.getSize("small_button_icon").height
+                    anchors.verticalCenter: loadMoreLabel.verticalCenter
+
+                    UM.StatusIcon
                     {
-                        id: loadMoreLabel
-                        text: catalog.i18nc("@button", "Load more")
-                        font: UM.Theme.getFont("medium_bold")
+                        id: errorIcon
+                        anchors.fill: parent
+
+                        status: UM.StatusIcon.Status.ERROR
+                        visible: false
+                    }
+                    UM.RecolorImage
+                    {
+                        id: loadMoreIcon
+                        anchors.fill: parent
+
+                        source: UM.Theme.getIcon("ArrowDown")
                         color: UM.Theme.getColor("secondary_button_text")
+
+                        RotationAnimator
+                        {
+                            target: loadMoreIcon
+                            from: 0
+                            to: 360
+                            duration: 1000
+                            loops: Animation.Infinite
+                            running: packages.model.isLoading
+                            alwaysRunToEnd: true
+                        }
                     }
                 }
+                Label
+                {
+                    id: loadMoreLabel
+                    text: catalog.i18nc("@button", "Load more")
+                    font: UM.Theme.getFont("medium_bold")
+                    color: UM.Theme.getColor("secondary_button_text")
+                }
             }
         }
     }
 }
+