Differential D26354 Diff 72580 src/controls/ActionRow.qml

Changeset View

Standalone View

View Options

src/controls/ActionRow.qml

  • This file was added.
1​import QtQuick 2.12
2​import QtQuick.Controls 2.13
3​import org.kde.kirigami 2.12 as Kirigami
4​
5​/**
6​ * This is a row with actions that will trigger on swipe. It is recommended to use
7​ * this class to provide swipe shortcuts for the user.
8​ *
9​ * Example usage for an action row:
10​ * @code
11​ * import QtQuick 2.12
12​ * import QtQuick.Controls 2.12
13​ * import org.kde.kirigami 2.12 as Kirigami
14​ *
15​ * ListView {
16​ * anchors.fill: parent
17​ * model: 10
18​ * delegate: ActionRow {
19​ * width: parent.width
20​ * leftAction: Action {
21​ * text: "Copy"
22​ * onTriggered: {
23​ * print("Copy triggered")
24​ * }
25​ * }
26​ * centerAction: Action {
27​ * onTriggered: {
28​ * print("Center triggered")
29​ * }
30​ * }
31​ * rightAction: Action {
32​ * text: "Delete"
33​ * SwipeAction.foregroundColor: "white"
34​ * SwipeAction.backgroundColor: "#bf0039"
35​ * SwipeAction.isDelete: true
36​ * icon.name: "edit-delete"
37​ * onTriggered: {
38​ * print("Delete triggered")
39​ * }
40​ * }
41​ * }
42​ * }
43​ * @endcode
44​ *
45​ * @inherit QtQuick.Item
46​ */
47​Item {
48​ id: root
49​ clip: true
50​
51​ height: Kirigami.Units.gridUnit*4
52​
ngrahamUnsubmitted
Done

Make this a multiple of GridUnit

ngraham: Make this a multiple of GridUnit
53​ default property alias children: topRect.children
54​
55​ NumberAnimation {
56​ id: deleteAnimation
57​
58​ target: root
59​ property: "height"
60​ duration: 200
61​ from: 64
62​ to: 0
63​ easing.type: Easing.InOutQuad
64​ }
65​
66​
67​ /**
68​ * leftAction: QtQuick.Controls.Action
69​ * If set, this property holds the action triggered when the left
70​ * edge is revealed.
71​ */
72​ property Action leftAction: null
73​ /**
74​ * centerAction: QtQuick.Controls.Action
75​ * If set, this property holds the action that will be triggered
76​ * when the row is interacted with.
77​ *
78​ * The row will show hover and click effects when this property is set.
79​ */
80​ property Action centerAction: null
81​ /**
82​ * rightAction: QtQuick.Controls.Action
83​ * If set, this property holds the action triggered when the right
84​ * edge is revealed.
85​ */
86​ property Action rightAction: null
87​
88​ function defaultBg(color) {
89​ if (!Qt.colorEqual(color, "transparent")) {
90​ return color
91​ } else {
92​ return Kirigami.Theme.highlightColor
93​ }
94​ }
95​ function defaultFg(color) {
96​ if (!Qt.colorEqual(color, "transparent")) {
97​ return color
98​ } else {
99​ return Kirigami.Theme.highlightedTextColor
100​ }
101​ }
102​
103​ function calcTranslation() {
104​ if (drag.translation.x == 0) {
105​ return 0
106​ }
107​ if (root.rightAction == null && drag.translation.x < 0) {
108​ return 0
109​ }
110​ if (root.leftAction == null && drag.translation.x > 0) {
111​ return 0
112​ }
113​
114​ let midway = (root.width / 2)
115​
116​ if (drag.translation.x > -midway) {
117​ return Math.min(drag.translation.x, midway)
118​ } else if (drag.translation.x < midway) {
119​ return Math.max(drag.translation.x, -midway)
120​ }
121​ }
122​
123​ Row {
124​ anchors.fill: parent
125​ Rectangle {
126​ width: root.width / 2
127​ height: root.height
128​ Rectangle {
129​ color: defaultBg(leftAction.Kirigami.SwipeAction.backgroundColor)
130​ anchors.horizontalCenter: parent.horizontalCenter
131​ anchors.verticalCenter: parent.verticalCenter
132​ radius: width
133​ height: width
134​ width: drag.translation.x > root.width*(1/4) ? root.width : 0
135​ Behavior on width {
136​ NumberAnimation {
137​ duration: 400
138​ easing.type: Easing.InOutQuad
139​ }
140​ }
141​ }
142​ Column {
143​ anchors.left: parent.left
144​ anchors.leftMargin: Kirigami.Units.gridUnit
145​ anchors.verticalCenter: parent.verticalCenter
ngrahamUnsubmitted
Done

use a multiple of largeSpacing or smallSpacing or even gridUnit

ngraham: use a multiple of largeSpacing or smallSpacing or even gridUnit
146​ Kirigami.Icon {
147​ width: Kirigami.Units.iconSizes.smallMedium
148​ height: Kirigami.Units.iconSizes.smallMedium
ngrahamUnsubmitted
Done

smallMedium size

ngraham: smallMedium size
149​ visible: leftAction.icon.name != ""
150​ source: leftAction.icon.name
151​ Kirigami.Theme.textColor: drag.translation.x > root.width*(1/4) ? defaultFg(leftAction.Kirigami.SwipeAction.foregroundColor) : Kirigami.Theme.textColor
152​ anchors.horizontalCenter: parent.horizontalCenter
ngrahamUnsubmitted
Done

don't hardcode colors

ngraham: don't hardcode colors
153​ }
154​ Text {
155​ anchors.horizontalCenter: parent.horizontalCenter
156​ color: drag.translation.x > root.width*(1/4) ? defaultFg(leftAction.Kirigami.SwipeAction.foregroundColor) : Kirigami.Theme.textColor
157​ Behavior on color {
ngrahamUnsubmitted
Not Done

ditto

ngraham: ditto
158​ ColorAnimation {
159​ duration: 400
160​ easing.type: Easing.InOutQuad
161​ }
162​ }
163​ text: leftAction.text
164​ }
165​ }
166​ color: Kirigami.Theme.backgroundColor
167​ }
168​ Rectangle {
169​ width: root.width / 2
170​ height: root.height
171​ Rectangle {
172​ color: defaultBg(rightAction.Kirigami.SwipeAction.backgroundColor)
173​ anchors.horizontalCenter: parent.horizontalCenter
174​ anchors.verticalCenter: parent.verticalCenter
175​ radius: width
176​ height: width
177​ width: drag.translation.x < -root.width*(1/4) ? root.width : 0
178​ Behavior on width {
179​ NumberAnimation {
180​ duration: 400
181​ easing.type: Easing.InOutQuad
182​ }
183​ }
184​ }
185​ Column {
186​ anchors.right: parent.right
187​ anchors.rightMargin: Kirigami.Units.gridUnit
188​ anchors.verticalCenter: parent.verticalCenter
ngrahamUnsubmitted
Done

ditto

ngraham: ditto
189​ Kirigami.Icon {
190​ width: Kirigami.Units.iconSizes.smallMedium
191​ height: Kirigami.Units.iconSizes.smallMedium
ngrahamUnsubmitted
Done

ditto

ngraham: ditto
192​ source: rightAction.icon.name
193​ visible: rightAction.icon.name != ""
194​ Kirigami.Theme.textColor: drag.translation.x > root.width*(1/4) ? defaultFg(leftAction.Kirigami.SwipeAction.foregroundColor) : Kirigami.Theme.foregroundColor
195​ anchors.horizontalCenter: parent.horizontalCenter
ngrahamUnsubmitted
Done

ditto

ngraham: ditto
196​ }
197​ Text {
198​ anchors.horizontalCenter: parent.horizontalCenter
199​ color: drag.translation.x < -root.width*(1/4) ? defaultFg(rightAction.Kirigami.SwipeAction.foregroundColor) : Kirigami.Theme.foregroundColor
200​ Behavior on color {
ngrahamUnsubmitted
Done

ditto

ngraham: ditto
201​ ColorAnimation {
202​ duration: 400
203​ easing.type: Easing.InOutQuad
204​ }
205​ }
206​ text: rightAction.text
207​ }
208​ }
209​
210​ color: Kirigami.Theme.backgroundColor
211​ }
212​ }
213​
214​ Rectangle {
215​ id: topRect
216​
217​ Kirigami.Theme.colorSet: Kirigami.Theme.View
218​ color: Kirigami.Theme.backgroundColor
219​
220​ Rectangle {
221​ visible: root.centerAction != null
222​
223​ anchors.fill: parent
224​ color: Kirigami.Theme.highlightColor
225​ opacity: {
226​ return (topRectMouseArea.pressed) ? 0.3 : (topRectMouseArea.containsMouse ? 0.1 : 0);
227​ }
228​ Behavior on opacity {
229​ OpacityAnimator {
230​ duration: Kirigami.Units.longDuration
231​ easing.type: Easing.InOutQuad
232​ }
233​ }
234​ }
235​
236​ anchors.fill: parent
237​ transform: Translate {
238​ id: translation
239​ x: root.calcTranslation()
240​ }
241​
242​ MouseArea {
243​ id: topRectMouseArea
244​
245​ hoverEnabled: true
246​ anchors.fill: parent
247​ enabled: root.centerAction != null
248​ onClicked: {
249​ root.centerAction.trigger()
250​ }
251​ }
252​
253​ DragHandler {
254​ id: drag
255​ onActiveChanged: {
256​ if (!active) {
257​ let del = false
258​ if (drag.translation.x < -root.width*(1/4)) {
259​ if (rightAction.Kirigami.SwipeAction.isDelete) {
260​ del = true
261​ }
262​ rightAction.trigger()
263​ } else if (drag.translation.x > root.width*(1/4)) {
264​ if (leftAction.Kirigami.SwipeAction.isDelete) {
265​ del = true
266​ }
267​ leftAction.trigger()
268​ }
269​
270​ if (del) {
271​ deleteAnimation.restart()
272​ } else {
273​ fallBack.restart()
274​ }
275​ } else {
276​ fallBack.stop()
277​ }
278​ }
279​ }
280​ }
281​ Kirigami.Separator {
282​ anchors {
283​ bottom: parent.bottom
284​ left: parent.left
285​ right: parent.right
286​ }
287​ }
288​
289​ SequentialAnimation {
290​ id: fallBack
291​ NumberAnimation {
292​ target: translation
293​ property: "x"
294​ duration: 300
295​ to: 0
296​ easing.type: Easing.InOutQuad
297​ }
298​ }
299​}