Add a disabled state to the expandable components

In this case, when the component is disabled, there is an optional message that will show. It works for instance when loading a gcode and the print setup panel has to be disabled.

Contributes to CURA-5941.

resources/qml/ExpandableComponent.qml

@@ -37,6 +37,9 @@ Item
 
     property alias enabled: mouseArea.enabled
 
+    // Text to show when this component is disabled
+    property alias disabledText: disabledLabel.text
+
     // Defines the alignment of the content with respect of the headerItem, by default to the right
     property int contentAlignment: ExpandableComponent.ContentAlignment.AlignRight
 
@@ -85,7 +88,7 @@ Item
     {
         target: background
         property: "color"
-        value: expanded ? headerActiveColor : headerBackgroundColor
+        value: enabled ? (expanded ? headerActiveColor : headerBackgroundColor) : UM.Theme.getColor("disabled")
     }
 
     implicitHeight: 100 * screenScaleFactor
@@ -96,36 +99,55 @@ Item
         id: background
         property real padding: UM.Theme.getSize("default_margin").width
 
-        color: expanded ? headerActiveColor : headerBackgroundColor
+        color: base.enabled ? (base.expanded ? headerActiveColor : headerBackgroundColor) : UM.Theme.getColor("disabled")
         anchors.fill: parent
 
-        Loader
+        Label
         {
-            id: headerItemLoader
+            id: disabledLabel
-            anchors
+            visible: !base.enabled
-            {
+            leftPadding: background.padding
-                left: parent.left
+            text: "This component is disabled"
-                right: collapseButton.visible ? collapseButton.left : parent.right
+            font: UM.Theme.getFont("default")
-                top: parent.top
+            renderType: Text.NativeRendering
-                bottom: parent.bottom
+            verticalAlignment: Text.AlignVCenter
-                margins: background.padding
+            color: UM.Theme.getColor("text")
-            }
+            height: parent.height
         }
 
-        UM.RecolorImage
+        Item
         {
-            id: collapseButton
+            anchors.fill: parent
-            anchors
+            visible: base.enabled
+
+            Loader
             {
-                right: parent.right
+                id: headerItemLoader
-                verticalCenter: parent.verticalCenter
+                anchors
-                margins: background.padding
+                {
+                    left: parent.left
+                    right: collapseButton.visible ? collapseButton.left : parent.right
+                    top: parent.top
+                    bottom: parent.bottom
+                    margins: background.padding
+                }
+            }
+
+            UM.RecolorImage
+            {
+                id: collapseButton
+                anchors
+                {
+                    right: parent.right
+                    verticalCenter: parent.verticalCenter
+                    margins: background.padding
+                }
+                source: UM.Theme.getIcon("pencil")
+                visible: source != ""
+                width: UM.Theme.getSize("standard_arrow").width
+                height: UM.Theme.getSize("standard_arrow").height
+                color: UM.Theme.getColor("small_button_text")
             }
-            source: UM.Theme.getIcon("pencil")
-            visible: source != "" && base.enabled
-            width: UM.Theme.getSize("standard_arrow").width
-            height: UM.Theme.getSize("standard_arrow").height
-            color: UM.Theme.getColor("small_button_text")
         }
 
         MouseArea
@@ -135,7 +157,7 @@ Item
             onClicked: toggleContent()
             hoverEnabled: true
             onEntered: background.color = headerHoverColor
-            onExited: background.color = expanded ? headerActiveColor : headerBackgroundColor
+            onExited: background.color = base.enabled ? (base.expanded ? headerActiveColor : headerBackgroundColor) : UM.Theme.getColor("disabled")
         }
     }
 

resources/qml/ExpandablePopup.qml

@@ -37,6 +37,9 @@ Item
 
     property alias enabled: mouseArea.enabled
 
+    // Text to show when this component is disabled
+    property alias disabledText: disabledLabel.text
+
     // Defines the alignment of the content with respect of the headerItem, by default to the right
     property int contentAlignment: ExpandablePopup.ContentAlignment.AlignRight
 
