src/style.5/Slider.qml

0001 /*
0002  * Copyright 2017 Marco Martin <mart@kde.org>
0003  * Copyright 2017 The Qt Company Ltd.
0004  *
0005  * GNU Lesser General Public License Usage
0006  * Alternatively, this file may be used under the terms of the GNU Lesser
0007  * General Public License version 3 as published by the Free Software
0008  * Foundation and appearing in the file LICENSE.LGPLv3 included in the
0009  * packaging of this file. Please review the following information to
0010  * ensure the GNU Lesser General Public License version 3 requirements
0011  * will be met: https://www.gnu.org/licenses/lgpl.html.
0012  *
0013  * GNU General Public License Usage
0014  * Alternatively, this file may be used under the terms of the GNU
0015  * General Public License version 2.0 or later as published by the Free
0016  * Software Foundation and appearing in the file LICENSE.GPL included in
0017  * the packaging of this file. Please review the following information to
0018  * ensure the GNU General Public License version 2.0 requirements will be
0019  * met: http://www.gnu.org/licenses/gpl-2.0.html.
0020  */
0021
0022
0023 import QtQuick 2.15
0024 import QtQuick.Templates 2.15 as T
0025 import org.mauikit.controls 1.3 as Maui
0026 import QtGraphicalEffects 1.0
0027
0028 T.Slider
0029 {
0030     id: control
0031     Maui.Theme.colorSet: Maui.Theme.Button
0032     Maui.Theme.inherit: false
0033
0034     implicitWidth: background.implicitWidth
0035     implicitHeight: background.implicitHeight
0036
0037     hoverEnabled: !Maui.Handy.isMobile
0038
0039     handle: Rectangle
0040     {
0041         id: handleRect
0042         visible: control.pressed || control.hovered
0043         x: control.leftPadding + (control.horizontal ? control.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
0044         y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : control.visualPosition * (control.availableHeight - height))
0045
0046         width: Maui.Style.iconSizes.small
0047         height: width
0048
0049         scale: control.pressed ? 1.5 : 1
0050         radius: width /2
0051         color: Maui.Theme.highlightColor
0052
0053         Behavior on scale
0054         {
0055             NumberAnimation
0056             {
0057                 duration: 250
0058             }
0059         }
0060     }
0061
0062     snapMode: T.Slider.SnapOnRelease
0063
0064     background: Rectangle
0065     {
0066         id: bg
0067         x: control.leftPadding + (control.horizontal ? 0 : (control.availableWidth - width) / 2)
0068         y: control.topPadding + (control.horizontal ? (control.availableHeight - height) / 2 : 0)
0069
0070         implicitWidth: control.horizontal ? 200 : 48
0071         implicitHeight: control.horizontal ? 48 : 200
0072
0073         width: control.horizontal ? control.availableWidth : 8
0074         height: control.horizontal ? 8 : control.availableHeight
0075
0076         color: control.hovered ? control.Maui.Theme.hoverColor : control.Maui.Theme.backgroundColor
0077         scale: control.horizontal && control.mirrored ? -1 : 1
0078
0079         Behavior on color
0080         {
0081             Maui.ColorTransition{}
0082         }
0083
0084         Rectangle
0085         {
0086             x: control.horizontal ? 0 : (parent.width - width) / 2
0087             y: control.horizontal ? (parent.height - height) / 2 : control.visualPosition * parent.height
0088             width: control.horizontal ? control.position * parent.width : 8
0089             height: control.horizontal ? 8 : control.position * parent.height
0090
0091             color: Qt.rgba(control.Maui.Theme.highlightColor.r, control.Maui.Theme.highlightColor.g, control.Maui.Theme.highlightColor.b, 0.7)
0092             //            border.color: control.Maui.Theme.highlightColor
0093
0094             Behavior on color
0095             {
0096                 Maui.ColorTransition{}
0097             }
0098         }
0099
0100
0101
0102         layer.enabled: true
0103         layer.effect: OpacityMask
0104         {
0105             maskSource: Rectangle
0106             {
0107                 width: bg.width
0108                 height: bg.height
0109                 radius:  Maui.Style.radiusV
0110             }
0111         }
0112
0113         MouseArea
0114         {
0115             property int wheelDelta: 0
0116
0117             anchors {
0118                 fill: parent
0119                 leftMargin: control.leftPadding
0120                 rightMargin: control.rightPadding
0121             }
0122
0123             acceptedButtons: Qt.NoButton
0124
0125             onWheel: {
0126                 const lastValue = control.value
0127                 const delta = wheel.angleDelta.y || wheel.angleDelta.x
0128                 wheelDelta += delta;
0129                 // magic number 120 for common "one click"
0130                 // See: https://doc.qt.io/qt-5/qml-qtquick-wheelevent.html#angleDelta-prop
0131                 while (wheelDelta >= 120) {
0132                     wheelDelta -= 120;
0133                     control.decrease();
0134                 }
0135                 while (wheelDelta <= -120) {
0136                     wheelDelta += 120;
0137                     control.increase();
0138                 }
0139                 if (lastValue !== control.value) {
0140                     control.moved();
0141                 }
0142             }
0143         }
0144     }
0145
0146
0147 }