Add a component to show when no configurations are available because lack of connection.

Contributes to CURA-5876.

resources/qml/ActionPanel/OutputProcessWidget.qml

@@ -119,8 +119,6 @@ Column
             }
 
             height: UM.Theme.getSize("action_button").height
-            leftPadding: UM.Theme.getSize("default_margin").width
-            rightPadding: UM.Theme.getSize("default_margin").width
             text: catalog.i18nc("@button", "Preview")
 
             onClicked: UM.Controller.setActiveStage("PreviewStage")

resources/qml/ActionPanel/SliceProcessWidget.qml

@@ -60,7 +60,7 @@ Column
 
         text: catalog.i18nc("@label:PrintjobStatus", "Unable to Slice")
         source: UM.Theme.getIcon("warning")
-        color: UM.Theme.getColor("warning")
+        iconColor: UM.Theme.getColor("warning")
     }
 
     // Progress bar, only visible when the backend is in the process of slice the printjob

resources/qml/IconWithText.qml

@@ -15,6 +15,7 @@ Item
 {
     property alias source: icon.source
     property alias iconSize: icon.width
+    property alias iconColor: icon.color
     property alias color: label.color
     property alias text: label.text
     property alias font: label.font
@@ -37,7 +38,7 @@ Item
     {
         id: icon
         width: UM.Theme.getSize("section_icon").width
-        height: UM.Theme.getSize("section_icon").height
+        height: width
 
         color: label.color
 

resources/qml/Menus/ConfigurationMenu/ConfigurationListView.qml

@@ -23,15 +23,40 @@ Item
         }
     }
 
-    // This component will appear when there is no configurations (e.g. when loosing connection)
-    Label
+    // This component will appear when there is no configurations (e.g. when losing connection)
+    Item
     {
         width: parent.width
         visible: configurationList.model.length == 0
-        text: "Configuration list empty. Probably because of lost connection"  // TODO change this to a proper component
-        horizontalAlignment: Text.AlignHCenter
-        wrapMode: Text.WordWrap
-        renderType: Text.NativeRendering
+        height: label.height + 2 * UM.Theme.getSize("default_margin").height
+        anchors.top: parent.top
+        anchors.topMargin: UM.Theme.getSize("default_margin").height
+
+        UM.RecolorImage
+        {
+            id: icon
+
+            anchors.left: parent.left
+            anchors.verticalCenter: label.verticalCenter
+
+            source: UM.Theme.getIcon("warning")
+            color: UM.Theme.getColor("warning")
+            width: UM.Theme.getSize("section_icon").width
+            height: width
+        }
+
+        Label
+        {
+            id: label
+            anchors.left: icon.right
+            anchors.right: parent.right
+            anchors.leftMargin: UM.Theme.getSize("default_margin").width
+            text: catalog.i18nc("@label", "The configurations are not available because the printer is disconnected.")
+            color: UM.Theme.getColor("text")
+            font: UM.Theme.getFont("default")
+            renderType: Text.NativeRendering
+            wrapMode: Text.WordWrap
+        }
     }
 
     ScrollView

resources/qml/PrinterSelector/MachineSelector.qml

@@ -24,49 +24,24 @@ Cura.ExpandablePopup
         name: "cura"
     }
 
-    headerItem: Item
+    headerItem: Cura.IconWithText
     {
-        implicitHeight: icon.height
-
-        UM.RecolorImage
+        text: isNetworkPrinter ? Cura.MachineManager.activeMachineNetworkGroupName : Cura.MachineManager.activeMachineName
+        source:
         {
-            id: icon
-
-            anchors.left: parent.left
-            anchors.verticalCenter: parent.verticalCenter
-
-            source:
+            if (isNetworkPrinter)
             {
-                if (isNetworkPrinter)
+                if (machineSelector.outputDevice != null && machineSelector.outputDevice.clusterSize > 1)
                 {
-                    if (machineSelector.outputDevice != null && machineSelector.outputDevice.clusterSize > 1)
-                    {
-                        return UM.Theme.getIcon("printer_group")
-                    }
-                    return UM.Theme.getIcon("printer_single")
+                    return UM.Theme.getIcon("printer_group")
                 }
-                return ""
+                return UM.Theme.getIcon("printer_single")
             }
-            width: UM.Theme.getSize("machine_selector_icon").width
-            height: width
-
-            color: UM.Theme.getColor("machine_selector_printer_icon")
-            visible: source != ""
-        }
-
-        Label
-        {
-            id: label
-            anchors.left: icon.visible ? icon.right : parent.left
-            anchors.right: parent.right
-            anchors.leftMargin: UM.Theme.getSize("thin_margin").width
-            anchors.verticalCenter: icon.verticalCenter
-            text: isNetworkPrinter ? Cura.MachineManager.activeMachineNetworkGroupName : Cura.MachineManager.activeMachineName
-            elide: Text.ElideRight
-            color: UM.Theme.getColor("text")
-            font: UM.Theme.getFont("medium")
-            renderType: Text.NativeRendering
+            return ""
         }
+        font: UM.Theme.getFont("medium")
+        iconColor: UM.Theme.getColor("machine_selector_printer_icon")
+        iconSize: UM.Theme.getSize("machine_selector_icon").width
 
         UM.RecolorImage
         {

resources/themes/cura-light/theme.json

@@ -101,7 +101,7 @@
 
         "printer_type_label_background": [228, 228, 242, 255],
 
-        "text": [0, 0, 0, 255],
+        "text": [25, 25, 25, 255],
         "text_detail": [174, 174, 174, 128],
         "text_link": [50, 130, 255, 255],
         "text_inactive": [174, 174, 174, 255],