@@ -86,6 +89,14 @@ Item
         }
     }
 
+    // Add this binding since the background color is not updated otherwise
+    Binding
+    {
+        target: background
+        property: "color"
+        value: enabled ? headerBackgroundColor : UM.Theme.getColor("disabled")
+    }
+
     implicitHeight: 100 * screenScaleFactor
     implicitWidth: 400 * screenScaleFactor
 
@@ -94,47 +105,66 @@ Item
         id: background
         property real padding: UM.Theme.getSize("default_margin").width
 
-        color: headerBackgroundColor
+        color: base.enabled ? headerBackgroundColor : UM.Theme.getColor("disabled")
         anchors.fill: parent
 
-        Loader
+        Label
         {
-            id: headerItemLoader
+            id: disabledLabel
-            anchors
+            visible: !base.enabled
-            {
+            leftPadding: background.padding
-                left: parent.left
+            text: "This component is disabled"
-                right: collapseButton.visible ? collapseButton.left : parent.right
+            font: UM.Theme.getFont("default")
-                top: parent.top
+            renderType: Text.NativeRendering
-                bottom: parent.bottom
+            verticalAlignment: Text.AlignVCenter
-                margins: background.padding
+            color: UM.Theme.getColor("text")
-            }
+            height: parent.height
         }
 
-        // A highlight that is shown when the content is expanded
+        Item
-        Rectangle
         {
-            id: expandedHighlight
+            anchors.fill: parent
-            width: parent.width
+            visible: base.enabled
-            height: UM.Theme.getSize("thick_lining").height
-            color: UM.Theme.getColor("primary")
-            visible: expanded
-            anchors.bottom: parent.bottom
-        }
 
-        UM.RecolorImage
+            Loader
-        {
-            id: collapseButton
-            anchors
             {
-                right: parent.right
+                id: headerItemLoader
-                verticalCenter: parent.verticalCenter
+                anchors
-                margins: background.padding
+                {
+                    left: parent.left
+                    right: collapseButton.visible ? collapseButton.left : parent.right
+                    top: parent.top
+                    bottom: parent.bottom
+                    margins: background.padding
+                }
+            }
+
+            // A highlight that is shown when the content is expanded
+            Rectangle
+            {
+                id: expandedHighlight
+                width: parent.width
+                height: UM.Theme.getSize("thick_lining").height
+                color: UM.Theme.getColor("primary")
+                visible: expanded
+                anchors.bottom: parent.bottom
+            }
+
+            UM.RecolorImage
+            {
+                id: collapseButton
+                anchors
+                {
+                    right: parent.right
+                    verticalCenter: parent.verticalCenter
+                    margins: background.padding
+                }
+                source: expanded ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_left")
+                visible: source != ""
+                width: UM.Theme.getSize("standard_arrow").width
+                height: UM.Theme.getSize("standard_arrow").height
+                color: UM.Theme.getColor("small_button_text")
             }
-            source: expanded ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_left")
-            visible: source != "" && base.enabled
-            width: UM.Theme.getSize("standard_arrow").width
-            height: UM.Theme.getSize("standard_arrow").height
-            color: UM.Theme.getColor("small_button_text")
         }
 
         MouseArea
@@ -144,7 +174,7 @@ Item
             onClicked: toggleContent()
             hoverEnabled: true
             onEntered: background.color = headerHoverColor
-            onExited: background.color = headerBackgroundColor
+            onExited: background.color = base.enabled ? headerBackgroundColor : UM.Theme.getColor("disabled")
         }
     }
 

resources/qml/PrintSetupSelector/PrintSetupSelector.qml

@@ -16,6 +16,7 @@ Cura.ExpandableComponent
     contentPadding: UM.Theme.getSize("default_lining").width
     contentHeaderTitle: catalog.i18nc("@label", "Print settings")
     enabled: !preSlicedData
+    disabledText: catalog.i18nc("@label shown when we load a Gcode file", "Print setup disabled. G code file can not be modified."
 
     UM.I18nCatalog
     {