Tweak 2.4 sidebar changes

* Make extruder-tabs more clear on badly calibrated displays
* Make infill selection same width as other "Recommended" controls
* Move printer selection to the top bar
* Add animation to support extruder selection combobox

resources/qml/Sidebar.qml

@@ -8,6 +8,7 @@ import QtQuick.Layouts 1.1
 
 import UM 1.2 as UM
 import Cura 1.0 as Cura
+import "Menus"
 
 Rectangle
 {
@@ -85,12 +86,60 @@ Rectangle
         Row
         {
             anchors.left: parent.left
-            anchors.leftMargin: UM.Theme.getSize("default_margin").width;
+            anchors.leftMargin: UM.Theme.getSize("default_margin").width
             anchors.right: parent.right
+            anchors.rightMargin: UM.Theme.getSize("default_margin").width
+            spacing: UM.Theme.getSize("default_margin").width
+
+            ToolButton
+            {
+                id: machineSelection
+                text: Cura.MachineManager.activeMachineName
+
+                height: UM.Theme.getSize("setting_control").height
+                tooltip: Cura.MachineManager.activeMachineName
+                anchors.verticalCenter: parent.verticalCenter
+                style: ButtonStyle {
+                    background: Rectangle {
+                        color: UM.Theme.getColor("sidebar_header_bar")
+
+                        UM.RecolorImage {
+                            id: downArrow
+                            anchors.verticalCenter: parent.verticalCenter
+                            anchors.right: parent.right
+                            anchors.rightMargin: UM.Theme.getSize("default_margin").width
+                            width: UM.Theme.getSize("standard_arrow").width
+                            height: UM.Theme.getSize("standard_arrow").height
+                            sourceSize.width: width
+                            sourceSize.height: width
+                            color: UM.Theme.getColor("text_reversed")
+                            source: UM.Theme.getIcon("arrow_bottom")
+                        }
+                        Label {
+                            id: sidebarComboBoxLabel
+                            color: UM.Theme.getColor("text_reversed")
+                            text: control.text;
+                            elide: Text.ElideRight;
+                            anchors.left: parent.left;
+                            anchors.leftMargin: UM.Theme.getSize("setting_unit_margin").width
+                            anchors.right: downArrow.left;
+                            anchors.rightMargin: control.rightMargin;
+                            anchors.verticalCenter: parent.verticalCenter;
+                            font: UM.Theme.getFont("large")
+                        }
+                    }
+                    label: Label{}
+                }
+
+                width: parent.width - (showSettings.width + showMonitor.width + 2 * UM.Theme.getSize("default_margin").width)
+
+                menu: PrinterMenu { }
+            }
+
             Button
             {
                 id: showSettings
-                width: (parent.width - UM.Theme.getSize("default_margin").width) / 2
+                width: height
                 height: UM.Theme.getSize("sidebar_header").height
                 onClicked: monitoringPrint = false
                 iconSource: UM.Theme.getIcon("tab_settings");
@@ -100,10 +149,11 @@ Rectangle
 
                 style:  UM.Theme.styles.sidebar_header_tab
             }
+
             Button
             {
                 id: showMonitor
-                width: (parent.width - UM.Theme.getSize("default_margin").width) / 2
+                width: height
                 height: UM.Theme.getSize("sidebar_header").height
                 onClicked: monitoringPrint = true
                 iconSource: {
@@ -151,7 +201,6 @@ Rectangle
         width: parent.width
 
         anchors.top: sidebarHeaderBar.bottom
-        anchors.topMargin: UM.Theme.getSize("default_margin").height
 
         onShowTooltip: base.showTooltip(item, location, text)
         onHideTooltip: base.hideTooltip()
@@ -160,10 +209,11 @@ Rectangle
     Rectangle {
         id: headerSeparator
         width: parent.width
-        height: UM.Theme.getSize("sidebar_lining").height
+        visible: !monitoringPrint
+        height: visible ? UM.Theme.getSize("sidebar_lining").height : 0
         color: UM.Theme.getColor("sidebar_lining")
         anchors.top: header.bottom
-        anchors.topMargin: UM.Theme.getSize("default_margin").height
+        anchors.topMargin: visible ? UM.Theme.getSize("default_margin").height : 0
     }
 
     onCurrentModeIndexChanged:

resources/qml/SidebarHeader.qml

@@ -21,46 +21,6 @@ Column
     signal showTooltip(Item item, point location, string text)
     signal hideTooltip()
 
-    Row
-    {
-        id: machineSelectionRow
-        height: UM.Theme.getSize("sidebar_setup").height
-
-        anchors
-        {
-            left: parent.left
-            leftMargin: UM.Theme.getSize("default_margin").width
-            right: parent.right
-            rightMargin: UM.Theme.getSize("default_margin").width
-        }
-
-        Label
-        {
-            id: machineSelectionLabel
-            text: catalog.i18nc("@label:listbox", "Printer:");
-            anchors.verticalCenter: parent.verticalCenter
-            font: UM.Theme.getFont("default");
-            color: UM.Theme.getColor("text");
-
-            width: parent.width * 0.45 - UM.Theme.getSize("default_margin").width
-        }
-
-        ToolButton
-        {
-            id: machineSelection
-            text: Cura.MachineManager.activeMachineName;
-
-            height: UM.Theme.getSize("setting_control").height
-            tooltip: Cura.MachineManager.activeMachineName
-            anchors.verticalCenter: parent.verticalCenter
-            style: UM.Theme.styles.sidebar_header_button
-
-            width: parent.width * 0.55 + UM.Theme.getSize("default_margin").width
-
-            menu: PrinterMenu { }
-        }
-    }
-
     Row
     {
         id: extruderSelectionRow
@@ -86,6 +46,7 @@ Column
             property var index: 0
 
             height: UM.Theme.getSize("sidebar_header_mode_tabs").height
+            width: parent.width
             boundsBehavior: Flickable.StopAtBounds
 
             anchors
@@ -141,6 +102,17 @@ Column
                                     control.hovered ? UM.Theme.getColor("tab_hovered") : UM.Theme.getColor("tab_unchecked")
                         Behavior on color { ColorAnimation { duration: 50; } }
 
+                        Rectangle
+                        {
+                            id: highlight
+                            visible: control.checked
+                            anchors.left: parent.left
+                            anchors.right: parent.right
+                            anchors.top: parent.top
+                            height: UM.Theme.getSize("sidebar_header_highlight").height
+                            color: UM.Theme.getColor("sidebar_header_bar")
+                        }
+
                         Rectangle
                         {
                             id: swatch
@@ -179,6 +151,14 @@ Column
         }
     }
 
+    Item
+    {
+        id: variantRowSpacer
+        height: UM.Theme.getSize("default_margin").height / 4
+        width: height
+        visible: !extruderSelectionRow.visible
+    }
+
     Row
     {
         id: variantRow

resources/qml/SidebarSimple.qml

@@ -30,7 +30,7 @@ Item
         id: infillCellLeft
         anchors.top: parent.top
         anchors.left: parent.left
-        width: base.width / 100 * 35 - UM.Theme.getSize("default_margin").width
+        width: base.width * .45 - UM.Theme.getSize("default_margin").width
         height: childrenRect.height
 
         Label
@@ -52,7 +52,7 @@ Item
         id: infillCellRight
 
         height: childrenRect.height;
-        width: base.width / 100 * 65
+        width: base.width * .55
         spacing: UM.Theme.getSize("default_margin").width
 
         anchors.left: infillCellLeft.right
@@ -231,7 +231,7 @@ Item
             anchors.left: parent.left
             anchors.leftMargin: UM.Theme.getSize("default_margin").width
             anchors.verticalCenter: enableSupportCheckBox.verticalCenter
-            width: parent.width / 100 * 45 - 3 * UM.Theme.getSize("default_margin").width
+            width: parent.width * .45 - 3 * UM.Theme.getSize("default_margin").width
             text: catalog.i18nc("@label", "Enable Support");
             font: UM.Theme.getFont("default");
             color: UM.Theme.getColor("text");
@@ -279,7 +279,7 @@ Item
             anchors.left: parent.left
             anchors.leftMargin: UM.Theme.getSize("default_margin").width
             anchors.verticalCenter: supportExtruderCombobox.verticalCenter
-            width: parent.width / 100 * 45 - 3 * UM.Theme.getSize("default_margin").width
+            width: parent.width * .45 - 3 * UM.Theme.getSize("default_margin").width
             text: catalog.i18nc("@label", "Support Extruder");
             font: UM.Theme.getFont("default");
             color: UM.Theme.getColor("text");
@@ -319,7 +319,7 @@ Item
             }
             anchors.left: supportExtruderLabel.right
             anchors.leftMargin: UM.Theme.getSize("default_margin").width
-            width: parent.width / 100 * 55
+            width: parent.width * .55
             height:
             {
                 if ((supportEnabled.properties.value == "True") && (machineExtruderCount.properties.value > 1))
@@ -332,6 +332,7 @@ Item
                     return 0;
                 }
             }
+            Behavior on height { NumberAnimation { duration: 100 } }
 
             style: UM.Theme.styles.combobox_color
             enabled: base.settingsEnabled
@@ -377,7 +378,7 @@ Item
             anchors.left: parent.left
             anchors.leftMargin: UM.Theme.getSize("default_margin").width
             anchors.verticalCenter: adhesionCheckBox.verticalCenter
-            width: parent.width / 100 * 45 - 3 * UM.Theme.getSize("default_margin").width
+            width: parent.width * .45 - 3 * UM.Theme.getSize("default_margin").width
             text: catalog.i18nc("@label", "Build Plate Adhesion");
             font: UM.Theme.getFont("default");
             color: UM.Theme.getColor("text");

resources/themes/cura/theme.json

@@ -205,7 +205,7 @@
 
         "sidebar": [35.0, 10.0],
         "sidebar_header": [0.0, 4.0],
-        "sidebar_header_highlight": [0.5, 0.5],
+        "sidebar_header_highlight": [0.25, 0.25],
         "sidebar_header_mode_toggle": [0.0, 2.0],
         "sidebar_header_mode_tabs": [0.0, 3.0],
         "sidebar_lining": [0.5, 0.5],