From 3f97f83c473dd015353e7ca82003042cd2d11308 Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Mon, 10 Dec 2018 14:17:56 +0100 Subject: [PATCH] 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 | 70 +++++++++----- resources/qml/ExpandablePopup.qml | 96 ++++++++++++------- .../PrintSetupSelector/PrintSetupSelector.qml | 1 + 3 files changed, 110 insertions(+), 57 deletions(-) diff --git a/resources/qml/ExpandableComponent.qml b/resources/qml/ExpandableComponent.qml index 3c898caeb8..55271d99c3 100644 --- a/resources/qml/ExpandableComponent.qml +++ b/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 - anchors - { - left: parent.left - right: collapseButton.visible ? collapseButton.left : parent.right - top: parent.top - bottom: parent.bottom - margins: background.padding - } + id: disabledLabel + visible: !base.enabled + leftPadding: background.padding + text: "This component is disabled" + font: UM.Theme.getFont("default") + renderType: Text.NativeRendering + verticalAlignment: Text.AlignVCenter + color: UM.Theme.getColor("text") + height: parent.height } - UM.RecolorImage + Item { - id: collapseButton - anchors + anchors.fill: parent + visible: base.enabled + + Loader { - right: parent.right - verticalCenter: parent.verticalCenter - margins: background.padding + id: headerItemLoader + anchors + { + 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") } } diff --git a/resources/qml/ExpandablePopup.qml b/resources/qml/ExpandablePopup.qml index 475f7f9f59..75f718abf5 100644 --- a/resources/qml/ExpandablePopup.qml +++ b/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 - anchors - { - left: parent.left - right: collapseButton.visible ? collapseButton.left : parent.right - top: parent.top - bottom: parent.bottom - margins: background.padding - } + id: disabledLabel + visible: !base.enabled + leftPadding: background.padding + text: "This component is disabled" + font: UM.Theme.getFont("default") + renderType: Text.NativeRendering + verticalAlignment: Text.AlignVCenter + color: UM.Theme.getColor("text") + height: parent.height } - // A highlight that is shown when the content is expanded - Rectangle + Item { - id: expandedHighlight - width: parent.width - height: UM.Theme.getSize("thick_lining").height - color: UM.Theme.getColor("primary") - visible: expanded - anchors.bottom: parent.bottom - } + anchors.fill: parent + visible: base.enabled - UM.RecolorImage - { - id: collapseButton - anchors + Loader { - right: parent.right - verticalCenter: parent.verticalCenter - margins: background.padding + id: headerItemLoader + anchors + { + 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") } } diff --git a/resources/qml/PrintSetupSelector/PrintSetupSelector.qml b/resources/qml/PrintSetupSelector/PrintSetupSelector.qml index 01886a5ea5..fe642bd3c1 100644 --- a/resources/qml/PrintSetupSelector/PrintSetupSelector.qml +++ b/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 {