QmlDesigner: GradientPreset cleanup

 - Remove Controls 1 imports
 - Rework states
 - Utilize theme values

Change-Id: I2d7b818f450387ad0325aae41aac7f8c1b30ea5f
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
Reviewed-by: Aleksei German <aleksei.german@qt.io>

2 files changed, 153 insertions, 189 deletions

diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetList.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetList.qml
index 6af4f47c38..d756b53fe6 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetList.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetList.qml
@@ -25,42 +25,43 @@
 
 import QtQuick 2.11
 import QtQuick.Layouts 1.12
-import QtQuick.Controls 2.5
 import QtQuick.Dialogs 1.3
 
 import HelperWidgets 2.0
 import QtQuickDesignerTheme 1.0
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
 
 Dialog {
     id: dialogWindow
     width: 1200
     height: 650
-    title: "Gradient Picker"
+    title: qsTr("Gradient Picker")
 
-    signal saved;
-    property alias gradientData: gradientPickerData;
+    signal saved
+    property alias gradientData: gradientPickerData
 
 
     QtObject {
         id: gradientPickerData
-        property var stops;
-        property var colors;
-        property int stopsCount;
-        property int presetID;
-        property int presetType; //default(0) or custom(1)
-        property Item selectedItem;
+        property var stops
+        property var colors
+        property int stopsCount
+        property int presetID
+        property int presetType // default(0) or custom(1)
+        property Item selectedItem
     }
 
     function addGradient(stopsPositions, stopsColors, stopsCount) {
-        customPresetListModel.addGradient(stopsPositions, stopsColors, stopsCount);
+        customPresetListModel.addGradient(stopsPositions, stopsColors, stopsCount)
     }
 
     function updatePresets() {
-        customPresetListModel.readPresets();
+        customPresetListModel.readPresets()
     }
 
-    GradientPresetDefaultListModel { id: defaultPresetListModel; }
-    GradientPresetCustomListModel { id: customPresetListModel; }
+    GradientPresetDefaultListModel { id: defaultPresetListModel }
+    GradientPresetCustomListModel { id: customPresetListModel }
 
     standardButtons: Dialog.NoButton
 
@@ -68,27 +69,30 @@ Dialog {
         anchors.fill: parent
         anchors.margins: -12
         anchors.bottomMargin: -70
-        color: "#363636"
+        color: StudioTheme.Values.themeColumnBackground
+
         ColumnLayout {
             anchors.fill: parent
             anchors.margins: 13
             anchors.bottomMargin: 71
+
             TabView {
                 id: presetTabView
                 Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
                 Layout.fillHeight: true
                 Layout.fillWidth: true
+
                 Tab {
                     title: qsTr("System Presets")
-                    anchors.fill:parent
+                    anchors.fill: parent
 
                     GradientPresetTabContent {
                         id: defaultTabContent
                         viewModel: defaultPresetListModel
                         editableName: false
                     }
+                }
 
-                } //tab default
                 Tab {
                     title: qsTr("User Presets")
                     anchors.fill: parent
@@ -97,11 +101,12 @@ Dialog {
                         id: customTabContent
                         viewModel: customPresetListModel
                         editableName: true
-                        onPresetNameChanged: customPresetListModel.changePresetName(id, name);
-                        property int deleteId;
+                        onPresetNameChanged: customPresetListModel.changePresetName(id, name)
+
+                        property int deleteId
 
                         onDeleteButtonClicked: {
-                            deleteId = id;
+                            deleteId = id
                             deleteDialog.open()
                         }
 
@@ -112,11 +117,12 @@ Dialog {
                             standardButtons: Dialog.No | Dialog.Yes
                             title: qsTr("Delete preset?")
                             text: qsTr("Are you sure you want to delete this preset?")
-                            onAccepted: customPresetListModel.deletePreset(customTabContent.deleteId);
+                            onAccepted: customPresetListModel.deletePreset(customTabContent.deleteId)
                         }
                     }
-                } //tab custom
-            } //tabview
+                }
+            }
+
             RowLayout {
                 Layout.alignment: Qt.AlignBottom | Qt.AlignRight
                 Layout.topMargin: 5
@@ -124,7 +130,7 @@ Dialog {
                 Button { id: buttonClose; text: qsTr("Close"); onClicked: { dialogWindow.reject(); } }
                 Button { id: buttonSave; text: qsTr("Save"); onClicked: { dialogWindow.saved(); } }
                 Button { id: buttonApply; text: qsTr("Apply"); onClicked: { dialogWindow.apply(); } }
-            } //RowLayout
-        } //ColumnLayout
-    } //rectangle
-} //dialog
+            }
+        }
+    }
+}
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetTabContent.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetTabContent.qml
index c955cd8bc6..f26064dd21 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetTabContent.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetTabContent.qml
@@ -25,31 +25,28 @@
 
 import QtQuick 2.11
 import QtQuick.Layouts 1.12
