Commit 2067b049 authored by Jens Bache-Wiig's avatar Jens Bache-Wiig Committed by Thomas Hartmann
Browse files

Some initial styling for qmldesigner



This makes the controls fit a bit better into creator.

Change-Id: I61dcd3a2db07281c437ef17604aef862d88876b9
Reviewed-by: default avatarThomas Hartmann <Thomas.Hartmann@digia.com>
parent 56c45f7d
import QtQuick 2.1
import QtQuick.Controls 1.0 as Controls
import QtQuick.Controls 1.1 as Controls
import QtQuick.Controls.Styles 1.1
Controls.Button {
}
\ No newline at end of file
property color borderColor: "#222"
property color highlightColor: "orange"
property color textColor: "#eee"
style: ButtonStyle {
label: Text {
color: CreatorStyle.textColor
anchors.fill: parent
renderType: Text.NativeRendering
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
text: control.text
opacity: enabled ? 1 : 0.7
}
background: Rectangle {
implicitWidth: 100
implicitHeight: 23
border.color: CreatorStyle.borderColor
radius: 3
gradient: control.pressed ? pressedGradient : gradient
Gradient{
id: pressedGradient
GradientStop{color: "#333" ; position: 0}
}
Gradient {
id: gradient
GradientStop {color: "#606060" ; position: 0}
GradientStop {color: "#404040" ; position: 0.07}
GradientStop {color: "#303030" ; position: 1}
}
Rectangle {
border.color: CreatorStyle.highlightColor
anchors.fill: parent
anchors.margins: -1
color: "transparent"
radius: 4
opacity: 0.3
visible: control.activeFocus
}
}
}
}
......@@ -28,12 +28,16 @@
****************************************************************************/
import QtQuick 2.1
import QtQuick.Controls 1.0 as Controls
import QtQuick.Controls 1.1 as Controls
import QtQuick.Controls.Styles 1.1
Controls.CheckBox {
id: checkBox
property color borderColor: "#222"
property color highlightColor: "orange"
property color textColor: "#eee"
onTextChanged: {
if (text.charAt(0) !== " ")
......@@ -43,8 +47,7 @@ Controls.CheckBox {
property variant backendValue
ExtendedFunctionButton {
x: 14
y: 2
x: 22
backendValue: checkBox.backendValue
visible: spinBox.enabled
}
......@@ -68,6 +71,17 @@ Controls.CheckBox {
transaction.end();
}
}
style: CheckBoxStyle {
spacing: 8
label: Controls.Label { text: control.text ; color: checkBox.textColor }
indicator: Item {
implicitWidth: 16
implicitHeight: 16
Image { source: "qrc:qmldesigner/images/checkbox_" +
(control.checked ? "checked": "unchecked") +
(control.pressed ? "_pressed": "") + ".png" }
}
} //control.pressed ? "qrc:qmldesigner/images/checkbox_unchecked_pressed.png" :
}
......@@ -103,7 +103,7 @@ Column {
SecondColumnLayout {
Controls.TextField {
LineEdit {
id: textField
inputMask: "\\#hhHHHHHH"
......
......@@ -28,7 +28,7 @@
****************************************************************************/
import QtQuick 2.1
import QtQuick.Controls 1.0 as Controls
import QtQuick.Controls 1.1 as Controls
Controls.ComboBox {
id: comboBox
......
......@@ -28,19 +28,16 @@
****************************************************************************/
import QtQuick 2.1
import QtQuick.Controls 1.0 as Controls
import QtQuick.Controls 1.1 as Controls
import QtQuick.Layouts 1.0
Controls.Label {
id: label
font.bold: true
width: parent.width < 300 ? 80 : Math.min(140, parent.width - 220)
color: "#eee"
elide: Text.ElideRight
Rectangle {
color: "red"
anchors.fill: parent
z: -1
}
Layout.preferredWidth: width
Layout.minimumWidth: width
Layout.maximumWidth: width
......
......@@ -29,12 +29,16 @@
import QtQuick 2.1
import QtQuick.Controls 1.0 as Controls
import QtQuick.Controls 1.1 as Controls
import QtQuick.Controls.Styles 1.0
Controls.TextField {
id: lineEdit
property variant backendValue
property color borderColor: "#222"
property color highlightColor: "orange"
property color textColor: "#eee"
// ExtendedFunctionButton {
// x: 2
......@@ -64,5 +68,31 @@ Controls.TextField {
}
}
style: TextFieldStyle {
selectionColor: lineEdit.textColor
selectedTextColor: "black"
textColor: lineEdit.textColor
padding.top: 3
padding.bottom: 1
background: Rectangle {
implicitWidth: 100
implicitHeight: 23
border.color: borderColor
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: "transparent"
radius: 4
opacity: 0.3
visible: control.activeFocus
}
}
}
}
......@@ -34,5 +34,4 @@ import QtQuick.Layouts 1.0
RowLayout {
Layout.fillWidth: true
spacing: 4
Layout.alignment: Qt.AlignVCenter
}
......@@ -28,7 +28,7 @@
****************************************************************************/
import QtQuick 2.1
import QtQuick.Controls 1.0 as Controls
import QtQuick.Controls 1.1 as Controls
import QtQuick.Layouts 1.0
Item {
......@@ -38,27 +38,56 @@ Item {
anchors.left: parent.left
anchors.right: parent.right
clip: true
Rectangle {
id: header
height: 16
height: 18
anchors.left: parent.left
anchors.right: parent.right
Controls.Label {
x: 4
id: label
anchors.verticalCenter: parent.verticalCenter
font.bold: true
color: "white"
x: 22
}
color: "blue"
Image {
source: "images/down-arrow.png"
rotation: section.state === "Collapsed" ? -90 : 0
anchors.left: parent.left
anchors.leftMargin: 4
anchors.verticalCenter: parent.verticalCenter
Behavior on rotation {NumberAnimation{duration: 80}}
}
gradient: Gradient {
GradientStop {color: '#555' ; position: 0}
GradientStop {color: '#444' ; position: 1}
}
Rectangle {
color: "#666"
width: parent.width
height: 1
}
Rectangle {
color: "#333"
anchors.bottom: parent.bottom
width: parent.width
height: 1
}
MouseArea {
anchors.fill: parent
onClicked: {
if (section.state === "")
section.state = "Collapsed";
else
section.state = "";
section.state = "";
}
}
}
......@@ -67,29 +96,23 @@ Item {
readonly property alias contentItem: row
//implicitWidth: row.width - 4
implicitHeight: row.height + header.height
//Layout.minimumWidth: implicitWidth
Layout.minimumHeight: implicitHeight
implicitHeight: Math.round(row.height + header.height + 8)
Row {
width: parent.width
x: 4
y: header.height
x: 8
y: header.height + 4
id: row
}
Behavior on height { NumberAnimation{easing.type: Easing.OutCubic ; duration: 60} }
states: [
State {
name: "Collapsed"
PropertyChanges {
target: row
opacity: 0
}
PropertyChanges {
target: section
implicitHeight: header.height
height: header.height
}
}
]
......
......@@ -33,9 +33,7 @@ import QtQuick.Layouts 1.0
GridLayout {
columns: 2
columnSpacing: 6
columnSpacing: 12
rowSpacing: 4
width: parent.width - 8
width: parent.width - 16
}
......@@ -28,17 +28,21 @@
****************************************************************************/
import QtQuick 2.1
import QtQuick.Controls 1.0 as Controls
import QtQuick.Controls 1.1 as Controls
import QtQuick.Controls.Styles 1.1
Controls.SpinBox {
id: spinBox
property color borderColor: "#222"
property color highlightColor: "orange"
property color textColor: "#eee"
property variant backendValue;
prefix: " "
ExtendedFunctionButton {
x: 2
y: 3
y: 4
backendValue: spinBox.backendValue
visible: spinBox.enabled
}
......@@ -73,7 +77,7 @@ Controls.SpinBox {
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.bottom
height: 10;
height: 10
visible: false
maximumValue: spinBox.maximumValue
......@@ -85,4 +89,58 @@ Controls.SpinBox {
spinBox.value = value
}
}
style: SpinBoxStyle {
selectionColor: spinBox.textColor
selectedTextColor: "black"
textColor: spinBox.textColor
padding.top: 3
padding.bottom: 1
incrementControl: Item {
implicitWidth: 14
implicitHeight: parent.height/2
opacity: styleData.upEnabled ? styleData.upPressed ? 0.5 : 1 : 0.5
Image {
source: "images/up-arrow.png"
anchors.centerIn: parent
anchors.verticalCenterOffset: 2
anchors.horizontalCenterOffset: -4
}
}
decrementControl: Item {
implicitWidth: 14
implicitHeight: parent.height/2
opacity: styleData.downEnabled ? styleData.downPressed ? 0.5 : 1 : 0.5
Image {
source: "images/down-arrow.png"
anchors.centerIn: parent
anchors.verticalCenterOffset: -1
anchors.horizontalCenterOffset: -4
}
}
background: Rectangle {
implicitWidth: Math.max(60, styleData.contentWidth)
implicitHeight: 23
border.color: borderColor
radius: 3
gradient: Gradient {
GradientStop {color: "#2c2c2c" ; position: 0}
GradientStop {color: "#343434" ; position: 0.15}
GradientStop {color: "#373737" ; position: 1}
}
Rectangle {
border.color: highlightColor
anchors.fill: parent
anchors.margins: -1
color: "transparent"
radius: 4
opacity: 0.3
visible: control.activeFocus
}
}
}
}
......@@ -29,7 +29,46 @@
import QtQuick 2.1
import QtQuick.Controls 1.0 as Controls
import QtQuick.Controls.Styles 1.1
Controls.TabView {
id: root
property color textColor: "#eee"
frameVisible: false
style: TabViewStyle {
frameOverlap: 0
frame: Item { }
tab: Rectangle {
color: styleData.selected ? "#eee" : "#444"
implicitWidth: root.width/root.count + 2
implicitHeight: 21
Text {
id: text
anchors.centerIn: parent
text: styleData.title
renderType: Text.NativeRendering
color: styleData.selected ? "#000" : "#fff"
}
Rectangle {
anchors.fill: parent
opacity: 0.10
gradient: Gradient {
GradientStop {color: '#fff' ; position: 0}
GradientStop {color: '#000' ; position: 1}
}
}
Rectangle {
color: "#666"
width: parent.width
height: 1
}
Rectangle {
color: "#333"
width: parent.width
height: 1
anchors.bottom: parent.bottom
}
}
}
}
......@@ -78,7 +78,6 @@ Section {
SpinBox {
backendValue: backendValues.z
hasSlider: true
decimals: 2
minimumValue: -100
maximumValue: 100
Layout.preferredWidth: 80
......
......@@ -52,14 +52,12 @@ Section {
Label {
text: "Position"
Layout.alignment: Qt.AlignVCenter
}
SecondColumnLayout {
Label {
text: "X"
width: 12
Layout.alignment: Qt.AlignVCenter
}
SpinBox {
......@@ -80,22 +78,18 @@ Section {
minimumValue: -0xffff
decimals: 0
}
ExpandingSpacer {
}
ExpandingSpacer{}
}
Label {
text: "Size"
Layout.alignment: Qt.AlignVCenter
}
SecondColumnLayout {
Layout.fillWidth: true
Label {
text: "W"
width: 12
Layout.alignment: Qt.AlignVCenter
}
SpinBox {
......@@ -108,7 +102,6 @@ Section {
Label {
text: "H"
width: 12
Layout.alignment: Qt.AlignVCenter
}
SpinBox {
......@@ -117,10 +110,7 @@ Section {
minimumValue: -0xffff
decimals: 0
}
ExpandingSpacer {
}
ExpandingSpacer{}
}
}
}
......@@ -31,159 +31,164 @@ import QtQuick 2.0
import HelperWidgets 2.0
import QtQuick.Layouts 1.0
ScrollView {
Rectangle {
id: itemPane
width: 320
height: 400
color: "#404040"
Column {
width: itemPane.width
Section {
caption: "Type"
ScrollView {
anchors.fill: parent
anchors.left: parent.left
anchors.right: parent.right
Column {
width: itemPane.width
Section {
caption: "Type"
SectionLayout {
Label {
text: "Type"
anchors.left: parent.left
anchors.right: parent.right
}
Label {
text: backendValues.className.value
width: lineEdit.width
}
Label {
text: "id"
SectionLayout {
Label {
text: "Type"
}
}
SecondColumnLayout {
LineEdit {
id: lineEdit
enabled: isBaseState
backendValue: backendValues.id
placeholderText: "id"
text: backendValues.id.value
Layout.fillWidth: true