mirror of
https://github.com/Ultimaker/Cura.git
synced 2025-07-25 15:44:04 -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
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -5,181 +5,197 @@ 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
|
||||||
|
|
||||||
|
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
|
width: parent.width
|
||||||
|
height: model.hasFooter || packages.model.errorMessage != "" ? UM.Theme.getSize("card").height + packages.spacing : 0
|
||||||
spacing: UM.Theme.getSize("default_margin").height
|
visible: model.hasFooter || packages.model.errorMessage != ""
|
||||||
|
Button
|
||||||
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
|
|
||||||
{
|
{
|
||||||
|
id: loadMoreButton
|
||||||
width: parent.width
|
width: parent.width
|
||||||
height: model.hasFooter || packages.model.errorMessage != "" ? UM.Theme.getSize("card").height + packagesListview.spacing : 0
|
height: UM.Theme.getSize("card").height
|
||||||
visible: model.hasFooter || packages.model.errorMessage != ""
|
anchors.bottom: parent.bottom
|
||||||
Button
|
|
||||||
|
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
|
anchors.fill: parent
|
||||||
width: parent.width
|
radius: UM.Theme.getSize("default_radius").width
|
||||||
height: UM.Theme.getSize("card").height
|
color: UM.Theme.getColor("main_background")
|
||||||
anchors.bottom: parent.bottom
|
}
|
||||||
|
|
||||||
enabled: packages.model.hasMore && !packages.model.isLoading || packages.model.errorMessage != ""
|
Row
|
||||||
onClicked: packages.model.updatePackages() //Load next page in plug-in list.
|
{
|
||||||
|
anchors.centerIn: parent
|
||||||
|
|
||||||
background: Rectangle
|
spacing: UM.Theme.getSize("thin_margin").width
|
||||||
{
|
|
||||||
anchors.fill: parent
|
|
||||||
radius: UM.Theme.getSize("default_radius").width
|
|
||||||
color: UM.Theme.getColor("main_background")
|
|
||||||
}
|
|
||||||
|
|
||||||
Row
|
states:
|
||||||
{
|
[
|
||||||
anchors.centerIn: parent
|
State
|
||||||
|
|
||||||
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
|
|
||||||
{
|
{
|
||||||
width: (errorIcon.visible || loadMoreIcon.visible) ? UM.Theme.getSize("small_button_icon").width : 0
|
name: "Error"
|
||||||
height: UM.Theme.getSize("small_button_icon").height
|
when: packages.model.errorMessage != ""
|
||||||
anchors.verticalCenter: loadMoreLabel.verticalCenter
|
PropertyChanges
|
||||||
|
|
||||||
UM.StatusIcon
|
|
||||||
{
|
{
|
||||||
id: errorIcon
|
target: errorIcon
|
||||||
anchors.fill: parent
|
visible: true
|
||||||
|
}
|
||||||
status: UM.StatusIcon.Status.ERROR
|
PropertyChanges
|
||||||
|
{
|
||||||
|
target: loadMoreIcon
|
||||||
visible: false
|
visible: false
|
||||||
}
|
}
|
||||||
UM.RecolorImage
|
PropertyChanges
|
||||||
{
|
{
|
||||||
id: loadMoreIcon
|
target: loadMoreLabel
|
||||||
anchors.fill: parent
|
text: catalog.i18nc("@button", "Failed to load packages:") + " " + packages.model.errorMessage + "\n" + catalog.i18nc("@button", "Retry?")
|
||||||
|
}
|
||||||
source: UM.Theme.getIcon("ArrowDown")
|
},
|
||||||
color: UM.Theme.getColor("secondary_button_text")
|
State
|
||||||
|
{
|
||||||
RotationAnimator
|
name: "Loading"
|
||||||
{
|
when: packages.model.isLoading
|
||||||
target: loadMoreIcon
|
PropertyChanges
|
||||||
from: 0
|
{
|
||||||
to: 360
|
target: loadMoreIcon
|
||||||
duration: 1000
|
source: UM.Theme.getIcon("ArrowDoubleCircleRight")
|
||||||
loops: Animation.Infinite
|
color: UM.Theme.getColor("action_button_disabled_text")
|
||||||
running: packages.model.isLoading
|
}
|
||||||
alwaysRunToEnd: true
|
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
|
id: errorIcon
|
||||||
text: catalog.i18nc("@button", "Load more")
|
anchors.fill: parent
|
||||||
font: UM.Theme.getFont("medium_bold")
|
|
||||||
color: UM.Theme.getColor("secondary_button_text")
|
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