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
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
......
......@@ -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
......
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