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

[Dan Chapman ]

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?)

[Nekhelesh Ramananthan (nik90)]

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)]

@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

[lp:~dpniel/component-store/liwa-xtra-props]

47. By Dan Chapman  on 2015-03-13

Fix new properties documentation

[Nekhelesh Ramananthan (nik90)]

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

review: Approve

=== modified file 'ComponentStore/ListItemWithActions/ListItemWithActions.qml'
--- ComponentStore/ListItemWithActions/ListItemWithActions.qml	2015-02-13 00:59:15 +0000
+++ ComponentStore/ListItemWithActions/ListItemWithActions.qml	2015-03-13 11:18:46 +0000
@@ -15,7 +15,9 @@
  */
 
 import QtQuick 2.2
+import QtFeedback 5.0
 import Ubuntu.Components 1.1
+import Ubuntu.Components.ListItems 1.0 as ListItem
 
 Item {
     id: root
@@ -31,6 +33,9 @@
     property color selectedColor: "#E6E6E6"
     property bool selected: false
     property bool selectionMode: false
+    property bool showUnderscore: false
+    property bool showDivider: false
+    property bool enableHaptics: false
     property alias internalAnchors: mainContents.anchors
     default property alias contents: mainContents.children
 
@@ -64,7 +69,7 @@
         var xOffset = Math.abs(main.x)
         var index = Math.min(Math.floor(xOffset / actionFullWidth), _visibleRightSideActions.length)
         var newX = 0
-      if (index === _visibleRightSideActions.length) {
+        if (index === _visibleRightSideActions.length) {
             newX = -(rightActionsView.width - units.gu(2))
         } else if (index >= 1) {
             newX = -(actionFullWidth * index)
@@ -96,7 +101,7 @@
         var itemStartX = item.x - marginX
         var itemEndX = item.x + item.width + marginX
         return (point.x >= itemStartX) && (point.x <= itemEndX) &&
-               (point.y >= item.y) && (point.y <= (item.y + item.height));
+                (point.y >= item.y) && (point.y <= (item.y + item.height));
     }
 
     function getActionAt(point)
@@ -118,8 +123,8 @@
     function updateActiveAction()
     {
         if (triggerActionOnMouseRelease &&
-            (main.x <= -(root.actionWidth + units.gu(2))) &&
-            (main.x > -(rightActionsView.width - units.gu(2)))) {
+                (main.x <= -(root.actionWidth + units.gu(2))) &&
+                (main.x > -(rightActionsView.width - units.gu(2)))) {
             var actionFullWidth = actionWidth + units.gu(2)
             var xOffset = Math.abs(main.x)
             var index = Math.min(Math.floor(xOffset / actionFullWidth), _visibleRightSideActions.length)
@@ -183,6 +188,16 @@
     height: defaultHeight
     clip: height !== defaultHeight
 
+    HapticsEffect {
+        id: clickEffect
+        attackIntensity: 0.0
+        attackTime: 50
+        intensity: 1.0
+        duration: 10
+        fadeTime: 50
+        fadeIntensity: 0.0
+    }
+
     Rectangle {
         id: leftActionView
 
@@ -209,49 +224,66 @@
     }
 
     Rectangle {
-       id: rightActionsView
-
-       anchors {
-           top: main.top
-           left: main.right
-           bottom: main.bottom
-       }
-       visible: _visibleRightSideActions.length > 0
-       width: rightActionsRepeater.count > 0 ? rightActionsRepeater.count * (root.actionWidth + units.gu(2)) + root.actionThreshold + units.gu(2) : 0
-       color: "white"
-       Row {
-           anchors{
-               top: parent.top
-               left: parent.left
-               leftMargin: units.gu(2)
-               right: parent.right
-               rightMargin: units.gu(2)
-               bottom: parent.bottom
-           }
-           spacing: units.gu(2)
-           Repeater {
-               id: rightActionsRepeater
-
-               model: _showActions ? _visibleRightSideActions : []
-               Item {
-                   property alias image: img
-
-                   height: rightActionsView.height
-                   width: root.actionWidth
-
-                   Icon {
-                       id: img
-
-                       anchors.centerIn: parent
-                       width: units.gu(3)
-                       height: units.gu(3)
-                       name: modelData.iconName
-                       source: modelData.iconSource
-                       color: root.activeAction === modelData ? UbuntuColors.lightAubergine : UbuntuColors.lightGrey
-                   }
-              }
-           }
-       }
+        id: rightActionsView
+
+        anchors {
+            top: main.top
+            left: main.right
+            bottom: main.bottom
+        }
+        visible: _visibleRightSideActions.length > 0
+        width: rightActionsRepeater.count > 0 ? rightActionsRepeater.count * (root.actionWidth + units.gu(2)) + root.actionThreshold + units.gu(2) : 0
+        color: "white"
+        Row {
+            anchors{
+                top: parent.top
+                left: parent.left
+                leftMargin: units.gu(2)
+                right: parent.right
+                rightMargin: units.gu(2)
+                bottom: parent.bottom
+            }
+            spacing: units.gu(2)
+            Repeater {
+                id: rightActionsRepeater
+
+                model: _showActions ? _visibleRightSideActions : []
+                Item {
+                    property alias image: img
+
+                    height: rightActionsView.height
+                    width: root.actionWidth
+
+                    Icon {
+                        id: img
+                        anchors.centerIn: parent
+                        width: units.gu(3)
+                        height: units.gu(3)
+                        name: modelData.iconName
+                        source: modelData.iconSource
+                        color: root.activeAction === modelData ? UbuntuColors.lightAubergine : UbuntuColors.lightGrey
+                    }
+                    Rectangle {
+                        id: underscore
+                        height: units.gu(0.2)
+                        anchors {
+                            left: parent.left
+                            right: parent.right
+                            bottom: parent.bottom
+                            bottomMargin: units.gu(1.5)
+
+                        }
+                        color: UbuntuColors.lightAubergine
+                        visible: root.activeAction === modelData && showUnderscore
+                        onVisibleChanged: {
+                            if (visible && enableHaptics) {
+                                clickEffect.start()
+                            }
+                        }
+                    }
+                }
+            }
+        }
     }
 
 
@@ -308,7 +340,7 @@
             }
         }
         Behavior on color {
-           ColorAnimation {}
+            ColorAnimation {}
         }
     }
 
@@ -413,6 +445,9 @@
 
         onReleased: {
             if (root.triggerActionOnMouseRelease && root.activeAction) {
+                if (enableHaptics) {
+                    clickEffect.start()
+                }
                 triggerAction.start()
             } else {
                 root.returnToBounds(direction)
@@ -438,6 +473,10 @@
                     return
                 }
             }
+            if (enableHaptics) {
+                clickEffect.start()
+            }
+
             root.resetSwipe()
         }
 
