QmlDesigner.StatesEditor: Moved buttons for adding, removing and deleting states

src/plugins/qmldesigner/components/stateseditor/stateslist.qml

@@ -8,6 +8,7 @@ Rectangle {
     signal createNewState
     signal deleteState(int index)
     signal duplicateCurrentState
+    signal startRenaming
 
     color: "#4f4f4f";
 
@@ -44,9 +45,6 @@ Rectangle {
         anchors.right:root.right
         anchors.top:root.top
         height:statesRow.height+2
-        anchors.topMargin:-1;
-        anchors.leftMargin:-1;
-
         contentHeight: height
         contentWidth: statesRow.width+2
 
@@ -61,22 +59,6 @@ Rectangle {
                     delegate: delegate
                 }
             }
-            Item {
-                id: newStateBoxLoader;
-                width:132
-                height:listViewRow.height
-                Loader {
-                    sourceComponent: newStateBox;
-                    // make it square
-                    width: 100
-                    height: 100
-                    anchors.horizontalCenter:parent.horizontalCenter
-                    anchors.bottom:parent.bottom
-                    anchors.bottomMargin:12
-                }
-            }
-
-
         }
 
         focus: true;
@@ -90,9 +72,8 @@ Rectangle {
         id: delegate
         Item {
             id: container
-            //width: Math.max(img.width, txt.width+2) + 32
             width:img.width+32
-            height: img.height + txt.height + 32
+            height: img.height + txt.height + 29
 
             property bool isCurrentState:root.currentStateIndex==index;
             onXChanged: scrollBarAdjuster.adjustScrollBar();
@@ -110,73 +91,25 @@ Rectangle {
                 }
             }
 
-
+            Connections {
-            Rectangle {
+                target: root
-                id: highlight
+                onStartRenaming: if (root.currentStateIndex == index) startRenaming();
-                anchors.fill: parent
-                color:parent.isCurrentState?highlightColor:"#4F4F4F";
-                clip:true
-                Rectangle {
-                    width:parent.width
-                    height:parent.height
-                    y:-parent.height/2
-                    gradient: Gradient {
-                        GradientStop { position: 0.0; color: Qt.lighter(highlight.color) }
-                        GradientStop { position: 1.0; color: highlight.color }
-                    }
-                }
-                Rectangle {
-                    width:parent.width
-                    height:parent.height
-                    y:parent.height/2
-                    gradient: Gradient {
-                        GradientStop { position: 0.0; color: highlight.color }
-                        GradientStop { position: 1.0; color: Qt.darker(highlight.color) }
-                    }
-                }
-            }
-            Item {
-                id: highlightBorders
-                anchors.fill:parent
-                anchors.topMargin:1
-                Rectangle {
-                    anchors.top:parent.top
-                    anchors.left:parent.left
-                    width:parent.width-1
-                    height:1
-                    color: Qt.lighter(highlight.color)
-                }
-                Rectangle {
-                    anchors.bottom:parent.bottom
-                    anchors.left:parent.left
-                    anchors.leftMargin:1
-                    width:parent.width-1
-                    height:1
-                    color: Qt.darker(highlight.color)
-                }
-                Rectangle {
-                    anchors.top:parent.top
-                    anchors.left:parent.left
-                    width:1
-                    height:parent.height-1
-                    gradient: Gradient {
-                        GradientStop { position: 0.0; color: Qt.lighter(highlight.color) }
-                        GradientStop { position: 1.0; color: highlight.color }
-                    }
-                }
-                Rectangle {
-                    anchors.top:parent.top
-                    anchors.right:parent.right
-                    anchors.topMargin:1
-                    width:1
-                    height:parent.height-1
-                    gradient: Gradient {
-                        GradientStop { position: 0.0; color: highlight.color }
-                        GradientStop { position: 1.0; color: Qt.darker(highlight.color) }
-                    }
-                }
             }
 
+            function startRenaming() {
+                stateNameInput.text=stateName;
+                stateNameInput.focus=true;
+                stateNameEditor.visible=true;
+                stateNameInput.cursorVisible=true;
+                stateNameInput.selectAll();
+            }
+
+
+            Loader {
+                sourceComponent: underlay
+                anchors.fill: parent
+                property var color: parent.isCurrentState?highlightColor:"#4F4F4F";
+            }
 
             Item {
                 id: img
@@ -207,96 +140,6 @@ Rectangle {
                 }
             }
 
-
-            // The erase button
-            Item {
-                id: removeState
-
-                visible: (index != 0 && root.currentStateIndex==index)
-
-                anchors.right: parent.right
-                anchors.top: parent.top
-                anchors.topMargin: 7;
-                anchors.rightMargin:4;
-
-                width: 12
-                height: width
-
-                states: State{
-                    name: "Pressed";
-                    PropertyChanges {
-                        target: removeState
-                        buttonColor: buttonColorDown
-                    }
-                }
-
-                property var buttonColorUp: "#E1E1E1"
-                property var buttonColorDown: Qt.darker(buttonColorUp)
-                property var buttonColor: buttonColorUp
-
-                Item {
-                    width:parent.width
-                    height:parent.height/2 - 1
-                    clip: true
-                    Rectangle {
-                        color: removeState.buttonColor
-                        width: removeState.width
-                        height: removeState.height
-                        radius: width/2
-                    }
-                }
-                Item {
-                    width:parent.width
-                    height:parent.height/2 - 1
-                    y:parent.height/2+1
-                    clip: true
-                    Rectangle {
-                        color: removeState.buttonColor
-                        width: removeState.width
-                        height: removeState.height
-                        radius: width/2
-                        y:-parent.y
-                    }
-                }
-                Item {
-                    width:2
-                    height:parent.height
-                    clip: true
-                    Rectangle {
-                        color: removeState.buttonColor
-                        width: removeState.width
-                        height: removeState.height
-                        radius: width/2
-                    }
-                }
-                Item {
-                    width:2
-                    height:parent.height
-                    x:parent.width-2
-                    clip: true
-                    Rectangle {
-                        color: removeState.buttonColor
-                        width: removeState.width
-                        height: removeState.height
-                        radius: width/2
-                        x: -parent.x
-                    }
-                }
-
-                MouseArea {
-                    anchors.fill:parent
-                    onClicked: {
-                        root.unFocus();
-
-                        root.deleteState(index);
-                        horizontalScrollbar.totalLengthDecreased();
-                    }
-                    onPressed: {parent.state="Pressed"}
-                    onReleased: {parent.state=""}
-
-                }
-            }
-
             Connections {
                 target: root
                 onUnFocus: stateNameEditor.unFocus();
@@ -307,8 +150,9 @@ Rectangle {
                 anchors.top: parent.top
                 anchors.topMargin:4
                 anchors.left:parent.left
-                anchors.right:removeState.left
+                anchors.right:parent.right
                 anchors.leftMargin:4
+                anchors.rightMargin:4
                 height: txt.height
                 clip: false
                 Text {
@@ -331,15 +175,10 @@ Rectangle {
                         root.currentStateIndex = index;
                     }
                     onDoubleClicked: if (index!=0) {
-                        stateNameInput.text=stateName;
+                        startRenaming();
-                        stateNameInput.focus=true;
-                        stateNameEditor.visible=true;
-                        stateNameInput.cursorVisible=true;
-                        stateNameInput.selectAll();
                     }
                 }
 
-
                 Rectangle {
                     id:stateNameEditor
                     visible:false
@@ -363,7 +202,6 @@ Rectangle {
                         }
                     }
 
-                    // There is no QFontMetrics equivalent in QML
                     Text {
                         text:stateNameInput.text
                         visible:false
@@ -409,89 +247,127 @@ Rectangle {
         }
     }
 
-
     Component {
-        id: newStateBox
+        id: underlay
-        Rectangle {
-            anchors.fill: parent
-            color: "transparent"
-            border.width: 1
-            border.color: "#282828"
-
-            Loader {
-                sourceComponent: addState
-                anchors.fill: parent
-
-            }
-        }
-    }
-
-    Rectangle {
-        id: floatingNewStateBox
-
-        color: root.color
-        border.width: 1
-        border.color: "#282828"
-        width: 40
-        height: 40
-        anchors.bottom:horizontalScrollbar.top
-        anchors.right:root.right
-        anchors.bottomMargin:1
-        anchors.rightMargin:1
-
-        visible:(newStateBoxLoader.x+newStateBoxLoader.width/2-11>listView.width+listView.contentX);
-
-
-        Loader {
-            sourceComponent: addState
-            anchors.fill: parent
-        }
-    }
-
-
-
-    // The add button
-    Component {
-        id: addState
         Item {
             anchors.fill:parent
+            property var color: parent.color
+            clip:true
             Rectangle {
-
+                width:parent.width
-                anchors.centerIn: parent
+                height:parent.height
-
+                y:-parent.height/2
-                width: 21
+                gradient: Gradient {
-                height: width
+                    GradientStop { position: 0.0; color: Qt.lighter(parent.color) }
-
+                    GradientStop { position: 1.0; color: parent.color }
-                color:"#282828"
+                }
-                radius: width/2
+            }
-
-                // "clicked" overlay
             Rectangle {
+                width:parent.width
+                height:parent.height
+                y:parent.height/2
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: parent.color }
+                    GradientStop { position: 1.0; color: Qt.darker(parent.color) }
+                }
+            }
+
+            Rectangle {
+                anchors.top:parent.top
+                anchors.left:parent.left
+                width:parent.width-1
+                height:1
+                color: Qt.lighter(parent.color)
+            }
+            Rectangle {
+                anchors.bottom:parent.bottom
+                anchors.left:parent.left
+                anchors.leftMargin:1
+                width:parent.width-1
+                height:1
+                color: Qt.darker(parent.color)
+            }
+            Rectangle {
+                anchors.top:parent.top
+                anchors.left:parent.left
+                width:1
+                height:parent.height-1
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: Qt.lighter(parent.color) }
+                    GradientStop { position: 1.0; color: parent.color }
+                }
+            }
+            Rectangle {
+                anchors.top:parent.top
+                anchors.right:parent.right
+                anchors.topMargin:1
+                width:1
+                height:parent.height-1
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: parent.color }
+                    GradientStop { position: 1.0; color: Qt.darker(parent.color) }
+                }
+            }
+        }
+    }
+
+    Rectangle {
+        id: addStateButton
+        color: "#4f4f4f"
+        width: addStateText.width
+        height: addStateText.height+1
+        anchors.left: listView.left
+        anchors.bottom: root.bottom
+
+        Loader {
+            sourceComponent: underlay
             anchors.fill: parent
-                    opacity:parent.state=="Pressed"
+            property var color: "#4f4f4f"
-                    color : "#282828"
-                    radius: parent.radius
         }
 
-                states: State{ name: "Pressed"; }
+        Rectangle {
+            id: addStatePressedBorder
+            anchors.fill:parent
+            anchors.bottomMargin:1
+            anchors.rightMargin:1
+            border.width:1
+            border.color:"black"
+            color:"transparent"
+            visible:false
+        }
 
-                // "plus" sign
+        states: [
-                Rectangle {
+            State {
-                    width:parent.width-10
+               name: "Pressed"
-                    height:3
+               PropertyChanges {
-                    color:root.color
+                   target: addStatePressedBorder
-                    anchors.centerIn:parent
+                   visible:true
                }
-                Rectangle {
+               PropertyChanges {
-                    width:3
+                   target: addStateText
-                    height:parent.height-10
+                   color: "#1c1c1c"
-                    color:root.color
-                    anchors.centerIn:parent
                }
+            },
+            State {
+                name: "Disabled"
+                PropertyChanges {
+                    target: addStateText
+                    color: "#5f5f5f"
+                }
+            }
+        ]
+
+        Text {
+            id: addStateText
+            text: " Duplicate State "
+            color: "#cfcfcf"
+            font.pixelSize:12
         }
         MouseArea {
             anchors.fill: parent
-                onClicked: {
+            onPressed: if (parent.state != "Disabled") parent.state = "Pressed";
+            onReleased: if (parent.state == "Pressed") {
+                parent.state = "";
                 // force close textinput
                 root.unFocus();
                 if (root.currentStateIndex == 0)
@@ -501,8 +377,137 @@ Rectangle {
                 // select the new state
                 root.currentStateIndex = statesEditorModel.count - 1;
             }
-                onPressed: {parent.state="Pressed"}
+        }
-                onReleased: {parent.state=""}
+    }
+
+    Rectangle {
+        id: renameStateButton
+        color: "#4f4f4f"
+        border.color: "black"
+        border.width: 1
+        width: renameStateText.width
+        height: renameStateText.height+1
+        anchors.left: addStateButton.right
+        anchors.bottom: root.bottom
+
+        Loader {
+            sourceComponent: underlay
+            anchors.fill: parent
+            property var color: "#4f4f4f"
+        }
+
+        Rectangle {
+            id: renameStatePressedBorder
+            anchors.fill:parent
+            anchors.bottomMargin:1
+            anchors.rightMargin:1
+            border.width:1
+            border.color:"black"
+            color:"transparent"
+            visible:false
+        }
+
+        states: [
+            State {
+               name: "Pressed"
+               PropertyChanges {
+                   target: renameStatePressedBorder
+                   visible:true
+               }
+            PropertyChanges {
+                   target: renameStateText
+                   color: "#1c1c1c"
+               }
+            },
+            State {
+                name: "Disabled"
+                when: root.currentStateIndex==0;
+                PropertyChanges {
+                    target: renameStateText
+                    color: "#5f5f5f"
+                }
+            }
+        ]
+
+        Text {
+            id: renameStateText
+            text: " Rename State "
+            color: "#cfcfcf"
+            font.pixelSize:12
+        }
+        MouseArea {
+            anchors.fill: parent
+            onPressed: if (parent.state != "Disabled") parent.state = "Pressed";
+            onReleased: if (parent.state == "Pressed") {
+                parent.state = "";
+                root.startRenaming();
+            }
+        }
+    }
+
+    Rectangle {
+        id: removeStateButton
+        color: "#4f4f4f"
+        border.color: "black"
+        border.width: 1
+        width: removeStateText.width
+        height: removeStateText.height+1
+        anchors.left: renameStateButton.right
+        anchors.bottom: root.bottom
+
+        Loader {
+            sourceComponent: underlay
+            anchors.fill: parent
+            property var color: "#4f4f4f"
+        }
+
+        Rectangle {
+            id: removeStatePressedBorder
+            anchors.fill:parent
+            anchors.bottomMargin:1
+            anchors.rightMargin:1
+            border.width:1
+            border.color:"black"
+            color:"transparent"
+            visible:false
+        }
+
+        states: [
+            State {
+               name: "Pressed"
+               PropertyChanges {
+                   target: removeStatePressedBorder
+                   visible:true
+               }
+            PropertyChanges {
+                   target: removeStateText
+                   color: "#1c1c1c"
+               }
+            },
+            State {
+                name: "Disabled"
+                when: root.currentStateIndex==0;
+                PropertyChanges {
+                    target: removeStateText
+                    color: "#5f5f5f"
+                }
+            }
+        ]
+
+        Text {
+            id: removeStateText
+            text: " Erase State "
+            color: "#cfcfcf"
+            font.pixelSize:12
+        }
+        MouseArea {
+            anchors.fill: parent
+            onPressed: if (parent.state != "Disabled") parent.state = "Pressed";
+            onReleased: if (parent.state == "Pressed") {
+                parent.state = "";
+                root.unFocus();
+                root.deleteState(root.currentStateIndex);
+                horizontalScrollbar.totalLengthDecreased();
             }
         }
     }
@@ -528,14 +533,14 @@ Rectangle {
 
         //opacity: viewLength < totalLength;
 
-        anchors.left : listView.left
+        //anchors.left : listView.left
+        anchors.left: removeStateButton.right
         anchors.right : listView.right
         anchors.top : listView.bottom
-        anchors.topMargin: 1
+        anchors.topMargin: -2
-		anchors.leftMargin: 1
         anchors.rightMargin: 1
-
+        anchors.bottom: root.bottom
-        height: 10;
+        anchors.bottomMargin: 1
 
         // the bar itself
         Item {
@@ -557,9 +562,9 @@ Rectangle {
 
             Rectangle {
                 height:parent.height-3
-                width:parent.width - 2
+                width:parent.width - 3
                 y:2
-				x:1
+                x:2
 
                 gradient: Gradient {
                     GradientStop { position: 0.0; color: "#C6C6C6" }