style/impl/RadioIndicator.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 // TODO: replace with ShadowedRectangle because it produces smoother circles.
0012 // Unfortunately I can't do it now because batching issues can cause all radio
0013 // buttons to show hover effects when only one is hovered
0014 Rectangle {
0015     id: root
0016
0017     property T.AbstractButton control: root.parent
0018     property bool mirrored: control.mirrored
0019     readonly property bool controlHasContent: control.contentItem && control.contentItem.width > 0
0020
0021     implicitWidth: implicitHeight
0022     implicitHeight: Impl.Units.inlineControlHeight
0023
0024     x: controlHasContent ? (root.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
0025     y: control.topPadding + (control.availableHeight - height) / 2
0026
0027     radius: width / 2
0028
0029     Kirigami.Theme.colorSet: Kirigami.Theme.Button
0030     Kirigami.Theme.inherit: false
0031     color: control.down || control.checked ? Kirigami.Theme.alternateBackgroundColor : Kirigami.Theme.backgroundColor
0032
0033     border {
0034         width: Impl.Units.smallBorder
0035         color: control.down || control.checked || control.visualFocus || control.hovered ? Kirigami.Theme.focusColor : Impl.Theme.separatorColor();
0036     }
0037
0038     Behavior on color {
0039         enabled: control.down || control.checked
0040         ColorAnimation {
0041             duration: Kirigami.Units.shortDuration
0042             easing.type: Easing.OutCubic
0043         }
0044     }
0045
0046     Behavior on border.color {
0047         enabled: control.down || control.checked || control.visualFocus || control.hovered
0048         ColorAnimation {
0049             duration: Kirigami.Units.shortDuration
0050             easing.type: Easing.OutCubic
0051         }
0052     }
0053
0054     SmallBoxShadow {
0055         id: shadow
0056         opacity: control.down ? 0 : 1
0057         visible: control.enabled
0058         radius: parent.radius
0059     }
0060
0061     Rectangle {
0062         id: mark
0063         anchors.centerIn: parent
0064         implicitHeight: {
0065             let h = root.height * 0.4
0066             h -= h % 2
0067             // we need an odd width because it's centered, so there needs to be a center pixel
0068             return Math.round(h + 1)
0069         }
0070         implicitWidth: implicitHeight
0071         radius: height / 2
0072         color: Kirigami.Theme.textColor
0073         visible: control.checked
0074         scale: 0.8
0075     }
0076
0077     FocusRect {
0078         baseRadius: root.radius
0079         visible: control.visualFocus
0080     }
0081
0082     states: [
0083         State {
0084             when: !control.checked
0085             name: "unchecked"
0086             PropertyChanges {
0087                 target: mark
0088                 scale: 0.8
0089             }
0090         },
0091         State {
0092             when: control.checked
0093             name: "checked"
0094             PropertyChanges {
0095                 target: mark
0096                 scale: 1
0097             }
0098         }
0099     ]
0100
0101     transitions: [
0102         /* Using `from: "unchecked"` instead of `from: "*"` prevents the transition
0103          * from running when the parent control is created.
0104          * This can reduce resource usage spikes on pages that have way too many
0105          * controls with indicators.
0106          */
0107         Transition {
0108             from: "unchecked"
0109             to: "checked"
0110             ScaleAnimator {
0111                 duration: Kirigami.Units.shortDuration
0112                 easing.type: Easing.OutQuad
0113             }
0114         }
0115     ]
0116 }