mirror of
https://github.com/Ultimaker/Cura.git
synced 2025-07-24 23:23:57 -06:00
Fix styling of scrollbar in marketplace
CURA-8561
This commit is contained in:
Jaime van Kessel
parent
f01ce5b43c
commit
5ac0df8b0f
2 changed files with 165 additions and 149 deletions
|
|
@ -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
|
||||
//ScrollBar.vertical.policy: ScrollBar.AlwaysOff
|
||||
|
||||
spacing: 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")
|
||||
|
||||
required property string section
|
||||
|
||||
Label
|
||||
{
|
||||
id: sectionHeaderText
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: parent.left
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
//Wrapper item to add spacing between content and footer.
|
||||
footer: Item
|
||||
{
|
||||
id: packagesListview
|
||||
width: parent.width
|
||||
|
||||
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
|
||||
|
||||
color: UM.Theme.getColor("detail_background")
|
||||
|
||||
required property string section
|
||||
|
||||
Label
|
||||
{
|
||||
id: sectionHeaderText
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: parent.left
|
||||
|
||||
text: parent.section
|
||||
font: UM.Theme.getFont("large")
|
||||
color: UM.Theme.getColor("text")
|
||||
}
|
||||
}
|
||||
|
||||
delegate: PackageCard
|
||||
{
|
||||
packageData: model.package
|
||||
}
|
||||
|
||||
//Wrapper item to add spacing between content and footer.
|
||||
footer: Item
|
||||
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
|
||||
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.
|
||||
|
||||
background: Rectangle
|
||||
{
|
||||
id: loadMoreButton
|
||||
width: parent.width
|
||||
height: UM.Theme.getSize("card").height
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.fill: parent
|
||||
radius: UM.Theme.getSize("default_radius").width
|
||||
color: UM.Theme.getColor("main_background")
|
||||
}
|
||||
|
||||
enabled: packages.model.hasMore && !packages.model.isLoading || packages.model.errorMessage != ""
|
||||
onClicked: packages.model.updatePackages() //Load next page in plug-in list.
|
||||
Row
|
||||
{
|
||||
anchors.centerIn: parent
|
||||
|
||||
background: Rectangle
|
||||
{
|
||||
anchors.fill: parent
|
||||
radius: UM.Theme.getSize("default_radius").width
|
||||
color: UM.Theme.getColor("main_background")
|
||||
}
|
||||
spacing: UM.Theme.getSize("thin_margin").width
|
||||
|
||||
Row
|
||||
{
|
||||
anchors.centerIn: parent
|
||||
|
||||
spacing: UM.Theme.getSize("thin_margin").width
|
||||
|
||||
states:
|
||||
[
|
||||
State
|
||||
{
|
||||
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
|
||||
{
|
||||
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
|
||||
{
|
||||
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")
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
Item
|
||||
states:
|
||||
[
|
||||
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: "Error"
|
||||
when: packages.model.errorMessage != ""
|
||||
PropertyChanges
|
||||
{
|
||||
id: errorIcon
|
||||
anchors.fill: parent
|
||||
|
||||
status: UM.StatusIcon.Status.ERROR
|
||||
target: errorIcon
|
||||
visible: true
|
||||
}
|
||||
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", "Failed to load packages:") + " " + packages.model.errorMessage + "\n" + catalog.i18nc("@button", "Retry?")
|
||||
}
|
||||
},
|
||||
State
|
||||
{
|
||||
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
|
||||
{
|
||||
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")
|
||||
}
|
||||
}
|
||||
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")
|
||||
color: UM.Theme.getColor("secondary_button_text")
|
||||
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")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue