Merge lp:~zsombi/ubuntu-ui-toolkit/50-custom-delegates into lp:~zsombi/ubuntu-ui-toolkit/listitem-master

Proposed by Zsombor Egri
Status: Merged
Approved by: Tim Peeters
Approved revision: 1291
Merged at revision: 1275
Proposed branch: lp:~zsombi/ubuntu-ui-toolkit/50-custom-delegates
Merge into: lp:~zsombi/ubuntu-ui-toolkit/listitem-master
Prerequisite: lp:~zsombi/ubuntu-ui-toolkit/45-selected-option-rebinds
Diff against target: 215 lines (+107/-7)
6 files modified
modules/Ubuntu/Components/Themes/Ambiance/ListItemPanel.qml (+3/-1)
modules/Ubuntu/Components/plugin/uclistitem.cpp (+1/-1)
modules/Ubuntu/Components/plugin/uclistitemactions.cpp (+63/-4)
modules/Ubuntu/Components/plugin/uclistitemactionsattached.cpp (+1/-1)
tests/resources/listitems/ListItemTest.qml (+16/-0)
tests/unit_x11/tst_components/tst_listitem.qml (+23/-0)
To merge this branch: bzr merge lp:~zsombi/ubuntu-ui-toolkit/50-custom-delegates
Reviewer Review Type Date Requested Status
Tim Peeters Approve
Review via email: mp+235170@code.launchpad.net

Commit message

Introducing custom delegates.

Description of the change

Introducing custom delegates.

To post a comment you must log in.
1251. By Zsombor Egri

prereq sync

1252. By Zsombor Egri

prereq sync

1253. By Zsombor Egri

prereq sync

1254. By Zsombor Egri

prereq sync

1255. By Zsombor Egri

fixing tests

1256. By Zsombor Egri

prereq sync

1257. By Zsombor Egri

prereq sync

1258. By Zsombor Egri

documentation fxed

1259. By Zsombor Egri

prereq sync

1260. By Zsombor Egri

prereq sync

1261. By Zsombor Egri

prereq sync

1262. By Zsombor Egri

prereq sync

1263. By Zsombor Egri

prereq sync

1264. By Zsombor Egri

prereq sync

1265. By Zsombor Egri

prereq sync

1266. By Zsombor Egri

prereq sync

1267. By Zsombor Egri

prereq sync

1268. By Zsombor Egri

proper rebounding fix in test

1269. By Zsombor Egri

prereq sync

1270. By Zsombor Egri

prereq sync

1271. By Zsombor Egri

prereq sync

1272. By Zsombor Egri

fixing documentation

1273. By Zsombor Egri

prereq sync

1274. By Zsombor Egri

tests fixed

1275. By Zsombor Egri

prereq sync

1276. By Zsombor Egri

prereq sync

1277. By Zsombor Egri

tests adjusted

1278. By Zsombor Egri

prereq sync

1279. By Zsombor Egri

prereq sync

1280. By Zsombor Egri

prereq sync

1281. By Zsombor Egri

prereq sync

1282. By Zsombor Egri

prereq sync

1283. By Zsombor Egri

prereq sync

1284. By Zsombor Egri

prereq sync

1285. By Zsombor Egri

prereq sync

1286. By Zsombor Egri

documentation link fixed

1287. By Zsombor Egri

documentation link fixed

1288. By Zsombor Egri

more documentation fixes

1289. By Zsombor Egri

prereq sync

1290. By Zsombor Egri

remove typo from property documentation

Revision history for this message
Tim Peeters (tpeeters) wrote :

58 + * The delegate height is set automatically by the panel item, and the width value
59 + * is clamped between height and the maximum width of the list item divided by the
60 + * number of actions in the list.

, and the width must be specified but will be clamped between....

Revision history for this message
Tim Peeters (tpeeters) wrote :

Please expose a pressed attached property to the custom delegate as well.

I have no way now to detect inside the custom delegate whether it is pressed. I could add a MouseArea like this:

        ListItemActions {
            id: trailActions
            actions: [
                Action {
                    iconName: "save-to"
                    text: "Move"
                    onTriggered: print("Move" +value)
                }
            ]
            delegate: Rectangle {
                color: delegateArea.pressed ? "orange" : "yellow"
                width: units.gu(10)
                Label {
                    text: action.text
                    anchors.centerIn: parent
                }
                MouseArea {
                    anchors.fill: parent
                    id: delegateArea
                    onPressed: print("press")
                }
            }
        }

but that eats the mouse events and prevents the trigger() signal on clicked.

