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 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 height: UM.Theme.getSize("card").height
color: UM.Theme.getColor("main_background") color: UM.Theme.getColor("main_background")
radius: UM.Theme.getSize("default_radius").width radius: UM.Theme.getSize("default_radius").width

View file

@ -5,29 +5,27 @@ import QtQuick 2.15
import QtQuick.Controls 2.15 import QtQuick.Controls 2.15
import UM 1.4 as UM import UM 1.4 as UM
ScrollView
ListView
{ {
id: packages id: packages
clip: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
property alias model: packagesListview.model
property string pageTitle property string pageTitle
width: parent.width
clip: true
Component.onCompleted: model.updatePackages() Component.onCompleted: model.updatePackages()
Component.onDestruction: model.abortUpdating() Component.onDestruction: model.abortUpdating()
ListView //ScrollBar.vertical.policy: ScrollBar.AlwaysOff
{
id: packagesListview
width: parent.width
spacing: UM.Theme.getSize("default_margin").height spacing: UM.Theme.getSize("default_margin").height
section.property: "package.sectionTitle" section.property: "package.sectionTitle"
section.delegate: Rectangle section.delegate: Rectangle
{ {
width: packagesListview.width width: packages.width
height: sectionHeaderText.height + UM.Theme.getSize("default_margin").height height: sectionHeaderText.height + UM.Theme.getSize("default_margin").height
color: UM.Theme.getColor("detail_background") 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 delegate: PackageCard
{ {
packageData: model.package packageData: model.package
@ -55,7 +71,7 @@ ScrollView
footer: Item footer: Item
{ {
width: parent.width 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 != "" visible: model.hasFooter || packages.model.errorMessage != ""
Button Button
{ {
@ -181,5 +197,5 @@ ScrollView
} }
} }
} }
}
} }