style/impl/SliderHandle.qml

0001 /* SPDX-FileCopyrightText: 2020 Noah Davis <noahadvs@gmail.com>
0002  * SPDX-License-Identifier: LGPL-2.1-only OR LGPL-3.0-only OR LicenseRef-KDE-Accepted-LGPL
0003  */
0004
0005 import QtQuick
0006 import QtQuick.Templates as T
0007 import org.kde.kirigami as Kirigami
0008
0009 import "." as Impl
0010
0011 Rectangle {
0012     id: root
0013
0014     property T.Control control: root.parent
0015     property real position: control.position
0016     property real visualPosition: control.visualPosition
0017     property bool hovered: control.hovered
0018     property bool pressed: control.pressed
0019     property bool visualFocus: control.visualFocus
0020
0021     property bool usePreciseHandle: false
0022
0023     implicitWidth: implicitHeight
0024     implicitHeight: Impl.Units.inlineControlHeight
0025
0026     // It's not necessary here. Not sure if it would swap leftPadding with
0027     // rightPadding in the x position calculation, but there's no risk to
0028     // being safe here.
0029     LayoutMirroring.enabled: false
0030
0031     // It's necessary to use x and y positions instead of anchors so that the handle position can be dragged
0032     x: {
0033         let xPos = 0
0034         if (control.horizontal) {
0035             xPos = root.visualPosition * (control.availableWidth - width)
0036         } else {
0037             xPos = (control.availableWidth - width) / 2
0038         }
0039         return xPos + control.leftPadding
0040     }
0041     y: {
0042         let yPos = 0
0043         if (control.vertical) {
0044             yPos = root.visualPosition * (control.availableHeight - height)
0045         } else {
0046             yPos = (control.availableHeight - height) / 2
0047         }
0048         return yPos + control.topPadding
0049     }
0050
0051     rotation: root.vertical && usePreciseHandle ? -90 : 0
0052
0053     radius: height / 2
0054     color: Kirigami.Theme.backgroundColor
0055     border {
0056         width: Impl.Units.smallBorder
0057         color: root.pressed || root.visualFocus || root.hovered ? Kirigami.Theme.focusColor : Impl.Theme.separatorColor()
0058     }
0059
0060     Behavior on border.color {
0061         enabled: root.pressed || root.visualFocus || root.hovered
0062         ColorAnimation {
0063             duration: Kirigami.Units.shortDuration
0064             easing.type: Easing.OutCubic
0065         }
0066     }
0067
0068     Behavior on x {
0069         enabled: root.loaded && !Kirigami.Settings.hasTransientTouchInput
0070         SmoothedAnimation {
0071             duration: Kirigami.Units.longDuration
0072             velocity: 800
0073             //SmoothedAnimations have a hardcoded InOutQuad easing
0074         }
0075     }
0076     Behavior on y {
0077         enabled: root.loaded && !Kirigami.Settings.hasTransientTouchInput
0078         SmoothedAnimation {
0079             duration: Kirigami.Units.longDuration
0080             velocity: 800
0081         }
0082     }
0083
0084     SmallBoxShadow {
0085         id: shadow
0086         opacity: root.pressed ? 0 : 1
0087         visible: control.enabled
0088         radius: parent.radius
0089     }
0090
0091     FocusRect {
0092         baseRadius: root.radius
0093         visible: root.visualFocus
0094     }
0095
0096     // Prevents animations from running when loaded
0097     // HACK: for some reason, this won't work without a 1ms timer
0098     property bool loaded: false
0099     Timer {
0100         id: awfulHackTimer
0101         interval: 1
0102         onTriggered: root.loaded = true
0103     }
0104     Component.onCompleted: {
0105         awfulHackTimer.start()
0106     }
0107 }