Commit f1795d97 authored by Tim Jenssen's avatar Tim Jenssen

QmlDesigner: styling stateslistview

Change-Id: I29d39230bd1f37cb3d57b14045717d893f51e122
Reviewed-by: default avatarMarco Bubke <marco.bubke@digia.com>
parent 2659a9b7
/****************************************************************************
**
** 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 {}
}
/****************************************************************************
**
** 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
}
}
}
...@@ -33,6 +33,7 @@ import QtQuick.Controls.Styles 1.1 ...@@ -33,6 +33,7 @@ import QtQuick.Controls.Styles 1.1
Rectangle { Rectangle {
border.width: 1 border.width: 1
property bool isBaseState
property bool isCurrentState property bool isCurrentState
property color gradiantBaseColor property color gradiantBaseColor
property string delegateStateName property string delegateStateName
...@@ -48,7 +49,10 @@ Rectangle { ...@@ -48,7 +49,10 @@ Rectangle {
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
onClicked: root.currentStateInternalId = internalNodeId onClicked: {
focus = true
root.currentStateInternalId = internalNodeId
}
} }
ToolButton { ToolButton {
...@@ -59,24 +63,45 @@ Rectangle { ...@@ -59,24 +63,45 @@ Rectangle {
height: 16 height: 16
width: 16 width: 16
iconSource: "images/darkclose.png" iconSource: "images/darkclose.png"
visible: !isBaseState
onClicked: root.deleteState(internalNodeId) onClicked: root.deleteState(internalNodeId)
} }
TextField { TextField {
id: stateNameField id: stateNameField
y: 2 y: 2
font.pixelSize: 11
anchors.left: parent.left anchors.left: parent.left
// use the spacing which the image to the delegate rectangle has // use the spacing which the image to the delegate rectangle has
anchors.leftMargin: (delegateWidth - delegateStateImageSize) / 2 anchors.leftMargin: (delegateWidth - delegateStateImageSize) / 2
anchors.right: removeStateButton.left anchors.right: removeStateButton.left
style: DesignerTextFieldStyle {}
readOnly: isBaseState
Component.onCompleted: text = delegateStateName Component.onCompleted: {
text = delegateStateName
__panel.visible = false
}
onEditingFinished: { onEditingFinished: {
if (text != delegateStateName) if (text != delegateStateName)
statesEditorModel.renameState(internalNodeId, text) 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 { Item {
...@@ -91,7 +116,7 @@ Rectangle { ...@@ -91,7 +116,7 @@ Rectangle {
anchors.margins: -1 anchors.margins: -1
anchors.fill: stateImage anchors.fill: stateImage
border.width: 1 border.width: 1
border.color: "black" border.color: "#000000"
} }
Image { Image {
id: stateImage id: stateImage
......
...@@ -31,7 +31,7 @@ import QtQuick 2.2 ...@@ -31,7 +31,7 @@ import QtQuick 2.2
import QtQuick.Controls 1.1 import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1 import QtQuick.Controls.Styles 1.1
Rectangle { FocusScope {
id: root id: root
height: 136 height: 136
...@@ -44,7 +44,6 @@ Rectangle { ...@@ -44,7 +44,6 @@ Rectangle {
property int delegateHeight: root.height property int delegateHeight: root.height
property int innerSpacing: 2 property int innerSpacing: 2
property int currentStateInternalId : 0 property int currentStateInternalId : 0
color: "#4f4f4f"
Connections { Connections {
target: statesEditorModel target: statesEditorModel
...@@ -55,6 +54,17 @@ Rectangle { ...@@ -55,6 +54,17 @@ Rectangle {
id: palette id: palette
} }
Rectangle {
id: background
anchors.fill: parent
color: "#4f4f4f"
}
MouseArea {
anchors.fill: parent
onClicked: focus = true
}
Item { Item {
id: addStateItem id: addStateItem
...@@ -83,6 +93,9 @@ Rectangle { ...@@ -83,6 +93,9 @@ Rectangle {
anchors.right: addStateItem.left anchors.right: addStateItem.left
height: delegateHeight height: delegateHeight
style: DesignerScrollViewStyle {
}
ListView { ListView {
anchors.fill: parent anchors.fill: parent
model: statesEditorModel model: statesEditorModel
...@@ -93,8 +106,9 @@ Rectangle { ...@@ -93,8 +106,9 @@ Rectangle {
id: statesDelegate id: statesDelegate
width: delegateWidth width: delegateWidth
height: delegateHeight height: delegateHeight
isBaseState: 0 == internalNodeId
isCurrentState: root.currentStateInternalId == 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 delegateStateName: stateName
delegateStateImageSource: stateImageSource delegateStateImageSource: stateImageSource
delegateStateImageSize: stateImageSize delegateStateImageSize: stateImageSize
......
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