org.kde.desktop/private/SwitchIndicator.qml

0001 /*
0002     SPDX-FileCopyrightText: 2022 Tanbir Jishan <tantalising007@gmail.com>
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 import QtQuick
0009 import org.kde.kirigami as Kirigami
0010
0011 Item {
0012     id: indicator
0013     implicitWidth: implicitHeight * 2
0014     implicitHeight: Kirigami.Units.gridUnit
0015     layer.enabled: control.opacity < 1.0
0016
0017     property Item control
0018     property alias handle: handle
0019
0020     Kirigami.Theme.colorSet: Kirigami.Theme.Button
0021     Kirigami.Theme.inherit: false
0022
0023     QtObject { // colors collected in one place so that main code remains clean and these properties are not exposed
0024         id: colorFactory
0025
0026         readonly property color switchBorderColor: control.checked ? Kirigami.Theme.highlightColor : handleBorderColor
0027
0028         readonly property color handleColor: Kirigami.Theme.backgroundColor
0029         readonly property color handleBorderColor: (control.hovered || control.visualFocus) ? Kirigami.Theme.hoverColor : Kirigami.ColorUtils.linearInterpolation(Kirigami.Theme.backgroundColor, Kirigami.Theme.textColor, Kirigami.Theme.frameContrast)
0030
0031         function blendBackgroundWithTextColorWithRatio(factor) {
0032             // blending of background color with text color for producing a border color. The usual ratios are 70:30, 80:20 and 75:25. The more the background color, the more the contrast.
0033             return Qt.tint(Kirigami.Theme.textColor, Qt.alpha(Kirigami.Theme.backgroundColor, factor))
0034         }
0035     }
0036
0037     Rectangle {
0038         id: inactive
0039
0040         anchors {
0041             fill: parent
0042             // margins so that the background is a bit shorter than the handle
0043             topMargin: Math.floor(parent.height / 6)
0044             bottomMargin: Math.floor(parent.height / 6)
0045         }
0046
0047         radius: Math.round(height / 2)
0048         color: colorFactory.blendBackgroundWithTextColorWithRatio(0.9)
0049         border.color: colorFactory.switchBorderColor
0050     }
0051
0052     Rectangle {
0053         anchors {
0054             left: inactive.left
0055             top: inactive.top
0056             bottom: inactive.bottom
0057             right: handle.right
0058         }
0059
0060         radius: inactive.radius
0061         color: Qt.alpha(Kirigami.Theme.highlightColor, 0.5)
0062     }
0063
0064     Rectangle {
0065         id: handle
0066
0067         x: Math.max(0, Math.min(parent.width - width, control.visualPosition * parent.width - (width / 2)))
0068
0069         anchors {
0070             top: parent.top
0071             bottom: parent.bottom
0072         }
0073
0074         width: height
0075         radius: Math.floor(width / 2)
0076         color: colorFactory.handleColor
0077         border.color: colorFactory.handleBorderColor
0078
0079         Behavior on x {
0080             enabled: !control.pressed
0081             SmoothedAnimation {
0082                 duration: Kirigami.Units.shortDuration
0083             }
0084         }
0085
0086         Behavior on color {
0087             ColorAnimation {
0088                 easing.type: Easing.InCubic
0089                 duration: Kirigami.Units.shortDuration
0090             }
0091         }
0092     }
0093 }