summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorThomas Hartmann <Thomas.Hartmann@theqtcompany.com>2015-02-27 14:11:07 +0100
committerThomas Hartmann <Thomas.Hartmann@digia.com>2015-02-27 13:15:14 +0000
commitb4f089f81454bc2f4fee9842711574f37b2ab9ef (patch)
tree48ab290bd4afd7859ced8360e4cb1991f6b77e44
parent66de6538f6977439563730b9ddf0e59676c724b8 (diff)
downloadqtquickcontrols-b4f089f81454bc2f4fee9842711574f37b2ab9ef.tar.gz
Examples: Adjust styles example for designer
* Do not define Components as properties (not supported) * Define the binding on columnWidth as a Binding object so it can be ignored by the designer and we have a static default. Change-Id: I97620d07b12c5b1203c90da0fdd4937d50bbde1c Reviewed-by: J-P Nurmi <jpnurmi@theqtcompany.com>
-rw-r--r--examples/quick/controls/styles/main.qml317
1 files changed, 168 insertions, 149 deletions
diff --git a/examples/quick/controls/styles/main.qml b/examples/quick/controls/styles/main.qml
index 29257183..7e7971e3 100644
--- a/examples/quick/controls/styles/main.qml
+++ b/examples/quick/controls/styles/main.qml
@@ -52,7 +52,7 @@ Window {
visible: true
title: qsTr("Styles Example")
- property int columnWidth: window.width / 5
+ property int columnFactor: 5
GridLayout {
rowSpacing: 12
@@ -63,7 +63,7 @@ Window {
Button {
text: "Button"
- implicitWidth: columnWidth
+ implicitWidth: window.width / columnFactor
}
Button {
text: "Button"
@@ -73,17 +73,17 @@ Window {
border.left: 4 ; border.right: 4 ; border.top: 4 ; border.bottom: 4
}
}
- implicitWidth: columnWidth
+ implicitWidth: window.width / columnFactor
}
Button {
text: "Button"
style: buttonStyle
- implicitWidth: columnWidth
+ implicitWidth: window.width / columnFactor
}
TextField {
Layout.row: 1
- implicitWidth: columnWidth
+ implicitWidth: window.width / columnFactor
}
TextField {
style: TextFieldStyle {
@@ -92,18 +92,18 @@ Window {
border.left: 4 ; border.right: 4 ; border.top: 4 ; border.bottom: 4
}
}
- implicitWidth: columnWidth
+ implicitWidth: window.width / columnFactor
}
TextField {
style: textFieldStyle
- implicitWidth: columnWidth
+ implicitWidth: window.width / columnFactor
}
Slider {
id: slider1
Layout.row: 2
value: 0.5
- implicitWidth: columnWidth
+ implicitWidth: window.width / columnFactor
}
Slider {
id: slider2
@@ -139,35 +139,35 @@ Window {
Slider {
id: slider3
value: 0.5
- implicitWidth: columnWidth
+ implicitWidth: window.width / columnFactor
style: sliderStyle
}
ProgressBar {
Layout.row: 3
value: slider1.value
- implicitWidth: columnWidth
+ implicitWidth: window.width / columnFactor
}
ProgressBar {
value: slider2.value
- implicitWidth: columnWidth
+ implicitWidth: window.width / columnFactor
style: progressBarStyle
}
ProgressBar {
value: slider3.value
- implicitWidth: columnWidth
+ implicitWidth: window.width / columnFactor
style: progressBarStyle2
}
CheckBox {
text: "CheckBox"
Layout.row: 4
- implicitWidth: columnWidth
+ implicitWidth: window.width / columnFactor
}
RadioButton {
text: "RadioButton"
- implicitWidth: columnWidth
+ implicitWidth: window.width / columnFactor
}
ComboBox {
@@ -201,178 +201,197 @@ Window {
// Style delegates:
- property Component buttonStyle: ButtonStyle {
- background: Rectangle {
- implicitHeight: 22
- implicitWidth: columnWidth
- color: control.pressed ? "darkGray" : control.activeFocus ? "#cdd" : "#ccc"
- antialiasing: true
- border.color: "gray"
- radius: height/2
- Rectangle {
- anchors.fill: parent
- anchors.margins: 1
- color: "transparent"
+ Component {
+ id: buttonStyle
+ ButtonStyle {
+
+ background: Rectangle {
+ implicitHeight: 22
+ implicitWidth: window.width / columnFactor
+ color: control.pressed ? "darkGray" : control.activeFocus ? "#cdd" : "#ccc"
antialiasing: true
- visible: !control.pressed
- border.color: "#aaffffff"
+ border.color: "gray"
radius: height/2
+ Rectangle {
+ anchors.fill: parent
+ anchors.margins: 1
+ color: "transparent"
+ antialiasing: true
+ visible: !control.pressed
+ border.color: "#aaffffff"
+ radius: height/2
+ }
}
}
}
- property Component textFieldStyle: TextFieldStyle {
- background: Rectangle {
- implicitWidth: columnWidth
- color: "#f0f0f0"
- antialiasing: true
- border.color: "gray"
- radius: height/2
- Rectangle {
- anchors.fill: parent
- anchors.margins: 1
- color: "transparent"
+ Component {
+ id: textFieldStyle
+ TextFieldStyle {
+ background: Rectangle {
+ implicitWidth: window.width / columnFactor
+ color: "#f0f0f0"
antialiasing: true
- border.color: "#aaffffff"
+ border.color: "gray"
radius: height/2
+ Rectangle {
+ anchors.fill: parent
+ anchors.margins: 1
+ color: "transparent"
+ antialiasing: true
+ border.color: "#aaffffff"
+ radius: height/2
+ }
}
}
}
- property Component sliderStyle: SliderStyle {
- handle: Rectangle {
- width: 18
- height: 18
- color: control.pressed ? "darkGray" : "lightGray"
- border.color: "gray"
- antialiasing: true
- radius: height/2
- Rectangle {
- anchors.fill: parent
- anchors.margins: 1
- color: "transparent"
+ Component {
+ id: sliderStyle
+ SliderStyle {
+ handle: Rectangle {
+ width: 18
+ height: 18
+ color: control.pressed ? "darkGray" : "lightGray"
+ border.color: "gray"
antialiasing: true
- border.color: "#eee"
radius: height/2
+ Rectangle {
+ anchors.fill: parent
+ anchors.margins: 1
+ color: "transparent"
+ antialiasing: true
+ border.color: "#eee"
+ radius: height/2
+ }
}
- }
- groove: Rectangle {
- height: 8
- implicitWidth: columnWidth
- implicitHeight: 22
+ groove: Rectangle {
+ height: 8
+ implicitWidth: window.width / columnFactor
+ implicitHeight: 22
- antialiasing: true
- color: "#ccc"
- border.color: "#777"
- radius: height/2
- Rectangle {
- anchors.fill: parent
- anchors.margins: 1
- color: "transparent"
antialiasing: true
- border.color: "#66ffffff"
+ color: "#ccc"
+ border.color: "#777"
radius: height/2
+ Rectangle {
+ anchors.fill: parent
+ anchors.margins: 1
+ color: "transparent"
+ antialiasing: true
+ border.color: "#66ffffff"
+ radius: height/2
+ }
}
}
}
- property Component progressBarStyle: ProgressBarStyle {
- background: BorderImage {
- source: "images/progress-background.png"
- border.left: 2 ; border.right: 2 ; border.top: 2 ; border.bottom: 2
- }
- progress: Item {
- clip: true
- BorderImage {
- anchors.fill: parent
- anchors.rightMargin: (control.value < control.maximumValue) ? -4 : 0
- source: "images/progress-fill.png"
- border.left: 10 ; border.right: 10
- Rectangle {
- width: 1
- color: "#a70"
- opacity: 0.8
- anchors.top: parent.top
+ Component {
+ id: progressBarStyle
+ ProgressBarStyle {
+ background: BorderImage {
+ source: "images/progress-background.png"
+ border.left: 2 ; border.right: 2 ; border.top: 2 ; border.bottom: 2
+ }
+ progress: Item {
+ clip: true
+ BorderImage {
+ anchors.fill: parent
+ anchors.rightMargin: (control.value < control.maximumValue) ? -4 : 0
+ source: "images/progress-fill.png"
+ border.left: 10 ; border.right: 10
+ Rectangle {
+ width: 1
+ color: "#a70"
+ opacity: 0.8
+ anchors.top: parent.top
+ anchors.bottom: parent.bottom
+ anchors.bottomMargin: 1
+ anchors.right: parent.right
+ visible: control.value < control.maximumValue
+ anchors.rightMargin: -parent.anchors.rightMargin
+ }
+ }
+ ParticleSystem { id: bubbles; running: visible }
+ ImageParticle {
+ id: fireball
+ system: bubbles
+ source: "images/bubble.png"
+ opacity: 0.7
+ }
+ Emitter {
+ system: bubbles
anchors.bottom: parent.bottom
- anchors.bottomMargin: 1
+ anchors.margins: 4
+ anchors.bottomMargin: -4
+ anchors.left: parent.left
anchors.right: parent.right
- visible: control.value < control.maximumValue
- anchors.rightMargin: -parent.anchors.rightMargin
+ size: 4
+ sizeVariation: 4
+ acceleration: PointDirection { y: -6; xVariation: 3 }
+ emitRate: 6 * control.value
+ lifeSpan: 3000
}
}
- ParticleSystem { id: bubbles; running: visible }
- ImageParticle {
- id: fireball
- system: bubbles
- source: "images/bubble.png"
- opacity: 0.7
- }
- Emitter {
- system: bubbles
- anchors.bottom: parent.bottom
- anchors.margins: 4
- anchors.bottomMargin: -4
- anchors.left: parent.left
- anchors.right: parent.right
- size: 4
- sizeVariation: 4
- acceleration: PointDirection { y: -6; xVariation: 3 }
- emitRate: 6 * control.value
- lifeSpan: 3000
- }
}
}
- property Component progressBarStyle2: ProgressBarStyle {
- background: Rectangle {
- implicitWidth: columnWidth
- implicitHeight: 24
- color: "#f0f0f0"
- border.color: "gray"
- }
- progress: Rectangle {
- color: "#ccc"
- border.color: "gray"
- Rectangle {
- color: "transparent"
- border.color: "#44ffffff"
- anchors.fill: parent
- anchors.margins: 1
+ Component {
+ id: progressBarStyle2
+ ProgressBarStyle {
+ background: Rectangle {
+ implicitWidth: window.width / columnFactor
+ implicitHeight: 24
+ color: "#f0f0f0"
+ border.color: "gray"
+ }
+ progress: Rectangle {
+ color: "#ccc"
+ border.color: "gray"
+ Rectangle {
+ color: "transparent"
+ border.color: "#44ffffff"
+ anchors.fill: parent
+ anchors.margins: 1
+ }
}
}
}
- property Component tabViewStyle: TabViewStyle {
- tabOverlap: 16
- frameOverlap: 4
- tabsMovable: true
+ Component {
+ id: tabViewStyle
+ TabViewStyle {
+ tabOverlap: 16
+ frameOverlap: 4
+ tabsMovable: true
- frame: Rectangle {
- gradient: Gradient {
- GradientStop { color: "#e5e5e5" ; position: 0 }
- GradientStop { color: "#e0e0e0" ; position: 1 }
- }
- border.color: "#898989"
- Rectangle { anchors.fill: parent ; anchors.margins: 1 ; border.color: "white" ; color: "transparent" }
- }
- tab: Item {
- property int totalOverlap: tabOverlap * (control.count - 1)
- implicitWidth: Math.min ((styleData.availableWidth + totalOverlap)/control.count - 4, image.sourceSize.width)
- implicitHeight: image.sourceSize.height
- BorderImage {
- id: image
- anchors.fill: parent
- source: styleData.selected ? "images/tab_selected.png" : "images/tab.png"
- border.left: 30
- smooth: false
- border.right: 30
+ frame: Rectangle {
+ gradient: Gradient {
+ GradientStop { color: "#e5e5e5" ; position: 0 }
+ GradientStop { color: "#e0e0e0" ; position: 1 }
+ }
+ border.color: "#898989"
+ Rectangle { anchors.fill: parent ; anchors.margins: 1 ; border.color: "white" ; color: "transparent" }
}
- Text {
- text: styleData.title
- anchors.centerIn: parent
+ tab: Item {
+ property int totalOverlap: tabOverlap * (control.count - 1)
+ implicitWidth: Math.min ((styleData.availableWidth + totalOverlap)/control.count - 4, image.sourceSize.width)
+ implicitHeight: image.sourceSize.height
+ BorderImage {
+ id: image
+ anchors.fill: parent
+ source: styleData.selected ? "images/tab_selected.png" : "images/tab.png"
+ border.left: 30
+ smooth: false
+ border.right: 30
+ }
+ Text {
+ text: styleData.title
+ anchors.centerIn: parent
+ }
}
+ leftCorner: Item { implicitWidth: 12 }
}
- leftCorner: Item { implicitWidth: 12 }
}
}