diff --git a/org.kde.desktop/ScrollBar.qml b/org.kde.desktop/ScrollBar.qml --- a/org.kde.desktop/ScrollBar.qml +++ b/org.kde.desktop/ScrollBar.qml @@ -23,7 +23,7 @@ import QtQuick 2.6 import org.kde.qqc2desktopstyle.private 1.0 as StylePrivate import QtQuick.Templates @QQC2_VERSION@ as T -import org.kde.kirigami 2.4 as Kirigami +import org.kde.kirigami 2.11 as Kirigami T.ScrollBar { id: controlRoot @@ -36,11 +36,63 @@ visible: controlRoot.size < 1.0 && controlRoot.policy !== T.ScrollBar.AlwaysOff stepSize: 0.02 + interactive: !Kirigami.Settings.tabletMode + + onPositionChanged: { + disappearTimer.restart(); + handleGraphics.handleState = Math.min(1, handleGraphics.handleState + 0.1) + } + + contentItem: Item { + visible: !controlRoot.interactive + + Rectangle { + id: handleGraphics + property real handleState: 0 + + x: controlRoot.orientation == Qt.Vertical + ? (parent.width - width) - (parent.width/2 - width/2) * handleState + : 0 + + y: controlRoot.orientation == Qt.Horizontal + ? (parent.height - height) - (parent.height/2 - height/2) * handleState + : 0 + + + NumberAnimation { + id: resetAnim + target: handleGraphics + property: "handleState" + from: handleGraphics.handleState + to: 0 + duration: Kirigami.Units.longDuration + easing.type: Easing.InOutQuad + } + + width: Math.round(controlRoot.orientation == Qt.Vertical + ? Math.max(2, Kirigami.Units.smallSpacing * handleState) + : parent.width) + height: Math.round(controlRoot.orientation == Qt.Horizontal + ? Math.max(2, Kirigami.Units.smallSpacing * handleState) + : parent.height) + radius: Math.min(width, height) + color: Kirigami.Theme.textColor + opacity: 0.3 + Timer { + id: disappearTimer + interval: 1000 + onTriggered: { + resetAnim.restart(); + handleGraphics.handleState = 0; + } + } + } + } background: MouseArea { id: mouseArea anchors.fill: parent - visible: controlRoot.size < 1.0 + visible: controlRoot.size < 1.0 && interactive hoverEnabled: true state: "inactive" acceptedButtons: Qt.LeftButton | Qt.MiddleButton @@ -185,6 +237,4 @@ } ] } - - contentItem: Item {} }