QmlDesigner: Replace alias icon with font icon

Task-number: QDS-2559
Change-Id: Ibcc4c6565eff6a5c5f7011fbf39af2277da9eec0
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
This commit is contained in:
Henning Gruendl
2020-07-14 12:47:18 +02:00
committed by Henning Gründl
parent bb79a7fb90
commit 1fb1e829ee
2 changed files with 87 additions and 22 deletions

View File

@@ -127,6 +127,7 @@ Rectangle {
} }
SecondColumnLayout { SecondColumnLayout {
spacing: 2
LineEdit { LineEdit {
id: lineEdit id: lineEdit
@@ -139,29 +140,55 @@ Rectangle {
showExtendedFunctionButton: false showExtendedFunctionButton: false
enabled: !modelNodeBackend.multiSelection enabled: !modelNodeBackend.multiSelection
} }
// workaround: without this item the lineedit does not shrink to the
// right size after resizing to a wider width
Image { Rectangle {
visible: !modelNodeBackend.multiSelection id: aliasIndicator
Layout.preferredWidth: 20 color: "transparent"
Layout.preferredHeight: 20 border.color: "transparent"
horizontalAlignment: Image.AlignHCenter implicitWidth: StudioTheme.Values.height
verticalAlignment: Image.AlignVCenter implicitHeight: StudioTheme.Values.height
source: hasAliasExport ? "image://icons/alias-export-checked" : "image://icons/alias-export-unchecked" 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 { ToolTipArea {
id: toolTipArea
enabled: !modelNodeBackend.multiSelection enabled: !modelNodeBackend.multiSelection
anchors.fill: parent anchors.fill: parent
onClicked: toogleExportAlias() onClicked: toogleExportAlias()
tooltip: qsTr("Toggles whether this item is exported as an alias property of the root item.") 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 { Label {

View File

@@ -27,6 +27,7 @@ import QtQuick 2.15
import QtQuick.Layouts 1.0 import QtQuick.Layouts 1.0
import QtQuickDesignerTheme 1.0 import QtQuickDesignerTheme 1.0
import HelperWidgets 2.0 import HelperWidgets 2.0
import StudioTheme 1.0 as StudioTheme
Rectangle { Rectangle {
id: itemPane id: itemPane
@@ -104,8 +105,8 @@ Rectangle {
} }
Item { Item {
Layout.preferredWidth: 16 Layout.preferredWidth: 20
Layout.preferredHeight: 16 Layout.preferredHeight: 20
} }
} }
@@ -114,6 +115,7 @@ Rectangle {
} }
SecondColumnLayout { SecondColumnLayout {
spacing: 2
LineEdit { LineEdit {
id: lineEdit id: lineEdit
@@ -127,12 +129,48 @@ Rectangle {
enabled: !modelNodeBackend.multiSelection enabled: !modelNodeBackend.multiSelection
} }
Image { Rectangle {
visible: !modelNodeBackend.multiSelection id: aliasIndicator
Layout.preferredWidth: 16 color: "transparent"
Layout.preferredHeight: 16 border.color: "transparent"
source: hasAliasExport ? "image://icons/alias-export-checked" : "image://icons/alias-export-unchecked" 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 { ToolTipArea {
id: toolTipArea
enabled: !modelNodeBackend.multiSelection enabled: !modelNodeBackend.multiSelection
anchors.fill: parent anchors.fill: parent
onClicked: toogleExportAlias() onClicked: toogleExportAlias()