qqc2-desktop-style/org.kde.desktop/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 2.15
0009 import org.kde.kirigami 2.8 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 switchColor: control.checked ? Qt.rgba(Kirigami.Theme.highlightColor.r, Kirigami.Theme.highlightColor.g, Kirigami.Theme.highlightColor.b, 0.5) : blendBackgroundWithTextColorWithRatio(0.9)
0027         readonly property color switchBorderColor: control.checked ? Kirigami.Theme.highlightColor : handleBorderColor
0028
0029         readonly property color handleColor: Kirigami.Theme.backgroundColor
0030         readonly property color handleBorderColor: (control.hovered || control.visualFocus) ? Kirigami.Theme.hoverColor : blendBackgroundWithTextColorWithRatio(0.7)
0031
0032         function blendBackgroundWithTextColorWithRatio(factor) {
0033             // 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.
0034             return Qt.tint(Kirigami.Theme.textColor, Qt.rgba(Kirigami.Theme.backgroundColor.r, Kirigami.Theme.backgroundColor.g, Kirigami.Theme.backgroundColor.b, factor))
0035         }
0036     }
0037
0038     Rectangle {
0039         id: background
0040
0041         anchors {
0042             fill: parent
0043             // margins so that the background is a bit shorter than the handle
0044             topMargin: Math.floor(parent.height / 6)
0045             bottomMargin: Math.floor(parent.height / 6)
0046         }
0047
0048         radius: Math.round(height / 2)
0049         color: colorFactory.switchColor
0050         border.color: colorFactory.switchBorderColor
0051
0052         Behavior on color {
0053             ColorAnimation {
0054                 easing.type: Easing.InCubic
0055                 duration: Kirigami.Units.shortDuration
0056             }
0057         }
0058     }
0059
0060     Rectangle {
0061         id: handle
0062
0063         // It's necessary to use x position instead of anchors so that the handle position can be dragged
0064         x: Math.min(parent.width - width, control.visualPosition * parent.width)
0065
0066         anchors {
0067             top: parent.top
0068             bottom: parent.bottom
0069         }
0070
0071         width: height
0072         radius: Math.floor(width / 2)
0073         color: colorFactory.handleColor
0074         border.color: colorFactory.handleBorderColor
0075
0076         Behavior on x {
0077             enabled: !control.pressed
0078             SmoothedAnimation {
0079                 duration: Kirigami.Units.shortDuration
0080             }
0081         }
0082
0083         Behavior on color {
0084             ColorAnimation {
0085                 easing.type: Easing.InCubic
0086                 duration: Kirigami.Units.shortDuration
0087             }
0088         }
0089     }
0090 }