Update extruder button styles

CURA-4211

cura/CuraApplication.py

@@ -125,6 +125,8 @@ class CuraApplication(QtApplication):
     #        Cura will always show the Add Machine Dialog upon start.
     stacksValidationFinished = pyqtSignal()  # Emitted whenever a validation is finished
 
+    syncConfigurationFromPrinter = pyqtSignal()  # Emitted when the user wants to sync configuration from printer
+
     def __init__(self):
         # this list of dir names will be used by UM to detect an old cura directory
         for dir_name in ["extruders", "machine_instances", "materials", "plugins", "quality", "user", "variants"]:
@@ -1393,3 +1395,7 @@ class CuraApplication(QtApplication):
                     node = node.getParent()
 
                 Selection.add(node)
+
+    @pyqtSlot()
+    def startSyncingConfigurationFromPrinter(self):
+        self.syncConfigurationFromPrinter.emit()

plugins/UM3NetworkPrinting/DiscoverUM3Action.py

@@ -26,6 +26,7 @@ class DiscoverUM3Action(MachineAction):
         self.__additional_components_view = None
 
         Application.getInstance().engineCreatedSignal.connect(self._createAdditionalComponentsView)
+        Application.getInstance().syncConfigurationFromPrinter.connect(self.loadConfigurationFromPrinter)
 
         self._last_zeroconf_event_time = time.time()
         self._zeroconf_change_grace_period = 0.25 # Time to wait after a zeroconf service change before allowing a zeroconf reset

resources/qml/ExtruderButton.qml

@@ -57,17 +57,18 @@ Button
         {
             right: parent.right
             top: parent.top
-            margins: UM.Theme.getSize("extruder_button_material_margin").width
+            rightMargin: UM.Theme.getSize("extruder_button_material_margin").width
+            topMargin: UM.Theme.getSize("extruder_button_material_margin").height
         }
 
         color: model.color
 
-        width: UM.Theme.getSize("extruder_button_material_size").width
-        height: UM.Theme.getSize("extruder_button_material_size").height
+        width: UM.Theme.getSize("extruder_button_material").width
+        height: UM.Theme.getSize("extruder_button_material").height
         radius: width / 2
 
-        border.width: 0
-        border.color: "transparent"
+        border.width: 1
+        border.color: UM.Theme.getColor("extruder_button_material_border")
 
         opacity: !base.enabled ? 0.2 : 1.0
     }

resources/qml/SidebarHeader.qml

@@ -24,41 +24,109 @@ Column
 
     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
+            leftMargin: UM.Theme.getSize("sidebar_margin").width
             right: parent.right
-            rightMargin: UM.Theme.getSize("default_margin").width
+            rightMargin: UM.Theme.getSize("sidebar_margin").width
+            topMargin: UM.Theme.getSize("default_margin").height
         }
