Merge lp:~nik90/component-store/add-listitem-component into lp:component-store

[Nekhelesh Ramananthan]

Added listitemwithactions component

Added listitemwithactions component

=== added directory 'ComponentStore/ListItemWithActions'
=== added file 'ComponentStore/ListItemWithActions/ListItemWithActions.qml'
--- ComponentStore/ListItemWithActions/ListItemWithActions.qml	1970-01-01 00:00:00 +0000
+++ ComponentStore/ListItemWithActions/ListItemWithActions.qml	2014-11-12 16:25:42 +0000
@@ -0,0 +1,454 @@
+/*
+ * Copyright (C) 2012-2014 Canonical, Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.2
+import Ubuntu.Components 1.1
+
+Item {
+    id: root
+
+    property Action leftSideAction: null
+    property list<Action> rightSideActions
+    property double defaultHeight: units.gu(8)
+    property bool locked: false
+    property Action activeAction: null
+    property var activeItem: null
+    property bool triggerActionOnMouseRelease: false
+    property color color: Theme.palette.normal.background
+    property color selectedColor: "#E6E6E6"
+    property bool selected: false
+    property bool selectionMode: false
+    property alias internalAnchors: mainContents.anchors
+    default property alias contents: mainContents.children
+
+    readonly property double actionWidth: units.gu(4)
+    readonly property double leftActionWidth: units.gu(10)
+    readonly property double actionThreshold: actionWidth * 0.4
+    readonly property double threshold: 0.4
+    readonly property string swipeState: main.x == 0 ? "Normal" : main.x > 0 ? "LeftToRight" : "RightToLeft"
+    readonly property alias swipping: mainItemMoving.running
+    readonly property bool _showActions: mouseArea.pressed || swipeState != "Normal" || swipping
+
+    /* internal */
+    property var _visibleRightSideActions: filterVisibleActions(rightSideActions)
+
+    signal itemClicked(var mouse)
+    signal itemPressAndHold(var mouse)
+
+    function returnToBoundsRTL(direction)
+    {
+        var actionFullWidth = actionWidth + units.gu(2)
+
+        // go back to normal state if swipping reverse
+        if (direction === "LTR") {
+            updatePosition(0)
+            return
+        } else if (!triggerActionOnMouseRelease) {
+            updatePosition(-rightActionsView.width + units.gu(2))
+            return
+        }
+
+        var xOffset = Math.abs(main.x)
+        var index = Math.min(Math.floor(xOffset / actionFullWidth), _visibleRightSideActions.length)
+        var newX = 0
+      if (index === _visibleRightSideActions.length) {
+            newX = -(rightActionsView.width - units.gu(2))
+        } else if (index >= 1) {
+            newX = -(actionFullWidth * index)
+        }
+        updatePosition(newX)
+    }
+
+    function returnToBoundsLTR(direction)
+    {
+        var finalX = leftActionWidth
+        if ((direction === "RTL") || (main.x <= (finalX * root.threshold)))
+            finalX = 0
+        updatePosition(finalX)
+    }
+
+    function returnToBounds(direction)
+    {
+        if (main.x < 0) {
+            returnToBoundsRTL(direction)
+        } else if (main.x > 0) {
+            returnToBoundsLTR(direction)
+        } else {
+            updatePosition(0)
+        }
+    }
+
+    function contains(item, point, marginX)
+    {
+        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));
+    }
+
+    function getActionAt(point)
+    {
+        if (contains(leftActionView, point, 0)) {
+            return leftSideAction
+        } else if (contains(rightActionsView, point, 0)) {
+            var newPoint = root.mapToItem(rightActionsView, point.x, point.y)
+            for (var i = 0; i < rightActionsRepeater.count; i++) {
+                var child = rightActionsRepeater.itemAt(i)
+                if (contains(child, newPoint, units.gu(1))) {
+                    return i
+                }
+            }
+        }
+        return -1
+    }
+
+    function updateActiveAction()
+    {
+        if (triggerActionOnMouseRelease &&
+            (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)
+            index = index - 1
+            if (index > -1) {
+                root.activeItem = rightActionsRepeater.itemAt(index)
+                root.activeAction = root._visibleRightSideActions[index]
+            }
+        } else {
+            root.activeAction = null
+        }
+    }
+
+    function resetSwipe()
+    {
+        updatePosition(0)
+    }
+
+    function filterVisibleActions(actions)
+    {
+        var visibleActions = []
+        for(var i = 0; i < actions.length; i++) {
+            var action = actions[i]
+            if (action.visible) {
+                visibleActions.push(action)
+            }
+        }
+        return visibleActions
+    }
+
+    function updatePosition(pos)
+    {
+        if (!root.triggerActionOnMouseRelease && (pos !== 0)) {
+            mouseArea.state = pos > 0 ? "RightToLeft" : "LeftToRight"
+        } else {
+            mouseArea.state = ""
+        }
+        main.x = pos
+    }
+
+    states: [
+        State {
+            name: "select"
+            when: selectionMode || selected
+            PropertyChanges {
+                target: selectionIcon
+                source: Qt.resolvedUrl("ListItemWithActionsCheckBox.qml")
+                anchors.leftMargin: units.gu(2)
+            }
+            PropertyChanges {
+                target: root
+                locked: true
+            }
+            PropertyChanges {
+                target: main
+                x: 0
+            }
+        }
+    ]
+
+    height: defaultHeight
+    clip: height !== defaultHeight
+
+    Rectangle {
+        id: leftActionView
+
+        anchors {
+            top: parent.top
+            bottom: parent.bottom
+            right: main.left
+        }
+        width: root.leftActionWidth + actionThreshold
+        visible: leftSideAction
+        color: UbuntuColors.red
+
+        Icon {
+            anchors {
+                centerIn: parent
+                horizontalCenterOffset: actionThreshold / 2
+            }
+            name: leftSideAction && _showActions ? leftSideAction.iconName : ""
+            color: Theme.palette.selected.field
+            height: units.gu(3)
+            width: units.gu(3)
+        }
+    }
+
+    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
+                       color: root.activeAction === modelData ? UbuntuColors.lightAubergine : UbuntuColors.lightGrey
+                   }
+              }
+           }
+       }
+    }
+
+
+    Rectangle {
+        id: main
+        objectName: "mainItem"
+
+        anchors {
+            top: parent.top
+            bottom: parent.bottom
+        }
+
+        width: parent.width
+        color: root.selected ? root.selectedColor : root.color
+
+        Loader {
+            id: selectionIcon
+
+            anchors {
+                left: main.left
+                verticalCenter: main.verticalCenter
+            }
+            width: (status === Loader.Ready) ? item.implicitWidth : 0
+            visible: (status === Loader.Ready) && (item.width === item.implicitWidth)
+            Behavior on width {
+                NumberAnimation {
+                    duration: UbuntuAnimation.SnapDuration
+                }
+            }
+        }
+
+
+        Item {
+            id: mainContents
+
+            anchors {
+                left: selectionIcon.right
+                leftMargin: units.gu(2)
+                top: parent.top
+                topMargin: units.gu(1)
+                right: parent.right
+                rightMargin: units.gu(2)
+                bottom: parent.bottom
+                bottomMargin: units.gu(1)
+            }
+        }
+
+        Behavior on x {
+            UbuntuNumberAnimation {
+                id: mainItemMoving
+
+                easing.type: Easing.OutElastic
+                duration: UbuntuAnimation.SlowDuration
+            }
+        }
+        Behavior on color {
+           ColorAnimation {}
+        }
+    }
+
+    SequentialAnimation {
+        id: triggerAction
+
+        property var currentItem: root.activeItem ? root.activeItem.image : null
+
+        running: false
+        ParallelAnimation {
+            UbuntuNumberAnimation {
+                target: triggerAction.currentItem
+                property: "opacity"
+                from: 1.0
+                to: 0.0
+                duration: UbuntuAnimation.SlowDuration
+                easing {type: Easing.InOutBack; }
+            }
+            UbuntuNumberAnimation {
+                target: triggerAction.currentItem
+                properties: "width, height"
+                from: units.gu(3)
+                to: root.actionWidth
+                duration: UbuntuAnimation.SlowDuration
+                easing {type: Easing.InOutBack; }
+            }
+        }
+        PropertyAction {
+            target: triggerAction.currentItem
+            properties: "width, height"
+            value: units.gu(3)
+        }
+        PropertyAction {
+            target: triggerAction.currentItem
+            properties: "opacity"
+            value: 1.0
+        }
+        ScriptAction {
+            script: {
+                root.activeAction.triggered(root)
+                mouseArea.state = ""
+            }
+        }
+        PauseAnimation {
+            duration: 500
+        }
+        UbuntuNumberAnimation {
+            target: main
+            property: "x"
+            to: 0
+
+        }
+    }
+
+    MouseArea {
+        id: mouseArea
+
+        property bool locked: root.locked || ((root.leftSideAction === null) && (root._visibleRightSideActions.count === 0))
+        property bool manual: false
+        property string direction: "None"
+        property real lastX: -1
+
+        anchors.fill: parent
+        drag {
+            target: locked ? null : main
+            axis: Drag.XAxis
+            minimumX: rightActionsView.visible ? -(rightActionsView.width) : 0
+            maximumX: leftActionView.visible ? leftActionView.width : 0
+            threshold: root.actionThreshold
+        }
+
+        states: [
+            State {
+                name: "LeftToRight"
+                PropertyChanges {
+                    target: mouseArea
+                    drag.maximumX: 0
+                }
+            },
+            State {
+                name: "RightToLeft"
+                PropertyChanges {
+                    target: mouseArea
+                    drag.minimumX: 0
+                }
+            }
+        ]
+
+        onMouseXChanged: {
+            var offset = (lastX - mouseX)
+            if (Math.abs(offset) <= root.actionThreshold) {
+                return
+            }
+            lastX = mouseX
+            direction = offset > 0 ? "RTL" : "LTR";
+        }
+
+        onPressed: {
+            lastX = mouse.x
+        }
+
+        onReleased: {
+            if (root.triggerActionOnMouseRelease && root.activeAction) {
+                triggerAction.start()
+            } else {
+                root.returnToBounds(direction)
+                root.activeAction = null
+            }
+            lastX = -1
+            direction = "None"
+        }
+        onClicked: {
+            if (main.x === 0) {
+                root.itemClicked(mouse)
+            } else if (main.x > 0) {
+                var action = getActionAt(Qt.point(mouse.x, mouse.y))
+                if (action && action !== -1) {
+                    action.triggered(root)
+                }
+            } else {
+                var actionIndex = getActionAt(Qt.point(mouse.x, mouse.y))
+                if (actionIndex !== -1) {
+                    root.activeItem = rightActionsRepeater.itemAt(actionIndex)
+                    root.activeAction = root._visibleRightSideActions[actionIndex]
+                    triggerAction.start()
+                    return
+                }
+            }
+            root.resetSwipe()
+        }
+
+        onPositionChanged: {
+            if (mouseArea.pressed) {
+                updateActiveAction()
+            }
+        }
+        onPressAndHold: {
+            if (main.x === 0) {
+                root.itemPressAndHold(mouse)
+            }
+        }
+        z: -1
+    }
+}
+

