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 2.15
0007 import QtQuick.Templates 2.15 as Templates
0008 import org.kde.kirigami 2.19 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     implicitWidth: root.horizontal ? 200 : Impl.Units.grooveHeight
0031     implicitHeight: root.vertical ? 200 : Impl.Units.grooveHeight
0032
0033
0034     //NOTE: Manually setting x,y,width,height because that's what the Basic, Fusion and Material QQC2 styles do.
0035     // Inset would be more idiomatic for QQC2, but this is easier to deal with for now since the behavior is expected by app devs.
0036
0037     width: root.horizontal ? control.availableWidth - root.handleWidth/2 - secondHandleWidth/2 + Impl.Units.grooveHeight : implicitWidth
0038     height: root.vertical ? control.availableHeight - root.handleHeight/2 - secondHandleHeight/2 + Impl.Units.grooveHeight : implicitHeight
0039
0040     x: control.leftPadding + (root.horizontal ?
0041         (control.mirrored ? root.secondHandleWidth/2 : root.handleWidth/2) - radius
0042         : (control.availableWidth - width) / 2)
0043     y: control.topPadding + (root.vertical ? root.secondHandleHeight/2 - radius : (control.availableHeight - height) / 2)
0044
0045     radius: Impl.Units.grooveHeight/2
0046     color: Kirigami.Theme.backgroundColor
0047     border {
0048         width: Impl.Units.smallBorder
0049         color: Kirigami.Theme.separatorColor
0050     }
0051
0052     Rectangle {
0053         id: fill
0054         anchors {
0055             fill: parent
0056             leftMargin: root.horizontal ? root.startPosition * parent.width - (root.startPosition * Impl.Units.grooveHeight) : 0
0057             rightMargin: root.horizontal ? (1-root.endPosition) * parent.width - ((1-root.endPosition) * Impl.Units.grooveHeight) : 0
0058             topMargin: root.vertical ? (1-root.endPosition) * parent.height - ((1-root.endPosition) * Impl.Units.grooveHeight) : 0
0059             bottomMargin: root.vertical ? root.startPosition * parent.height - (root.startPosition * Impl.Units.grooveHeight) : 0
0060         }
0061
0062         radius: parent.radius
0063         color: Kirigami.Theme.alternateBackgroundColor
0064         border {
0065             width: Impl.Units.smallBorder
0066             color: Kirigami.Theme.focusColor
0067         }
0068
0069         Behavior on anchors.leftMargin {
0070             enabled: fill.loaded && !Kirigami.Settings.hasTransientTouchInput
0071             SmoothedAnimation {
0072                 duration: Kirigami.Units.longDuration
0073                 velocity: 800
0074                 //SmoothedAnimations have a hardcoded InOutQuad easing
0075             }
0076         }
0077         Behavior on anchors.rightMargin {
0078             enabled: fill.loaded && !Kirigami.Settings.hasTransientTouchInput
0079             SmoothedAnimation {
0080                 duration: Kirigami.Units.longDuration
0081                 velocity: 800
0082             }
0083         }
0084         Behavior on anchors.topMargin {
0085             enabled: fill.loaded && !Kirigami.Settings.hasTransientTouchInput
0086             SmoothedAnimation {
0087                 duration: Kirigami.Units.longDuration
0088                 velocity: 800
0089             }
0090         }
0091         Behavior on anchors.bottomMargin {
0092             enabled: fill.loaded && !Kirigami.Settings.hasTransientTouchInput
0093             SmoothedAnimation {
0094                 duration: Kirigami.Units.longDuration
0095                 velocity: 800
0096             }
0097         }
0098
0099         // Prevents animations from running when loaded
0100         // HACK: for some reason, this won't work without a 1ms timer
0101         property bool loaded: false
0102         Timer {
0103             id: awfulHackTimer
0104             interval: 1
0105             onTriggered: fill.loaded = true
0106         }
0107         Component.onCompleted: {
0108             awfulHackTimer.start()
0109         }
0110     }
0111
0112     //NOTE: this code has problems when large from/to ranges are used.
0113     // Keeping it here to work on it later.
0114     /*
0115     Loader {
0116         id: tickmarkLoader
0117         visible: root.control.stepSize > 0
0118         active: visible
0119         anchors {
0120             left: root.horizontal ? parent.left : parent.right
0121             top: root.vertical ? parent.top : parent.bottom
0122             leftMargin: root.horizontal ? parent.radius : Impl.Units.smallBorder
0123             topMargin: root.vertical ? parent.radius : Impl.Units.smallBorder
0124         }
0125         width: root.vertical ? implicitWidth : root.width - parent.radius
0126         height: root.horizontal ? implicitHeight : root.height - parent.radius
0127         sourceComponent: markGridComponent
0128     }
0129
0130     Loader {
0131         id: tickmarkLoader2
0132         visible: tickmarkLoader.visible
0133         active: visible
0134         anchors {
0135             left: parent.left
0136             top: parent.top
0137             leftMargin: root.horizontal ? parent.radius : -width - Impl.Units.smallBorder
0138             topMargin: root.vertical ? parent.radius : -height - Impl.Units.smallBorder
0139         }
0140         width: tickmarkLoader.width
0141         height: tickmarkLoader.height
0142         sourceComponent: markGridComponent
0143     }
0144
0145     Component {
0146         id: markGridComponent
0147         Grid {
0148             id: markGrid
0149             rows: root.vertical ? markRepeater.model : 1
0150             columns: root.horizontal ? markRepeater.model : 1
0151             spacing: (root.vertical ? height/(markRepeater.model-1) : width/(markRepeater.model-1)) - Impl.Units.smallBorder*2
0152             Repeater {
0153                 id: markRepeater
0154                 model: (root.control.to - root.control.from)/root.control.stepSize + 1
0155                 delegate: Rectangle {
0156                     implicitWidth: root.vertical ? root.x - Impl.Units.smallBorder : Impl.Units.smallBorder
0157                     implicitHeight: root.horizontal ? root.y - Impl.Units.smallBorder : Impl.Units.smallBorder
0158                     color: (root.horizontal && x >= fill.x && x <= fill.x + fill.width)
0159                         || (root.vertical && y >= fill.y && y <= fill.y + fill.height)
0160                         ? Kirigami.Theme.focusColor
0161                         : Kirigami.Theme.separatorColor
0162                 }
0163             }
0164         }
0165     }*/
0166 }