diff --git a/examples/quick/controls/gallery/content/Styles.qml b/examples/quick/controls/gallery/content/Styles.qml
index 3a7d2bfd2ac8de9c4ba7e4ea46410070a28135b7..e46a9ea0ff482e63adc2a57b1982caff91f42081 100644
--- a/examples/quick/controls/gallery/content/Styles.qml
+++ b/examples/quick/controls/gallery/content/Styles.qml
@@ -45,6 +45,7 @@
import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Controls.Styles 1.0
+import QtQuick.Particles 2.0
import QtQuick.Layouts 1.0
Item {
@@ -67,7 +68,12 @@ Item {
}
Button {
text: "Push me"
- style: ButtonStyle { }
+ style: ButtonStyle {
+ background: BorderImage {
+ source: control.pressed ? "../images/button-pressed.png" : "../images/button.png"
+ border.left: 4 ; border.right: 4 ; border.top: 4 ; border.bottom: 4
+ }
+ }
implicitWidth: columnWidth
}
Button {
@@ -82,7 +88,12 @@ Item {
implicitWidth: columnWidth
}
TextField {
- style: TextFieldStyle { }
+ style: TextFieldStyle {
+ background: BorderImage {
+ source: "../images/textfield.png"
+ border.left: 4 ; border.right: 4 ; border.top: 4 ; border.bottom: 4
+ }
+ }
implicitWidth: columnWidth
}
TextField {
@@ -91,43 +102,65 @@ Item {
}
Slider {
+ id: slider1
Layout.row: 2
- value: 50
- maximumValue: 100
+ value: 0.5
implicitWidth: columnWidth
style: SliderStyle { }
}
Slider {
- value: 50
- maximumValue: 100
+ id: slider2
+ value: 0.5
implicitWidth: columnWidth
- style: SliderStyle { }
+ style: SliderStyle {
+ groove: BorderImage {
+ height: 6
+ border.top: 1
+ border.bottom: 1
+ source: "../images/progress-background.png"
+ border.left: 6
+ border.right: 6
+ BorderImage {
+ anchors.verticalCenter: parent.verticalCenter
+ source: "../images/progress-fill.png"
+ border.left: 5 ; border.top: 1
+ border.right: 5 ; border.bottom: 1
+ width: styleData.handlePosition
+ height: parent.height
+ }
+ }
+ handle: Item {
+ width: 13
+ height: 13
+ Image {
+ anchors.centerIn: parent
+ source: "../images/slider-handle.png"
+ }
+ }
+ }
}
Slider {
- value: 50
- maximumValue: 100
+ id: slider3
+ value: 0.5
implicitWidth: columnWidth
style: sliderStyle
}
ProgressBar {
Layout.row: 3
- value: 50
- maximumValue: 100
+ value: slider1.value
implicitWidth: columnWidth
style: ProgressBarStyle{ }
}
ProgressBar {
- value: 50
- maximumValue: 100
+ value: slider2.value
implicitWidth: columnWidth
- style: ProgressBarStyle{ }
+ style: progressBarStyle
}
ProgressBar {
- value: 50
- maximumValue: 100
+ value: slider3.value
implicitWidth: columnWidth
- style: progressbarStyle
+ style: progressBarStyle2
}
CheckBox {
@@ -177,64 +210,144 @@ Item {
property Component buttonStyle: ButtonStyle {
background: Rectangle {
- implicitHeight: 20
+ implicitHeight: 22
implicitWidth: columnWidth
- color: control.pressed ? "darkGray" : "lightGray"
+ 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"
+ antialiasing: true
+ visible: !control.pressed
+ border.color: "#aaffffff"
+ radius: height/2
+ }
}
}
property Component textfieldStyle: TextFieldStyle {
background: Rectangle {
implicitWidth: columnWidth
- implicitHeight: 20
+ implicitHeight: 22
color: "#f0f0f0"
antialiasing: true
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: 14
- height: 14
+ 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"
+ antialiasing: true
+ border.color: "#eee"
+ radius: height/2
+ }
}
groove: Rectangle {
height: 8
implicitWidth: columnWidth
- implicitHeight: 20
+ implicitHeight: 22
antialiasing: true
- color: "darkGray"
- border.color: "gray"
+ 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 {
+ 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
+ anchors.bottom: parent.bottom
+ anchors.bottomMargin: 1
+ anchors.right: parent.right
+ visible: control.value < control.maximumValue
+ anchors.rightMargin: -parent.anchors.rightMargin
+ }
+ }
+ ParticleSystem{ id: bubbles }
+ 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: 20
+ implicitHeight: 24
color: "#f0f0f0"
border.color: "gray"
- antialiasing: true
- radius: height/2
}
progress: Rectangle {
- implicitWidth: columnWidth
- implicitHeight: 20
- color: "#c0c0c0"
+ color: "#ccc"
border.color: "gray"
- antialiasing: true
- radius: height/2
+ Rectangle {
+ color: "transparent"
+ border.color: "#44ffffff"
+ anchors.fill: parent
+ anchors.margins: 1
+ }
}
}
diff --git a/examples/quick/controls/gallery/images/bubble.png b/examples/quick/controls/gallery/images/bubble.png
new file mode 100644
index 0000000000000000000000000000000000000000..62aa1efe54c76991fdaea3a103d362bcc635e5c6
Binary files /dev/null and b/examples/quick/controls/gallery/images/bubble.png differ
diff --git a/examples/quick/controls/gallery/images/button-pressed.png b/examples/quick/controls/gallery/images/button-pressed.png
new file mode 100644
index 0000000000000000000000000000000000000000..d64cdaa7876296e8ff5fe0953c5f364a0a6be118
Binary files /dev/null and b/examples/quick/controls/gallery/images/button-pressed.png differ
diff --git a/examples/quick/controls/gallery/images/button.png b/examples/quick/controls/gallery/images/button.png
new file mode 100644
index 0000000000000000000000000000000000000000..8ab41cc804991d9da9d2c0dd2140579b8a405cf7
Binary files /dev/null and b/examples/quick/controls/gallery/images/button.png differ
diff --git a/examples/quick/controls/gallery/images/progress-background.png b/examples/quick/controls/gallery/images/progress-background.png
new file mode 100644
index 0000000000000000000000000000000000000000..55a069dfce0cba716f426a78c04346cadb60cfad
Binary files /dev/null and b/examples/quick/controls/gallery/images/progress-background.png differ
diff --git a/examples/quick/controls/gallery/images/progress-fill.png b/examples/quick/controls/gallery/images/progress-fill.png
new file mode 100644
index 0000000000000000000000000000000000000000..b588c9586d9c9ba0d07966f448c19e23320bf6e3
Binary files /dev/null and b/examples/quick/controls/gallery/images/progress-fill.png differ
diff --git a/examples/quick/controls/gallery/images/slider-handle.png b/examples/quick/controls/gallery/images/slider-handle.png
new file mode 100644
index 0000000000000000000000000000000000000000..ac4d4a0d981cf7257756d5ecd7951154b70b87d5
Binary files /dev/null and b/examples/quick/controls/gallery/images/slider-handle.png differ
diff --git a/examples/quick/controls/gallery/images/textfield.png b/examples/quick/controls/gallery/images/textfield.png
new file mode 100644
index 0000000000000000000000000000000000000000..1d4a38ab38bea53d34f71c84e4f88669b99f3447
Binary files /dev/null and b/examples/quick/controls/gallery/images/textfield.png differ
diff --git a/examples/quick/controls/gallery/resources.qrc b/examples/quick/controls/gallery/resources.qrc
index 21362787fa881ea507bd0c80adacc6e60649be35..6f48727404f8b4fe94346fd974f5f12cda4354bf 100644
--- a/examples/quick/controls/gallery/resources.qrc
+++ b/examples/quick/controls/gallery/resources.qrc
@@ -16,5 +16,12 @@
<file>images/tab_selected.png</file>
<file>images/window-new.png</file>
<file>images/window-new@2x.png</file>
+ <file>images/bubble.png</file>
+ <file>images/button-pressed.png</file>
+ <file>images/button.png</file>
+ <file>images/progress-background.png</file>
+ <file>images/progress-fill.png</file>
+ <file>images/textfield.png</file>
+ <file>images/slider-handle.png</file>
</qresource>
</RCC>
diff --git a/src/styles/Base/SliderStyle.qml b/src/styles/Base/SliderStyle.qml
index e21936a2a8c6c52fd60f4e1021746d3416e416a6..a6df15c0e1fafddbee08229d2f915c5bba022766 100644
--- a/src/styles/Base/SliderStyle.qml
+++ b/src/styles/Base/SliderStyle.qml
@@ -122,7 +122,8 @@ Style {
}
/*! This property holds the background groove of the slider.
- You can access the handle position through the \c handlePosition property.
+
+ You can access the handle position through the \c styleData.handlePosition property.
*/
property Component groove: Item {
anchors.verticalCenter: parent.verticalCenter
@@ -164,7 +165,9 @@ Style {
Loader {
id: grooveLoader
- property int handlePosition: handleLoader.x + handleLoader.width/2
+ property QtObject styleData: QtObject {
+ readonly property int handlePosition: handleLoader.x + handleLoader.width/2
+ }
x: padding.left
sourceComponent: groove
width: (horizontal ? parent.width : parent.height) - padding.left - padding.right