QmlDesigner: rewrite statelistview

Change-Id: I2d2481e2f1a3e0f2d4a5807712e9435b3009e52d
Reviewed-by: Marco Bubke <marco.bubke@digia.com>

share/qtcreator/qmldesigner/statesEditorQmlSources/HorizontalScrollBar.qml → share/qtcreator/qmldesigner/statesEditorQmlSources/StatesDelegate.qml

@@ -27,93 +27,77 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.1
+import QtQuick 2.2
+import QtQuick.Controls 1.1
+import QtQuick.Controls.Styles 1.1
 
-Item {
-    property variant flickable: this;
-    property int viewPosition: 0;
-    property int viewSize: ( flickable.width>=0 ? flickable.width : 0 );
-    property int contentSize: ( flickable.contentWidth >= 0 ? flickable.contentWidth : 0 );
+Rectangle {
+    border.width: 1
+    property bool isCurrentState
+    property color gradiantBaseColor
+    property string delegateStateName
+    property string delegateStateImageSource
+    property int delegateStateImageSize
 
-    signal unFocus();
-
-    id: horizontalScrollbar
-    width: 300
-    height: 10
-
-    onViewPositionChanged: flickable.contentX=viewPosition;
-    onViewSizeChanged: {
-        if ((contentSize > viewSize) && (viewPosition > contentSize - viewSize))
-            viewPosition = contentSize - viewSize;
+    gradient: Gradient {
+        GradientStop { position: 0.0; color: Qt.lighter(gradiantBaseColor, 6) }
+        GradientStop { position: 0.2; color: Qt.lighter(gradiantBaseColor, 2.5) }
+        GradientStop { position: 0.8; color: Qt.lighter(gradiantBaseColor, 1.5) }
+        GradientStop { position: 1.0; color: Qt.darker(gradiantBaseColor) }
     }
 
-    function contentSizeDecreased()  {
-        if ((contentSize > viewSize) && (viewPosition > contentSize - viewSize))
-            viewPosition = contentSize - viewSize;
+    MouseArea {
+        anchors.fill: parent
+        onClicked: root.currentStateInternalId = nodeId
     }
 
-    Rectangle {
-        id: groove
-        width: parent.width - 4
-        height: 10
-        color: "#444444"
-        border.width: 1
-        border.color: "#333333"
+    ToolButton {
+        id: removeStateButton
+
         anchors.right: parent.right
-        anchors.rightMargin: 2
+        anchors.verticalCenter: stateNameField.verticalCenter
+        height: 16
+        width: 16
+        iconSource: "images/darkclose.png"
+
+        onClicked: root.deleteState(nodeId)
+    }
+
+    TextField {
+        id: stateNameField
+
+        y: 2
         anchors.left: parent.left
-        anchors.leftMargin: 2
-        anchors.verticalCenter: parent.verticalCenter
-        x: 2
+        // use the spacing which the image to the delegate rectangle has
+        anchors.leftMargin: (delegateWidth - delegateStateImageSize) / 2
+        anchors.right: removeStateButton.left
+
+        Component.onCompleted: text = delegateStateName
+        onEditingFinished: {
+            if (text != delegateStateName)
+                statesEditorModel.renameState(nodeId, text)
+        }
     }
 
-    // the scrollbar
     Item {
-        id: bar
-        width: parent.width
-        height: parent.height
-        x: Math.floor( (horizontalScrollbar.contentSize > 0 ? horizontalScrollbar.viewPosition * horizontalScrollbar.width / horizontalScrollbar.contentSize : 0));
+        id: stateImageArea
+        anchors.topMargin: 1
+        anchors.left: stateNameField.left
+        anchors.top: stateNameField.bottom
 
+        height: delegateStateImageSize + 2
+        width: delegateStateImageSize + 2
         Rectangle {
-            id: handle
-            width: {
-                if (horizontalScrollbar.contentSize > 0) {
-                    if (horizontalScrollbar.viewSize > horizontalScrollbar.contentSize || parent.width < 0) {
-                        horizontalScrollbar.visible = false;
-                        return parent.width;
-                    } else {
-                        horizontalScrollbar.visible = true;
-                        return Math.floor(horizontalScrollbar.viewSize / horizontalScrollbar.contentSize  * parent.width);
-                    }
-                } else {
-                    return 0;
-                }
-            }
-
-            height: parent.height
-            y:0
-            border.color: "#333333"
+            anchors.margins: -1
+            anchors.fill: stateImage
             border.width: 1
-
-            color: "#656565"
-
-            MouseArea {
-                property int dragging:0;
-                property int originalX:0;
-
-                anchors.fill: parent
-                onPressed: { dragging = 1; originalX = mouse.x; horizontalScrollbar.unFocus(); }
-                onReleased: { dragging = 0; }
-                onPositionChanged: {
-                    if (dragging) {
-                        var newX = mouse.x - originalX + bar.x;
-                        if (newX<0) newX=0;
-                        if (newX>horizontalScrollbar.width - handle.width)
-                            newX=horizontalScrollbar.width - handle.width;
-                        horizontalScrollbar.viewPosition = (newX * horizontalScrollbar.contentSize / horizontalScrollbar.width);
-                    }
-                }
-            }
+            border.color: "black"
+        }
+        Image {
+            id: stateImage
+            anchors.centerIn: parent
+            source: delegateStateImageSource
         }
     }
+
 }