QmlDesigner.StatesEditor: Adjust margins

The "magic" -2 keeps the margins symmetric.
The states editor now nearly looks like the blog post proposal.
Only the highlight color is different, but already comes from the
theming engine.

Change-Id: Ibae5a3f19a7b07063ea44933498c24519bd34e94
Reviewed-by: Alessandro Portale <alessandro.portale@qt.io>

share/qtcreator/qmldesigner/statesEditorQmlSources/StatesDelegate.qml

@@ -105,12 +105,14 @@ Rectangle {
 
     Item {
         id: stateImageArea
-        anchors.topMargin: 1
+        anchors.topMargin: 4
         anchors.left: stateNameField.left
         anchors.top: stateNameField.bottom
 
         height: delegateStateImageSize + 2
         width: delegateStateImageSize + 2
+
+        visible: expanded
         Rectangle {
             anchors.margins: -1
             anchors.fill: stateImage

share/qtcreator/qmldesigner/statesEditorQmlSources/StatesList.qml

@@ -31,7 +31,7 @@ import "../common"
 FocusScope {
     id: root
 
-    height: expanded ? 136 : 32
+    height: expanded ? 136 : 30
     signal createNewState
     signal deleteState(int internalNodeId)
     signal duplicateCurrentState
@@ -39,7 +39,7 @@ FocusScope {
     property int stateImageSize: 100
     property int delegateWidth: stateImageSize + 10
     property int padding: 2
-    property int delegateHeight: root.height - padding * 2
+    property int delegateHeight: root.height - padding * 2 + 1
     property int innerSpacing: -1
     property int currentStateInternalId : 0