Revision history for this message
Tim Peeters (tpeeters) :
review: Needs Fixing
1291. By Zsombor Egri

review comments added

Revision history for this message
Tim Peeters (tpeeters) wrote :

thanks

review: Approve

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/ListItemPanel.qml'
2--- modules/Ubuntu/Components/Themes/Ambiance/ListItemPanel.qml 2014-11-27 10:33:21 +0000
3+++ modules/Ubuntu/Components/Themes/Ambiance/ListItemPanel.qml 2014-11-27 10:33:24 +0000
4@@ -101,6 +101,7 @@
5 Repeater {
6 model: panel.ListItemActions.visibleActions
7 AbstractButton {
8+ id: actionButton
9 action: modelData
10 enabled: action.enabled
11 opacity: action.enabled ? 1.0 : 0.5
12@@ -124,9 +125,10 @@
13 Loader {
14 id: delegateLoader
15 height: parent.height
16- sourceComponent: panel.ListItemActions.delegate ? panel.ListItemActions.delegate : defaultDelegate
17+ sourceComponent: panel.ListItemActions.container.delegate ? panel.ListItemActions.container.delegate : defaultDelegate
18 property Action action: modelData
19 property int index: index
20+ property bool pressed: actionButton.pressed
21 onItemChanged: {
22 // use action's objectName to identify the visualized action
23 if (item && item.objectName === "") {
24
25=== modified file 'modules/Ubuntu/Components/plugin/uclistitem.cpp'
26--- modules/Ubuntu/Components/plugin/uclistitem.cpp 2014-11-27 10:33:21 +0000
27+++ modules/Ubuntu/Components/plugin/uclistitem.cpp 2014-11-27 10:33:24 +0000
28@@ -1087,7 +1087,7 @@
29 */
30
31 /*!
32- * \qmlsignal UCListItemPrivate::contentMovementEnded
33+ * \qmlsignal ListItem::contentMovementEnded()
34 * The signal is emitted when the content movement has ended.
35 */
36 bool UCListItemPrivate::contentMoving() const
37
38=== modified file 'modules/Ubuntu/Components/plugin/uclistitemactions.cpp'
39--- modules/Ubuntu/Components/plugin/uclistitemactions.cpp 2014-11-27 10:33:21 +0000
40+++ modules/Ubuntu/Components/plugin/uclistitemactions.cpp 2014-11-27 10:33:24 +0000
41@@ -260,8 +260,8 @@
42 * ListItemActions instances can be shared between ListItem instances within the
43 * same view. When shared, the memory footprint of the view will be lot smaller,
44 * as there will be no individual panel created for each list's actions visualization.
45- * Depending on how long the initialization of the component used in \c ListItem::actionsDelegate
46- * takes, creation time will be also reduced to one time per view.
47+ * Depending on how long the initialization of the component used in \l {ListItemStyle::actionsDelegate}
48+ * {actionsDelegate} takes, creation time will be also reduced to one time per view.
49 * However, this implies that swiping a new ListItem content while another one is
50 * swiped will result in showing the newly swiped item's panel delayed, as the
51 * panel can be shown only after the previous item's snapping is completed. Depending
52@@ -393,8 +393,67 @@
53
54 /*!
55 * \qmlproperty Component ListItemActions::delegate
56- * Custom delegate which overrides the default one used by the ListItem. If the
57- * value is null, the default delegate will be used.
58+ * The property holds the custom delegate to visualize the actions listed in the
59+ * ListItemActions. When set to null, the default delegate specified by the \l
60+ * {ListItemStyle::actionsDelegate}{actionsDelegate} will be used.
61+ *
62+ * ListItemActions provides the \c action context property which contains the
63+ * Action instance visualized. Using this property delegates can access
64+ * the information to be visualized. The action is triggered by the panel item
65+ * holding the visualized action, therefore only visualization is needed by the
66+ * custom delegate. The other context property exposed to delegates is the \c
67+ * index, which specifies the index of the action visualized.
68+ *
69+ * Specifying a custom delegate will not override the triggering logic of the
70+ * action, that will be still handled by the panel itself. However custom delegates
71+ * may still need to distinguish the pressed/released state visually. This can
72+ * be achieved using the \c pressed context property, which informs the delegate
73+ * about the pressed state of the action.
74+ *
75+ * The delegate height is set automatically by the panel item, only the width must
76+ * be specified which will be clamped between height and the maximum width of the
77+ * list item divided by the number of actions in the list.
78+ * \qml
79+ * import QtQuick 2.2
80+ * import Ubuntu.Components 1.2
81+ *
82+ * MainView {
83+ * width: units.gu(40)
84+ * height: units.gu(71)
85+ *
86+ * UbuntuListView {
87+ * anchors.fill: parent
88+ * model: 50
89+ * delegate: ListItem {
90+ * trailingActions: actionsList
91+ * }
92+ * ListItemActions {
93+ * id: actionsList
94+ * delegate: Column {
95+ * width: height + units.gu(2)
96+ * Icon {
97+ * name: action.iconName
98+ * width: units.gu(3)
99+ * height: width
100+ * color: pressed ? "blue" : "lightblue"
101+ * anchors.horizontalCenter: parent.horizontalCenter
102+ * }
103+ * Label {
104+ * text: action.text + "#" + index
105+ * width: parent.width
106+ * horizontalAlignment: Text.AlignHCenter
107+ * }
108+ * }
109+ * actions: Action {
110+ * iconName: "starred"
111+ * text: "Star"
112+ * }
113+ * }
114+ * }
115+ * }
116+ * \endqml
117+ * \note Putting a Rectangle in the delegate can be used to override the color
118+ * of the panel.
119 *
120 * Defaults to null.
121 */
122
123=== modified file 'modules/Ubuntu/Components/plugin/uclistitemactionsattached.cpp'
124--- modules/Ubuntu/Components/plugin/uclistitemactionsattached.cpp 2014-11-27 10:33:21 +0000
125+++ modules/Ubuntu/Components/plugin/uclistitemactionsattached.cpp 2014-11-27 10:33:24 +0000
126@@ -212,7 +212,7 @@
127 }
128
129 /*!
130- * \qmlproperty real ListItemActions::overshoot
131+ * \qmlattachedproperty real ListItemActions::overshoot
132 * The property holds the overshoot value set for the list item.
133 */
134 qreal UCListItemActionsAttached::overshoot()
135
136=== modified file 'tests/resources/listitems/ListItemTest.qml'
137--- tests/resources/listitems/ListItemTest.qml 2014-11-27 10:33:21 +0000
138+++ tests/resources/listitems/ListItemTest.qml 2014-11-27 10:33:24 +0000
139@@ -28,6 +28,7 @@
140 objectName: "stock"
141 id: stock
142 iconName: "starred"
143+ text: "Staaaar"
144 onTriggered: print(iconName, "triggered")
145 }
146
147@@ -101,6 +102,21 @@
148 leadingActions: ListItemActions {
149 objectName: "InlineLeading"
150 actions: [stock]
151+ delegate: Column {
152+ width: height + units.gu(2)
153+ Icon {
154+ width: units.gu(3)
155+ height: width
156+ name: action.iconName
157+ color: "blue"
158+ anchors.horizontalCenter: parent.horizontalCenter
159+ }
160+ Label {
161+ text: action.text + index
162+ width: parent.width
163+ horizontalAlignment: Text.AlignHCenter
164+ }
165+ }
166 }
167 trailingActions: leading
168 }
169
170=== modified file 'tests/unit_x11/tst_components/tst_listitem.qml'
171--- tests/unit_x11/tst_components/tst_listitem.qml 2014-11-27 10:33:21 +0000
172+++ tests/unit_x11/tst_components/tst_listitem.qml 2014-11-27 10:33:24 +0000
173@@ -56,6 +56,15 @@
174 id: actionsDefault
175 }
176
177+ Component {
178+ id: customDelegate
179+ Rectangle {
180+ width: units.gu(10)
181+ color: "green"
182+ objectName: "custom_delegate"
183+ }
184+ }
185+
186 Column {
187 width: parent.width
188 ListItem {
189@@ -150,6 +159,7 @@
190 movingSpy.clear();
191 interactiveSpy.target = null;
192 interactiveSpy.clear();
193+ trailing.delegate = null;
194 }
195
196 function test_0_defaults() {
197@@ -384,5 +394,18 @@
198 movingSpy.wait();
199 fuzzyCompare(data.item.contentItem.x, 0.0, 0.1, "Content not snapped out");
200 }
201+
202+ function test_custom_trailing_delegate() {
203+ trailing.delegate = customDelegate;
204+ listView.positionViewAtBeginning();
205+ var item = findChild(listView, "listItem0");
206+ flick(item, centerOf(item).x, centerOf(item).y, -units.gu(20), 0);
207+ var panel = panelItem(item, false);
208+ verify(panel, "Panel is not visible");
209+ var custom = findChild(panel, "custom_delegate");
210+ verify(custom, "Custom delegate not in use");
211+ // cleanup
212+ rebound(item);
213+ }
214 }
215 }

Subscribers

People subscribed via source and target branches

to all changes: