diff options
| author |   Tasuku Suzuki <tasuku.suzuki@qt.io> | 2017-12-25 13:30:10 +0900 |
|---|---|---|
| committer | Tasuku Suzuki <tasuku.suzuki@qt.io> | 2017-12-25 05:26:09 +0000 |
| commit | b03a688e1cafdb5b97ed9eccf31355a8dec08bf9 (patch) | |
| tree | 66870e328e045095f5caa4190459b407fd2f092c | |
| parent | 244bd4cd8c49a4bbe5e283f75607e588579aa81b (diff) | |
Improve ProgressBar and Slider styleflounder_5.99.2flounder_5.99.1flounder/5.99.2flounder/5.99.15.99.25.99.1
The position of stop 1.0 was set to the positoin of "value" in both
controls. Due to this, gradiation was changed/re-drawn whenever value
was changed.
This commit sets the position of stop 1.0 to the end of the control.
Now gradiation itself is fixed, not changed by its value.
Change-Id: I84e1b30a18af6a0af2d5b867a288b0d3501e565e
Signed-off-by: Tasuku Suzuki <tasuku.suzuki@qt.io>
| -rw-r--r-- | imports/qtquickcontrols2aglstyle/ProgressBar.qml | 36 | ||||
| -rw-r--r-- | imports/qtquickcontrols2aglstyle/Slider.qml | 22 |
2 files changed, 41 insertions, 17 deletions
diff --git a/imports/qtquickcontrols2aglstyle/ProgressBar.qml b/imports/qtquickcontrols2aglstyle/ProgressBar.qml index b44538c..6d5e3ae 100644 --- a/imports/qtquickcontrols2aglstyle/ProgressBar.qml +++ b/imports/qtquickcontrols2aglstyle/ProgressBar.qml @@ -16,6 +16,7 @@ import QtQuick 2.6 import QtQuick.Templates 2.0 as T +import QtGraphicalEffects 1.0 T.ProgressBar { id: control @@ -36,15 +37,34 @@ T.ProgressBar { implicitHeight: background.implicitHeight Rectangle { - rotation: -90 - transformOrigin: Item.TopLeft - y: 10 - width: parent.height - height: control.visualPosition * background.width - radius: width / 2 + width: control.visualPosition * background.width + height: background.height + radius: background.radius + visible: !control.indeterminate + } + + Rectangle { + visible: control.indeterminate + width: background.width * 0.1 + height: background.height + radius: background.radius + NumberAnimation on x { + from: 0 + to: background.width * 0.9 + duration: 2000 + loops: Animation.Infinite + running: control.indeterminate + easing.type: Easing.SineCurve + } + } + + layer.enabled: true + layer.effect: LinearGradient { + start: Qt.point(0, 0) + end: Qt.point(background.width, 0) gradient: Gradient { - GradientStop { position: 0.0; color: '#00ADDC' } - GradientStop { position: 1.0; color: '#6BFBFF' } + GradientStop { position: 0.0; color: "#00ADDC" } + GradientStop { position: 1.0; color: "#6BFBFF" } } } } diff --git a/imports/qtquickcontrols2aglstyle/Slider.qml b/imports/qtquickcontrols2aglstyle/Slider.qml index 6c9863b..5b6a495 100644 --- a/imports/qtquickcontrols2aglstyle/Slider.qml +++ b/imports/qtquickcontrols2aglstyle/Slider.qml @@ -16,6 +16,7 @@ import QtQuick 2.6 import QtQuick.Templates 2.0 as T +import QtGraphicalEffects 1.0 T.Slider { id: root @@ -31,15 +32,18 @@ T.Slider { color: "#666666" Rectangle { - rotation: -90 - transformOrigin: Item.TopLeft - y: parent.height - width: parent.height - height: handle.x + handle.width - radius: width / 2 - gradient: Gradient { - GradientStop { position: 0.0; color: '#59FF7F' } - GradientStop { position: 1.0; color: '#6BFBFF' } + height: parent.height + width: handle.x + handle.width + radius: height / 2 + + layer.enabled: true + layer.effect: LinearGradient { + start: Qt.point(0, 0) + end: Qt.point(background.width, 0) + gradient: Gradient { + GradientStop { position: 0.0; color: "#00ADDC" } + GradientStop { position: 1.0; color: "#6BFBFF" } + } } } } |