Change extruder tabs to buttons

CURA-4211

Change extruder tabs to buttons according to the new design.

resources/qml/SidebarHeader.qml

@@ -22,6 +22,30 @@ Column
     signal showTooltip(Item item, point location, string text)
     signal hideTooltip()
 
+    Item
+    {
+        height: UM.Theme.getSize("default_margin").height / 4
+        width: height
+        visible: extruderSelectionRow.visible
+    }
+
+    Label
+    {
+        id: extruderSelectionLabel
+        anchors
+        {
+            left: parent.left
+            leftMargin: UM.Theme.getSize("default_margin").width
+            right: parent.right
+            rightMargin: UM.Theme.getSize("default_margin").width
+        }
+        height: UM.Theme.getSize("sidebar_tabs").height / 3
+        text: catalog.i18nc("@label", "Extruder configuration")
+        font: UM.Theme.getFont("default_bold")
+        color: UM.Theme.getColor("text")
+        visible: extruderSelectionRow.visible
+    }
+
     Item
     {
         id: extruderSelectionRow
@@ -29,16 +53,12 @@ Column
         height: UM.Theme.getSize("sidebar_tabs").height
         visible: machineExtruderCount.properties.value > 1 && !sidebar.monitoringPrint
 
-        Rectangle
+        anchors
         {
-            id: extruderSeparator
-            visible: machineExtruderCount.properties.value > 1 && !sidebar.monitoringPrint
-
-            width: parent.width
-            height: parent.height
-            color: UM.Theme.getColor("sidebar_lining")
-
-            anchors.top: extruderSelectionRow.top
+            left: parent.left
+            leftMargin: UM.Theme.getSize("default_margin").width
+            right: parent.right
+            rightMargin: UM.Theme.getSize("default_margin").width
         }
 
         ListView
@@ -53,8 +73,10 @@ Column
             anchors
             {
                 left: parent.left
+                leftMargin: UM.Theme.getSize("default_margin").width / 2
                 right: parent.right
-                bottom: extruderSelectionRow.bottom
+                rightMargin: UM.Theme.getSize("default_margin").width / 2
+                verticalCenter: parent.verticalCenter
             }
 
             ExclusiveGroup { id: extruderMenuGroup; }
@@ -98,93 +120,106 @@ Column
                         {
                             anchors.fill: parent
                             border.width: UM.Theme.getSize("default_lining").width
-                            border.color: control.checked ? UM.Theme.getColor("tab_checked_border") :
-                                          control.pressed ? UM.Theme.getColor("tab_active_border") :
-                                          control.hovered ? UM.Theme.getColor("tab_hovered_border") : UM.Theme.getColor("tab_unchecked_border")
-                            color: control.checked ? UM.Theme.getColor("tab_checked") :
-                                   control.pressed ? UM.Theme.getColor("tab_active") :
-                                   control.hovered ? UM.Theme.getColor("tab_hovered") : UM.Theme.getColor("tab_unchecked")
+                            border.color: control.checked ? UM.Theme.getColor("toggle_checked_border") :
+                                          control.pressed ? UM.Theme.getColor("toggle_active_border") :
+                                          control.hovered ? UM.Theme.getColor("toggle_hovered_border") : UM.Theme.getColor("toggle_unchecked_border")
+                            color: control.checked ? UM.Theme.getColor("toggle_checked") :
+                                   control.pressed ? UM.Theme.getColor("toggle_active") :
+                                   control.hovered ? UM.Theme.getColor("toggle_hovered") : UM.Theme.getColor("toggle_unchecked")
                             Behavior on color { ColorAnimation { duration: 50; } }
                         }
 
-                        Text
-                        {
-                            id: extruderStaticText
-                            anchors.verticalCenter: parent.verticalCenter
-                            anchors.right: parent.horizontalCenter
-                            anchors.rightMargin: UM.Theme.getSize("default_margin").width / 2
-
-                            color: control.checked ? UM.Theme.getColor("tab_checked_text") :
-                                   control.pressed ? UM.Theme.getColor("tab_active_text") :
-                                   control.hovered ? UM.Theme.getColor("tab_hovered_text") : UM.Theme.getColor("tab_unchecked_text")
-
-                            font: UM.Theme.getFont("default")
-                            text: catalog.i18nc("@label", "Extruder")
-                            visible: width < (control.width - UM.Theme.getSize("default_margin").width) / 2
-                            elide: Text.ElideRight
-                        }
-
                         Item
                         {
-                            anchors.verticalCenter: parent.verticalCenter
-                            anchors.left: !extruderStaticText.visible ? parent.left : parent.horizontalCenter
-                            anchors.leftMargin: !extruderStaticText.visible ? (parent.width - width) / 2 : UM.Theme.getSize("default_margin").width / 2
+                            id: extruderButtonFace
+                            anchors.centerIn: parent
+                            width: {
+                                var extruderTextWidth = extruderStaticText.visible ? extruderStaticText.width : 0;
+                                var iconWidth = extruderIconItem.width;
+                                return extruderTextWidth + iconWidth + UM.Theme.getSize("default_margin").width / 4;
+                            }
 
-                            property var sizeToUse:
+                            // Static text "Extruder"
+                            Text
                             {
-                                var minimumWidth = control.width < UM.Theme.getSize("button").width ? control.width : UM.Theme.getSize("button").width;
-                                var minimumHeight = control.height < UM.Theme.getSize("button").height ? control.height : UM.Theme.getSize("button").height;
-                                var minimumSize = minimumWidth < minimumHeight ? minimumWidth : minimumHeight;
-                                minimumSize -= UM.Theme.getSize("default_margin").width;
-                                return minimumSize;
+                                id: extruderStaticText
+                                anchors.verticalCenter: parent.verticalCenter
+                                anchors.left: parent.left
+
+                                color: control.checked ? UM.Theme.getColor("toggle_checked_text") :
+                                       control.pressed ? UM.Theme.getColor("toggle_active_text") :
+                                       control.hovered ? UM.Theme.getColor("toggle_hovered_text") : UM.Theme.getColor("toggle_unchecked_text")
+
+                                font: UM.Theme.getFont("default")
+                                text: catalog.i18nc("@label", "Extruder")
+                                visible: width < (control.width - extruderIconItem.width - UM.Theme.getSize("default_margin").width)
+                                elide: Text.ElideRight
                             }
 
-                            width: sizeToUse
-                            height: sizeToUse
+                            // Everthing for the extruder icon
+                            Item
+                            {
+                                id: extruderIconItem
+                                anchors.verticalCenter: parent.verticalCenter
+                                anchors.right: parent.right
 
-                            UM.RecolorImage {
-                                id: mainCircle
-                                anchors.fill: parent
+                                property var sizeToUse:
+                                {
+                                    var minimumWidth = control.width < UM.Theme.getSize("button").width ? control.width : UM.Theme.getSize("button").width;
+                                    var minimumHeight = control.height < UM.Theme.getSize("button").height ? control.height : UM.Theme.getSize("button").height;
+                                    var minimumSize = minimumWidth < minimumHeight ? minimumWidth : minimumHeight;
+                                    minimumSize -= UM.Theme.getSize("default_margin").width;
+                                    return minimumSize;
+                                }
 
-                                sourceSize.width: parent.width
-                                sourceSize.height: parent.width
-                                source: UM.Theme.getIcon("extruder_button")
+                                width: sizeToUse
+                                height: sizeToUse
 
-                                color: control.checked ? UM.Theme.getColor("setting_category_text") : UM.Theme.getColor("setting_control_disabled_text")
-                            }
+                                UM.RecolorImage {
+                                    id: mainCircle
+                                    anchors.fill: parent
 
-                            Text
-                            {
-                                anchors.centerIn: parent
-                                text: index + 1;
-                                color: control.checked ? UM.Theme.getColor("tab_checked_text") :
-                                       control.pressed ? UM.Theme.getColor("tab_active_text") :
-                                       control.hovered ? UM.Theme.getColor("tab_hovered_text") : UM.Theme.getColor("tab_unchecked_text")
-                                font: UM.Theme.getFont("default_bold")
-                            }
+                                    sourceSize.width: parent.width
+                                    sourceSize.height: parent.width
+                                    source: UM.Theme.getIcon("extruder_button")
 
-                            // Material colour circle
-                            // Only draw the filling colour of the material inside the SVG border.
-                            Rectangle
-                            {
-                                anchors
+                                    color: extruderNumberText.color
+                                }
+
+                                Text
                                 {
-                                    right: parent.right
-                                    top: parent.top
-                                    rightMargin: parent.sizeToUse * 0.04
-                                    topMargin: parent.sizeToUse * 0.04
+                                    id: extruderNumberText
+                                    anchors.centerIn: parent
+                                    text: index + 1;
+                                    color: control.checked ? UM.Theme.getColor("toggle_checked_text") :
+                                           control.pressed ? UM.Theme.getColor("toggle_active_text") :
+                                           control.hovered ? UM.Theme.getColor("toggle_hovered_text") : UM.Theme.getColor("toggle_unchecked_text")
+                                    font: UM.Theme.getFont("default_bold")
                                 }
 
-                                color: model.color
+                                // Material colour circle
+                                // Only draw the filling colour of the material inside the SVG border.
+                                Rectangle
+                                {
+                                    anchors
+                                    {
+                                        right: parent.right
+                                        top: parent.top
+                                        rightMargin: parent.sizeToUse * 0.04
+                                        topMargin: parent.sizeToUse * 0.04
+                                    }
 
-                                width: parent.width * 0.27
-                                height: parent.height * 0.27
-                                radius: width / 2
+                                    color: model.color
 
-                                border.width: 0
-                                border.color: "transparent"
+                                    width: parent.width * 0.27
+                                    height: parent.height * 0.27
+                                    radius: width / 2
 
-                                opacity: !control.checked ? 0.6 : 1.0
+                                    border.width: 0
+                                    border.color: "transparent"
+
+                                    opacity: !control.checked ? 0.6 : 1.0
+                                }
                             }
                         }
                     }