qqc2-desktop-style/org.kde.desktop/RangeSlider.qml

0001 /*
0002     SPDX-FileCopyrightText: 2017 Marco Martin <mart@kde.org>
0003     SPDX-FileCopyrightText: 2017 The Qt Company Ltd.
0004
0005     SPDX-License-Identifier: LGPL-3.0-only OR GPL-2.0-or-later
0006 */
0007
0008
0009 import QtQuick 2.6
0010 import QtQuick.Controls 2.15
0011 import QtQuick.Templates 2.15 as T
0012 import org.kde.kirigami 2.4 as Kirigami
0013
0014 T.RangeSlider {
0015     id: control
0016
0017     implicitWidth: Math.max(background ? background.implicitWidth : 0,
0018         Math.max(first.handle ? first.handle.implicitWidth : 0,
0019                  second.handle ? second.handle.implicitWidth : 0) + leftPadding + rightPadding)
0020     implicitHeight: Math.max(background ? background.implicitHeight : 0,
0021         Math.max(first.handle ? first.handle.implicitHeight : 0,
0022                  second.handle ? second.handle.implicitHeight : 0) + topPadding + bottomPadding)
0023
0024     padding: 6
0025
0026     first.handle: Rectangle {
0027         property bool horizontal: control.orientation === Qt.Horizontal
0028         x: control.leftPadding + (horizontal ? control.first.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
0029         y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : control.first.visualPosition * (control.availableHeight - height))
0030         implicitWidth: 18
0031         implicitHeight: 18
0032         radius: width / 2
0033         property color borderColor: Kirigami.Theme.textColor
0034         border.color: control.activeFocus ? Kirigami.Theme.highlightColor : Qt.rgba(borderColor.r, borderColor.g, borderColor.b, 0.3)
0035         color: Kirigami.Theme.backgroundColor
0036         Rectangle {
0037             z: -1
0038             x: 1
0039             y: 1
0040             width: parent.width
0041             height: parent.height
0042             radius: width / 2
0043             color: Qt.rgba(0, 0, 0, 0.15)
0044         }
0045     }
0046
0047     second.handle: Rectangle {
0048         property bool horizontal: control.orientation === Qt.Horizontal
0049         x: control.leftPadding + (horizontal ? control.second.visualPosition * (control.availableWidth - width) : (control.availableWidth - width) / 2)
0050         y: control.topPadding + (horizontal ? (control.availableHeight - height) / 2 : control.second.visualPosition * (control.availableHeight - height))
0051         implicitWidth: 18
0052         implicitHeight: 18
0053         radius: width / 2
0054         property color borderColor: Kirigami.Theme.textColor
0055         border.color: control.activeFocus ? Kirigami.Theme.highlightColor : Qt.rgba(borderColor.r, borderColor.g, borderColor.b, 0.3)
0056         color: Kirigami.Theme.backgroundColor
0057         Rectangle {
0058             z: -1
0059             x: 1
0060             y: 1
0061             width: parent.width
0062             height: parent.height
0063             radius: width / 2
0064             color: Qt.rgba(0, 0, 0, 0.15)
0065         }
0066     }
0067
0068     background: Rectangle {
0069         readonly property bool horizontal: control.orientation === Qt.Horizontal
0070         implicitWidth: horizontal ? 200 : 6
0071         implicitHeight: horizontal ? 6 : 200
0072         width: horizontal ? control.availableWidth : implicitWidth
0073         height: horizontal ? implicitHeight : control.availableHeight
0074         radius: Math.round(Math.min(width / 2, height / 2))
0075         property color bgColor: Kirigami.Theme.textColor
0076         color: Qt.rgba(bgColor.r, bgColor.g, bgColor.b, 0.3)
0077         anchors.centerIn: parent
0078
0079         Rectangle {
0080             x: parent.horizontal
0081                 ? (LayoutMirroring.enabled
0082                    ? parent.width - width - control.first.position * parent.width
0083                    : control.first.position * parent.width)
0084                 : 0
0085             y: parent.horizontal ? 0 : control.second.visualPosition * parent.height + 6
0086             width: parent.horizontal ? control.second.position * parent.width - control.first.position * parent.width - 6 : 6
0087             height: parent.horizontal ? 6 : control.second.position * parent.height - control.first.position * parent.height - 6
0088             color: Kirigami.Theme.highlightColor
0089         }
0090     }
0091 }