WIP: Make reusable widget CuraProgressBar

resources/qml/ActionPanel/SliceProcessWidget.qml

@@ -9,6 +9,8 @@ import QtQuick.Controls 1.4 as Controls1
 import UM 1.1 as UM
 import Cura 1.0 as Cura
 
+import "../Widgets"
+
 
 // This element contains all the elements the user needs to create a printjob from the
 // model(s) that is(are) on the buildplate. Mainly the button to start/stop the slicing
@@ -64,7 +66,7 @@ Column
     }
 
     // Progress bar, only visible when the backend is in the process of slice the printjob
-    ProgressBar
+    CuraProgressBar
     {
         id: progressBar
         width: parent.width
@@ -72,25 +74,6 @@ Column
         value: progress
         indeterminate: widget.backendState == UM.Backend.NotStarted
         visible: (widget.backendState == UM.Backend.Processing || (prepareButtons.autoSlice && widget.backendState == UM.Backend.NotStarted))
-
-        background: Rectangle
-        {
-            anchors.fill: parent
-            radius: UM.Theme.getSize("progressbar_radius").width
-            color: UM.Theme.getColor("progressbar_background")
-        }
-
-        contentItem: Item
-        {
-            anchors.fill: parent
-            Rectangle
-            {
-                width: progressBar.visualPosition * parent.width
-                height: parent.height
-                radius: UM.Theme.getSize("progressbar_radius").width
-                color: UM.Theme.getColor("progressbar_control")
-            }
-        }
     }
 
     Item

resources/qml/WelcomePages/StepIndicatorBar.qml

@@ -1,34 +0,0 @@
-// Copyright (c) 2019 Ultimaker B.V.
-// Cura is released under the terms of the LGPLv3 or higher.
-
-import QtQuick 2.10
-import QtQuick.Controls 2.3
-
-
-Item
-{
-    id: base
-
-    property int totalSteps: 10
-    property int currentStep: 6
-    property int radius: 2
-
-    Rectangle
-    {
-        id: background
-        anchors.fill: parent
-        color: "#f0f0f0"
-        radius: base.radius
-    }
-
-    Rectangle
-    {
-        id: progress
-        anchors.left: parent.left
-        anchors.top: parent.top
-        anchors.bottom: parent.bottom
-        width: (currentStep + 1) * 1.0 / totalSteps * background.width
-        color: "#3282ff"
-        radius: base.radius
-    }
-}

resources/qml/WelcomePages/StepPanel.qml

@@ -6,6 +6,10 @@ import QtQuick.Controls 2.3
 import QtGraphicalEffects 1.0 // For the dropshadow
 
 import Cura 1.1 as Cura
+
+import "../Widgets"
+
+
 Item
 {
     id: base
@@ -18,10 +22,11 @@ Item
     property int stepBarHeight: 12
     property int contentMargins: 1
 
-    property int totalSteps: 0
+    property int currentStep: 0
-    property int currentStep: -1
+    property int totalStepCount: (model == null) ? 0 : model.count
+    property real progressValue: (totalStepCount == 0) ? 0 : (currentStep / totalStepCount)
 
-    property var currentItem: null
+    property var currentItem: (model == null) ? null : model.getItem(currentStep)
     property var model: null
 
     signal showNextPage()
@@ -30,7 +35,7 @@ Item
 
     onShowNextPage:
     {
-        if (currentStep < totalSteps - 1)
+        if (currentStep < totalStepCount - 1)
         {
             currentStep++
         }
@@ -56,16 +61,9 @@ Item
         }
     }
 
-    onCurrentStepChanged:
-    {
-        base.currentItem = base.model.getItem(base.currentStep)
-    }
-
     onModelChanged:
     {
-        base.totalSteps = base.model.count
         base.currentStep = 0
-        base.currentItem = base.model.getItem(base.currentStep)
     }
 
     // Panel background
@@ -94,13 +92,11 @@ Item
         z: panelBackground.z - 1
     }
 
-    StepIndicatorBar
+    CuraProgressBar
     {
-        id: stepIndicatorBar
+        id: progressBar
 
-        totalSteps: base.totalSteps
+        value: base.progressValue
-        currentStep: base.currentStep
-        radius: base.roundCornerRadius
 
         anchors
         {
@@ -117,7 +113,7 @@ Item
         anchors
         {
             margins: base.contentMargins
-            top: stepIndicatorBar.bottom
+            top: progressBar.bottom
             bottom: parent.bottom
             left: parent.left
             right: parent.right

resources/qml/Widgets/CuraProgressBar.qml

@@ -0,0 +1,38 @@
+// Copyright (c) 2019 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.10
+import QtQuick.Controls 2.3
+
+import UM 1.3 as UM
+import Cura 1.0 as Cura
+
+//
+// Cura-style progress bar, with a grey background and a blue indication bar.
+//
+ProgressBar
+{
+    id: progressBar
+    width: parent.width
+    height: UM.Theme.getSize("progressbar").height
+
+    background: Rectangle
+    {
+        anchors.fill: parent
+        radius: UM.Theme.getSize("progressbar_radius").width
+        color: UM.Theme.getColor("progressbar_background")
+    }
+
+    contentItem: Item
+    {
+        anchors.fill: parent
+
+        Rectangle
+        {
+            width: progressBar.visualPosition * parent.width
+            height: parent.height
+            radius: UM.Theme.getSize("progressbar_radius").width
+            color: UM.Theme.getColor("progressbar_control")
+        }
+    }
+}