Implemented list item expanding, collapsing does not work properly yet.

diff --git a/src/qmlui/DelegateBase.qml b/src/qmlui/DelegateBase.qml
index 44fff1c..169b168 100644 (file)
--- a/src/qmlui/DelegateBase.qml
+++ b/src/qmlui/DelegateBase.qml
@@ -60,6 +60,8 @@ Item {
 
     Loader {
         id: details
+//        height: childrenRect.height
+        state: parent.state
         anchors { left: primaryText.left; right: primaryText.right; top: primaryText.bottom }
     }
 
@@ -97,10 +99,10 @@ Item {
 //        border { color: "black"; width: 2 }
 //        clip: true
 
-//        MouseArea {
-//            anchors.fill: parent
-//            onClicked: listItem.state == 'expanded' ? listItem.state = '' : listItem.state = 'expanded'
-//        }
+        MouseArea {
+            anchors.fill: parent
+            onClicked: delegate.state == 'expanded' ? delegate.state = '' : delegate.state = 'expanded'
+        }
 
 //        Image {
 //            id: image
@@ -127,23 +129,25 @@ Item {
 //                anchors.right: parent.right}
 //            }
 
-//        states: [
-//            State {
-//                name: "expanded"
-//                PropertyChanges {
-//                    target: msg
-//                    wrapMode: Text.Wrap
-//                    elide: Text.ElideNone
-//                }
-//            }
-//        ]
-
-//        transitions: [
-//            Transition {
-//                from: ""
-//                to: "expanded"
-//                NumberAnimation { properties: "height"; duration: 100 }
-//                reversible: true
+    states: [
+        State {
+            name: "expanded"
+//            PropertyChanges {
+//                target: primaryText
+//                wrapMode: Text.Wrap
+//                elide: Text.ElideNone
 //            }
-//        ]
-    }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            from: ""
+            to: "expanded"
+//            NumberAnimation { properties: "height"; duration: 100 }
+            PropertyAction { target: primaryText; property: "wrapMode"; value: Text.Wrap }
+            PropertyAction { target: primaryText; property: "elide"; value: Text.ElideNone }
+            reversible: true
+        }
+    ]
+}

diff --git a/src/qmlui/DetailRow.qml b/src/qmlui/DetailRow.qml
index 78b3e42..a3706be 100644 (file)
--- a/src/qmlui/DetailRow.qml
+++ b/src/qmlui/DetailRow.qml
@@ -7,7 +7,9 @@ Item {
     anchors.left: parent.left
     anchors.right: parent.right
     width: childrenRect.width
-    height: childrenRect.height
+    height: text.height > image.height ? text.height : image.height
+
+    state: parent.state
 
     Image {
         id: image
@@ -16,9 +18,31 @@ Item {
 
     Text {
         id: text
-        anchors { leftMargin: 5; left: image.right; right: parent.right }
+        anchors { leftMargin: 5; left: image.right; right: parent.right; top: parent.top }
         font.pixelSize: image.height * 0.7
         clip: true;
         elide: Text.ElideRight
+        state: parent.state
     }
+
+    onHeightChanged: {}
+
+    states: [
+        State {
+            name: "expanded"
+                PropertyChanges {
+                    target: text
+                    wrapMode: Text.Wrap
+                    elide: Text.ElideNone
+                }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            from: ""
+            to: "expanded"
+//            NumberAnimation { target: text; properties: "height"; duration: 1000 }
+        }
+    ]
 }

diff --git a/src/qmlui/List.qml b/src/qmlui/List.qml
index ddea336..9f58461 100644 (file)
--- a/src/qmlui/List.qml
+++ b/src/qmlui/List.qml
@@ -8,6 +8,7 @@ ListView {
     model: friendModel
 //    delegate: friendListDelegate
     delegate: DelegateBase {
+        id: delegate
         image: imageUrl
         primaryText: name
         details: detailsComponent
@@ -17,8 +18,9 @@ ListView {
     Component {
         id: detailsComponent
         Item {
-            height: childrenRect.height
-            width: childrenRect.width
+            state: delegate.state
+            height: messageRow.height + addressRow.height + timeRow.height
+            width: parent.width
             DetailRow { id: messageRow; image: "qrc:/res/images/envelope.png"; text: message }
             DetailRow { id: addressRow; anchors.top: messageRow.bottom; image: "qrc:/res/images/compass.png"; text: address }
             DetailRow { id: timeRow; anchors.top: addressRow.bottom; image: "qrc:/res/images/clock.png"; text: time }