Ubuntu Notes app

Merge lp:~rpadovani/reminders-app/improveListItemSwipe into lp:reminders-app

  1. improveListItemSwipe
  2. Merge into trunk
Proposed by Riccardo Padovani
Status: Merged
Approved by: Michael Zanetti
Approved revision: 395
Merged at revision: 398
Proposed branch: lp:~rpadovani/reminders-app/improveListItemSwipe
Merge into: lp:reminders-app
Diff against target: 390 lines (+113/-98)
2 files modified
src/app/qml/components/ListItemWithActions.qml (+93/-93)
src/app/qml/components/ListItemWithActionsCheckBox.qml (+20/-5)
To merge this branch: bzr merge lp:~rpadovani/reminders-app/improveListItemSwipe
Reviewer Review Type Date Requested Status
Michael Zanetti (community) Approve
Ubuntu Phone Apps Jenkins Bot continuous-integration Approve
Review via email: mp+254748@code.launchpad.net

Commit message

Improve ListItemWithActions using the Dekko's one.

Description of the change

I took the Dekko's ListItemWithActions component, and I added to it our edits (green icons, mainly). This improve UX, and should fix bug #1430158

To post a comment you must log in.
Revision history for this message
Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot) wrote :

PASSED: Continuous integration, rev:394
http://91.189.93.70:8080/job/reminders-app-ci/733/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests-utopic/2467
        deb: http://91.189.93.70:8080/job/generic-mediumtests-utopic/2467/artifact/work/output/*zip*/output.zip
    SUCCESS: http://91.189.93.70:8080/job/reminders-app-utopic-amd64-ci/335
    SUCCESS: http://91.189.93.70:8080/job/reminders-app-vivid-amd64-ci/155

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/reminders-app-ci/733/rebuild

review: Approve (continuous-integration)
Revision history for this message
Michael Zanetti (mzanetti) wrote :

The background behind the rightActions is now grey. should be white instead. Looks good otherwise.

review: Needs Fixing
lp:~rpadovani/reminders-app/improveListItemSwipe updated
395. By Riccardo Padovani

Set background to white in ListItemRightActions

Revision history for this message
Riccardo Padovani (rpadovani) wrote :

Thanks, fixed

Revision history for this message
Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot) wrote :

PASSED: Continuous integration, rev:395
http://91.189.93.70:8080/job/reminders-app-ci/734/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests-utopic/2470
        deb: http://91.189.93.70:8080/job/generic-mediumtests-utopic/2470/artifact/work/output/*zip*/output.zip
    SUCCESS: http://91.189.93.70:8080/job/reminders-app-utopic-amd64-ci/336
    SUCCESS: http://91.189.93.70:8080/job/reminders-app-vivid-amd64-ci/156

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/reminders-app-ci/734/rebuild

review: Approve (continuous-integration)
Revision history for this message
Michael Zanetti (mzanetti) wrote :

ack

