[MediumListView] Update listview separate to MediumListView

examples/touch/content/ListViewPage.qml

@@ -6,35 +6,36 @@ import QtQuick.Controls.Styles.Nemo 1.0
 Page {
     id: listViewPage
 
-    headerTools: HeaderToolsLayout { showBackButton: false; title: "ListView" }
+    headerTools: HeaderToolsLayout { showBackButton: false; title: "MediumListView" }
 
 
     ListModel {
         id: animalsModel
-        ListElement { name: "Ant"; size: "Tiny" }
-        ListElement { name: "Flea"; size: "Tiny" }
-        ListElement { name: "Parrot"; size: "Small" }
-        ListElement { name: "Guinea pig"; size: "Small" }
-        ListElement { name: "Rat"; size: "Small" }
-        ListElement { name: "Butterfly"; size: "Small" }
-        ListElement { name: "Dog"; size: "Medium" }
-        ListElement { name: "Cat"; size: "Medium" }
-        ListElement { name: "Pony"; size: "Medium" }
-        ListElement { name: "Koala"; size: "Medium" }
-        ListElement { name: "Horse"; size: "Large" }
-        ListElement { name: "Tiger"; size: "Large" }
-        ListElement { name: "Giraffe"; size: "Large" }
-        ListElement { name: "Elephant"; size: "Huge" }
-        ListElement { name: "Whale"; size: "Huge" }
+        ListElement { name: "Ant"; desc: "Small description"; size: "Tiny" }
+        ListElement { name: "Flea"; desc: ""; size: "Tiny" }
+        ListElement { name: "Parrot"; desc: ""; size: "Small" }
+        ListElement { name: "Guinea pig"; desc: "The guinea pig, cavy or domestic guinea pig, or cuy for livestock breeds, is a species of rodent belonging to the family Caviidae and the genus Cavia"; size: "Small" }
+        ListElement { name: "Rat"; desc: ""; size: "Small" }
+        ListElement { name: "Butterfly"; desc: ""; size: "Small" }
+        ListElement { name: "Dog"; desc: ""; size: "Medium" }
+        ListElement { name: "Cat"; desc: ""; size: "Medium" }
+        ListElement { name: "Pony"; desc: ""; size: "Medium" }
+        ListElement { name: "Koala"; desc: ""; size: "Medium" }
+        ListElement { name: "Horse"; desc: ""; size: "Large" }
+        ListElement { name: "Tiger"; desc: ""; size: "Large" }
+        ListElement { name: "Giraffe"; desc: ""; size: "Large" }
+        ListElement { name: "Elephant"; desc: ""; size: "Huge" }
+        ListElement { name: "Whale"; desc: ""; size: "Huge" }
     }
 
-    ListView {
+    MediumListView {
         id: view
         anchors.fill: parent
         clip: true
         model: animalsModel
-        delegate: ListViewItem {
-            label: name;
+        delegate: MediumListViewItem {
+            label: name
+            description: desc
         }
         section.property: "size"
     }

src/controls/ListViewItem.qml → 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: 88
 
-    property alias label: labelItem.text
-    //property alias description: descriptionItem.text
+    property string label: ""
 
+    property string description: ""
     property string icon: ""
     property string page: ""
 
@@ -26,7 +28,7 @@ Item {
         width: height
         anchors{
             left: parent.left
-            leftMargin: 5
+            leftMargin: 20
             top: parent.top
             topMargin: 5
         }
@@ -38,22 +40,79 @@ Item {
         //visible: (icon != "")
     }
 
-    Label {
+    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
-        text: modelData
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.left: itemIcon.right
-        anchors.leftMargin: 20
-        anchors.right: arrow.left
-        anchors.rightMargin: 20
+            color: "#ffffff"
+            text: label
+            anchors{
+                left: parent.left
+                right: parent.right
+            }
+            font.pixelSize: 35
             clip: true
         }
 
+        Text{
+            id: descriptionItem
+            color: "#ffffff"
+            text: description
+            anchors{
+                left: parent.left
+                right: parent.right
+                top: labelItem.bottom
+            }
+            font.pixelSize: 20
+            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: arrow
-        anchors.right: parent.right
-        anchors.rightMargin: 20
-        anchors.verticalCenter: parent.verticalCenter
+        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 != "")
     }

src/controls/controls.pro

@@ -18,8 +18,9 @@ QML_FILES += \
     Header.qml \
     HeaderToolsLayout.qml \
     Slider.qml\
-    ListView.qml \
-    ListViewItem.qml
+    MediumListView.qml \
+    MediumListViewItem.qml\
+    MediumListViewElement.qml
 
 OTHER_FILES += qmldir \
     $$QML_FILES
@@ -53,3 +54,5 @@ 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
-ListView 1.0 ListView.qml
-ListViewItem 1.0 ListViewItem.qml
+MediumListView 1.0 MediumListView.qml
+MediumListViewItem 1.0 MediumListViewItem.qml
 
 # MIRRORED CONTROLS: 
 # These are the controls that we take directly from official QQC.