[ListView] add item actons

examples/touch/content/ListViewPage.qml

@@ -28,12 +28,12 @@ Page {
         ListElement { name: "Whale"; desc: ""; size: "Huge" }
     }
 
-    MediumListView {
+    ListView {
         id: view
         anchors.fill: parent
         clip: true
         model: animalsModel
-        delegate: MediumListViewItem {
+        delegate: ListViewItemWithActions {
             label: name
             description: desc
         }

src/controls/MediumListView.qml → src/controls/ListView.qml

@@ -5,6 +5,9 @@ import QtQuick.Controls.Styles.Nemo 1.0
 
 ListView {
     id: listView
+
+    signal hideAllActions(int hideIndex)
+
     section.criteria: ViewSection.FullString
     section.delegate: Component{
         id: sectionHeading
@@ -59,5 +62,6 @@ ListView {
 
         }
     }
+
 }
 

src/controls/ListViewItemWithActions.qml

+import QtQuick 2.1
+import QtQuick.Controls.Nemo 1.0
+
+import QtGraphicalEffects 1.0
+
+Item {
+    id: root
+    width: parent.width
+    height: 60
+
+    property string label: ""
+
+    property string description: ""
+    property string subdescription: ""
+    property string icon: ""
+    property string page: ""
+
+    property alias actions: actionsLoader.sourceComponent
+
+    signal clicked
+
+    function hideAllActions() {
+        root.ListView.view.hideAllActions(index)
+    }
+
+    Connections {
+        target: root.ListView.view
+        onHideAllActions: {
+            if (hideIndex != index) {
+                listArea.x = 0
+            }
+        }
+    }
+
+    Rectangle{
+        id: actionsArea
+        color: "#474747"
+
+        anchors.right: listArea.left
+
+        height: listArea.height
+        width: childrenRect.width
+
+        Loader {
+            id: actionsLoader
+        }
+    }
+
+    Rectangle{
+        id: listArea
+        width: root.width
+        height: root.height
+        color: "transparent"
+
+        Behavior on x{
+            NumberAnimation { duration: 200}
+        }
+
+        Rectangle {
+            anchors.fill: parent
+            color: "#11ffffff"
+            visible: mouse.pressed
+        }
+
+        Image{
+            id: itemIcon
+            height: parent.height-10
+            width: height
+            anchors{
+                left: parent.left
+                leftMargin: 20
+                top: parent.top
+                topMargin: 5
+            }
+
+            sourceSize.width: width
+            sourceSize.height: height
+
+            source: (icon != "") ? icon : "images/listview-icon-template-s.svg"
+            //visible: (icon != "")
+        }
+
+        Rectangle{
+            id: dataArea
+            width: parent.width-itemIcon.width-arrowItem.width-60
+            height: labelItem.height+(description != "" ? descriptionItem.height : 0)+(subdescription != "" ? subDescriptionItem.height : 0)
+            clip: true
+
+            anchors{
+                left:itemIcon.right
+                leftMargin: 20
+                verticalCenter: itemIcon.verticalCenter
+            }
+            color: "transparent"
+
+            Text {
+                id: labelItem
+                color: "#ffffff"
+                text: label
+                anchors{
+                    left: parent.left
+                    right: parent.right
+                }
+                font.pixelSize: 30
+                clip: true
+            }
+
+            Text{
+                id: descriptionItem
+                color: "#ffffff"
+                text: description
+                anchors{
+                    left: parent.left
+                    right: parent.right
+                    top: labelItem.bottom
+                }
+                font.pixelSize: 18
+                clip: true
+                visible: description != ""
+            }
+
+            Text{
+                id: subDescriptionItem
+                color: "#ffffff"
+                text: subdescription
+                anchors{
+                    left: parent.left
+                    right: parent.right
+                    top: descriptionItem.bottom
+                }
+                font.pixelSize: 18
+                clip: true
+                visible: subdescription != ""
+            }
+
+            Item{
+                width: 15
+                height: parent.height
+                anchors{
+                    top: parent.top
+                    right: parent.right
+                }
+                visible: !mouse.pressed
+                LinearGradient{
+                    anchors.fill: parent
+                    start: Qt.point(0, 0)
+                    end: Qt.point(15, 0)
+                    gradient: Gradient {
+                        GradientStop { position: 0.0; color: "transparent" }
+                        GradientStop { position: 1.0; color: "black" }
+                    }
+                }
+            }
+        }
+
+        Image {
+            id: arrowItem
+            height: parent.height-10
+            width: height
+
+            anchors{
+                right: parent.right
+                rightMargin: 20
+                verticalCenter: parent.verticalCenter
+            }
+
+            sourceSize.width: width
+            sourceSize.height: height
+
+            source: "images/listview-icon-arrow.svg"
+            //visible: (page != "")
+        }
+
+        MouseArea {
+            id: mouse
+            anchors.fill: parent
+            onClicked: {
+                //if actions is hide
+                if(listArea.x === 0)
+                {
+                    root.clicked()
+                }
+                else
+                {
+                    listArea.x = 0
+                }
+            }
+
+            onPressed: {
+                hideAllActions()
+            }
+
+            onPressAndHold: {
+                if (actionsLoader.item) {
+                    listArea.x = actionsArea.width
+                }
+            }
+        }
+    }
+}

src/controls/MediumListViewItem.qml

-import QtQuick 2.1
-import QtQuick.Controls.Nemo 1.0
-
-import QtGraphicalEffects 1.0
-
-Item {
-    id: root
-    width: parent.width
-    height: 60
-
-    property string label: ""
-
-    property string description: ""
-    property string icon: ""
-    property string page: ""
-
-    signal clicked
-
-    Rectangle {
-        anchors.fill: parent
-        color: "#11ffffff"
-        visible: mouse.pressed
-    }
-
-    Image{
-        id: itemIcon
-        height: parent.height-10
-        width: height
-        anchors{
-            left: parent.left
-            leftMargin: 20
-            top: parent.top
-            topMargin: 5
-        }
-
-        sourceSize.width: width
-        sourceSize.height: height
-
-        source: (icon != "") ? icon : "images/listview-icon-template-s.svg"
-        //visible: (icon != "")
-    }
-
-    Rectangle{
-        id: dataArea
-        width: parent.width-itemIcon.width-arrowItem.width-60
-        height: (description != "") ? childrenRect.height : labelItem.height
-        clip: true
-
-        anchors{
-            left:itemIcon.right
-            leftMargin: 20
-            verticalCenter: itemIcon.verticalCenter
-        }
-        color: "transparent"
-
-        Text {
-            id: labelItem
-            color: "#ffffff"
-            text: label
-            anchors{
-                left: parent.left
-                right: parent.right
-            }
-            font.pixelSize: 30
-            clip: true
-        }
-
-        Text{
-            id: descriptionItem
-            color: "#ffffff"
-            text: description
-            anchors{
-                left: parent.left
-                right: parent.right
-                top: labelItem.bottom
-            }
-            font.pixelSize: 18
-            clip: true
-            visible: text != ""
-        }
-
-        Item{
-            width: 15
-            height: parent.height
-            anchors{
-                top: parent.top
-                right: parent.right
-            }
-            visible: !mouse.pressed
-            LinearGradient{
-                anchors.fill: parent
-                start: Qt.point(0, 0)
-                end: Qt.point(15, 0)
-                gradient: Gradient {
-                    GradientStop { position: 0.0; color: "transparent" }
-                    GradientStop { position: 1.0; color: "black" }
-                }
-            }
-        }
-    }
-
-    Image {
-        id: arrowItem
-        height: parent.height-10
-        width: height
-
-        anchors{
-            right: parent.right
-            rightMargin: 20
-            verticalCenter: parent.verticalCenter
-        }
-
-        sourceSize.width: width
-        sourceSize.height: height
-
-        source: "images/listview-icon-arrow.svg"
-        //visible: (page != "")
-    }
-
-    MouseArea {
-        id: mouse
-        anchors.fill: parent
-        onClicked: root.clicked()
-    }
-}

src/controls/controls.pro

@@ -18,9 +18,8 @@ QML_FILES += \
     Header.qml \
     HeaderToolsLayout.qml \
     Slider.qml\
-    MediumListView.qml \
-    MediumListViewItem.qml\
-    MediumListViewElement.qml
+    ListView.qml \
+    ListViewItemWithActions.qml
 
 OTHER_FILES += qmldir \
     $$QML_FILES
@@ -54,5 +53,3 @@ images.files = $$_PRO_FILE_PWD_/images
 images.path = $$[QT_INSTALL_QML]/$$PLUGIN_IMPORT_PATH
 
 INSTALLS += target qmlfiles images
-
-DISTFILES +=

src/controls/qmldir

@@ -19,8 +19,8 @@ QueryDialog 1.0 QueryDialog.qml
 Header 1.0 Header.qml
 HeaderToolsLayout 1.0 HeaderToolsLayout.qml
 Slider 1.0 Slider.qml
-MediumListView 1.0 MediumListView.qml
-MediumListViewItem 1.0 MediumListViewItem.qml
+ListView 1.0 ListView.qml
+ListViewItemWithActions 1.0 ListViewItemWithActions.qml
 
 # MIRRORED CONTROLS: 
 # These are the controls that we take directly from official QQC.