Merge lp:~dpniel/component-store/liwa-xtra-props into lp:component-store

Proposed by Dan Chapman  on 2015-03-12
Status: Merged
Approved by: Nekhelesh Ramananthan on 2015-03-19
Approved revision: 47
Merged at revision: 46
Proposed branch: lp:~dpniel/component-store/liwa-xtra-props
Merge into: lp:component-store
Diff against target: 308 lines (+136/-48)
4 files modified
ComponentStore/ListItemWithActions/ListItemWithActions.qml (+98/-48)
GallerySRC/ListItemWithActionsWidget.qml (+6/-0)
docs/_components/listitemwithactions.rst (+24/-0)
docs/release.rst (+8/-0)
To merge this branch: bzr merge lp:~dpniel/component-store/liwa-xtra-props
Reviewer Review Type Date Requested Status
Nekhelesh Ramananthan 2015-03-12 Approve on 2015-03-14
Renato Araujo Oliveira Filho 2015-03-13 Pending
Review via email: mp+252839@code.launchpad.net

Description of the change

Adds 3 additional properties to ListItemWithActions

* showDivider - mimics SDK ListItem property
* showUnderscore - Shows an underscore under the active right side action
* enableHaptics - enables haptic effects on actions triggered

Not sure who needs to review this (maybe renato?)

To post a comment you must log in.
Nekhelesh Ramananthan (nik90) wrote :

Thnx dan for the MP. Yes it would be best if Renato reviews this MP. I am reviewing the UCS part of this MP which includes the documentation and UCS gallery code.

Nekhelesh Ramananthan (nik90) wrote :

@Dan, just need some minor fix to the documentation. I have pasted the diff at http://paste.ubuntu.com/10588410/. Otherwise everything looks good, including the new list item properties as well.

review: Needs Fixing
47. By Dan Chapman  on 2015-03-13

Fix new properties documentation

Nekhelesh Ramananthan (nik90) wrote :

LGTM! Thnx again for your contribution. The component code changes also looks good as well.

