Improve the toolbar style by modifying the rectangles and the behavior

to get a rounded rectangle on the right-top and right-bottom.

Contributes to CURA-5962.

resources/qml/ExtruderButton.qml

@@ -21,6 +21,9 @@ Button
     checked: Cura.ExtruderManager.selectedObjectExtruders.indexOf(extruder.id) != -1
     enabled: UM.Selection.hasSelection && extruder.stack.isEnabled
 
+    property bool isFirstElement: extrudersModel.getItem(0).name == model.name
+    property bool isLastElement: extrudersModel.getItem(extrudersModel.rowCount() - 1).name == model.name
+
     Item
     {
         anchors.centerIn: parent
@@ -32,18 +35,7 @@ Button
         {
             anchors.centerIn: parent
             text: index + 1
-            color:
+            color: UM.Theme.getColor("toolbar_button_text")
-            {
-                if (base.checked)
-                {
-                    return UM.Theme.getColor("toolbar_button_text_active")
-                }
-                else if(base.hovered)
-                {
-                    return UM.Theme.getColor("toolbar_button_text_hover")
-                }
-                return UM.Theme.getColor("toolbar_button_text")
-            }
             font: UM.Theme.getFont("default_bold")
         }
     }

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")
                 }

resources/themes/cura-light/theme.json

@@ -123,9 +123,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],