Fix styling of scrollbar in marketplace

CURA-8561
This commit is contained in:
Jaime van Kessel 2021-11-17 11:22:30 +01:00
parent f01ce5b43c
commit 5ac0df8b0f
2 changed files with 165 additions and 149 deletions

View file

@ -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

View file

@ -5,29 +5,27 @@ 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
section.property: "package.sectionTitle"
section.delegate: Rectangle
{
width: packagesListview.width
width: packages.width
height: sectionHeaderText.height + UM.Theme.getSize("default_margin").height
color: UM.Theme.getColor("detail_background")
@ -46,6 +44,24 @@ ScrollView
}
}
ScrollBar.vertical: ScrollBar
{
// Vertical ScrollBar, styled similarly to the scrollBar in the settings panel
id: verticalScrollBar
visible: packages.contentHeight > packages.height
background: Item{}
contentItem: Rectangle
{
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; } }
}
}
delegate: PackageCard
{
packageData: model.package
@ -55,7 +71,7 @@ ScrollView
footer: Item
{
width: parent.width
height: model.hasFooter || packages.model.errorMessage != "" ? UM.Theme.getSize("card").height + packagesListview.spacing : 0
height: model.hasFooter || packages.model.errorMessage != "" ? UM.Theme.getSize("card").height + packages.spacing : 0
visible: model.hasFooter || packages.model.errorMessage != ""
Button
{
@ -181,5 +197,5 @@ ScrollView
}
}
}
}
}