review: Approve

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'ComponentStore/ListItemWithActions/ListItemWithActions.qml'
2--- ComponentStore/ListItemWithActions/ListItemWithActions.qml 2015-02-13 00:59:15 +0000
3+++ ComponentStore/ListItemWithActions/ListItemWithActions.qml 2015-03-13 11:18:46 +0000
4@@ -15,7 +15,9 @@
5 */
6
7 import QtQuick 2.2
8+import QtFeedback 5.0
9 import Ubuntu.Components 1.1
10+import Ubuntu.Components.ListItems 1.0 as ListItem
11
12 Item {
13 id: root
14@@ -31,6 +33,9 @@
15 property color selectedColor: "#E6E6E6"
16 property bool selected: false
17 property bool selectionMode: false
18+ property bool showUnderscore: false
19+ property bool showDivider: false
20+ property bool enableHaptics: false
21 property alias internalAnchors: mainContents.anchors
22 default property alias contents: mainContents.children
23
24@@ -64,7 +69,7 @@
25 var xOffset = Math.abs(main.x)
26 var index = Math.min(Math.floor(xOffset / actionFullWidth), _visibleRightSideActions.length)
27 var newX = 0
28- if (index === _visibleRightSideActions.length) {
29+ if (index === _visibleRightSideActions.length) {
30 newX = -(rightActionsView.width - units.gu(2))
31 } else if (index >= 1) {
32 newX = -(actionFullWidth * index)
33@@ -96,7 +101,7 @@
34 var itemStartX = item.x - marginX
35 var itemEndX = item.x + item.width + marginX
36 return (point.x >= itemStartX) && (point.x <= itemEndX) &&
37- (point.y >= item.y) && (point.y <= (item.y + item.height));
38+ (point.y >= item.y) && (point.y <= (item.y + item.height));
39 }
40
41 function getActionAt(point)
42@@ -118,8 +123,8 @@
43 function updateActiveAction()
44 {
45 if (triggerActionOnMouseRelease &&
46- (main.x <= -(root.actionWidth + units.gu(2))) &&
47- (main.x > -(rightActionsView.width - units.gu(2)))) {
48+ (main.x <= -(root.actionWidth + units.gu(2))) &&
49+ (main.x > -(rightActionsView.width - units.gu(2)))) {
50 var actionFullWidth = actionWidth + units.gu(2)
51 var xOffset = Math.abs(main.x)
52 var index = Math.min(Math.floor(xOffset / actionFullWidth), _visibleRightSideActions.length)
53@@ -183,6 +188,16 @@
54 height: defaultHeight
55 clip: height !== defaultHeight
56
57+ HapticsEffect {
58+ id: clickEffect
59+ attackIntensity: 0.0
60+ attackTime: 50
61+ intensity: 1.0
62+ duration: 10
63+ fadeTime: 50
64+ fadeIntensity: 0.0
65+ }
66+
67 Rectangle {
68 id: leftActionView
69
70@@ -209,49 +224,66 @@
71 }
72
73 Rectangle {
74- id: rightActionsView
75-
76- anchors {
77- top: main.top
78- left: main.right
79- bottom: main.bottom
80- }
81- visible: _visibleRightSideActions.length > 0
82- width: rightActionsRepeater.count > 0 ? rightActionsRepeater.count * (root.actionWidth + units.gu(2)) + root.actionThreshold + units.gu(2) : 0
83- color: "white"
84- Row {
85- anchors{
86- top: parent.top
87- left: parent.left
88- leftMargin: units.gu(2)
89- right: parent.right
90- rightMargin: units.gu(2)
91- bottom: parent.bottom
92- }
93- spacing: units.gu(2)
94- Repeater {
95- id: rightActionsRepeater
96-
97- model: _showActions ? _visibleRightSideActions : []
98- Item {
99- property alias image: img
100-
101- height: rightActionsView.height
102- width: root.actionWidth
103-
104- Icon {
105- id: img
106-
107- anchors.centerIn: parent
108- width: units.gu(3)
109- height: units.gu(3)
110- name: modelData.iconName
111- source: modelData.iconSource
112- color: root.activeAction === modelData ? UbuntuColors.lightAubergine : UbuntuColors.lightGrey
113- }
114- }
115- }
116- }
117+ id: rightActionsView
118+
119+ anchors {
120+ top: main.top
121+ left: main.right
122+ bottom: main.bottom
123+ }
124+ visible: _visibleRightSideActions.length > 0
125+ width: rightActionsRepeater.count > 0 ? rightActionsRepeater.count * (root.actionWidth + units.gu(2)) + root.actionThreshold + units.gu(2) : 0
126+ color: "white"
127+ Row {
128+ anchors{
129+ top: parent.top
130+ left: parent.left
131+ leftMargin: units.gu(2)
132+ right: parent.right
133+ rightMargin: units.gu(2)
134+ bottom: parent.bottom
135+ }
136+ spacing: units.gu(2)
137+ Repeater {
138+ id: rightActionsRepeater
139+
140+ model: _showActions ? _visibleRightSideActions : []
141+ Item {
142+ property alias image: img
143+
144+ height: rightActionsView.height
145+ width: root.actionWidth
146+
147+ Icon {
148+ id: img
149+ anchors.centerIn: parent
150+ width: units.gu(3)
151+ height: units.gu(3)
152+ name: modelData.iconName
153+ source: modelData.iconSource
154+ color: root.activeAction === modelData ? UbuntuColors.lightAubergine : UbuntuColors.lightGrey
155+ }
156+ Rectangle {
157+ id: underscore
158+ height: units.gu(0.2)
159+ anchors {
160+ left: parent.left
161+ right: parent.right
162+ bottom: parent.bottom
163+ bottomMargin: units.gu(1.5)
164+
165+ }
166+ color: UbuntuColors.lightAubergine
167+ visible: root.activeAction === modelData && showUnderscore
168+ onVisibleChanged: {
169+ if (visible && enableHaptics) {
170+ clickEffect.start()
171+ }
172+ }
173+ }
174+ }
175+ }
176+ }
177 }
178
179
180@@ -308,7 +340,7 @@
181 }
182 }
183 Behavior on color {
184- ColorAnimation {}
185+ ColorAnimation {}
186 }
187 }
188
189@@ -413,6 +445,9 @@
190
191 onReleased: {
192 if (root.triggerActionOnMouseRelease && root.activeAction) {
193+ if (enableHaptics) {
194+ clickEffect.start()
195+ }
196 triggerAction.start()
197 } else {
198 root.returnToBounds(direction)
199@@ -438,6 +473,10 @@
200 return
201 }
202 }
203+ if (enableHaptics) {
204+ clickEffect.start()
205+ }
206+
207 root.resetSwipe()
208 }
209
210@@ -453,5 +492,16 @@
211 }
212 z: -1
213 }
214+ ListItem.ThinDivider {
215+ id: divider
216+ visible: showDivider
217+ width: parent.width + units.gu(4)
218+ anchors {
219+ left: parent.left
220+ right: parent.right
221+ bottom: parent.bottom
222+ bottomMargin: units.gu(-0.15)
223+ }
224+ }
225 }
226
227
228=== modified file 'GallerySRC/ListItemWithActionsWidget.qml'
229--- GallerySRC/ListItemWithActionsWidget.qml 2014-11-12 15:54:22 +0000
230+++ GallerySRC/ListItemWithActionsWidget.qml 2015-03-13 11:18:46 +0000
231@@ -18,6 +18,9 @@
232 id: testModel
233 ListElement { title: "Slide me right to delete" }
234 ListElement { title: "Slide me left to show more options" }
235+ // TODO: not sure what the best wording for these additional properties should be [dpniel]
236+ ListElement { title: "With thin divider" }
237+ ListElement { title: "With haptic feedback and actions underscored" }
238 }
239
240 content: ListView {
241@@ -32,6 +35,9 @@
242 width: parent.width
243 color: "White"
244 triggerActionOnMouseRelease: true
245+ showDivider: index === 2
246+ enableHaptics: index === 3
247+ showUnderscore: index === 3
248
249 leftSideAction: Action {
250 iconName: "delete"
251
252=== modified file 'docs/_components/listitemwithactions.rst'
253--- docs/_components/listitemwithactions.rst 2015-03-03 14:07:37 +0000
254+++ docs/_components/listitemwithactions.rst 2015-03-13 11:18:46 +0000
255@@ -83,6 +83,9 @@
256 - :ref:`rightSideActions`: Action <List>
257 - :ref:`locked`: boolean (false by default)
258 - :ref:`triggerActionOnMouseRelease`: boolean (false by default)
259+- :ref:`showDivider`: boolean (false by default)
260+- :ref:`showUnderscore`: boolean (false by default)
261+- :ref:`enableHaptics`: boolean (false by default)
262
263 Property Documentation
264 ----------------------
265@@ -184,3 +187,24 @@
266 This property affects the right side actions behavior. If set to true, the user can swipe left to
267 reveal the right side actions and execute an action by just hovering over it. By default, this is
268 set to false meaning that the user needs to press on the action to trigger it.
269+
270+.. _showDivider:
271+
272+showDivider
273+^^^^^^^^^^^
274+
275+This property can be used to display a thin divider along the bottom of the list item.
276+
277+.. _showUnderscore:
278+
279+showUnderscore
280+^^^^^^^^^^^^^^
281+
282+This property when enabled displays an underscore underneath the active action in the rightSideActions.
283+
284+.. _enableHaptics:
285+
286+enableHaptics
287+^^^^^^^^^^^^^
288+
289+This property enables haptic feedback when triggering actions in the list item.
290
291=== modified file 'docs/release.rst'
292--- docs/release.rst 2015-03-03 14:22:18 +0000
293+++ docs/release.rst 2015-03-13 11:18:46 +0000
294@@ -1,6 +1,14 @@
295 Release Notes
296 =============
297
298+**13th March 2015**
299+
300+* Improved ListItemWithActions components by adding the following new properties,
301+
302+ * showDivider - mimics SDK ListItem property
303+ * showUnderscore - Shows an underscore under the active right side action
304+ * enableHaptics - enables haptic effects on actions triggered
305+
306 **3rd March 2015**
307
308 * Added WelcomeWizard component

Subscribers

People subscribed via source and target branches