style/impl/SliderGroove.qml

0001 /* SPDX-FileCopyrightText: 2017 The Qt Company Ltd.
0002  * SPDX-FileCopyrightText: 2020 Noah Davis <noahadvs@gmail.com>
0003  * SPDX-License-Identifier: LGPL-3.0-only OR GPL-2.0-or-later OR LicenseRef-KDE-Accepted-LGPL OR LicenseRef-KFQF-Accepted-GPL
0004  */
0005
0006 import QtQuick
0007 import QtQuick.Templates as Templates
0008 import org.kde.kirigami as Kirigami
0009
0010 import "." as Impl
0011
0012 Rectangle {
0013     id: root
0014
0015     property Templates.Control control
0016     property real startPosition: isRangeSlider ? control.first.position : 0
0017     property real endPosition: isRangeSlider ? control.second.position : control.position
0018
0019     readonly property bool isRangeSlider: control instanceof Templates.RangeSlider
0020
0021     readonly property real handleWidth: isRangeSlider ? control.first.handle.width ?? 0 : control.handle.width ?? 0
0022     readonly property real handleHeight: isRangeSlider ? control.first.handle.height ?? 0 : control.handle.height ?? 0
0023     readonly property real secondHandleWidth: isRangeSlider ? control.second.handle.width ?? 0 : handleWidth
0024     readonly property real secondHandleHeight: isRangeSlider ? control.second.handle.height ?? 0 : handleHeight
0025
0026     readonly property bool horizontal: root.control.horizontal
0027     readonly property bool vertical: root.control.vertical
0028
0029
0030     //NOTE: Manually setting x,y,width,height because that's what the Basic, Fusion and Material QQC2 styles do.
0031     // Inset would be more idiomatic for QQC2, but this is easier to deal with for now since the behavior is expected by app devs.
0032
0033     x: control.leftPadding + (root.horizontal ?
0034         (control.mirrored ? root.secondHandleWidth/2 : root.handleWidth/2) - radius
0035         : (control.availableWidth - width) / 2)
0036     y: control.topPadding + (root.vertical ? root.secondHandleHeight/2 - radius : (control.availableHeight - height) / 2)
0037
0038     implicitWidth: root.horizontal ? 200 : Impl.Units.grooveHeight
0039     implicitHeight: root.vertical ? 200 : Impl.Units.grooveHeight
0040
0041     width: root.horizontal ? control.availableWidth - root.handleWidth/2 - secondHandleWidth/2 + Impl.Units.grooveHeight : implicitWidth
0042     height: root.vertical ? control.availableHeight - root.handleHeight/2 - secondHandleHeight/2 + Impl.Units.grooveHeight : implicitHeight
0043
0044     radius: Impl.Units.grooveHeight/2
0045     color: Kirigami.Theme.backgroundColor
0046     border {
0047         width: Impl.Units.smallBorder
0048         color: Impl.Theme.separatorColor()
0049     }
0050
0051     Rectangle {
0052         id: fill
0053         anchors {
0054             fill: parent
0055             leftMargin: root.horizontal ? root.startPosition * parent.width - (root.startPosition * Impl.Units.grooveHeight) : 0
0056             rightMargin: root.horizontal ? (1-root.endPosition) * parent.width - ((1-root.endPosition) * Impl.Units.grooveHeight) : 0
0057             topMargin: root.vertical ? (1-root.endPosition) * parent.height - ((1-root.endPosition) * Impl.Units.grooveHeight) : 0
0058             bottomMargin: root.vertical ? root.startPosition * parent.height - (root.startPosition * Impl.Units.grooveHeight) : 0
0059         }
0060
0061         radius: parent.radius
0062         color: Kirigami.Theme.alternateBackgroundColor
0063         border {
0064             width: Impl.Units.smallBorder
0065             color: Kirigami.Theme.focusColor
0066         }
0067
0068         Behavior on anchors.leftMargin {
0069             enabled: fill.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 anchors.rightMargin {
0077             enabled: fill.loaded && !Kirigami.Settings.hasTransientTouchInput
0078             SmoothedAnimation {
0079                 duration: Kirigami.Units.longDuration
0080                 velocity: 800
0081             }
0082         }
0083         Behavior on anchors.topMargin {
0084             enabled: fill.loaded && !Kirigami.Settings.hasTransientTouchInput
0085             SmoothedAnimation {
0086                 duration: Kirigami.Units.longDuration
0087                 velocity: 800
0088             }
0089         }
0090         Behavior on anchors.bottomMargin {
0091             enabled: fill.loaded && !Kirigami.Settings.hasTransientTouchInput
0092             SmoothedAnimation {
0093                 duration: Kirigami.Units.longDuration
0094                 velocity: 800
0095             }
0096         }
0097
0098         // Prevents animations from running when loaded
0099         // HACK: for some reason, this won't work without a 1ms timer
0100         property bool loaded: false
0101         Timer {
0102             id: awfulHackTimer
0103             interval: 1
0104             onTriggered: fill.loaded = true
0105         }
0106         Component.onCompleted: {
0107             awfulHackTimer.start()
0108         }
0109     }
0110
0111     //NOTE: this code has problems when large from/to ranges are used.
0112     // Keeping it here to work on it later.
0113     /*
0114     Loader {
0115         id: tickmarkLoader
0116         visible: root.control.stepSize > 0
0117         active: visible
0118         anchors {
0119             left: root.horizontal ? parent.left : parent.right
0120             top: root.vertical ? parent.top : parent.bottom
0121             leftMargin: root.horizontal ? parent.radius : Impl.Units.smallBorder
0122             topMargin: root.vertical ? parent.radius : Impl.Units.smallBorder
0123         }
0124         width: root.vertical ? implicitWidth : root.width - parent.radius
0125         height: root.horizontal ? implicitHeight : root.height - parent.radius
0126         sourceComponent: markGridComponent
0127     }
0128
0129     Loader {
0130         id: tickmarkLoader2
0131         visible: tickmarkLoader.visible
0132         active: visible
0133         anchors {
0134             left: parent.left
0135             top: parent.top
0136             leftMargin: root.horizontal ? parent.radius : -width - Impl.Units.smallBorder
0137             topMargin: root.vertical ? parent.radius : -height - Impl.Units.smallBorder
0138         }
0139         width: tickmarkLoader.width
0140         height: tickmarkLoader.height
0141         sourceComponent: markGridComponent
0142     }
0143
0144     Component {
0145         id: markGridComponent
0146         Grid {
0147             id: markGrid
0148             rows: root.vertical ? markRepeater.model : 1
0149             columns: root.horizontal ? markRepeater.model : 1
0150             spacing: (root.vertical ? height/(markRepeater.model-1) : width/(markRepeater.model-1)) - Impl.Units.smallBorder*2
0151             Repeater {
0152                 id: markRepeater
0153                 model: (root.control.to - root.control.from)/root.control.stepSize + 1
0154                 delegate: Rectangle {
0155                     implicitWidth: root.vertical ? root.x - Impl.Units.smallBorder : Impl.Units.smallBorder
0156                     implicitHeight: root.horizontal ? root.y - Impl.Units.smallBorder : Impl.Units.smallBorder
0157                     color: (root.horizontal && x >= fill.x && x <= fill.x + fill.width)
0158                         || (root.vertical && y >= fill.y && y <= fill.y + fill.height)
0159                         ? Kirigami.Theme.focusColor
0160                         : Impl.Theme.separatorColor()
0161                 }
0162             }
0163         }
0164     }*/
0165 }