blob: 3b19a5a7a79a97302f8eb5d09e3db3d95098c4f9 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
|
import QtQuick
import qs.Common
import qs.Widgets
Item {
id: toggle
LayoutMirroring.enabled: I18n.isRtl
LayoutMirroring.childrenInherit: true
// API
property bool checked: false
property bool enabled: true
property bool toggling: false
property string text: ""
property string description: ""
property color descriptionColor: Theme.surfaceVariantText
property bool hideText: false
signal clicked
signal toggled(bool checked)
signal toggleCompleted(bool checked)
readonly property bool showText: text && !hideText
readonly property int trackWidth: 52
readonly property int trackHeight: 30
readonly property int insetCircle: 24
width: showText ? parent.width : trackWidth
height: showText ? Math.max(trackHeight, textColumn.implicitHeight + Theme.spacingM * 2) : trackHeight
function handleClick() {
if (!enabled)
return;
clicked();
toggled(!checked);
}
StyledRect {
id: background
anchors.fill: parent
radius: showText ? Theme.cornerRadius : 0
color: "transparent"
visible: showText
StateLayer {
visible: showText
disabled: !toggle.enabled
stateColor: Theme.primary
cornerRadius: parent.radius
onClicked: toggle.handleClick()
}
}
Row {
anchors.left: parent.left
anchors.right: toggleTrack.left
anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: Theme.spacingM
anchors.rightMargin: Theme.spacingM
spacing: Theme.spacingXS
visible: showText
Column {
id: textColumn
width: parent.width
anchors.verticalCenter: parent.verticalCenter
spacing: Theme.spacingXS
StyledText {
text: toggle.text
font.pixelSize: Appearance.fontSize.normal
font.weight: Font.Medium
opacity: toggle.enabled ? 1 : 0.4
width: parent.width
horizontalAlignment: Text.AlignLeft
}
StyledText {
text: toggle.description
font.pixelSize: Appearance.fontSize.small
color: toggle.descriptionColor
wrapMode: Text.WordWrap
width: parent.width
visible: toggle.description.length > 0
horizontalAlignment: Text.AlignLeft
}
}
}
StyledRect {
id: toggleTrack
width: showText ? trackWidth : Math.max(parent.width, trackWidth)
height: showText ? trackHeight : Math.max(parent.height, trackHeight)
anchors.right: parent.right
anchors.rightMargin: showText ? Theme.spacingM : 0
anchors.verticalCenter: parent.verticalCenter
radius: Theme.cornerRadius
// Distinguish disabled checked vs unchecked so unchecked disabled switches don't look enabled
color: !toggle.enabled ? (toggle.checked ? Qt.alpha(Theme.surfaceText, 0.12) : "transparent") : (toggle.checked ? Theme.primary : Theme.surfaceVariantAlpha)
opacity: toggle.toggling ? 0.6 : 1
// M3 disabled unchecked border: on surface 12% opacity
border.color: toggle.checked ? "transparent" : (!toggle.enabled ? Qt.alpha(Theme.surfaceText, 0.12) : Theme.outline)
readonly property int pad: Math.round((height - thumb.width) / 2)
readonly property int edgeLeft: pad
readonly property int edgeRight: width - thumb.width - pad
StyledRect {
id: thumb
width: toggle.checked ? insetCircle : insetCircle - 4
height: toggle.checked ? insetCircle : insetCircle - 4
radius: Theme.cornerRadius
anchors.verticalCenter: parent.verticalCenter
// M3 disabled thumb:
// checked = solid surface | unchecked = outlined off-state thumb
color: !toggle.enabled ? (toggle.checked ? Theme.surface : "transparent") : (toggle.checked ? Theme.surface : Theme.outline)
border.color: !toggle.enabled ? (toggle.checked ? "transparent" : Qt.alpha(Theme.surfaceText, 0.38)) : Theme.outline
border.width: (toggle.checked && toggle.enabled) ? 1 : 2
x: toggle.checked ? toggleTrack.edgeRight : toggleTrack.edgeLeft
Behavior on x {
SequentialAnimation {
NumberAnimation {
duration: Appearance.anim.durations.normal
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.emphasizedDecel
}
ScriptAction {
script: {
toggle.toggleCompleted(toggle.checked);
}
}
}
}
Behavior on color {
ColorAnimation {
duration: Appearance.anim.durations.normal
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.emphasized
}
}
Behavior on border.width {
NumberAnimation {
duration: Appearance.anim.durations.normal
easing.type: Easing.BezierSpline
easing.bezierCurve: Appearance.anim.curves.emphasized
}
}
DankIcon {
id: checkIcon
anchors.centerIn: parent
name: "check"
size: 20
// M3 disabled icon: on surface 38%
color: toggle.enabled ? Theme.surfaceText : Qt.alpha(Theme.surfaceText, 0.38)
filled: true
opacity: (toggle.checked && toggle.enabled) ? 1 : 0
scale: (toggle.checked && toggle.enabled) ? 1 : 0.6
Behavior on opacity {
NumberAnimation {
duration: Anims.durShort
easing.type: Easing.BezierSpline
easing.bezierCurve: Anims.emphasized
}
}
Behavior on scale {
NumberAnimation {
duration: Anims.durShort
easing.type: Easing.BezierSpline
easing.bezierCurve: Anims.emphasized
}
}
}
}
StateLayer {
disabled: !toggle.enabled
stateColor: Theme.primary
cornerRadius: parent.radius
onClicked: toggle.handleClick()
}
}
}
|