Merge lp:~zsombi/ubuntu-ui-toolkit/50-custom-delegates into lp:~bzoltan/ubuntu-ui-toolkit/new_list_item

[Zsombor Egri]

Use custom delegates to visualize options.

[lp:~zsombi/ubuntu-ui-toolkit/50-custom-delegates]

1240. By Zsombor Egri on 2014-09-15

prereq

1241. By Zsombor Egri on 2014-09-15

prereq merge

1242. By Zsombor Egri on 2014-09-15

version fixed on documentation

1243. By Zsombor Egri on 2014-09-15

prereq

1244. By Zsombor Egri on 2014-09-16

prereq

1245. By Zsombor Egri on 2014-09-17

prereq

1246. By Zsombor Egri on 2014-09-17

documentation fixed

1247. By Zsombor Egri on 2014-09-17

prereq

1248. By Zsombor Egri on 2014-09-17

prereq

1249. By Zsombor Egri on 2014-09-17

prereq

1250. By Zsombor Egri on 2014-09-18

prereq sync

1251. By Zsombor Egri on 2014-09-19

prereq sync

1252. By Zsombor Egri on 2014-09-24

prereq sync

1253. By Zsombor Egri on 2014-09-25

prereq sync

1254. By Zsombor Egri on 2014-09-25

prereq sync

1255. By Zsombor Egri on 2014-09-25

fixing tests

1256. By Zsombor Egri on 2014-09-25

prereq sync

1257. By Zsombor Egri on 2014-09-25

prereq sync

1258. By Zsombor Egri on 2014-09-28

documentation fxed

1259. By Zsombor Egri on 2014-09-29

prereq sync

1260. By Zsombor Egri on 2014-10-02

prereq sync

1261. By Zsombor Egri on 2014-10-13

prereq sync

1262. By Zsombor Egri on 2014-10-20

prereq sync

1263. By Zsombor Egri on 2014-10-22

prereq sync

1264. By Zsombor Egri on 2014-10-22

prereq sync

1265. By Zsombor Egri on 2014-10-23

prereq sync

1266. By Zsombor Egri on 2014-10-24

prereq sync

1267. By Zsombor Egri on 2014-10-30

prereq sync

1268. By Zsombor Egri on 2014-10-30

proper rebounding fix in test

1269. By Zsombor Egri on 2014-10-30

prereq sync

1270. By Zsombor Egri on 2014-11-04

prereq sync

1271. By Zsombor Egri on 2014-11-07

prereq sync

1272. By Zsombor Egri on 2014-11-07

fixing documentation

1273. By Zsombor Egri on 2014-11-07

prereq sync

1274. By Zsombor Egri on 2014-11-07

tests fixed

1275. By Zsombor Egri on 2014-11-10

prereq sync

1276. By Zsombor Egri on 2014-11-12

prereq sync

1277. By Zsombor Egri on 2014-11-12

tests adjusted

1278. By Zsombor Egri on 2014-11-17

prereq sync

1279. By Zsombor Egri on 2014-11-18

prereq sync

1280. By Zsombor Egri on 2014-11-19

prereq sync

1281. By Zsombor Egri on 2014-11-20

prereq sync

1282. By Zsombor Egri on 2014-11-24

prereq sync

1283. By Zsombor Egri on 2014-11-24

prereq sync

1284. By Zsombor Egri on 2014-11-24

prereq sync

1285. By Zsombor Egri on 2014-11-25

prereq sync

1286. By Zsombor Egri on 2014-11-25

documentation link fixed

1287. By Zsombor Egri on 2014-11-25

documentation link fixed

1288. By Zsombor Egri on 2014-11-25

more documentation fixes

1289. By Zsombor Egri on 2014-11-25

prereq sync

1290. By Zsombor Egri on 2014-11-25

remove typo from property documentation

1291. By Zsombor Egri on 2014-11-27

review comments added

Unmerged revisions

1291. By Zsombor Egri on 2014-11-27

review comments added

1290. By Zsombor Egri on 2014-11-25

remove typo from property documentation

1289. By Zsombor Egri on 2014-11-25

prereq sync

1288. By Zsombor Egri on 2014-11-25

more documentation fixes

1287. By Zsombor Egri on 2014-11-25

documentation link fixed

1286. By Zsombor Egri on 2014-11-25

documentation link fixed

1285. By Zsombor Egri on 2014-11-25

prereq sync

1284. By Zsombor Egri on 2014-11-24

prereq sync

1283. By Zsombor Egri on 2014-11-24

prereq sync

1282. By Zsombor Egri on 2014-11-24

prereq sync

=== modified file 'modules/Ubuntu/Components/ListItemPanel.qml'
--- modules/Ubuntu/Components/ListItemPanel.qml	2014-09-15 08:42:25 +0000
+++ modules/Ubuntu/Components/ListItemPanel.qml	2014-09-15 08:42:25 +0000
@@ -85,6 +85,7 @@
                     height: parent.height
                     sourceComponent: panel.delegate ? panel.delegate : defaultDelegate
                     property Action option: modelData
