feedc0de/qt-creator
1
0
Fork 0
forked from qt-creator/qt-creator
Code Pull Requests Activity

QmlDesigner Gradient Preset Dialog UX improvements

Browse Source 
Tooltip, custom preset renaming improvements.

Change-Id: I9c8acf4542bb732c2912796946cc9548c9be7d0e
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
This commit is contained in:
Aleksei German
2019-09-11 12:59:24 +02:00
parent e9c0ba9997
commit 1273081224
1 changed files with 161 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetTabContent.qml
View File

@@ -31,6 +31,7 @@ import QtQuick.Dialogs 1.3
import HelperWidgets 2.0 import HelperWidgets 2.0
import QtQuickDesignerTheme 1.0 import QtQuickDesignerTheme 1.0
import QtQuick.Controls.Private 1.0 as PrivateControls
Rectangle { Rectangle {
@@ -45,9 +46,9 @@ Rectangle {
signal presetNameChanged(int id, string name) signal presetNameChanged(int id, string name)
signal deleteButtonClicked(int id) signal deleteButtonClicked(int id)
property int delegateWidth: 153; property real delegateWidth: 154;
property int delegateHeight: 173; property real delegateHeight: 178;
property int gridCellWidth: 160; property real gridCellWidth: 160;
ScrollView { ScrollView {
@@ -66,7 +67,7 @@ Rectangle {
property int gridColumns: width / tabBackground.gridCellWidth; property int gridColumns: width / tabBackground.gridCellWidth;
cellWidth: width / gridColumns cellWidth: width / gridColumns
cellHeight: 180 cellHeight: 185
Component { Component {
id: gradientDelegate id: gradientDelegate
@@ -74,12 +75,13 @@ Rectangle {
Rectangle { Rectangle {
id: backgroundCard id: backgroundCard
color: "#404040" color: "#404040"
clip: false clip: true
property real flexibleWidth: (gradientTable.width - gradientTable.cellWidth * gradientTable.gridColumns) / gradientTable.gridColumns property real flexibleWidth: (gradientTable.width - gradientTable.cellWidth * gradientTable.gridColumns) / gradientTable.gridColumns
property bool isSelected: false property bool isSelected: false
width: gradientTable.cellWidth + flexibleWidth - 8; height: tabBackground.delegateHeight width: gradientTable.cellWidth + flexibleWidth - 8
height: tabBackground.delegateHeight
radius: 16 radius: 16
MouseArea { MouseArea {
@@ -125,8 +127,6 @@ Rectangle {
PropertyChanges { PropertyChanges {
target: backgroundCard target: backgroundCard
color: "#606060" color: "#606060"
z: 5
clip: true
border.width: 1 border.width: 1
border.color: "#029de0" border.color: "#029de0"
} }
@@ -136,8 +136,6 @@ Rectangle {
PropertyChanges { PropertyChanges {
target: backgroundCard target: backgroundCard
color:"#029de0" color:"#029de0"
z: 4
clip: true
border.width: 1 border.width: 1
border.color: "#606060" border.color: "#606060"
} }
@@ -148,21 +146,22 @@ Rectangle {
{ {
target: backgroundCard target: backgroundCard
color: "#404040" color: "#404040"
scale: 1.0
border.width: 0 border.width: 0
} }
} }
] //states ] //states
ColumnLayout { ColumnLayout {
spacing: 2
anchors.fill: parent anchors.fill: parent
Rectangle { Rectangle {
width: 150; height: 150 width: 150; height: 150
id: gradientRect id: gradientRect
radius: 16 radius: 16
Layout.alignment: Qt.AlignHCenter | Qt.AlignTop Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter //was top
Layout.topMargin: 2 Layout.topMargin: 2
gradient: Gradient { gradient: Gradient {
id: showGr id: showGr
} }
@@ -184,54 +183,178 @@ Rectangle {
Rectangle { Rectangle {
id: removeItemRect id: removeItemRect
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 2 anchors.rightMargin: 5
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 2 anchors.topMargin: 5
height: 16 height: 16
width: 16 width: 16
visible: editableName && rectMouseArea.containsMouse visible: editableName && rectMouseArea.containsMouse
color: "#804682b4" color: "#804682b4"
MouseArea { MouseArea {
anchors.fill: parent; anchors.fill: parent;
onClicked: tabBackground.deleteButtonClicked(index); onClicked: tabBackground.deleteButtonClicked(index);
} }
Image { Image {
id: remoreItemImg
source: "image://icons/close" source: "image://icons/close"
fillMode: Image.PreserveAspectFit fillMode: Image.PreserveAspectFit
anchors.fill: parent; anchors.fill: parent;
Layout.alignment: Qt.AlignCenter Layout.alignment: Qt.AlignCenter
} } //image remove
} } //rectangle remove
} //rectangle gradient } //rectangle gradient
TextInput { Item {
id: presetNameBox id: presetNameBox
readOnly: !editableName Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
text: (presetName) Layout.preferredWidth: backgroundCard.width - 2
Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom Layout.preferredHeight: backgroundCard.height - gradientRect.height - 4
Layout.preferredWidth: backgroundCard.width Layout.bottomMargin: 4
Layout.topMargin: -5
padding: 5.0
topPadding: -2.0
horizontalAlignment: Text.AlignHCenter
wrapMode: Text.Wrap
color: "#ffffff"
activeFocusOnPress: true
onEditingFinished: tabBackground.presetNameChanged(index, text); property bool readOnly : true;
Keys.onPressed: { onReadOnlyChanged: {
if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) { if (!readOnly) {
event.accepted = true; nameInput.visible = true;
editingFinished(); nameInput.forceActiveFocus();
focus = false;
//have to select text like this, otherwise there is an issue with long names
nameInput.cursorPosition = 0;
nameInput.cursorPosition = nameInput.length;
nameInput.selectAll();
} }
} //Keys.onPressed } //onReadOnlyChanged
} //textInput
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
}
}
] //states
} //gradient name Item
} //columnLayout } //columnLayout
} //rectangle background } //rectangle background
} //component delegate } //component delegate