diff options
author | Jens Bache-Wiig <jens.bache-wiig@digia.com> | 2013-06-05 15:46:48 +0200 |
---|---|---|
committer | The Qt Project <gerrit-noreply@qt-project.org> | 2013-06-06 12:00:11 +0200 |
commit | e6ea417c15aa760e8b1a88e5db362f9642d1589e (patch) | |
tree | a09cb67927a1f882aca310f00662a9109ff1f6c0 | |
parent | 05e492cf7ab30286087f579cefd9829da569f48f (diff) | |
download | qtquickcontrols-e6ea417c15aa760e8b1a88e5db362f9642d1589e.tar.gz |
Improve the Styles page and add missing SliderStyle property
- I noticed we incorrectly exposed sliderPosition.
- This adds some more custom style examples for the gallery and
makes the second column actually different from the first.
Change-Id: I73f0d613f51f6e75aaf734fd4e4c9fdb890e3e42
Reviewed-by: Caroline Chao <caroline.chao@digia.com>
-rw-r--r-- | examples/quick/controls/gallery/content/Styles.qml | 181 | ||||
-rw-r--r-- | examples/quick/controls/gallery/images/bubble.png | bin | 0 -> 214 bytes | |||
-rw-r--r-- | examples/quick/controls/gallery/images/button-pressed.png | bin | 0 -> 3094 bytes | |||
-rw-r--r-- | examples/quick/controls/gallery/images/button.png | bin | 0 -> 3164 bytes | |||
-rw-r--r-- | examples/quick/controls/gallery/images/progress-background.png | bin | 0 -> 456 bytes | |||
-rw-r--r-- | examples/quick/controls/gallery/images/progress-fill.png | bin | 0 -> 507 bytes | |||
-rw-r--r-- | examples/quick/controls/gallery/images/slider-handle.png | bin | 0 -> 3523 bytes | |||
-rw-r--r-- | examples/quick/controls/gallery/images/textfield.png | bin | 0 -> 3023 bytes | |||
-rw-r--r-- | examples/quick/controls/gallery/resources.qrc | 7 | ||||
-rw-r--r-- | src/styles/Base/SliderStyle.qml | 7 |
10 files changed, 159 insertions, 36 deletions
diff --git a/examples/quick/controls/gallery/content/Styles.qml b/examples/quick/controls/gallery/content/Styles.qml index 3a7d2bfd..e46a9ea0 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 Binary files differnew file mode 100644 index 00000000..62aa1efe --- /dev/null +++ b/examples/quick/controls/gallery/images/bubble.png diff --git a/examples/quick/controls/gallery/images/button-pressed.png b/examples/quick/controls/gallery/images/button-pressed.png Binary files differnew file mode 100644 index 00000000..d64cdaa7 --- /dev/null +++ b/examples/quick/controls/gallery/images/button-pressed.png diff --git a/examples/quick/controls/gallery/images/button.png b/examples/quick/controls/gallery/images/button.png Binary files differnew file mode 100644 index 00000000..8ab41cc8 --- /dev/null +++ b/examples/quick/controls/gallery/images/button.png diff --git a/examples/quick/controls/gallery/images/progress-background.png b/examples/quick/controls/gallery/images/progress-background.png Binary files differnew file mode 100644 index 00000000..55a069df --- /dev/null +++ b/examples/quick/controls/gallery/images/progress-background.png diff --git a/examples/quick/controls/gallery/images/progress-fill.png b/examples/quick/controls/gallery/images/progress-fill.png Binary files differnew file mode 100644 index 00000000..b588c958 --- /dev/null +++ b/examples/quick/controls/gallery/images/progress-fill.png diff --git a/examples/quick/controls/gallery/images/slider-handle.png b/examples/quick/controls/gallery/images/slider-handle.png Binary files differnew file mode 100644 index 00000000..ac4d4a0d --- /dev/null +++ b/examples/quick/controls/gallery/images/slider-handle.png diff --git a/examples/quick/controls/gallery/images/textfield.png b/examples/quick/controls/gallery/images/textfield.png Binary files differnew file mode 100644 index 00000000..1d4a38ab --- /dev/null +++ b/examples/quick/controls/gallery/images/textfield.png diff --git a/examples/quick/controls/gallery/resources.qrc b/examples/quick/controls/gallery/resources.qrc index 21362787..6f487274 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 e21936a2..a6df15c0 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 |