@@ -453,5 +492,16 @@
         }
         z: -1
     }
+    ListItem.ThinDivider {
+        id: divider
+        visible: showDivider
+        width: parent.width + units.gu(4)
+        anchors {
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+            bottomMargin: units.gu(-0.15)
+        }
+    }
 }
 

=== modified file 'GallerySRC/ListItemWithActionsWidget.qml'
--- GallerySRC/ListItemWithActionsWidget.qml	2014-11-12 15:54:22 +0000
+++ GallerySRC/ListItemWithActionsWidget.qml	2015-03-13 11:18:46 +0000
@@ -18,6 +18,9 @@
         id: testModel
         ListElement { title: "Slide me right to delete" }
         ListElement { title: "Slide me left to show more options" }
+        // TODO: not sure what the best wording for these additional properties should be [dpniel]
+        ListElement { title: "With thin divider" }
+        ListElement { title: "With haptic feedback and actions underscored" }
     }
 
     content: ListView {
@@ -32,6 +35,9 @@
             width: parent.width
             color: "White"
             triggerActionOnMouseRelease: true
+            showDivider: index === 2
+            enableHaptics: index === 3
+            showUnderscore: index === 3
 
             leftSideAction: Action {
                 iconName: "delete"

=== modified file 'docs/_components/listitemwithactions.rst'
--- docs/_components/listitemwithactions.rst	2015-03-03 14:07:37 +0000
+++ docs/_components/listitemwithactions.rst	2015-03-13 11:18:46 +0000
@@ -83,6 +83,9 @@
 - :ref:`rightSideActions`: Action <List>
 - :ref:`locked`: boolean (false by default)
 - :ref:`triggerActionOnMouseRelease`: boolean (false by default)
+- :ref:`showDivider`: boolean (false by default)
+- :ref:`showUnderscore`: boolean (false by default)
+- :ref:`enableHaptics`: boolean (false by default) 
 
 Property Documentation
 ----------------------
@@ -184,3 +187,24 @@
 This property affects the right side actions behavior. If set to true, the user can swipe left to
 reveal the right side actions and execute an action by just hovering over it. By default, this is
 set to false meaning that the user needs to press on the action to trigger it.
+
+.. _showDivider:
+
+showDivider
+^^^^^^^^^^^
+
+This property can be used to display a thin divider along the bottom of the list item.
+
+.. _showUnderscore:
+
+showUnderscore
+^^^^^^^^^^^^^^
+
+This property when enabled displays an underscore underneath the active action in the rightSideActions.
+
+.. _enableHaptics:
+
+enableHaptics
+^^^^^^^^^^^^^
+
+This property enables haptic feedback when triggering actions in the list item.

=== modified file 'docs/release.rst'
--- docs/release.rst	2015-03-03 14:22:18 +0000
+++ docs/release.rst	2015-03-13 11:18:46 +0000
@@ -1,6 +1,14 @@
 Release Notes
 =============
 
+**13th March 2015**
+
+* Improved ListItemWithActions components by adding the following new properties,
+
+  * showDivider - mimics SDK ListItem property
+  * showUnderscore - Shows an underscore under the active right side action
+  * enableHaptics - enables haptic effects on actions triggered
+
 **3rd March 2015**
 
 * Added WelcomeWizard component