Merge branch 'CURA-5785-Restyle_stage_menu' of github.com:Ultimaker/Cura into CURA-5785-Restyle_stage_menu

resources/qml/ActionPanel/OutputProcessWidget.qml

@@ -99,6 +99,7 @@ Column
     {
         id: buttonRow
         spacing: UM.Theme.getSize("default_margin").width
+        width: parent.width
 
         Cura.ActionButton
         {

resources/qml/ExtruderIcon.qml

@@ -54,8 +54,8 @@ Item
             height: contentHeight
             visible: extruderEnabled
             renderType: Text.NativeRendering
-            horizontalAlignment: Text.alignHCenter
+            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.alignVCenter
+            verticalAlignment: Text.AlignVCenter
         }
 
         UM.RecolorImage

resources/qml/Toolbar.qml

@@ -28,12 +28,16 @@ Item
         // Used to create a rounded rectangle behind the toolButtons
         Rectangle
         {
-            anchors.fill: toolButtons
+            anchors
-            anchors.leftMargin: -radius
+            {
+                fill: toolButtons
+                leftMargin: -radius - border.width
+                rightMargin: -border.width
+                topMargin: -border.width
+                bottomMargin: -border.width
+            }
             radius: UM.Theme.getSize("default_radius").width
-            border.width: UM.Theme.getSize("default_lining").width
+            color: UM.Theme.getColor("lining")
-            border.color: UM.Theme.getColor("lining")
-            color: UM.Theme.getColor("toolbar_background")
         }
 
         Column
@@ -42,13 +46,13 @@ Item
 
             anchors.top: parent.top
             anchors.right: parent.right
-            spacing: UM.Theme.getSize("button_lining").width
+            spacing: UM.Theme.getSize("default_lining").height
 
             Repeater
             {
                 id: repeat
 
-                model: UM.ToolModel { }
+                model: UM.ToolModel { id: toolsModel }
                 width: childrenRect.width
                 height: childrenRect.height
                 Button
@@ -60,6 +64,9 @@ Item
                     enabled: model.enabled && UM.Selection.hasSelection && UM.Controller.toolsEnabled
                     style: UM.Theme.styles.toolbar_button
 
+                    property bool isFirstElement: toolsModel.getItem(0).id == model.id
+                    property bool isLastElement: toolsModel.getItem(toolsModel.rowCount() - 1).id == model.id
+
                     onCheckedChanged:
                     {
                         if (checked)
@@ -93,12 +100,16 @@ Item
         // Used to create a rounded rectangle behind the extruderButtons
         Rectangle
         {
-            anchors.fill: extruderButtons
+            anchors
-            anchors.leftMargin: -radius
+            {
+                fill: extruderButtons
+                leftMargin: -radius - border.width
+                rightMargin: -border.width
+                topMargin: -border.width
+                bottomMargin: -border.width
+            }
             radius: UM.Theme.getSize("default_radius").width
-            border.width: UM.Theme.getSize("default_lining").width
+            color: UM.Theme.getColor("lining")
-            border.color: UM.Theme.getColor("lining")
-            color: UM.Theme.getColor("toolbar_background")
         }
 
         Column
@@ -108,6 +119,7 @@ Item
             anchors.topMargin: UM.Theme.getSize("default_margin").height
             anchors.top: toolButtons.bottom
             anchors.right: parent.right
+            spacing: UM.Theme.getSize("default_lining").height
 
             Repeater
             {

resources/themes/cura-light/styles.qml

@@ -175,11 +175,68 @@ QtObject
     {
         ButtonStyle
         {
-            background: Item
+            background: Rectangle
             {
-                implicitWidth: Theme.getSize("button").width;
+                implicitWidth: Theme.getSize("button").width
-                implicitHeight: Theme.getSize("button").height;
+                implicitHeight: Theme.getSize("button").height
+                color:
+                {
+                    if (control.checked && control.hovered)
+                    {
+                        return Theme.getColor("toolbar_button_active_hover")
+                    }
+                    else if (control.checked)
+                    {
+                        return Theme.getColor("toolbar_button_active")
+                    }
+                    else if(control.hovered)
+                    {
+                        return Theme.getColor("toolbar_button_hover")
+                    }
+                    return Theme.getColor("toolbar_background")
+                }
+                radius: UM.Theme.getSize("default_radius").width
 
+                Rectangle
+                {
+                    id: topSquare
+                    anchors
+                    {
+                        left: parent.left
+                        right: parent.right
+                        top: parent.top
+                    }
+                    height: parent.radius
+                    color: control.isFirstElement ? "transparent" : parent.color
+                }
+
+                Rectangle
+                {
+                    id: bottomSquare
+                    anchors
+                    {
+                        left: parent.left
+                        right: parent.right
+                        bottom: parent.bottom
+                    }
+                    height: parent.radius
+                    color: control.isLastElement ? "transparent" : parent.color
+                }
+
+                Rectangle
+                {
+                    id: leftSquare
+                    anchors
+                    {
+                        left: parent.left
+                        top: parent.top
+                        bottom: parent.bottom
+                    }
+                    width: parent.radius
+                    color: parent.color
+                }
+
+                // This is the tooltip
                 UM.PointingRectangle
                 {
                     id: button_tooltip
@@ -223,22 +280,7 @@ QtObject
                     source: control.iconSource;
                     width: Theme.getSize("button_icon").width;
                     height: Theme.getSize("button_icon").height;
-                    color:
+                    color: Theme.getColor("toolbar_button_text");
-                    {
-                        if (control.checked && control.hovered)
-                        {
-                            return Theme.getColor("toolbar_button_text_active_hover");
-                        }
-                        else if (control.checked)
-                        {
-                            return Theme.getColor("toolbar_button_text_active");
-                        }
-                        else if(control.hovered)
-                        {
-                            return Theme.getColor("toolbar_button_text_hover");
-                        }
-                        return Theme.getColor("toolbar_button_text");
-                    }
 
                     sourceSize: Theme.getSize("button_icon")
                 }
@@ -515,6 +557,7 @@ QtObject
                 implicitWidth: Theme.getSize("message").width - (Theme.getSize("default_margin").width * 2)
                 implicitHeight: Theme.getSize("progressbar").height
                 color: control.hasOwnProperty("backgroundColor") ? control.backgroundColor : Theme.getColor("progressbar_background")
+                radius: Theme.getSize("progressbar_radius").width
             }
             progress: Rectangle
             {

resources/themes/cura-light/theme.json

@@ -130,9 +130,9 @@
         "warning": [255, 190, 35, 255],
 
         "toolbar_button_text": [10, 8, 80, 255],
-        "toolbar_button_text_hover": [50, 130, 255, 255],
+        "toolbar_button_hover": [232, 242, 252, 255],
-        "toolbar_button_text_active": [50, 130, 255, 255],
+        "toolbar_button_active": [232, 242, 252, 255],
-        "toolbar_button_text_active_hover": [50, 130, 255, 255],
+        "toolbar_button_active_hover": [232, 242, 252, 255],
 
         "button": [31, 36, 39, 255],
         "button_hover": [68, 72, 75, 255],
@@ -454,7 +454,7 @@
 
         "progressbar": [26.0, 0.75],
         "progressbar_radius": [0.15, 0.15],
-        "progressbar_control": [8.0, 0.4],
+        "progressbar_control": [8.0, 0.75],
 
         "scrollbar": [0.75, 0.5],