diff --git a/src/declarativeimports/plasmacomponents3/ScrollBar.qml b/src/declarativeimports/plasmacomponents3/ScrollBar.qml index 08a8f3796..936aa5c21 100644 --- a/src/declarativeimports/plasmacomponents3/ScrollBar.qml +++ b/src/declarativeimports/plasmacomponents3/ScrollBar.qml @@ -1,75 +1,137 @@ /* * Copyright 2016 Marco Martin * * This program is free software; you can redistribute it and/or modify * it under the terms of the GNU Library General Public License as * published by the Free Software Foundation; either version 2, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU Library General Public License for more details * * You should have received a copy of the GNU Library General Public * License along with this program; if not, write to the * Free Software Foundation, Inc., * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import QtQuick 2.6 import QtQuick.Templates @QQC2_VERSION@ as T import org.kde.plasma.core 2.0 as PlasmaCore -import org.kde.kirigami 2.2 as Kirigami +import org.kde.kirigami 2.10 as Kirigami T.ScrollBar { - id: control + id: controlRoot implicitWidth: background.implicitWidth implicitHeight: background.implicitHeight hoverEnabled: !Kirigami.Settings.isMobile - visible: control.size < 1.0 + visible: controlRoot.size < 1.0 - background: PlasmaCore.FrameSvgItem { - imagePath:"widgets/scrollbar" + interactive: !Kirigami.Settings.tabletMode + + background: Item { + visible: controlRoot.size < 1.0 && controlRoot.interactive implicitWidth: scrollbarSvg.elementSize("hint-scrollbar-size").width implicitHeight: implicitWidth - colorGroup: PlasmaCore.ColorScope.colorGroup - visible: control.size < 1.0 - - prefix: control.horizontal ? "background-horizontal" : "background-vertical" - opacity: Kirigami.Settings.isMobile ? (control.active ? 1 : 0) : (control.hovered ? 1 : 0) - Behavior on opacity { - OpacityAnimator { - duration: units.longDuration + Rectangle { + anchors { + top: parent.top + bottom: parent.bottom + left: parent.left + } + // the separator line doesn't work yet with the plasmoids design + visible: typeof plasmoid === "undefined" + width: units.devicePixelRatio + color: PlasmaCore.ColorScope.textColor + opacity: 0.1 + } + PlasmaCore.FrameSvgItem { + anchors.fill: parent + imagePath:"widgets/scrollbar" + colorGroup: PlasmaCore.ColorScope.colorGroup + + prefix: controlRoot.horizontal ? "background-horizontal" : "background-vertical" + opacity: controlRoot.hovered + Behavior on opacity { + OpacityAnimator { + duration: units.longDuration + } } } } - contentItem: PlasmaCore.FrameSvgItem { - imagePath:"widgets/scrollbar" - implicitWidth: scrollbarSvg.elementSize("hint-scrollbar-size").width - implicitHeight: implicitWidth - colorGroup: PlasmaCore.ColorScope.colorGroup - visible: control.size < 1.0 - - prefix: control.hovered ? "mouseover-slider" : "slider" - opacity: Kirigami.Settings.isMobile ? (control.active ? 1 : 0) : 1 - Behavior on opacity { - OpacityAnimator { - duration: units.longDuration + onPositionChanged: { + disappearTimer.restart(); + handleGraphics.handleState = Math.min(1, handleGraphics.handleState + 0.1) + } + + contentItem: Item { + PlasmaCore.FrameSvgItem { + anchors.fill: parent + imagePath:"widgets/scrollbar" + + implicitWidth: scrollbarSvg.elementSize("hint-scrollbar-size").width + visible: controlRoot.interactive && controlRoot.size < 1.0 + implicitHeight: implicitWidth + colorGroup: PlasmaCore.ColorScope.colorGroup + + prefix: controlRoot.hovered ? "mouseover-slider" : "slider" + } + Rectangle { + id: handleGraphics + + property real handleState: 0 + + visible: !controlRoot.interactive + x: Math.round(controlRoot.orientation == Qt.Vertical + ? (parent.width - width) - (parent.width/2 - width/2) * handleState + : 0) + + y: Math.round(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: PlasmaCore.ColorScope.textColor + opacity: 0.3 + Timer { + id: disappearTimer + interval: 1000 + onTriggered: { + resetAnim.restart(); + handleGraphics.handleState = 0; + } } } } PlasmaCore.Svg { id: scrollbarSvg imagePath: "widgets/scrollbar" //TODO: support arrows? property bool arrowPresent: scrollbarSvg.hasElement("arrow-up") //new theme may be different onRepaintNeeded: arrowPresent = scrollbarSvg.hasElement("arrow-up") } } diff --git a/src/desktoptheme/breeze/widgets/scrollbar.svg b/src/desktoptheme/breeze/widgets/scrollbar.svg index 0b465562e..02520dc6c 100644 --- a/src/desktoptheme/breeze/widgets/scrollbar.svg +++ b/src/desktoptheme/breeze/widgets/scrollbar.svg @@ -1,1064 +1,1065 @@ image/svg+xml image/svg+xml + transform="matrix(0.75,0,0,1,15.25,13)"> + transform="matrix(0.75,0,0,0.75,15.25,13.75)"> + transform="matrix(0.75,0,0,0.75,15.25,18.25)"> + transform="matrix(-0.75,0,0,1,25.75,13)"> + transform="matrix(-0.75,0,0,0.75,25.75,13.75)"> + transform="matrix(-0.75,0,0,0.75,25.75,18.25)"> + transform="matrix(0,0.75,-0.1,0,21.7,24.25)"> + style="opacity:0.6;fill:currentColor;fill-opacity:1;fill-rule:evenodd;stroke:none" /> + d="m 9,7 v 10 h 4 V 7 Z" + style="opacity:0.6;fill:currentColor;fill-opacity:1;fill-rule:evenodd;stroke:none" /> + d="m 9,3 v 4 h 4 C 13,4.784 11.216,3 9,3 Z" + style="opacity:0.6;fill:currentColor;fill-opacity:1;fill-rule:evenodd;stroke:none" /> + transform="matrix(0,-0.75,-0.1,0,21.700001,58.75)"> + d="m 9,7 v 10 h 4 V 7 Z" + style="opacity:0.6;fill:currentColor;fill-opacity:1;fill-rule:evenodd;stroke:none" /> + id="background-vertical-center" + transform="translate(3)"> + transform="matrix(0,-0.75,-0.1,0,42.700001,58.750001)"> + transform="translate(3,33)">