Merge branch 'CURA-5785-Restyle_stage_menu' into CURA-5942_printer_selector

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

@@ -9,8 +9,8 @@ Item
 {
     id: extruderIconItem
 
-    implicitWidth: UM.Theme.getSize("button").width
+    implicitWidth: UM.Theme.getSize("extruder_icon").width
-    implicitHeight: implicitWidth
+    implicitHeight: UM.Theme.getSize("extruder_icon").height
 
     property bool checked: true
     property color materialColor
@@ -22,7 +22,7 @@ Item
         anchors.fill: parent
 
         sourceSize.width: parent.width
-        sourceSize.height: parent.width
+        sourceSize.height: parent.height
         source: UM.Theme.getIcon("extruder_button")
         color: extruderEnabled ? materialColor: "gray"
     }
@@ -49,11 +49,13 @@ Item
             id: extruderNumberText
             anchors.centerIn: parent
             text: index + 1
-            font: UM.Theme.getFont("default")
+            font: UM.Theme.getFont("extruder_icon")
             width: contentWidth
             height: contentHeight
             visible: extruderEnabled
             renderType: Text.NativeRendering
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
         }
 
         UM.RecolorImage

resources/qml/Menus/ConfigurationMenu/QuickConfigurationSelector.qml

@@ -50,8 +50,7 @@ Cura.ExpandableComponent
                     id: extruderIcon
                     materialColor: model.color
                     extruderEnabled: model.enabled
-                    height: parent.height
+                    anchors.verticalCenter: parent.verticalCenter
-                    width: height
                 }
 
                 // Label for the brand of the material
@@ -152,6 +151,7 @@ Cura.ExpandableComponent
                         color: UM.Theme.getColor("text")
                         height: parent.height
                         width: tabControl.textWidth
+                        renderType: Text.NativeRendering
                     }
 
                     OldControls.CheckBox
@@ -174,6 +174,7 @@ Cura.ExpandableComponent
                         color: UM.Theme.getColor("text")
                         height: parent.height
                         width: tabControl.textWidth
+                        renderType: Text.NativeRendering
                     }
 
                     OldControls.ToolButton
@@ -217,6 +218,7 @@ Cura.ExpandableComponent
                         color: UM.Theme.getColor("text")
                         height: parent.height
                         width: tabControl.textWidth
+                        renderType: Text.NativeRendering
                     }
 
                     OldControls.ToolButton

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

@@ -64,6 +64,12 @@
             "size": 1.15,
             "weight": 50,
             "family": "Noto Sans"
+        },
+        "extruder_icon":
+        {
+            "size": 0.7,
+            "weight": 50,
+            "family": "Noto Sans"
         }
     },
 
@@ -124,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],
@@ -407,8 +413,7 @@
         "thin_margin": [0.71, 0.71],
         "narrow_margin": [0.5, 0.5],
 
-        "extruder_button_material_margin": [0.70, 0.9],
+        "extruder_icon": [1.8, 1.8],
-        "extruder_button_material": [0.75, 0.75],
 
         "simple_mode_infill_caption": [0.0, 5.0],
         "simple_mode_infill_height": [0.0, 8.0],
@@ -450,7 +455,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],