Commit 6d1ae0e2 authored by Thomas Hartmann's avatar Thomas Hartmann

QmlDesigner.StatesEditor: Small adjustments to styling

Fine tuning of the styling and some minor adjustments.
The TextFields for the state names are always visible now.

Change-Id: I617085bb08fd4bb0e926610b1c3f3020db3c68a8
Reviewed-by: default avatarTim Jenssen <tim.jenssen@digia.com>
parent 5a170fc6
......@@ -37,6 +37,9 @@ TextFieldStyle {
textColor: "#FFFFFF"
placeholderTextColor: "#A0A0A0"
padding.top: 4
padding.bottom: 4
background: Rectangle {
implicitWidth: 100
implicitHeight: font.pixelSize + padding.top + padding.bottom
......
......@@ -41,10 +41,10 @@ Rectangle {
property int delegateStateImageSize
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) }
GradientStop { position: 0.0; color: Qt.lighter(gradiantBaseColor, 1.1) }
GradientStop { position: 0.2; color: Qt.lighter(gradiantBaseColor, 1.2) }
GradientStop { position: 0.3; color: Qt.lighter(gradiantBaseColor, 1.1) }
GradientStop { position: 1.0; color: gradiantBaseColor }
}
MouseArea {
......@@ -58,7 +58,16 @@ Rectangle {
ToolButton {
id: removeStateButton
style: ButtonStyle {
background: Rectangle {
color: control.hovered ? Qt.lighter(gradiantBaseColor, 1.4) : "transparent"
radius: 2
}
}
anchors.right: parent.right
anchors.rightMargin: 2
anchors.verticalCenter: stateNameField.verticalCenter
height: 16
width: 16
......@@ -70,38 +79,35 @@ Rectangle {
TextField {
id: stateNameField
y: 2
y: 4
font.pixelSize: 11
anchors.left: parent.left
// use the spacing which the image to the delegate rectangle has
anchors.leftMargin: 4
anchors.right: removeStateButton.left
anchors.rightMargin: 4
style: DesignerTextFieldStyle {}
readOnly: isBaseState
onActiveFocusChanged: {
if (activeFocus)
root.currentStateInternalId = internalNodeId
}
Component.onCompleted: {
text = delegateStateName
__panel.visible = false
if (isBaseState)
__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"
textColor: "#FFFFFF"
}
Item {
......
......@@ -34,14 +34,15 @@ import QtQuick.Controls.Styles 1.1
FocusScope {
id: root
height: 136
height: 132
signal createNewState
signal deleteState(int internalNodeId)
signal duplicateCurrentState
property int stateImageSize: 100
property int delegateWidth: stateImageSize + 10
property int delegateHeight: root.height
property int padding: 2
property int delegateHeight: root.height - padding * 2
property int innerSpacing: 2
property int currentStateInternalId : 0
......@@ -62,7 +63,6 @@ FocusScope {
MouseArea {
anchors.fill: parent
onClicked: focus = true
}
Item {
......@@ -75,13 +75,24 @@ FocusScope {
height: delegateHeight
Button {
style: ButtonStyle {
background: Rectangle {
implicitWidth: 100
implicitHeight: 25
color: control.hovered ? "#6f6f6f" : "#4f4f4f"
border.color: "black"
}
}
id: addStateButton
visible: canAddNewStates
anchors.right: parent.right
anchors.rightMargin: padding
anchors.verticalCenter: parent.verticalCenter
width: parent.height / 2
height: parent.height / 2
width: Math.max(parent.height / 2, 24)
height: width
iconSource: "images/plus.png"
onClicked: root.createNewState()
......@@ -92,6 +103,9 @@ FocusScope {
anchors.left: parent.left
anchors.right: addStateItem.left
height: delegateHeight
y: padding
anchors.leftMargin: padding
anchors.rightMargin: padding
style: DesignerScrollViewStyle {
}
......@@ -108,11 +122,21 @@ FocusScope {
height: delegateHeight
isBaseState: 0 == internalNodeId
isCurrentState: root.currentStateInternalId == internalNodeId
gradiantBaseColor: isCurrentState ? Qt.darker(highlightColor, 1.8) : background.color
gradiantBaseColor: isCurrentState ? Qt.darker(highlightColor, 1.2) : background.color
delegateStateName: stateName
delegateStateImageSource: stateImageSource
delegateStateImageSize: stateImageSize
}
}
}
Rectangle {
/* Rectangle at the bottom using the highlight color */
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 3
height: 4
color: Qt.darker(highlightColor, 1.2)
}
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment