From 1fb1e829eea0e877f7e907c807203e81b45fef21 Mon Sep 17 00:00:00 2001 From: Henning Gruendl Date: Tue, 14 Jul 2020 12:47:18 +0200 Subject: [PATCH] QmlDesigner: Replace alias icon with font icon Task-number: QDS-2559 Change-Id: Ibcc4c6565eff6a5c5f7011fbf39af2277da9eec0 Reviewed-by: Thomas Hartmann --- .../QtQuick/ItemPane.qml | 57 ++++++++++++++----- .../QtQuick/QtObjectPane.qml | 52 ++++++++++++++--- 2 files changed, 87 insertions(+), 22 deletions(-) diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ItemPane.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ItemPane.qml index db877b65cd7..5f989a672f1 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ItemPane.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ItemPane.qml @@ -127,6 +127,7 @@ Rectangle { } SecondColumnLayout { + spacing: 2 LineEdit { id: lineEdit @@ -139,29 +140,55 @@ Rectangle { showExtendedFunctionButton: false enabled: !modelNodeBackend.multiSelection } - // workaround: without this item the lineedit does not shrink to the - // right size after resizing to a wider width - Image { - visible: !modelNodeBackend.multiSelection - Layout.preferredWidth: 20 - Layout.preferredHeight: 20 - horizontalAlignment: Image.AlignHCenter - verticalAlignment: Image.AlignVCenter - source: hasAliasExport ? "image://icons/alias-export-checked" : "image://icons/alias-export-unchecked" + Rectangle { + id: aliasIndicator + color: "transparent" + border.color: "transparent" + implicitWidth: StudioTheme.Values.height + implicitHeight: StudioTheme.Values.height + z: 10 + + Label { + id: aliasIndicatorIcon + enabled: !modelNodeBackend.multiSelection + anchors.fill: parent + text: { + if (!aliasIndicatorIcon.enabled) + return StudioTheme.Constants.idAliasOff + + return hasAliasExport ? StudioTheme.Constants.idAliasOn : StudioTheme.Constants.idAliasOff + } + color: { + if (!aliasIndicatorIcon.enabled) + return StudioTheme.Values.themeTextColorDisabled + + return hasAliasExport ? StudioTheme.Values.themeInteraction : StudioTheme.Values.themeTextColor + } + font.family: StudioTheme.Constants.iconFont.family + font.pixelSize: Math.round(16 * StudioTheme.Values.scaleFactor) + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + states: [ + State { + name: "hovered" + when: toolTipArea.containsMouse && aliasIndicatorIcon.enabled + PropertyChanges { + target: aliasIndicatorIcon + scale: 1.2 + } + } + ] + } + ToolTipArea { + id: toolTipArea enabled: !modelNodeBackend.multiSelection anchors.fill: parent onClicked: toogleExportAlias() tooltip: qsTr("Toggles whether this item is exported as an alias property of the root item.") } } - Item { //dummy object to preserve layout in case of multiselection - Layout.preferredWidth: 20 - Layout.preferredHeight: 20 - enabled: modelNodeBackend.multiSelection - visible: enabled - } } Label { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/QtObjectPane.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/QtObjectPane.qml index 5b3a641f4c0..3d8678e1121 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/QtObjectPane.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/QtObjectPane.qml @@ -27,6 +27,7 @@ import QtQuick 2.15 import QtQuick.Layouts 1.0 import QtQuickDesignerTheme 1.0 import HelperWidgets 2.0 +import StudioTheme 1.0 as StudioTheme Rectangle { id: itemPane @@ -104,8 +105,8 @@ Rectangle { } Item { - Layout.preferredWidth: 16 - Layout.preferredHeight: 16 + Layout.preferredWidth: 20 + Layout.preferredHeight: 20 } } @@ -114,6 +115,7 @@ Rectangle { } SecondColumnLayout { + spacing: 2 LineEdit { id: lineEdit @@ -127,12 +129,48 @@ Rectangle { enabled: !modelNodeBackend.multiSelection } - Image { - visible: !modelNodeBackend.multiSelection - Layout.preferredWidth: 16 - Layout.preferredHeight: 16 - source: hasAliasExport ? "image://icons/alias-export-checked" : "image://icons/alias-export-unchecked" + Rectangle { + id: aliasIndicator + color: "transparent" + border.color: "transparent" + implicitWidth: StudioTheme.Values.height + implicitHeight: StudioTheme.Values.height + z: 10 + + Label { + id: aliasIndicatorIcon + enabled: !modelNodeBackend.multiSelection + anchors.fill: parent + text: { + if (!aliasIndicatorIcon.enabled) + return StudioTheme.Constants.idAliasOff + + return hasAliasExport ? StudioTheme.Constants.idAliasOn : StudioTheme.Constants.idAliasOff + } + color: { + if (!aliasIndicatorIcon.enabled) + return StudioTheme.Values.themeTextColorDisabled + + return hasAliasExport ? StudioTheme.Values.themeInteraction : StudioTheme.Values.themeTextColor + } + font.family: StudioTheme.Constants.iconFont.family + font.pixelSize: Math.round(16 * StudioTheme.Values.scaleFactor) + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + states: [ + State { + name: "hovered" + when: toolTipArea.containsMouse && aliasIndicatorIcon.enabled + PropertyChanges { + target: aliasIndicatorIcon + scale: 1.2 + } + } + ] + } + ToolTipArea { + id: toolTipArea enabled: !modelNodeBackend.multiSelection anchors.fill: parent onClicked: toogleExportAlias()