review: Approve

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'src/app/qml/components/ListItemWithActions.qml'
2--- src/app/qml/components/ListItemWithActions.qml 2015-03-15 20:00:21 +0000
3+++ src/app/qml/components/ListItemWithActions.qml 2015-03-31 14:28:14 +0000
4@@ -14,8 +14,10 @@
5 * along with this program. If not, see <http://www.gnu.org/licenses/>.
6 */
7
8-import QtQuick 2.2
9+import QtQuick 2.3
10+import QtFeedback 5.0
11 import Ubuntu.Components 1.1
12+import Ubuntu.Components.ListItems 1.0 as ListItem
13
14 Item {
15 id: root
16@@ -32,6 +34,7 @@
17 property color selectedRightActionColor: UbuntuColors.lightAubergine
18 property bool selected: false
19 property bool selectionMode: false
20+ property alias showDivider: divider.visible
21 property alias internalAnchors: mainContents.anchors
22 default property alias contents: mainContents.children
23
24@@ -49,46 +52,36 @@
25 signal itemClicked(var mouse)
26 signal itemPressAndHold(var mouse)
27
28- function returnToBoundsRTL(direction)
29+ function returnToBoundsRTL()
30 {
31 var actionFullWidth = actionWidth + units.gu(2)
32-
33- // go back to normal state if swipping reverse
34- if (direction === "LTR") {
35- updatePosition(0)
36- return
37- } else if (!triggerActionOnMouseRelease) {
38- updatePosition(-rightActionsView.width + units.gu(2))
39- return
40- }
41-
42 var xOffset = Math.abs(main.x)
43 var index = Math.min(Math.floor(xOffset / actionFullWidth), _visibleRightSideActions.length)
44- var newX = 0
45- if (index === _visibleRightSideActions.length) {
46- newX = -(rightActionsView.width - units.gu(2))
47- } else if (index >= 1) {
48- newX = -(actionFullWidth * index)
49+
50+ if (index < 1) {
51+ main.x = 0
52+ } else if (index === _visibleRightSideActions.length) {
53+ main.x = -(rightActionsView.width - units.gu(2))
54+ } else {
55+ main.x = -(actionFullWidth * index)
56 }
57- updatePosition(newX)
58 }
59
60- function returnToBoundsLTR(direction)
61+ function returnToBoundsLTR()
62 {
63 var finalX = leftActionWidth
64- if ((direction === "RTL") || (main.x <= (finalX * root.threshold)))
65- finalX = 0
66- updatePosition(finalX)
67+ if (main.x > (finalX * root.threshold))
68+ main.x = finalX
69+ else
70+ main.x = 0
71 }
72
73- function returnToBounds(direction)
74+ function returnToBounds()
75 {
76 if (main.x < 0) {
77- returnToBoundsRTL(direction)
78+ returnToBoundsRTL()
79 } else if (main.x > 0) {
80- returnToBoundsLTR(direction)
81- } else {
82- updatePosition(0)
83+ returnToBoundsLTR()
84 }
85 }
86
87@@ -118,8 +111,7 @@
88
89 function updateActiveAction()
90 {
91- if (triggerActionOnMouseRelease &&
92- (main.x <= -(root.actionWidth + units.gu(2))) &&
93+ if ((main.x <= -(root.actionWidth + units.gu(2))) &&
94 (main.x > -(rightActionsView.width - units.gu(2)))) {
95 var actionFullWidth = actionWidth + units.gu(2)
96 var xOffset = Math.abs(main.x)
97@@ -136,7 +128,7 @@
98
99 function resetSwipe()
100 {
101- updatePosition(0)
102+ main.x = 0
103 }
104
105 function filterVisibleActions(actions)
106@@ -151,16 +143,6 @@
107 return visibleActions
108 }
109
110- function updatePosition(pos)
111- {
112- if (!root.triggerActionOnMouseRelease && (pos !== 0)) {
113- mouseArea.state = pos > 0 ? "RightToLeft" : "LeftToRight"
114- } else {
115- mouseArea.state = ""
116- }
117- main.x = pos
118- }
119-
120 states: [
121 State {
122 name: "select"
123@@ -183,6 +165,15 @@
124
125 height: defaultHeight
126 clip: height !== defaultHeight
127+ HapticsEffect {
128+ id: clickEffect
129+ attackIntensity: 0.0
130+ attackTime: 50
131+ intensity: 1.0
132+ duration: 10
133+ fadeTime: 50
134+ fadeIntensity: 0.0
135+ }
136
137 Rectangle {
138 id: leftActionView
139@@ -208,7 +199,7 @@
140 }
141 }
142
143- Rectangle {
144+ Item {
145 id: rightActionsView
146
147 anchors {
148@@ -218,7 +209,12 @@
149 }
150 visible: _visibleRightSideActions.length > 0
151 width: rightActionsRepeater.count > 0 ? rightActionsRepeater.count * (root.actionWidth + units.gu(2)) + root.actionThreshold + units.gu(2) : 0
152- color: "white"
153+
154+ Rectangle {
155+ anchors.fill: parent
156+ color: 'white'
157+ }
158+
159 Row {
160 anchors{
161 top: parent.top
162@@ -234,6 +230,7 @@
163
164 model: _showActions ? _visibleRightSideActions : []
165 Item {
166+ id: actItem
167 property alias image: img
168
169 height: rightActionsView.height
170@@ -245,9 +242,27 @@
171 anchors.centerIn: parent
172 width: units.gu(3)
173 height: units.gu(3)
174- name: modelData.iconName
175- source: modelData.iconSource
176- color: root.activeAction === modelData ? root.selectedRightActionColor : UbuntuColors.lightGrey
177+ source: modelData.iconSource ? modelData.iconSource : ''
178+ name: modelData.iconName ? modelData.iconName : ''
179+ color: root.activeAction === modelData || !root.triggerActionOnMouseRelease ? root.selectedRightActionColor : UbuntuColors.lightGrey
180+ }
181+ Rectangle {
182+ id: underscore
183+ width: actItem.width
184+ height: units.gu(0.2)
185+ anchors {
186+ bottom: actItem.bottom
187+ bottomMargin: units.gu(1.5)
188+
189+ }
190+ // Both this and the action icon should match the header color when active
191+ color: root.selectedRightActionColor
192+ visible: root.activeAction === modelData
193+ onVisibleChanged: {
194+ if (visible) {
195+ clickEffect.start()
196+ }
197+ }
198 }
199 }
200 }
201@@ -255,7 +270,7 @@
202 }
203
204
205- Rectangle {
206+ Item {
207 id: main
208 objectName: "mainItem"
209
210@@ -265,7 +280,6 @@
211 }
212
213 width: parent.width
214- color: root.selected ? root.selectedColor : root.color
215
216 Loader {
217 id: selectionIcon
218@@ -289,13 +303,13 @@
219
220 anchors {
221 left: selectionIcon.right
222-// leftMargin: units.gu(2)
223+ //leftMargin: units.gu(2)
224 top: parent.top
225-// topMargin: units.gu(1)
226+ //topMargin: units.gu(1)
227 right: parent.right
228-// rightMargin: units.gu(2)
229+ //rightMargin: units.gu(2)
230 bottom: parent.bottom
231-// bottomMargin: units.gu(1)
232+ //bottomMargin: units.gu(1)
233 }
234 }
235
236@@ -307,9 +321,7 @@
237 duration: UbuntuAnimation.SlowDuration
238 }
239 }
240- Behavior on color {
241- ColorAnimation {}
242- }
243+
244 }
245
246 SequentialAnimation {
247@@ -350,7 +362,6 @@
248 script: {
249 root.activeAction.triggered(root)
250 root.activeAction = null;
251- mouseArea.state = ""
252 }
253 }
254 PauseAnimation {
255@@ -360,6 +371,7 @@
256 target: main
257 property: "x"
258 to: 0
259+
260 }
261 }
262
263@@ -368,10 +380,14 @@
264
265 property bool locked: root.locked || ((root.leftSideAction === null) && (root._visibleRightSideActions.count === 0))
266 property bool manual: false
267- property string direction: "None"
268- property real lastX: -1
269
270- anchors.fill: parent
271+ anchors {
272+ top: parent.top
273+ bottom: parent.bottom
274+ right: parent.right
275+ left: parent.left
276+ leftMargin: mouseArea.drag.active ? units.gu(4) : 0
277+ }
278 drag {
279 target: locked ? null : main
280 axis: Drag.XAxis
281@@ -380,47 +396,20 @@
282 threshold: root.actionThreshold
283 }
284
285- states: [
286- State {
287- name: "LeftToRight"
288- PropertyChanges {
289- target: mouseArea
290- drag.maximumX: 0
291- }
292- },
293- State {
294- name: "RightToLeft"
295- PropertyChanges {
296- target: mouseArea
297- drag.minimumX: 0
298- }
299- }
300- ]
301-
302- onMouseXChanged: {
303- var offset = (lastX - mouseX)
304- if (Math.abs(offset) <= root.actionThreshold) {
305- return
306- }
307- lastX = mouseX
308- direction = offset > 0 ? "RTL" : "LTR";
309- }
310-
311- onPressed: {
312- lastX = mouse.x
313- }
314-
315 onReleased: {
316- if (root.triggerActionOnMouseRelease && root.activeAction) {
317+ // if the mouse reach the safe are we should handle it as full swipe
318+ if (mouse.x < 0) {
319+ main.x = -(rightActionsView.width - units.gu(2))
320+ } else if (root.triggerActionOnMouseRelease && root.activeAction) {
321+ clickEffect.start()
322 triggerAction.start()
323 } else {
324- root.returnToBounds(direction)
325+ root.returnToBounds()
326 root.activeAction = null
327 }
328- lastX = -1
329- direction = "None"
330 }
331 onClicked: {
332+ clickEffect.start()
333 if (main.x === 0) {
334 root.itemClicked(mouse)
335 } else if (main.x > 0) {
336@@ -452,5 +441,16 @@
337 }
338 z: -1
339 }
340+
341+ ListItem.ThinDivider {
342+ id: divider
343+ visible: false
344+ width: parent.width + units.gu(4)
345+ anchors {
346+ left: parent.left
347+ right: parent.right
348+ bottom: parent.bottom
349+ bottomMargin: units.gu(-0.15)
350+ }
351+ }
352 }
353-
354
355=== modified file 'src/app/qml/components/ListItemWithActionsCheckBox.qml'
356--- src/app/qml/components/ListItemWithActionsCheckBox.qml 2015-02-12 22:57:46 +0000
357+++ src/app/qml/components/ListItemWithActionsCheckBox.qml 2015-03-31 14:28:14 +0000
358@@ -14,12 +14,27 @@
359 * along with this program. If not, see <http://www.gnu.org/licenses/>.
360 */
361
362-import QtQuick 2.2
363+import QtQuick 2.3
364 import Ubuntu.Components 1.1
365-
366-CheckBox {
367- checked: root.selected
368+import "../Theme"
369+
370+AbstractButton {
371+ id: checkBox
372+
373+ /*!
374+ Specifies whether the checkbox is checked or not. By default the property
375+ is set to false.
376+ */
377+ property bool isMultiSelect: true
378+ property bool checked: isMultiSelect ? root.selected : false
379 width: implicitWidth
380 // disable item mouse area to avoid conflicts with parent mouse area
381- __mouseArea.enabled: false
382+ __mouseArea.enabled: isMultiSelect ? false : true
383+
384+ /*!
385+ \internal
386+ */
387+ onTriggered: checked = !checked
388+
389+ style: Theme.createStyleComponent(Qt.resolvedUrl("../Theme/CheckBoxStyle.qml"), checkBox)
390 }

Subscribers

People subscribed via source and target branches