QML Base style: support transient scrollbars

Change-Id: I4bcbf80f382ad8e972c302a6144c5b42a28f936d
Reviewed-by: Gabriel de Dietrich <gabriel.dedietrich@digia.com>

7 files changed, 91 insertions, 18 deletions

diff --git a/src/controls/Private/ScrollViewHelper.qml b/src/controls/Private/ScrollViewHelper.qml
index 2037a16f..af3f8793 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 7278ae5b..13c79484 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 336d3b46..3d67776f 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 a5f4372a..7bfc1351 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 00000000..befd30a0
--- /dev/null
+++ b/src/controls/Styles/Base/images/scrollbar-handle-transient.png
diff --git a/src/controls/Styles/Desktop/ScrollViewStyle.qml b/src/controls/Styles/Desktop/ScrollViewStyle.qml
index cd8a2a04..205fb8dc 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 77f99892..50e9fac0 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 \