Warning, /plasma/qqc2-breeze-style/style/impl/CheckIndicator.qml is written in an unsupported language. File is not indexed.
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 import org.kde.breeze
0009
0010 import "." as Impl
0011
0012 Rectangle {
0013 id: root
0014
0015 property T.AbstractButton control: root.parent
0016 property int checkState: control.checkState
0017 property int symbolSize: Impl.Units.symbolSize(Math.min(width, height))
0018 property bool mirrored: control.mirrored
0019 readonly property bool controlHasContent: control.contentItem && control.contentItem.width > 0
0020
0021 property bool highlightBackground: root.checkState !== Qt.Unchecked || (control.down && !(control instanceof T.CheckDelegate))
0022 property bool highlightBorder: control.down || root.checkState !== Qt.Unchecked || control.highlighted || control.visualFocus || control.hovered
0023
0024 visible: control.checkable
0025
0026 x: controlHasContent ? (root.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2
0027 y: control.topPadding + (control.availableHeight - height) / 2
0028
0029 implicitWidth: implicitHeight
0030 implicitHeight: Impl.Units.inlineControlHeight
0031
0032 Kirigami.Theme.colorSet: Kirigami.Theme.Button
0033 Kirigami.Theme.inherit: false
0034 color: highlightBackground ? Kirigami.Theme.alternateBackgroundColor : Kirigami.Theme.backgroundColor
0035
0036 radius: Impl.Units.smallRadius
0037
0038 border {
0039 width: Impl.Units.smallBorder
0040 color: highlightBorder ?
0041 Kirigami.Theme.focusColor : Impl.Theme.separatorColor()
0042 //Kirigami.ColorUtils.tintWithAlpha(root.color, Kirigami.Theme.textColor, 0.3)
0043 }
0044
0045 Behavior on color {
0046 enabled: highlightBackground
0047 ColorAnimation {
0048 duration: Kirigami.Units.shortDuration
0049 easing.type: Easing.OutCubic
0050 }
0051 }
0052 Behavior on border.color {
0053 enabled: highlightBorder
0054 ColorAnimation {
0055 duration: Kirigami.Units.shortDuration
0056 easing.type: Easing.OutCubic
0057 }
0058 }
0059
0060 SmallBoxShadow {
0061 id: shadow
0062 opacity: control.down ? 0 : 1
0063 visible: control.enabled
0064 radius: parent.radius
0065 }
0066
0067 PaintedSymbol {
0068 id: checkmark
0069 anchors.centerIn: parent
0070 // Should reliably create pixel aligned checkmarks that don't get cut off on the sides.
0071 height: root.symbolSize + penWidth*2
0072 width: height
0073 color: Kirigami.Theme.textColor
0074 symbolType: PaintedSymbol.Checkmark
0075 visible: root.checkState === Qt.Checked
0076
0077 /* RTL support. Horizontally flips the checkmark.
0078 * Is this actually a good idea for checkmarks?
0079 transform: control.mirrored ? horizontalFlipMatrix : null
0080
0081 Matrix4x4 {
0082 id: horizontalFlipMatrix
0083 matrix: Qt.matrix4x4(
0084 -1, 0, 0, checkmark.width,
0085 0, 1, 0, 0,
0086 0, 0, 1, 0,
0087 0, 0, 0, 1
0088 )
0089 }
0090 */
0091 }
0092
0093 Item {
0094 id: partialCheckmark
0095 visible: root.checkState === Qt.PartiallyChecked
0096 anchors.centerIn: parent
0097 width: root.symbolSize
0098 height: 2
0099
0100 Rectangle {
0101 id: leftRect
0102 anchors.left: parent.left
0103 anchors.verticalCenter: parent.verticalCenter
0104 height: parent.height
0105 width: height
0106 color: Kirigami.Theme.textColor
0107 }
0108
0109 Rectangle {
0110 id: middleRect
0111 anchors.centerIn: parent
0112 height: parent.height
0113 width: height
0114 color: Kirigami.Theme.textColor
0115 }
0116
0117 Rectangle {
0118 id: rightRect
0119 anchors.right: parent.right
0120 anchors.verticalCenter: parent.verticalCenter
0121 height: parent.height
0122 width: height
0123 color: Kirigami.Theme.textColor
0124 }
0125 }
0126
0127 FocusRect {
0128 baseRadius: root.radius
0129 visible: control.visualFocus
0130 }
0131
0132 Rectangle {
0133 id: sidewaysRevealRect
0134 antialiasing: true
0135 anchors {
0136 right: checkmark.right
0137 top: checkmark.top
0138 bottom: checkmark.bottom
0139 }
0140 width: 0
0141 visible: width > 0
0142 color: root.color
0143 }
0144
0145 NumberAnimation {
0146 id: sidewaysRevealAnimation
0147 target: sidewaysRevealRect
0148 property: "width"
0149 from: checkmark.width
0150 to: 0
0151 duration: Kirigami.Units.shortDuration
0152 //Intentionally not using an easing curve
0153 }
0154
0155 states: [
0156 State {
0157 name: "unchecked"
0158 when: root.checkState === Qt.Unchecked
0159 },
0160 State {
0161 name: "checked"
0162 when: root.checkState === Qt.Checked
0163 },
0164 State {
0165 name: "partiallychecked"
0166 when: root.checkState === Qt.PartiallyChecked
0167 }
0168 ]
0169
0170 property bool loaded: false
0171 Component.onCompleted: {
0172 loaded = true
0173 }
0174
0175 /* I'm using this instead of transitions because I couldn't reliably
0176 * trigger the animation when going from the partiallychecked state to the
0177 * checked state.
0178 */
0179 onStateChanged: {
0180 /* Prevents the transition from running when the parent control is created.
0181 * This can reduce resource usage spikes on pages that have way too many checkboxes.
0182 */
0183 if (root.loaded
0184 && (state == "checked" || state == "partiallychecked")
0185 && !Kirigami.Settings.isMobile //TODO: make the animation look better on mobile
0186 ) {
0187 // equivalent to stop(), then start()
0188 sidewaysRevealAnimation.restart()
0189 }
0190 }
0191 }