-        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
+        height: syncMachineButton.height + UM.Theme.getSize("sidebar_margin").height / 2
+
+        Label
+        {
+            id: extruderSelectionLabel
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.left
+
+            height: UM.Theme.getSize("sidebar_tabs").height / 3
+            text: catalog.i18nc("@label", "Extruder configuration")
+            font: UM.Theme.getFont("large")
+            color: UM.Theme.getColor("text")
+            visible: extruderSelectionRow.visible
+        }
+
+        Button
+        {
+            id: syncMachineButton
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.right: parent.right
+            text: catalog.i18nc("@button:action", "Sync")
+            visible: extruderSelectionRow.visible
+
+            property bool printerConnected: Cura.MachineManager.printerOutputDevices.length != 0
+            enabled: printerConnected
+
+            onClicked:
+            {
+                CuraApplication.startSyncingConfigurationFromPrinter();
+            }
+
+            style: ButtonStyle
+            {
+                background: Rectangle
+                {
+                    implicitWidth: UM.Theme.getSize("button").width * 1.1
+                    implicitHeight: UM.Theme.getSize("sidebar_tabs").height / 3
+                    color: "transparent"
+                }
+                label: Item
+                {
+                    implicitWidth: UM.Theme.getSize("button").width * 1.1
+                    implicitHeight: UM.Theme.getSize("sidebar_tabs").height / 3
+                    Label
+                    {
+                        id: labelText
+                        anchors.left: parent.left
+                        anchors.leftMargin: UM.Theme.getSize("default_lining").width
+                        anchors.right: downArrow.left
+                        anchors.rightMargin: UM.Theme.getSize("default_margin").width / 2
+                        anchors.top: parent.top
+
+                        text: control.text
+                        font: UM.Theme.getFont("default")
+                        color: control.hovered ? UM.Theme.getColor("sync_button_text_hovered") : UM.Theme.getColor("sync_button_text")
+
+                        elide: Text.ElideRight;
+                        verticalAlignment: Text.AlignVCenter;
+                    }
+
+                    UM.RecolorImage
+                    {
+                        id: downArrow
+                        anchors.right: parent.right
+                        anchors.rightMargin: UM.Theme.getSize("default_lining").width * 2
+                        anchors.top: labelText.top
+                        anchors.topMargin: UM.Theme.getSize("default_margin").height / 3
+
+                        source: UM.Theme.getIcon("arrow_bottom")
+                        width: UM.Theme.getSize("standard_arrow").width
+                        height: UM.Theme.getSize("standard_arrow").height
+                        sourceSize.width: width + 5
+                        sourceSize.height: width + 5
+
+                        color: control.hovered ? UM.Theme.getColor("sync_button_text_hovered") : UM.Theme.getColor("sync_button_text")
+                    }
+                }
+            }
+        }
     }
 
     Item
     {
         id: extruderSelectionRow
         width: parent.width
-        height: UM.Theme.getSize("sidebar_tabs").height
+        height: UM.Theme.getSize("sidebar_tabs").height * 2 / 3
         visible: machineExtruderCount.properties.value > 1 && !sidebar.monitoringPrint
 
         anchors
         {
             left: parent.left
-            leftMargin: UM.Theme.getSize("default_margin").width
+            leftMargin: UM.Theme.getSize("default_margin").width * 1.5
             right: parent.right
-            rightMargin: UM.Theme.getSize("default_margin").width
+            rightMargin: UM.Theme.getSize("default_margin").width * 1.5
         }
 
         ListView
@@ -136,7 +204,7 @@ Column
                             width: {
                                 var extruderTextWidth = extruderStaticText.visible ? extruderStaticText.width : 0;
                                 var iconWidth = extruderIconItem.width;
-                                return extruderTextWidth + iconWidth + UM.Theme.getSize("default_margin").width / 4;
+                                return extruderTextWidth + iconWidth + UM.Theme.getSize("default_margin").width / 2;
                             }
 
                             // Static text "Extruder"
@@ -150,7 +218,7 @@ Column
                                        control.hovered ? UM.Theme.getColor("action_button_hovered_text") :
                                        UM.Theme.getColor("action_button_text")
 
-                                font: UM.Theme.getFont("default")
+                                font: control.checked ? UM.Theme.getFont("default_bold") : UM.Theme.getFont("default")
                                 text: catalog.i18nc("@label", "Extruder")
                                 visible: width < (control.width - extruderIconItem.width - UM.Theme.getSize("default_margin").width)
                                 elide: Text.ElideRight
@@ -168,7 +236,7 @@ Column
                                     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;
+                                    minimumSize -= UM.Theme.getSize("default_margin").width / 2;
                                     return minimumSize;
                                 }
 
@@ -205,18 +273,18 @@ Column
                                     {
                                         right: parent.right
                                         top: parent.top
-                                        rightMargin: parent.sizeToUse * 0.04
-                                        topMargin: parent.sizeToUse * 0.04
+                                        rightMargin: parent.sizeToUse * 0.01
+                                        topMargin: parent.sizeToUse * 0.05
                                     }
 
                                     color: model.color
 
