QmlDesigner: styling stateslistview

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

share/qtcreator/qmldesigner/statesEditorQmlSources/DesignerScrollViewStyle.qml

+/****************************************************************************
+**
+** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and Digia.  For licensing terms and
+** conditions see http://qt.digia.com/licensing.  For further information
+** use the contact form at http://qt.digia.com/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Digia gives you certain additional
+** rights.  These rights are described in the Digia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+****************************************************************************/
+
+import QtQuick 2.2
+import QtQuick.Controls 1.1
+import QtQuick.Controls.Styles 1.1
+
+ScrollViewStyle {
+    property color scrollbarColor: "#444444"
+    property color scrollbarBorderColor: "#333333"
+    property color scrollBarHandleColor: "#656565"
+
+    scrollBarBackground: Rectangle {
+        height: 10
+        width: 10
+        color: scrollbarColor
+        border.width: 1
+        border.color: scrollbarBorderColor
+    }
+    handle: Item {
+        implicitWidth: 10
+        implicitHeight: 10
+        Rectangle {
+            border.color: scrollbarBorderColor
+            border.width: 1
+            anchors.fill: parent
+            color: scrollBarHandleColor
+        }
+    }
+
+    decrementControl: Item {}
+    incrementControl: Item {}
+}

share/qtcreator/qmldesigner/statesEditorQmlSources/DesignerTextFieldStyle.qml

+/****************************************************************************
+**
+** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and Digia.  For licensing terms and
+** conditions see http://qt.digia.com/licensing.  For further information
+** use the contact form at http://qt.digia.com/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 2.1 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPL included in the
+** packaging of this file.  Please review the following information to
+** ensure the GNU Lesser General Public License version 2.1 requirements
+** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
+**
+** In addition, as a special exception, Digia gives you certain additional
+** rights.  These rights are described in the Digia Qt LGPL Exception
+** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
+**
+****************************************************************************/
+
+import QtQuick 2.2
+import QtQuick.Controls 1.1
+import QtQuick.Controls.Styles 1.1
+
+TextFieldStyle {
+    selectionColor: "#FFFFFF"
+    selectedTextColor: "#000000"
+    textColor: "#FFFFFF"
+    placeholderTextColor: "#A0A0A0"
+
+    background: Rectangle {
+        implicitWidth: 100
+        implicitHeight: font.pixelSize + padding.top + padding.bottom
+        border.color: "#222222"
+        radius: 3
+        gradient: Gradient {
+            GradientStop {color: "#2c2c2c" ; position: 0}
+            GradientStop {color: "#343434" ; position: 0.15}
+            GradientStop {color: "#373737" ; position: 1.0}
+        }
+        Rectangle {
+            border.color: highlightColor
+            anchors.fill: parent
+            anchors.margins: -1
+            color: "#00000000" //Qt.transparent
+            radius: 4
+            opacity: 0.3
+            visible: control.activeFocus
+        }
+    }
+}

share/qtcreator/qmldesigner/statesEditorQmlSources/StatesDelegate.qml

@@ -33,6 +33,7 @@ import QtQuick.Controls.Styles 1.1
 
 Rectangle {
     border.width: 1
+    property bool isBaseState
     property bool isCurrentState
     property color gradiantBaseColor
     property string delegateStateName
@@ -48,7 +49,10 @@ Rectangle {
 
     MouseArea {
         anchors.fill: parent
-        onClicked: root.currentStateInternalId = internalNodeId
+        onClicked: {
+            focus = true
+            root.currentStateInternalId = internalNodeId
+        }
     }
 
     ToolButton {
@@ -59,24 +63,45 @@ Rectangle {
         height: 16
         width: 16
         iconSource: "images/darkclose.png"
+        visible: !isBaseState
 
         onClicked: root.deleteState(internalNodeId)
     }
 
     TextField {
         id: stateNameField
-
         y: 2
+        font.pixelSize: 11
         anchors.left: parent.left
         // use the spacing which the image to the delegate rectangle has
         anchors.leftMargin: (delegateWidth - delegateStateImageSize) / 2
         anchors.right: removeStateButton.left
+        style: DesignerTextFieldStyle {}
+        readOnly: isBaseState
 
-        Component.onCompleted: text = delegateStateName
+        Component.onCompleted: {
+            text = delegateStateName
+            __panel.visible = false
+        }
         onEditingFinished: {
             if (text != delegateStateName)
                 statesEditorModel.renameState(internalNodeId, text)
         }
+
+        function shouldShowEditElement() {
+            return (hovered || focus) && !isBaseState
+        }
+
+        // only show the lineedit background if mouse is hovering
+        onHoveredChanged: {
+            __panel.visible = shouldShowEditElement()
+        }
+        onFocusChanged: {
+            __panel.visible = shouldShowEditElement()
+        }
+        // as we change the background we need to change the text
+        // color to see some text
+        textColor: shouldShowEditElement() ? "#FFFFFF" : "#000000"
     }
 
     Item {
@@ -91,7 +116,7 @@ Rectangle {
             anchors.margins: -1
             anchors.fill: stateImage
             border.width: 1
-            border.color: "black"
+            border.color: "#000000"
         }
         Image {
             id: stateImage

share/qtcreator/qmldesigner/statesEditorQmlSources/stateslist.qml

@@ -31,7 +31,7 @@ import QtQuick 2.2
 import QtQuick.Controls 1.1
 import QtQuick.Controls.Styles 1.1
 
-Rectangle {
+FocusScope {
     id: root
 
     height: 136
@@ -44,7 +44,6 @@ Rectangle {
     property int delegateHeight: root.height
     property int innerSpacing: 2
     property int currentStateInternalId : 0
-    color: "#4f4f4f"
 
     Connections {
         target: statesEditorModel
@@ -55,6 +54,17 @@ Rectangle {
         id: palette
     }
 
+    Rectangle {
+        id: background
+        anchors.fill: parent
+        color: "#4f4f4f"
+    }
+    MouseArea {
+        anchors.fill: parent
+        onClicked: focus = true
+
+    }
+
     Item {
         id: addStateItem
 
@@ -83,6 +93,9 @@ Rectangle {
         anchors.right: addStateItem.left
         height: delegateHeight
 
+        style: DesignerScrollViewStyle {
+        }
+
         ListView {
             anchors.fill: parent
             model: statesEditorModel
@@ -93,8 +106,9 @@ Rectangle {
                 id: statesDelegate
                 width: delegateWidth
                 height: delegateHeight
+                isBaseState: 0 == internalNodeId
                 isCurrentState: root.currentStateInternalId == internalNodeId
-                gradiantBaseColor: isCurrentState ? Qt.darker(highlightColor, 1.8) : root.color
+                gradiantBaseColor: isCurrentState ? Qt.darker(highlightColor, 1.8) : background.color
                 delegateStateName: stateName
                 delegateStateImageSource: stateImageSource
                 delegateStateImageSize: stateImageSize