style/impl/SwitchIndicator.qml

0001 /* SPDX-FileCopyrightText: 2020 Noah Davis <noahadvs@gmail.com>
0002  * SPDX-License-Identifier: LGPL-2.1-only OR LGPL-3.0-only OR LicenseRef-KDE-Accepted-LGPL
0003  */
0004
0005 import QtQuick
0006 import QtQuick.Templates as T
0007 import org.kde.kirigami as Kirigami
0008
0009 import "." as Impl
0010
0011 Item {
0012     id: root
0013
0014     property T.AbstractButton control: root.parent
0015     property bool mirrored: control.mirrored
0016     readonly property bool controlHasContent: control.contentItem && control.contentItem.width > 0
0017
0018     implicitWidth: implicitHeight*2
0019     implicitHeight: Impl.Units.inlineControlHeight
0020
0021     x: controlHasContent ? (root.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
0022     y: control.topPadding + (control.availableHeight - height) / 2
0023
0024     Kirigami.Theme.colorSet: Kirigami.Theme.Button
0025     Kirigami.Theme.inherit: false
0026
0027     Rectangle {
0028         id: background
0029         anchors {
0030             fill: parent
0031             margins: Math.floor(parent.height / 6)
0032         }
0033         radius: height / 2
0034         color: Kirigami.Theme.backgroundColor
0035         border {
0036             width: Impl.Units.smallBorder
0037             color: Impl.Theme.separatorColor()
0038         }
0039     }
0040
0041     Rectangle {
0042         id: fillEffectRect
0043         visible: width > handle.width/2
0044         color: Kirigami.Theme.alternateBackgroundColor
0045         border {
0046             width: Impl.Units.smallBorder
0047             color: Kirigami.Theme.focusColor
0048         }
0049         radius: height/2
0050         anchors {
0051             left: background.left
0052             right: handle.horizontalCenter
0053             top: background.top
0054             bottom: background.bottom
0055         }
0056     }
0057
0058     /* For some reason, if I try to turn the handle into a reusable component
0059      * like a SliderHandle, the fillEffectRect can't anchor to the handle:
0060      * "Cannot anchor to an item that isn't a parent or sibling."
0061      * Except, it is a sibling. Even if I set `parent: root` on the fillEffectRect
0062      * and the handle, I get the error. (╯°□°）╯︵ ┻━┻
0063      */
0064     Rectangle {
0065         id: handle
0066         anchors {
0067             top: parent.top
0068             bottom: parent.bottom
0069         }
0070         // It's necessary to use x position instead of anchors so that the handle position can be dragged
0071         x: Math.max(
0072             0,
0073             Math.min(
0074                 parent.width - width,
0075                 control.visualPosition * parent.width - (width / 2)
0076             )
0077         )
0078         width: height
0079         radius: height / 2
0080         color: Kirigami.Theme.backgroundColor
0081         border {
0082             width: Impl.Units.smallBorder
0083             color: control.down || control.visualFocus || control.hovered ?
0084                 Kirigami.Theme.focusColor : Impl.Theme.separatorColor()
0085         }
0086
0087         Behavior on border.color {
0088             enabled: control.down || control.visualFocus || control.hovered
0089             ColorAnimation {
0090                 duration: Kirigami.Units.shortDuration
0091                 easing.type: Easing.OutCubic
0092             }
0093         }
0094
0095         Behavior on x {
0096             enabled: handle.loaded// && !Kirigami.Settings.hasTransientTouchInput
0097             // Using SmoothedAnimation because the fill effect is anchored to the handle.
0098             SmoothedAnimation {
0099                 duration: Kirigami.Units.shortDuration
0100                 //SmoothedAnimations have a hardcoded InOutQuad easing
0101             }
0102         }
0103
0104         SmallBoxShadow {
0105             id: shadow
0106             opacity: control.down ? 0 : 1
0107             visible: control.enabled
0108             radius: parent.radius
0109         }
0110
0111         FocusRect {
0112             baseRadius: handle.radius
0113             visible: control.visualFocus
0114         }
0115
0116         // Prevents animations from running when loaded
0117         property bool loaded: false
0118         Component.onCompleted: {
0119             loaded = true
0120         }
0121     }
0122 }