From 77c3f0e33edf5b6031d2460f1760b51359de7db6 Mon Sep 17 00:00:00 2001
From: J-P Nurmi <jpnurmi@digia.com>
Date: Mon, 16 Sep 2013 16:58:59 +0200
Subject: [PATCH] QML Base style: support transient scrollbars
Change-Id: I4bcbf80f382ad8e972c302a6144c5b42a28f936d
Reviewed-by: Gabriel de Dietrich <gabriel.dedietrich@digia.com>
---
src/controls/Private/ScrollViewHelper.qml | 16 +++-
src/controls/Private/qquickstyleitem.cpp | 1 -
src/controls/Private/qquickstyleitem_p.h | 4 +-
src/controls/Styles/Base/ScrollViewStyle.qml | 86 +++++++++++++++---
.../images/scrollbar-handle-transient.png | Bin 0 -> 249 bytes
.../Styles/Desktop/ScrollViewStyle.qml | 1 -
src/controls/Styles/styles.pri | 1 +
7 files changed, 91 insertions(+), 18 deletions(-)
create mode 100644 src/controls/Styles/Base/images/scrollbar-handle-transient.png
diff --git a/src/controls/Private/ScrollViewHelper.qml b/src/controls/Private/ScrollViewHelper.qml
index 2037a16ff..af3f87937 100644
--- a/src/controls/Private/ScrollViewHelper.qml
+++ b/src/controls/Private/ScrollViewHelper.qml
@@ -122,7 +122,7 @@ Item {
ScrollBar {
id: hscrollbar
- isTransient: !!__panel && !!__panel.transient
+ isTransient: !!__panel && !!__panel.isTransient
active: !!__panel && (__panel.sunken || __panel.activeControl !== "none")
enabled: !isTransient || __panel.visible
orientation: Qt.Horizontal
@@ -157,13 +157,19 @@ Item {
if (hscrollbar.isTransient) {
hscrollbar.__panel.on = true
hscrollbar.__panel.visible = true
+ hFlasher.start()
}
}
+ Timer {
+ id: hFlasher
+ interval: 10
+ onTriggered: hscrollbar.__panel.on = false
+ }
}
ScrollBar {
id: vscrollbar
- isTransient: !!__panel && !!__panel.transient
+ isTransient: !!__panel && !!__panel.isTransient
active: !!__panel && (__panel.sunken || __panel.activeControl !== "none")
enabled: !isTransient || __panel.visible
orientation: Qt.Vertical
@@ -198,7 +204,13 @@ Item {
if (vscrollbar.isTransient) {
vscrollbar.__panel.on = true
vscrollbar.__panel.visible = true
+ vFlasher.start()
}
}
+ Timer {
+ id: vFlasher
+ interval: 10
+ onTriggered: vscrollbar.__panel.on = false
+ }
}
}
diff --git a/src/controls/Private/qquickstyleitem.cpp b/src/controls/Private/qquickstyleitem.cpp
index 7278ae5b7..13c79484d 100644
--- a/src/controls/Private/qquickstyleitem.cpp
+++ b/src/controls/Private/qquickstyleitem.cpp
@@ -1482,7 +1482,6 @@ void QQuickStyleItem::paint(QPainter *painter)
break;
case ScrollBar:
qApp->style()->drawComplexControl(QStyle::CC_ScrollBar, qstyleoption_cast<QStyleOptionComplex*>(m_styleoption), painter);
- setOn(false);
break;
case Menu: {
QStyleHintReturnMask val;
diff --git a/src/controls/Private/qquickstyleitem_p.h b/src/controls/Private/qquickstyleitem_p.h
index 336d3b462..3d67776f3 100644
--- a/src/controls/Private/qquickstyleitem_p.h
+++ b/src/controls/Private/qquickstyleitem_p.h
@@ -62,7 +62,7 @@ class QQuickStyleItem: public QQuickItem
Q_PROPERTY( bool on READ on WRITE setOn NOTIFY onChanged)
Q_PROPERTY( bool hover READ hover WRITE setHover NOTIFY hoverChanged)
Q_PROPERTY( bool horizontal READ horizontal WRITE setHorizontal NOTIFY horizontalChanged)
- Q_PROPERTY( bool transient READ transient WRITE setTransient NOTIFY transientChanged)
+ Q_PROPERTY( bool isTransient READ isTransient WRITE setTransient NOTIFY transientChanged)
Q_PROPERTY( QString elementType READ elementType WRITE setElementType NOTIFY elementTypeChanged)
Q_PROPERTY( QString text READ text WRITE setText NOTIFY textChanged)
@@ -131,7 +131,7 @@ public:
bool on() const { return m_on; }
bool hover() const { return m_hover; }
bool horizontal() const { return m_horizontal; }
- bool transient() const { return m_transient; }
+ bool isTransient() const { return m_transient; }
int minimum() const { return m_minimum; }
int maximum() const { return m_maximum; }
diff --git a/src/controls/Styles/Base/ScrollViewStyle.qml b/src/controls/Styles/Base/ScrollViewStyle.qml
index a5f4372a7..7bfc1351c 100644
--- a/src/controls/Styles/Base/ScrollViewStyle.qml
+++ b/src/controls/Styles/Base/ScrollViewStyle.qml
@@ -69,6 +69,12 @@ Style {
mouse location when clicked. */
property bool scrollToClickedPosition: true
+ /*! This property holds whether the scroll bars are transient. Transient scroll bars
+ appear when the content is scrolled and disappear when they are no longer needed.
+
+ The default value is platform dependent. */
+ property bool transientScrollBars: Qt.platform.os === "android" || Qt.platform.os === "ios"
+
/*! This Component paints the frame around scroll bars. */
property Component frame: Rectangle {
color: control["backgroundVisible"] ? "white": "transparent"
@@ -105,9 +111,13 @@ Style {
*/
property Component scrollBarBackground: Item {
+ property bool sticky: false
+ property bool hovered: styleData.hovered
implicitWidth: 16
implicitHeight: 16
clip: true
+ opacity: transientScrollBars ? 0.5 : 1.0
+ visible: !transientScrollBars || sticky
Rectangle {
anchors.fill: parent
color: "#ddd"
@@ -117,6 +127,7 @@ Style {
anchors.topMargin: styleData.horizontal ? 0 : -2
anchors.bottomMargin: styleData.horizontal ? -1 : -2
}
+ onHoveredChanged: if (hovered) sticky = true
}
/*! This component controls the appearance of the
@@ -131,13 +142,30 @@ Style {
\endtable
*/
- property Component handle: BorderImage{
- opacity: styleData.pressed ? 0.5 : styleData.hovered ? 1 : 0.8
- source: "images/scrollbar-handle-" + (styleData.horizontal ? "horizontal" : "vertical") + ".png"
- border.left: 2
- border.top: 2
- border.right: 2
- border.bottom: 2
+ property Component handle: Item {
+ property bool sticky: false
+ property bool hovered: __activeControl !== "none"
+ implicitWidth: img.implicitWidth
+ implicitHeight: img.implicitHeight
+ BorderImage {
+ id: img
+ opacity: styleData.pressed && !transientScrollBars ? 0.5 : styleData.hovered ? 1 : 0.8
+ source: "images/scrollbar-handle-" + (transientScrollBars ? "transient" : styleData.horizontal ? "horizontal" : "vertical") + ".png"
+ border.left: transientScrollBars ? 5 : 2
+ border.top: transientScrollBars ? 5 : 2
+ border.right: transientScrollBars ? 5 : 2
+ border.bottom: transientScrollBars ? 5 : 2
+ anchors.top: !styleData.horizontal ? parent.top : undefined
+ anchors.margins: transientScrollBars ? 2 : 0
+ anchors.bottom: parent.bottom
+ anchors.right: parent.right
+ anchors.left: styleData.horizontal ? parent.left : undefined
+ width: !styleData.horizontal && transientScrollBars ? sticky ? 13 : 10 : img.implicitWidth
+ height: styleData.horizontal && transientScrollBars ? sticky ? 13 : 10 : img.implicitHeight
+ Behavior on width { enabled: !styleData.horizontal && transientScrollBars; NumberAnimation { duration: 100 } }
+ Behavior on height { enabled: styleData.horizontal && transientScrollBars; NumberAnimation { duration: 100 } }
+ }
+ onHoveredChanged: if (hovered) sticky = true
}
/*! This component controls the appearance of the
@@ -152,8 +180,9 @@ Style {
\endtable
*/
property Component incrementControl: Rectangle {
- implicitWidth: 16
- implicitHeight: 16
+ visible: !transientScrollBars
+ implicitWidth: transientScrollBars ? 0 : 16
+ implicitHeight: transientScrollBars ? 0 : 16
Rectangle {
anchors.fill: parent
anchors.bottomMargin: -1
@@ -189,8 +218,9 @@ Style {
\endtable
*/
property Component decrementControl: Rectangle {
- implicitWidth: 16
- implicitHeight: 16
+ visible: !transientScrollBars
+ implicitWidth: transientScrollBars ? 0 : 16
+ implicitHeight: transientScrollBars ? 0 : 16
Rectangle {
anchors.fill: parent
anchors.topMargin: styleData.horizontal ? 0 : -1
@@ -222,8 +252,39 @@ Style {
/*! \internal */
property Component __scrollbar: Item {
id: panel
- property string activeControl: ""
+ property string activeControl: "none"
property bool scrollToClickPosition: true
+ property bool isTransient: transientScrollBars
+
+ property bool on: false
+ property bool raised: false
+ property bool sunken: __styleData.upPressed | __styleData.downPressed | __styleData.handlePressed
+
+ states: State {
+ name: "out"
+ when: isTransient && panel.activeControl === "none" && !panel.on && !panel.raised
+ PropertyChanges { target: panel; opacity: 0 }
+ }
+
+ transitions: Transition {
+ to: "out"
+ SequentialAnimation {
+ PauseAnimation { duration: 450 }
+ NumberAnimation { properties: "opacity"; duration: 200 }
+ PropertyAction { target: panel; property: "visible"; value: false }
+ PropertyAction { target: handleControl.item; property: "sticky"; value: false }
+ PropertyAction { target: bg.item; property: "sticky"; value: false }
+ }
+ }
+
+ // once a sbar has been hovered, it sticks on the screen. however, if this
+ // sbar gets raised because the other sbar is hovered => clear the sticky bit
+ onRaisedChanged: {
+ if (raised) {
+ bg.item.sticky = false
+ handleControl.item.sticky = false
+ }
+ }
implicitWidth: __styleData.horizontal ? 200 : bg.implicitWidth
implicitHeight: __styleData.horizontal ? bg.implicitHeight : 200
@@ -335,6 +396,7 @@ Style {
readonly property bool pressed: __styleData.handlePressed
readonly property bool horizontal: __styleData.horizontal
}
+ readonly property alias __activeControl: panel.activeControl
}
}
diff --git a/src/controls/Styles/Base/images/scrollbar-handle-transient.png b/src/controls/Styles/Base/images/scrollbar-handle-transient.png
new file mode 100644
index 0000000000000000000000000000000000000000..befd30a0ecd4e23ae31dff6addac473c389a8771
GIT binary patch
literal 249
zcmeAS@N?(olHy`uVBq!ia0vp^f*{Pn1|+R>-G2cowj^(N7l!{JxM1({$v_d#0*}aI
z1_o|n5N2eUHAey{$X?><>&kwYQ=FHX_y0Q)ZJ<z_r;B5V#p&cZ_VsqmOB*<Q<xd_s
zuwi~<<3oG7J@Tvg_#!6Uu;t<5IqDMehT-TjAWQXxUZ=_>hLixFV!<;LOpKb9d2b4^
z8}Sw%5Ze&aIXBRGMa~IEqp$J~W+`Gb+s-(drC2gEJL`9{eR2A_u*H)T$Pp2Yvt|el
kZ_*V%9J6Ikh&>}i=Pk)S-wsT00lJ96)78&qol`;+03*>%5C8xG
literal 0
HcmV?d00001
diff --git a/src/controls/Styles/Desktop/ScrollViewStyle.qml b/src/controls/Styles/Desktop/ScrollViewStyle.qml
index cd8a2a049..205fb8dc1 100644
--- a/src/controls/Styles/Desktop/ScrollViewStyle.qml
+++ b/src/controls/Styles/Desktop/ScrollViewStyle.qml
@@ -68,7 +68,6 @@ Style {
readonly property bool scrollToClickedPosition: __styleitem.styleHint("scrollToClickPosition") !== 0
property Component __scrollbar: StyleItem {
- readonly property bool isTransient: __styleitem.parent && __styleitem.transient
anchors.fill:parent
elementType: "scrollbar"
hover: activeControl != "none"
diff --git a/src/controls/Styles/styles.pri b/src/controls/Styles/styles.pri
index 77f998923..50e9fac0c 100644
--- a/src/controls/Styles/styles.pri
+++ b/src/controls/Styles/styles.pri
@@ -56,6 +56,7 @@ STYLES_QML_FILES += \
$$PWD/Base/images/tab_selected.png \
$$PWD/Base/images/scrollbar-handle-horizontal.png \
$$PWD/Base/images/scrollbar-handle-vertical.png \
+ $$PWD/Base/images/scrollbar-handle-transient.png \
$$PWD/Base/images/progress-indeterminate.png \
$$PWD/Base/images/editbox.png \
$$PWD/Base/images/arrow-up.png \
--
GitLab