From 1273081224e38d393e74a7defadec98acd46df71 Mon Sep 17 00:00:00 2001 From: Aleksei German Date: Wed, 11 Sep 2019 12:59:24 +0200 Subject: QmlDesigner Gradient Preset Dialog UX improvements Tooltip, custom preset renaming improvements. Change-Id: I9c8acf4542bb732c2912796946cc9548c9be7d0e Reviewed-by: Thomas Hartmann --- .../HelperWidgets/GradientPresetTabContent.qml | 203 +++++++++++++++++---- 1 file changed, 163 insertions(+), 40 deletions(-) diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetTabContent.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetTabContent.qml index ded679b624..c955cd8bc6 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetTabContent.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetTabContent.qml @@ -31,6 +31,7 @@ import QtQuick.Dialogs 1.3 import HelperWidgets 2.0 import QtQuickDesignerTheme 1.0 +import QtQuick.Controls.Private 1.0 as PrivateControls Rectangle { @@ -45,9 +46,9 @@ Rectangle { signal presetNameChanged(int id, string name) signal deleteButtonClicked(int id) - property int delegateWidth: 153; - property int delegateHeight: 173; - property int gridCellWidth: 160; + property real delegateWidth: 154; + property real delegateHeight: 178; + property real gridCellWidth: 160; ScrollView { @@ -66,7 +67,7 @@ Rectangle { property int gridColumns: width / tabBackground.gridCellWidth; cellWidth: width / gridColumns - cellHeight: 180 + cellHeight: 185 Component { id: gradientDelegate @@ -74,12 +75,13 @@ Rectangle { Rectangle { id: backgroundCard color: "#404040" - clip: false + clip: true property real flexibleWidth: (gradientTable.width - gradientTable.cellWidth * gradientTable.gridColumns) / gradientTable.gridColumns property bool isSelected: false - width: gradientTable.cellWidth + flexibleWidth - 8; height: tabBackground.delegateHeight + width: gradientTable.cellWidth + flexibleWidth - 8 + height: tabBackground.delegateHeight radius: 16 MouseArea { @@ -125,8 +127,6 @@ Rectangle { PropertyChanges { target: backgroundCard color: "#606060" - z: 5 - clip: true border.width: 1 border.color: "#029de0" } @@ -136,8 +136,6 @@ Rectangle { PropertyChanges { target: backgroundCard color:"#029de0" - z: 4 - clip: true border.width: 1 border.color: "#606060" } @@ -148,21 +146,22 @@ Rectangle { { target: backgroundCard color: "#404040" - scale: 1.0 border.width: 0 } } ] //states ColumnLayout { + spacing: 2 anchors.fill: parent Rectangle { width: 150; height: 150 id: gradientRect radius: 16 - Layout.alignment: Qt.AlignHCenter | Qt.AlignTop + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter //was top Layout.topMargin: 2 + gradient: Gradient { id: showGr } @@ -184,54 +183,178 @@ Rectangle { Rectangle { id: removeItemRect anchors.right: parent.right - anchors.rightMargin: 2 + anchors.rightMargin: 5 anchors.top: parent.top - anchors.topMargin: 2 + anchors.topMargin: 5 height: 16 width: 16 visible: editableName && rectMouseArea.containsMouse color: "#804682b4" - MouseArea { anchors.fill: parent; onClicked: tabBackground.deleteButtonClicked(index); } Image { - id: remoreItemImg source: "image://icons/close" fillMode: Image.PreserveAspectFit anchors.fill: parent; Layout.alignment: Qt.AlignCenter - } - } + } //image remove + } //rectangle remove } //rectangle gradient - TextInput { + Item { id: presetNameBox - readOnly: !editableName - text: (presetName) - Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom - Layout.preferredWidth: backgroundCard.width - Layout.topMargin: -5 - padding: 5.0 - topPadding: -2.0 - horizontalAlignment: Text.AlignHCenter - wrapMode: Text.Wrap - color: "#ffffff" - activeFocusOnPress: true - - onEditingFinished: tabBackground.presetNameChanged(index, text); - - Keys.onPressed: { - if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) { - event.accepted = true; - editingFinished(); - focus = false; + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter + Layout.preferredWidth: backgroundCard.width - 2 + Layout.preferredHeight: backgroundCard.height - gradientRect.height - 4 + Layout.bottomMargin: 4 + + property bool readOnly : true; + + onReadOnlyChanged: { + if (!readOnly) { + nameInput.visible = true; + nameInput.forceActiveFocus(); + + //have to select text like this, otherwise there is an issue with long names + nameInput.cursorPosition = 0; + nameInput.cursorPosition = nameInput.length; + nameInput.selectAll(); + } + } //onReadOnlyChanged + + Rectangle { + id: nameBackgroundColor + enabled: tabBackground.editableName + color: "transparent" + radius: 16 + visible: true + anchors.fill: parent + } //rectangle + + MouseArea { + id: nameMouseArea + visible: tabBackground.editableName + hoverEnabled: true + anchors.fill: parent + + onClicked: presetNameBox.state = "Clicked"; + + onEntered: { + if (presetNameBox.state != "Clicked") + { + presetNameBox.state = "Hover"; + } + } + + onExited: { + if (presetNameBox.state != "Clicked") + { + presetNameBox.state = "Normal"; + } + PrivateControls.Tooltip.hideText() + } + + Timer { + interval: 1000 + running: nameMouseArea.containsMouse && presetNameBox.readOnly + onTriggered: PrivateControls.Tooltip.showText(nameMouseArea, Qt.point(nameMouseArea.mouseX, nameMouseArea.mouseY), presetName) + } + + onCanceled: Tooltip.hideText() + + } //mouseArea + + Text { + id: nameText + visible: presetNameBox.readOnly + text: presetName + anchors.fill: parent + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + color: "#ffffff" + elide: Text.ElideMiddle + maximumLineCount: 1 + } //text + + + TextInput { + id: nameInput + visible: !presetNameBox.readOnly + text: presetName + anchors.fill: parent + anchors.leftMargin: 5 + anchors.rightMargin: 5 + horizontalAlignment: TextInput.AlignHCenter + verticalAlignment: TextInput.AlignVCenter + color: "#ffffff" + selectionColor: "#029de0" + activeFocusOnPress: true + wrapMode: TextInput.NoWrap + clip: true + + onEditingFinished: { + nameText.text = text + tabBackground.presetNameChanged(index, text); + presetNameBox.state = "Normal"; + } + + Keys.onPressed: { + if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) { + event.accepted = true; + editingFinished(); + focus = false; + } //if + } //Keys.onPressed + } //textInput + + states: [ + State { + name: "Normal" + PropertyChanges { + target: nameBackgroundColor + color: "transparent" + border.width: 0 + } + PropertyChanges { + target: presetNameBox + readOnly: true + } + }, + State { + name: "Hover" + PropertyChanges { + target: nameBackgroundColor + color: "#606060" + border.width: 0 + } + PropertyChanges { + target: presetNameBox + readOnly: true + } + }, + State { + name: "Clicked" + PropertyChanges { + target: nameBackgroundColor + color: "#606060" + border.color: "#029de0" + border.width: 1 + } + PropertyChanges { + target: presetNameBox + readOnly: false + } + PropertyChanges { + target: nameInput + visible: true + } } - } //Keys.onPressed - } //textInput + ] //states + } //gradient name Item } //columnLayout } //rectangle background } //component delegate -- cgit v1.2.1