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

[Zsombor Egri]

Introducing custom delegates.

Introducing custom delegates.

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

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

[Tim Peeters (tpeeters)]

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....

[Tim Peeters (tpeeters)]

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.

[Tim Peeters (tpeeters)]

review: Needs Fixing

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

1291. By Zsombor Egri on 2014-11-27

review comments added

[Tim Peeters (tpeeters)]

thanks

review: Approve

=== modified file 'modules/Ubuntu/Components/Themes/Ambiance/ListItemPanel.qml'
--- modules/Ubuntu/Components/Themes/Ambiance/ListItemPanel.qml	2014-11-27 10:33:21 +0000
+++ modules/Ubuntu/Components/Themes/Ambiance/ListItemPanel.qml	2014-11-27 10:33:24 +0000
@@ -101,6 +101,7 @@
         Repeater {
             model: panel.ListItemActions.visibleActions
             AbstractButton {
+                id: actionButton
                 action: modelData
                 enabled: action.enabled
                 opacity: action.enabled ? 1.0 : 0.5
@@ -124,9 +125,10 @@
                 Loader {
                     id: delegateLoader
                     height: parent.height
-                    sourceComponent: panel.ListItemActions.delegate ? panel.ListItemActions.delegate : defaultDelegate
+                    sourceComponent: panel.ListItemActions.container.delegate ? panel.ListItemActions.container.delegate : defaultDelegate
                     property Action action: modelData
                     property int index: index
+                    property bool pressed: actionButton.pressed
                     onItemChanged: {
                         // use action's objectName to identify the visualized action
                         if (item && item.objectName === "") {
 
=== modified file 'modules/Ubuntu/Components/plugin/uclistitem.cpp'
--- modules/Ubuntu/Components/plugin/uclistitem.cpp	2014-11-27 10:33:21 +0000
+++ modules/Ubuntu/Components/plugin/uclistitem.cpp	2014-11-27 10:33:24 +0000
@@ -1087,7 +1087,7 @@
  */
 
 /*!
- * \qmlsignal UCListItemPrivate::contentMovementEnded
+ * \qmlsignal ListItem::contentMovementEnded()
  * The signal is emitted when the content movement has ended.
  */
 bool UCListItemPrivate::contentMoving() const
 
=== modified file 'modules/Ubuntu/Components/plugin/uclistitemactions.cpp'
--- modules/Ubuntu/Components/plugin/uclistitemactions.cpp	2014-11-27 10:33:21 +0000
+++ modules/Ubuntu/Components/plugin/uclistitemactions.cpp	2014-11-27 10:33:24 +0000
@@ -260,8 +260,8 @@
  * ListItemActions instances can be shared between ListItem instances within the
  * same view. When shared, the memory footprint of the view will be lot smaller,
  * as there will be no individual panel created for each list's actions visualization.
- * Depending on how long the initialization of the component used in \c ListItem::actionsDelegate
- * takes, creation time will be also reduced to one time per view.
+ * Depending on how long the initialization of the component used in \l {ListItemStyle::actionsDelegate}
+ * {actionsDelegate} takes, creation time will be also reduced to one time per view.
  * However, this implies that swiping a new ListItem content while another one is
  * swiped will result in showing the newly swiped item's panel delayed, as the
  * panel can be shown only after the previous item's snapping is completed. Depending
@@ -393,8 +393,67 @@
 
 /*!
  * \qmlproperty Component ListItemActions::delegate
- * Custom delegate which overrides the default one used by the ListItem. If the
- * value is null, the default delegate will be used.
+ * The property holds the custom delegate to visualize the actions listed in the
+ * ListItemActions. When set to null, the default delegate specified by the \l
+ * {ListItemStyle::actionsDelegate}{actionsDelegate} will be used.
+ *
+ * ListItemActions provides the \c action context property which contains the
+ * Action instance visualized. Using this property delegates can access
+ * the information to be visualized. The action is triggered by the panel item
+ * holding the visualized action, therefore only visualization is needed by the
+ * custom delegate. The other context property exposed to delegates is the \c
+ * index, which specifies the index of the action visualized.
+ *
+ * Specifying a custom delegate will not override the triggering logic of the
+ * action, that will be still handled by the panel itself. However custom delegates
+ * may still need to distinguish the pressed/released state visually. This can
+ * be achieved using the \c pressed context property, which informs the delegate
+ * about the pressed state of the action.
+ *
+ * The delegate height is set automatically by the panel item, only the width must
+ * be specified which will be clamped between height and the maximum width of the
+ * list item divided by the number of actions in the list.
+ * \qml
+ * import QtQuick 2.2
+ * import Ubuntu.Components 1.2
+ *
+ * MainView {
+ *     width: units.gu(40)
+ *     height: units.gu(71)
+ *
+ *     UbuntuListView {
+ *         anchors.fill: parent
+ *         model: 50
+ *         delegate: ListItem {
+ *             trailingActions: actionsList
+ *         }
+ *         ListItemActions {
+ *             id: actionsList
+ *             delegate: Column {
+ *                 width: height + units.gu(2)
+ *                 Icon {
+ *                     name: action.iconName
+ *                     width: units.gu(3)
+ *                     height: width
+ *                     color: pressed ? "blue" : "lightblue"
+ *                     anchors.horizontalCenter: parent.horizontalCenter
+ *                 }
+ *                 Label {
+ *                     text: action.text + "#" + index
+ *                     width: parent.width
+ *                     horizontalAlignment: Text.AlignHCenter
+ *                 }
+ *             }
+ *             actions: 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.
  */
 
=== modified file 'modules/Ubuntu/Components/plugin/uclistitemactionsattached.cpp'
--- modules/Ubuntu/Components/plugin/uclistitemactionsattached.cpp	2014-11-27 10:33:21 +0000
+++ modules/Ubuntu/Components/plugin/uclistitemactionsattached.cpp	2014-11-27 10:33:24 +0000
@@ -212,7 +212,7 @@
 }
 
 /*!
- * \qmlproperty real ListItemActions::overshoot
+ * \qmlattachedproperty real ListItemActions::overshoot
  * The property holds the overshoot value set for the list item.
  */
 qreal UCListItemActionsAttached::overshoot()
 
=== modified file 'tests/resources/listitems/ListItemTest.qml'
--- tests/resources/listitems/ListItemTest.qml	2014-11-27 10:33:21 +0000
+++ tests/resources/listitems/ListItemTest.qml	2014-11-27 10:33:24 +0000
@@ -28,6 +28,7 @@
         objectName: "stock"
         id: stock
         iconName: "starred"
+        text: "Staaaar"
         onTriggered: print(iconName, "triggered")
     }
 
@@ -101,6 +102,21 @@
             leadingActions: ListItemActions {
                 objectName: "InlineLeading"
                 actions: [stock]
+                delegate: Column {
+                    width: height + units.gu(2)
+                    Icon {
+                        width: units.gu(3)
+                        height: width
+                        name: action.iconName
+                        color: "blue"
+                        anchors.horizontalCenter: parent.horizontalCenter
+                    }
+                    Label {
+                        text: action.text + index
+                        width: parent.width
+                        horizontalAlignment: Text.AlignHCenter
+                    }
+                }
             }
             trailingActions: leading
         }
 
=== modified file 'tests/unit_x11/tst_components/tst_listitem.qml'
--- tests/unit_x11/tst_components/tst_listitem.qml	2014-11-27 10:33:21 +0000
+++ tests/unit_x11/tst_components/tst_listitem.qml	2014-11-27 10:33:24 +0000
@@ -56,6 +56,15 @@
         id: actionsDefault
     }
 
+    Component {
+        id: customDelegate
+        Rectangle {
+            width: units.gu(10)
+            color: "green"
+            objectName: "custom_delegate"
+        }
+    }
+
     Column {
         width: parent.width
         ListItem {
@@ -150,6 +159,7 @@
             movingSpy.clear();
             interactiveSpy.target = null;
             interactiveSpy.clear();
+            trailing.delegate = null;
         }
 
         function test_0_defaults() {
@@ -384,5 +394,18 @@
             movingSpy.wait();
             fuzzyCompare(data.item.contentItem.x, 0.0, 0.1, "Content not snapped out");
         }
+
+        function test_custom_trailing_delegate() {
+            trailing.delegate = customDelegate;
+            listView.positionViewAtBeginning();
+            var item = findChild(listView, "listItem0");
+            flick(item, centerOf(item).x, centerOf(item).y, -units.gu(20), 0);
+            var panel = panelItem(item, false);
+            verify(panel, "Panel is not visible");
+            var custom = findChild(panel, "custom_delegate");
+            verify(custom, "Custom delegate not in use");
+            // cleanup
+            rebound(item);
+        }
     }
 }