=== added file 'ComponentStore/ListItemWithActions/ListItemWithActionsCheckBox.qml'
--- ComponentStore/ListItemWithActions/ListItemWithActionsCheckBox.qml	1970-01-01 00:00:00 +0000
+++ ComponentStore/ListItemWithActions/ListItemWithActionsCheckBox.qml	2014-11-12 16:25:42 +0000
@@ -0,0 +1,25 @@
+/*
+ * Copyright (C) 2012-2014 Canonical, Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.2
+import Ubuntu.Components 1.1
+
+CheckBox {
+    checked: root.selected
+    width: implicitWidth
+    // disable item mouse area to avoid conflicts with parent mouse area
+    __mouseArea.enabled: false
+}

=== added file 'GallerySRC/ListItemWithActionsWidget.qml'
--- GallerySRC/ListItemWithActionsWidget.qml	1970-01-01 00:00:00 +0000
+++ GallerySRC/ListItemWithActionsWidget.qml	2014-11-12 16:25:42 +0000
@@ -0,0 +1,63 @@
+import QtQuick 2.0
+import Ubuntu.Components 1.1
+import "../ComponentStore/ListItemWithActions"
+
+TemplateWidgetPage {
+    id: listitemwithactionswidget
+
+    title: "List Item With Actions"
+    author: "Renato Araujo Oliveira Filho"
+    email: "[e-mail]"
+    license: "GNU General Public License v3.0"
+    description: "This widget provides an updated listitem which is what the core apps \
+currently use. These listitems will be provided by the SDK with vivid onwards. However \
+current RMT devices will ship with the ubuntu-sdk-14.10 framework which wouldn't have \
+these latest listitems."
+
+    ListModel {
+        id: testModel
+        ListElement { title: "Slide me right to delete" }
+        ListElement { title: "Slide me left to show more options" }
+    }
+
+    content: ListView {
+        id: nameListView
+        anchors.fill: parent
+
+        clip: true
+        model: testModel
+
+        delegate: ListItemWithActions {
+            height: units.gu(9)
+            width: parent.width
+            color: "White"
+            triggerActionOnMouseRelease: true
+
+            leftSideAction: Action {
+                iconName: "delete"
+                text: i18n.tr("Delete")
+                onTriggered: {
+                    testModel.remove(nameListView.index)
+                }
+            }
+
+            rightSideActions: [
+                Action {
+                    iconName: "alarm-clock"
+                    text: i18n.tr("Alarm")
+                },
+
+                Action {
+                    iconName: "add"
+                    text: i18n.tr("Add")
+                }
+            ]
+
+            contents: Label {
+                text: title
+                anchors.left: parent.left
+                anchors.verticalCenter: parent.verticalCenter
+            }
+        }
+    }
+}

=== modified file 'GallerySRC/WidgetsModel.qml'
--- GallerySRC/WidgetsModel.qml	2014-11-08 20:59:00 +0000
+++ GallerySRC/WidgetsModel.qml	2014-11-12 16:25:42 +0000
@@ -2,23 +2,29 @@
 
 ListModel {
     id: widgetsModel
+
+    ListElement {
+        label: "Circle Image"
+        source: "GallerySRC/CircleImageWidget.qml"
+    }
+
     ListElement {
         label: "Empty State"
         source: "GallerySRC/EmptyStateWidget.qml"
     }
 
     ListElement {
-        label: "Circle Image"
-        source: "GallerySRC/CircleImageWidget.qml"
+        label: "Fast Scroll"
+        source: "GallerySRC/FastScrollWidget.qml"
+    }
+
+    ListElement {
+        label: "List Item With Actions"
+        source: "GallerySRC/ListItemWithActionsWidget.qml"
     }
 
     ListElement {
         label: "Page With Bottom Edge"
         source: "GallerySRC/BottomEdgeWidget.qml"
     }
-
-    ListElement {
-        label: "Fast Scroll"
-        source: "GallerySRC/FastScrollWidget.qml"
-    }
 }

=== added file 'docs/_components/listitemwithactions.rst'
--- docs/_components/listitemwithactions.rst	1970-01-01 00:00:00 +0000
+++ docs/_components/listitemwithactions.rst	2014-11-12 16:25:42 +0000
@@ -0,0 +1,184 @@
+List Item With Actions
+======================
+
++----------+---------------------------------+
+| Author   | Renato Araujo Oliveira Filho    |
++----------+-------------+-------------------+
+| License  | GNU General Public License v3.0 |
++----------+---------------------------------+
+| Contact  | [e-mail]      |
++----------+---------------------------------+
+
+This widget provides an updated listitem which is what the core apps currently use. 
+These listitems will be provided by the SDK with vivid onwards. However current RMT 
+devices will ship with the ubuntu-sdk-14.10 framework which wouldn't have these latest listitems.
+
+Example:
+
+.. code-block:: qml
+
+    Page {
+        id: listitemwithactionspage
+    
+        ListModel {
+            id: testModel
+            ListElement { title: "Slide me right to delete" }
+            ListElement { title: "Slide me left to show more options" }
+        }
+
+        ListView {
+            id: nameListView
+            anchors.fill: parent
+
+            clip: true
+            model: testModel
+
+            delegate: ListItemWithActions {
+                height: units.gu(9)
+                width: parent.width
+                color: "White"
+                triggerActionOnMouseRelease: true
+
+                leftSideAction: Action {
+                    iconName: "delete"
+                    text: i18n.tr("Delete")
+                    onTriggered: {
+                        testModel.remove(nameListView.index)
+                    }
+                }
+
+                rightSideActions: [
+                    Action {
+                        iconName: "alarm-clock"
+                        text: i18n.tr("Alarm")
+                    },
+
+                    Action {
+                        iconName: "add"
+                        text: i18n.tr("Add")
+                    }
+                ]
+
+                contents: Label {
+                    text: title
+                    anchors.left: parent.left
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+            }
+        }
+    }
+    
+.. image:: ../_images/listitemwithactions.png
+   :align: center
+
+Properties
+----------
+
+- :ref:`color`: color
+- :ref:`contents`: Item
+- :ref:`internalAnchors`: anchors
+- :ref:`leftSideAction`: Action
+- :ref:`rightSideActions`: Action <List>
+- :ref:`locked`: boolean (false by default)
+- :ref:`triggerActionOnMouseRelease`: boolean (false by default)
+
+Property Documentation
+----------------------
+
+.. _color:
+
+color
+^^^^^
+
+The background color of the list item.
+
+.. _contents:
+
+contents
+^^^^^^^^
+
+This property is used to define the contents of the list item. Unlike the SDK
+list items which only assigning values to the text property, the contents allows
+you to define whatever content you so wish. In the example above, a Label is used
+to show content in the list item. This could very well be replaced with a column
+with multiple labels with whatever formatting you choose. For example, ::
+
+    contents: Column {
+        spacing: units.gu(2)
+        anchors.fill: parent
+        Label {
+           id: title
+           text: Test"
+           font.bold: true
+        }
+        
+        Label {
+            id: subTitle
+            text: "SubTitle
+        }
+    }
+
+.. _internalAnchors:
+
+internalAnchors
+^^^^^^^^^^^^^^^
+
+Internal anchors allows you to define the anchors of the contents. The values are
+already defined by default, but if you so wish, you could change the anchors to
+better suit your application. For instance changing the top anchor of the contents
+can be done by, ::
+
+    internalAnchors.topMargin: units.gu(0)
+
+.. _leftSideAction:
+
+leftSideAction
+^^^^^^^^^^^^^^
+
+According to design, the left side of a list item can include only one action. An action
+can be defined easily by, ::
+
+    Action {
+        iconName: "add"
+        text: "Add"
+        onTriggered {
+            doSomething()
+        }
+    }
+
+
+.. _rightSideActions:
+
+rightSideActions
+^^^^^^^^^^^^^^^^
+
+On right side of a list item, one can include a list of actions. Obviously it would be 
+recommended to not add more than 3 actions since space is limited. ::
+
+    rightSideActions: [
+        Action {
+            iconName: "alarm-clock"
+            text: i18n.tr("Alarm")
+        },
+
+        Action {
+            iconName: "add"
+            text: i18n.tr("Add")
+        }
+    ]
+    
+.. _locked:
+
+locked
+^^^^^^
+
+This property can be used to lock the actions of a list item (essentially enabling/disabling them).
+
+.. _triggerActionOnMouseRelease:
+
+triggerActionOnMouseRelease
+^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+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.

=== added file 'docs/_images/listitemwithactions.png'
Binary files docs/_images/listitemwithactions.png	1970-01-01 00:00:00 +0000 and docs/_images/listitemwithactions.png	2014-11-12 16:25:42 +0000 differ
=== modified file 'docs/index.rst'
--- docs/index.rst	2014-11-09 16:01:02 +0000
+++ docs/index.rst	2014-11-12 16:25:42 +0000
@@ -51,4 +51,5 @@
    _components/circleimage
    _components/emptystate
    _components/fastscroll
+   _components/listitemwithactions
    _components/pagewithbottomedge

=== modified file 'docs/release.rst'
--- docs/release.rst	2014-11-12 14:36:24 +0000
+++ docs/release.rst	2014-11-12 16:25:42 +0000
@@ -4,6 +4,7 @@
 **12th November 2014**
 
 * Fixed typos in the installation guide
+* Added ListItemWithActions component
 
 **9th November 2014**