-                                    width: parent.width * 0.27
-                                    height: parent.height * 0.27
+                                    width: parent.width * 0.35
+                                    height: parent.height * 0.35
                                     radius: width / 2
 
-                                    border.width: 0
-                                    border.color: "transparent"
+                                    border.width: 1
+                                    border.color: UM.Theme.getColor("extruder_button_material_border")
 
                                     opacity: !control.checked ? 0.6 : 1.0
                                 }
@@ -337,7 +405,7 @@ Column
     Item
     {
         id: materialInfoRow
-        height: UM.Theme.getSize("sidebar_setup").height
+        height: UM.Theme.getSize("sidebar_setup").height / 2
         visible: (Cura.MachineManager.hasVariants || Cura.MachineManager.hasMaterials) && !sidebar.monitoringPrint && !sidebar.hideSettings
 
         anchors
@@ -358,10 +426,11 @@ Column
             {
                 id: materialInfoLabel
                 wrapMode: Text.WordWrap
-                text: catalog.i18nc("@label", "Check material compability");
+                text: catalog.i18nc("@label", "Check material compability")
                 font: UM.Theme.getFont("default");
-                verticalAlignment: Text.AlignVCenter
+                verticalAlignment: Text.AlignTop
                 anchors.top: parent.top
+                anchors.right: parent.right
                 anchors.bottom: parent.bottom
                 color: UM.Theme.getColor("text")
 

resources/qml/Topbar.qml

@@ -111,10 +111,11 @@ Rectangle
                 {
                     case "printing":
                     case "pre_print":
-                    case "wait_cleanup":
                     case "pausing":
                     case "resuming":
                         return UM.Theme.getIcon("tab_status_busy");
+                    case "wait_cleanup":
+                        return UM.Theme.getIcon("tab_status_finished");
                     case "ready":
                     case "":
                         return UM.Theme.getIcon("tab_status_connected")

resources/themes/cura-light/icons/extruder_button.svg

@@ -41,7 +41,7 @@
      showgrid="false"
      inkscape:pagecheckerboard="true"
      inkscape:zoom="23.442308"
-     inkscape:cx="11.848284"
+     inkscape:cx="4.9163727"
      inkscape:cy="17.941232"
      inkscape:window-x="2552"
      inkscape:window-y="-8"
@@ -61,10 +61,4 @@
      style="fill:none;stroke:#ffffff;stroke-width:1.5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
      rx="13.735848"
      ry="13.735849" />
-  <circle
-     style="fill:none;stroke:#ffffff;stroke-width:1.39310181;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-     id="path4509"
-     cx="24.75"
-     cy="5.25"
-     r="4.5534492" />
 </svg>

resources/themes/cura-light/theme.json

@@ -96,6 +96,11 @@
         "button_tooltip_border": [24, 41, 77, 255],
         "button_tooltip_text": [24, 41, 77, 255],
 
+        "extruder_button_material_border": [255, 255, 255, 255],
+
+        "sync_button_text": [120, 120, 120, 255],
+        "sync_button_text_hovered": [0, 0, 0, 255],
+
         "tab_checked": [255, 255, 255, 255],
         "tab_checked_border": [255, 255, 255, 255],
         "tab_checked_text": [24, 41, 77, 255],
@@ -261,8 +266,8 @@
         "default_arrow": [0.8, 0.8],
         "logo": [9.5, 2.0],
 
-        "extruder_button_material_margin": [0.875, 0.875],
-        "extruder_button_material_size": [0.68, 0.68],
+        "extruder_button_material_margin": [0.50, 0.9],
+        "extruder_button_material": [0.75, 0.75],
 
         "sidebar": [35.0, 10.0],
         "sidebar_margin": [1.71, 1.43],