-import QtQuick.Controls 2.5
-import QtQuick.Controls.Styles 1.4
 import QtQuick.Dialogs 1.3
 
 import HelperWidgets 2.0
 import QtQuickDesignerTheme 1.0
-import QtQuick.Controls.Private 1.0 as PrivateControls
-
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
 
 Rectangle {
     id: tabBackground
     width: parent.width
     height: parent.height
-    color: "#242424"
+    color: StudioTheme.Values.themeControlBackground
     anchors.fill: parent
 
-    property alias viewModel : gradientTable.model;
-    property bool editableName : false;
+    property alias viewModel: gradientTable.model
+    property bool editableName: false
     signal presetNameChanged(int id, string name)
     signal deleteButtonClicked(int id)
 
-    property real delegateWidth: 154;
-    property real delegateHeight: 178;
-    property real gridCellWidth: 160;
-
+    property real delegateWidth: 154
+    property real delegateHeight: 178
+    property real gridCellWidth: 160
 
     ScrollView {
         Layout.fillWidth: true
@@ -74,7 +71,7 @@ Rectangle {
 
                 Rectangle {
                     id: backgroundCard
-                    color: "#404040"
+                    color: StudioTheme.Values.themeControlOutline
                     clip: true
 
                     property real flexibleWidth: (gradientTable.width - gradientTable.cellWidth * gradientTable.gridColumns) / gradientTable.gridColumns
@@ -84,82 +81,78 @@ Rectangle {
                     height: tabBackground.delegateHeight
                     radius: 16
 
+                    function selectPreset(index) {
+                        gradientTable.currentIndex = index
+                        gradientData.stops = stopsPosList
+                        gradientData.colors = stopsColorList
+                        gradientData.stopsCount = stopListSize
+                        gradientData.presetID = presetID
+                        gradientData.presetType = presetTabView.currentIndex
+
+                        if (gradientData.selectedItem != null)
+                            gradientData.selectedItem.isSelected = false
+
+                        backgroundCard.isSelected = true
+                        gradientData.selectedItem = backgroundCard
+                    }
+
                     MouseArea {
                         id: rectMouseArea
                         anchors.fill: parent
                         hoverEnabled: true
                         onClicked: {
-                            gradientTable.currentIndex = index;
-                            gradientData.stops = stopsPosList;
-                            gradientData.colors = stopsColorList;
-                            gradientData.stopsCount = stopListSize;
-                            gradientData.presetID = presetID;
-                            gradientData.presetType = presetTabView.currentIndex
-
-                            if (gradientData.selectedItem != null)
-                                gradientData.selectedItem.isSelected = false
-
-                            backgroundCard.isSelected = true
-                            gradientData.selectedItem = backgroundCard
+                            presetNameBox.edit = false
+                            nameInput.focus = false
+                            backgroundCard.selectPreset(index)
                         }
-                        onEntered: {
-                            if (backgroundCard.state != "CLICKED") {
-                                backgroundCard.state = "HOVER";
-                            }
-                        }
-                        onExited: {
-                            if (backgroundCard.state != "CLICKED") {
-                                backgroundCard.state = "USUAL";
-                            }
-                        }
-                    } //mouseArea
-
-                    onIsSelectedChanged: {
-                        if (isSelected)
-                            backgroundCard.state = "CLICKED"
-                        else
-                            backgroundCard.state = "USUAL"
                     }
 
                     states: [
                         State {
-                            name: "HOVER"
+                            name: "default"
+                            when: !(rectMouseArea.containsMouse || removeButton.hovered ||
+                                  (nameMouseArea.containsMouse && !tabBackground.editableName)) &&
+                                  !backgroundCard.isSelected
                             PropertyChanges {
                                 target: backgroundCard
-                                color: "#606060"
-                                border.width: 1
-                                border.color: "#029de0"
+                                color: StudioTheme.Values.themeControlOutline
+                                border.width: 0
                             }
                         },
                         State {
-                            name: "CLICKED"
+                            name: "hovered"
+                            when: (rectMouseArea.containsMouse || removeButton.hovered ||
+                                  (nameMouseArea.containsMouse && !tabBackground.editableName)) &&
+                                  !backgroundCard.isSelected
                             PropertyChanges {
                                 target: backgroundCard
-                                color:"#029de0"
+                                color: StudioTheme.Values.themeControlBackgroundPressed
                                 border.width: 1
-                                border.color: "#606060"
+                                border.color: StudioTheme.Values.themeInteraction
                             }
                         },
                         State {
-                            name: "USUAL"
-                            PropertyChanges
-                            {
+                            name: "selected"
+                            when: backgroundCard.isSelected
+                            PropertyChanges {
                                 target: backgroundCard
-                                color: "#404040"
-                                border.width: 0
+                                color:StudioTheme.Values.themeInteraction
+                                border.width: 1
+                                border.color: StudioTheme.Values.themeControlBackgroundPressed
                             }
                         }
-                    ] //states
+                    ]
 
                     ColumnLayout {
                         spacing: 2
                         anchors.fill: parent
 
                         Rectangle {
-                            width: 150; height: 150
                             id: gradientRect
+                            width: 150
+                            height: 150
                             radius: 16
-                            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter //was top
+                            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                             Layout.topMargin: 2
 
                             gradient: Gradient {
@@ -174,36 +167,26 @@ Rectangle {
                             Component.onCompleted: {
                                 var stopsAmount = stopListSize;
                                 var newStops = [];
-                                for (var i = 0; i < stopsAmount; i++ ) {
+                                for (var i = 0; i < stopsAmount; i++) {
                                     newStops.push( stopComponent.createObject(showGr, { "position": stopsPosList[i], "color": stopsColorList[i] }) );
                                 }
                                 showGr.stops = newStops;
                             }
 
-                            Rectangle {
-                                id: removeItemRect
+                            AbstractButton {
+                                id: removeButton
+                                visible: editableName && (rectMouseArea.containsMouse || removeButton.hovered)
+                                backgroundRadius: StudioTheme.Values.smallRectWidth
                                 anchors.right: parent.right
                                 anchors.rightMargin: 5
                                 anchors.top: parent.top
                                 anchors.topMargin: 5
-                                height: 16
-                                width: 16
-                                visible: editableName && rectMouseArea.containsMouse
-                                color: "#804682b4"
-
-                                MouseArea {
-                                    anchors.fill: parent;
-                                    onClicked: tabBackground.deleteButtonClicked(index);
-                                }
-
-                                Image {
-                                    source: "image://icons/close"
-                                    fillMode: Image.PreserveAspectFit
-                                    anchors.fill: parent;
-                                    Layout.alignment: Qt.AlignCenter
-                                } //image remove
-                            } //rectangle remove
-                        } //rectangle gradient
+                                width: Math.round(StudioTheme.Values.smallRectWidth)
+                                height: Math.round(StudioTheme.Values.smallRectWidth)
+                                buttonIcon: StudioTheme.Constants.closeCross
+                                onClicked: tabBackground.deleteButtonClicked(index)
+                            }
+                        }
 
                         Item {
                             id: presetNameBox
@@ -212,19 +195,7 @@ Rectangle {
                             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
+                            property bool edit: false
 
                             Rectangle {
                                 id: nameBackgroundColor
@@ -233,131 +204,118 @@ Rectangle {
                                 radius: 16
                                 visible: true
                                 anchors.fill: parent
-                            } //rectangle
+                            }
 
-                            MouseArea {
+                            ToolTipArea {
                                 id: nameMouseArea
-                                visible: tabBackground.editableName
-                                hoverEnabled: true
                                 anchors.fill: parent
+                                tooltip: nameText.text
+                                propagateComposedEvents: true
 
-                                onClicked: presetNameBox.state = "Clicked";
-
-                                onEntered: {
-                                    if (presetNameBox.state != "Clicked")
-                                    {
-                                        presetNameBox.state = "Hover";
+                                onClicked: {
+                                    if (!tabBackground.editableName) {
+                                        backgroundCard.selectPreset(index)
+                                        return
                                     }
-                                }
 
-                                onExited: {
-                                    if (presetNameBox.state != "Clicked")
-                                    {
-                                        presetNameBox.state = "Normal";
-                                    }
-                                    PrivateControls.Tooltip.hideText()
+                                    presetNameBox.edit = 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()
                                 }
-
-                                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"
+                                color: StudioTheme.Values.themeTextColor
                                 elide: Text.ElideMiddle
                                 maximumLineCount: 1
-                            } //text
-
+                            }
 
                             TextInput {
                                 id: nameInput
-                                visible: !presetNameBox.readOnly
+                                enabled: tabBackground.editableName
+                                visible: false
                                 text: presetName
                                 anchors.fill: parent
                                 anchors.leftMargin: 5
                                 anchors.rightMargin: 5
                                 horizontalAlignment: TextInput.AlignHCenter
                                 verticalAlignment: TextInput.AlignVCenter
-                                color: "#ffffff"
-                                selectionColor: "#029de0"
+                                color: StudioTheme.Values.themeTextColor
+                                selectionColor: StudioTheme.Values.themeInteraction
+                                selectByMouse: true
                                 activeFocusOnPress: true
                                 wrapMode: TextInput.NoWrap
                                 clip: true
 
                                 onEditingFinished: {
                                     nameText.text = text
-                                    tabBackground.presetNameChanged(index, text);
-                                    presetNameBox.state = "Normal";
+                                    tabBackground.presetNameChanged(index, text)
+                                    presetNameBox.edit = false
                                 }
 
                                 Keys.onPressed: {
                                     if (event.key === Qt.Key_Enter || event.key === Qt.Key_Return) {
-                                        event.accepted = true;
-                                        editingFinished();
-                                        focus = false;
-                                    } //if
-                                } //Keys.onPressed
-                            } //textInput
+                                        event.accepted = true
+                                        nameInput.editingFinished()
+                                        nameInput.focus = false
+                                    }
+
+                                    if (event.key === Qt.Key_Escape) {
+                                        event.accepted = true
+                                        nameInput.text = nameText.text
+                                        nameInput.focus = false
+                                    }
+                                }
+                            }
 
                             states: [
                                 State {
-                                    name: "Normal"
+                                    name: "default"
+                                    when: tabBackground.editableName && !nameMouseArea.containsMouse && !presetNameBox.edit
                                     PropertyChanges {
                                         target: nameBackgroundColor
                                         color: "transparent"
                                         border.width: 0
                                     }
-                                    PropertyChanges {
-                                        target: presetNameBox
-                                        readOnly: true
-                                    }
+                                    PropertyChanges { target: nameText; visible: true }
+                                    PropertyChanges { target: nameInput; visible: false }
                                 },
                                 State {
-                                    name: "Hover"
+                                    name: "hovered"
+                                    when: tabBackground.editableName && nameMouseArea.containsMouse && !presetNameBox.edit
                                     PropertyChanges {
                                         target: nameBackgroundColor
-                                        color: "#606060"
+                                        color: StudioTheme.Values.themeControlBackgroundPressed
                                         border.width: 0
                                     }
-                                    PropertyChanges {
-                                        target: presetNameBox
-                                        readOnly: true
-                                    }
+                                    PropertyChanges { target: nameText; visible: true }
+                                    PropertyChanges { target: nameInput; visible: false }
                                 },
                                 State {
-                                    name: "Clicked"
+                                    name: "edit"
+                                    when: tabBackground.editableName && presetNameBox.edit
                                     PropertyChanges {
                                         target: nameBackgroundColor
-                                        color: "#606060"
-                                        border.color: "#029de0"
+                                        color: StudioTheme.Values.themeControlBackgroundPressed
+                                        border.color: StudioTheme.Values.themeInteraction
                                         border.width: 1
                                     }
-                                    PropertyChanges {
-                                        target: presetNameBox
-                                        readOnly: false
-                                    }
-                                    PropertyChanges {
-                                        target: nameInput
-                                        visible: true
-                                    }
+                                    PropertyChanges { target: nameText; visible: false }
+                                    PropertyChanges { target: nameInput; visible: true }
                                 }
-                            ] //states
-                        } //gradient name Item
-                    } //columnLayout
-                } //rectangle background
-            } //component delegate
-        } //gridview
-    } //scrollView
-} //rectangle
+                            ]
+                        }
+                    }
+                }
+            }
+        }
+    }
+}