+                    property int index: index
                     onItemChanged: {
                         // this is needed only for testing purposes
                         if (item && item.objectName === "") {

=== modified file 'modules/Ubuntu/Components/plugin/uclistitemoptions.cpp'
--- modules/Ubuntu/Components/plugin/uclistitemoptions.cpp	2014-09-15 08:42:25 +0000
+++ modules/Ubuntu/Components/plugin/uclistitemoptions.cpp	2014-09-15 08:42:25 +0000
@@ -223,6 +223,58 @@
  * Custom delegate which overrides the default one used by the ListItem. If the
  * value is null, the default delegate will be used.
  *
+ * ListItemOptions provides the \c option context property which contains the
+ * Action instance currently visualized. Using this property delegates can access
+ * the information to be visualized. The trigger is handled by the \l panelItem
+ * therefore only visualization is needed by the custom delegates. The other
+ * context property exposed to delegates is the \c index, which specifies the
+ * index of the option visualized.
+ *
+ * The delegate height is set automatically by the panelItem, and the width value
+ * is clamped between height and the maximum width of the list item divided by the
+ * number of options in the list.
+ * \qml
+ * import QtQuick 2.2
+ * import Ubuntu.Components 1.1
+ *
+ * MainView {
+ *     width: units.gu(40)
+ *     height: units.gu(71)
+ *
+ *     UbuntuListView {
+ *         anchors.fill: parent
+ *         model: 50
+ *         delegate: ListItem {
+ *             trailingOptions: optionsList
+ *         }
+ *         ListItemOptions {
+ *             id: optionsList
+ *             delegate: Column {
+ *                 width: height + units.gu(2)
+ *                 Icon {
+ *                     name: option.iconName
+ *                     width: units.gu(3)
+ *                     height: width
+ *                     color: "blue"
+ *                     anchors.horizontalCenter: parent.horizontalCenter
+ *                 }
+ *                 Label {
+ *                     text: option.text + "#" + index
+ *                     width: parent.width
+ *                     horizontalAlignment: Text.AlignHCenter
+ *                 }
+ *             }
+ *             Action {
+ *                 iconName: "starred"
+ *                 text: "Star"
+ *             }
+ *         }
+ *     }
+ * }
+ * \endqml
+ * \note Putting a Rectangle in the delegate can be used to override the color
+ * of the panel.
+ *
  * Defaults to null.
  */
 QQmlComponent *UCListItemOptions::delegate() const
@@ -237,6 +289,10 @@
         return;
     }
     d->delegate = delegate;
+    if (d->panelItem) {
+        // update panel's delegate as well
+        d->panelItem->setProperty("delegate", QVariant::fromValue(delegate));
+    }
     Q_EMIT delegateChanged();
 }
 

=== modified file 'tests/resources/listitems/ListItemTest.qml'
--- tests/resources/listitems/ListItemTest.qml	2014-09-15 08:42:25 +0000
+++ tests/resources/listitems/ListItemTest.qml	2014-09-15 08:42:25 +0000
@@ -28,6 +28,7 @@
         objectName: "stock"
         id: stock
         iconName: "starred"
+        text: "Staaaar"
         onTriggered: print(iconName, "triggered")
     }
 
@@ -74,6 +75,21 @@
             leadingOptions: ListItemOptions {
                 objectName: "InlineLeading"
                 options: [stock]
+                delegate: Column {
+                    width: height + units.gu(2)
+                    Icon {
+                        width: units.gu(3)
+                        height: width
+                        name: option.iconName
+                        color: "blue"
+                        anchors.horizontalCenter: parent.horizontalCenter
+                    }
+                    Label {
+                        text: option.text + index
+                        width: parent.width
+                        horizontalAlignment: Text.AlignHCenter
+                    }
+                }
             }
             trailingOptions: leading
         }

=== modified file 'tests/unit_x11/tst_components/tst_listitem.qml'
--- tests/unit_x11/tst_components/tst_listitem.qml	2014-09-15 08:42:25 +0000
+++ tests/unit_x11/tst_components/tst_listitem.qml	2014-09-15 08:42:25 +0000
@@ -45,6 +45,9 @@
         options: [
             stockAction,
         ]
+        delegate: Item {
+            objectName: "custom_delegate"
+        }
     }
     ListItemOptions {
         id: wrongOption
@@ -346,5 +349,16 @@
             waitForRendering(data.item, 400);
             tryCompareFunction(function(){ return data.item.contentItem.x; }, 0, 1000);
         }
+
+        function test_custom_trailing_delegate() {
+            listView.positionViewAtBeginning();
+            var item = findChild(listView, "listItem0");
+            flick(item, centerOf(item).x, centerOf(item).y, -units.gu(20), 0);
+            verify(trailing.panelItem, "Panel is not visible");
+            var custom = findChild(trailing.panelItem, "custom_delegate");
+            verify(custom, "Custom delegate not in use");
+            // cleanup
+            mouseClick(main, 0, 0);
+        }
     }
 }