Created re-usable delegate for list items

diff --git a/src/qmlui/DelegateBase.qml b/src/qmlui/DelegateBase.qml
new file mode 100644 (file)
index 0000000..44fff1c
--- /dev/null
+++ b/src/qmlui/DelegateBase.qml
@@ -0,0 +1,149 @@
+import Qt 4.7
+
+Item {
+    id: delegate
+    property alias image: image.source
+    property alias primaryText: primaryText.text
+    property alias details: details.sourceComponent
+
+    width: delegate.ListView.view.width
+    height: childrenRect.height
+
+    Rectangle {
+        id: background
+        anchors {
+            left: parent.left
+            right: parent.right
+            top: parent.top
+            bottom: details.bottom
+            topMargin: 5
+            bottomMargin: -5
+        }
+        gradient: Gradient {
+            GradientStop {
+                position: 0
+                color: "#777777"
+            }
+
+            GradientStop {
+                position: 1
+                color: "#222222"
+            }
+        }
+        border { width: 1; color: "#777777" }
+        radius: 5
+    }
+
+    Image {
+        id: image
+        x: 10
+        y: 4
+    }
+
+    BorderImage {
+        id: borderImage
+        anchors.fill: image
+        anchors.margins: -8
+        source: "qrc:/res/images/profile_pic_border.png"
+        border.left: 24; border.top: 24
+        border.right: 24; border.bottom: 24
+        horizontalTileMode: BorderImage.Stretch
+        verticalTileMode: BorderImage.Stretch
+    }
+
+    Text {
+        id: primaryText
+        anchors { left: image.right; right: background.right; top: background.top; margins: 5; leftMargin: 10 }
+        clip: true;
+        elide: Text.ElideRight
+    }
+
+    Loader {
+        id: details
+        anchors { left: primaryText.left; right: primaryText.right; top: primaryText.bottom }
+    }
+
+//    Image {
+//        id: timeImage
+//        source: "qrc:/res/images/clock.png"
+//        anchors { left: primaryText.left; top: details.bottom }
+//    }
+//    Text {
+//        id: timeText
+//        font.pixelSize: timeImage.height * 0.8
+//        anchors { margins: 5; left: timeImage.right; right: parent.right; verticalCenter: timeImage.verticalCenter }
+//        text: time
+//    }
+
+//    Image {
+//        id: lengthImage
+//        anchors { left: primaryText.left; top: timeImage.bottom }
+//        source: "qrc:/res/images/ruler.png"
+//    }
+//    Text {
+//        id: lengthText
+//        font.pixelSize: lengthImage.height * 0.8
+//        anchors { margins: 5; left: lengthImage.right; right: parent.right; verticalCenter: lengthImage.verticalCenter }
+//        text: lengthCaption
+//    }
+
+
+//    Rectangle {
+//        id: listItem
+//        width: parent.width
+//        height: col.height + 8
+//        color: "lightsteelblue"
+//        radius: 10
+//        border { color: "black"; width: 2 }
+//        clip: true
+
+//        MouseArea {
+//            anchors.fill: parent
+//            onClicked: listItem.state == 'expanded' ? listItem.state = '' : listItem.state = 'expanded'
+//        }
+
+//        Image {
+//            id: image
+//            source: picture
+//            anchors.top: parent.top
+//            anchors.topMargin: 5
+//            anchors.left: parent.left
+//            anchors.leftMargin: 7
+//        }
+
+//        Column {
+//            id: col
+//            x: image.x + image.width + 7
+//            width: parent.width - x - 7
+//            y: 3
+//            Text { text: '<b>' + instruction + '</b> ' }
+//            Text {
+//                id: msg;
+//                text: message;
+//                font.pixelSize: 16;
+//                clip: true;
+//                elide: Text.ElideRight
+//                anchors.left: parent.left;
+//                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
+//            }
+//        ]
+    }

diff --git a/src/qmlui/DetailRow.qml b/src/qmlui/DetailRow.qml
new file mode 100644 (file)
index 0000000..78b3e42
--- /dev/null
+++ b/src/qmlui/DetailRow.qml
@@ -0,0 +1,24 @@
+import Qt 4.7
+
+Item {
+    property alias image: image.source
+    property alias text: text.text
+
+    anchors.left: parent.left
+    anchors.right: parent.right
+    width: childrenRect.width
+    height: childrenRect.height
+
+    Image {
+        id: image
+        anchors { left: parent.left; top: parent.top }
+    }
+
+    Text {
+        id: text
+        anchors { leftMargin: 5; left: image.right; right: parent.right }
+        font.pixelSize: image.height * 0.7
+        clip: true;
+        elide: Text.ElideRight
+    }
+}

diff --git a/src/qmlui/List.qml b/src/qmlui/List.qml
index ad3830f..ddea336 100644 (file)
--- a/src/qmlui/List.qml
+++ b/src/qmlui/List.qml
@@ -6,11 +6,27 @@ ListView {
     spacing: 5
 
     model: friendModel
-    delegate: friendListDelegate
+//    delegate: friendListDelegate
+    delegate: DelegateBase {
+        image: imageUrl
+        primaryText: name
+        details: detailsComponent
+    }
     focus: true
 
     Component {
-        id: friendListDelegate
+        id: detailsComponent
+        Item {
+            height: childrenRect.height
+            width: childrenRect.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 }
+        }
+    }
+
+    Component {
+        id: friendListDelegate_
 
         Rectangle {
             id: listItem

diff --git a/src/qmlui/res.qrc b/src/qmlui/res.qrc
index 6f91873..f1e5d31 100644 (file)
--- a/src/qmlui/res.qrc
+++ b/src/qmlui/res.qrc
@@ -24,5 +24,7 @@
         <file>LoginWidget.qml</file>
         <file>RoutingPanel.qml</file>
         <file>RoutingDelegate.qml</file>
+        <file>DelegateBase.qml</file>
+        <file>DetailRow.qml</file>
     </qresource>
 </RCC>

diff --git a/src/src.pro b/src/src.pro
index 60e60f4..2539a87 100644 (file)
--- a/src/src.pro
+++ b/src/src.pro
@@ -194,7 +194,9 @@ OTHER_FILES += qmlui/Main.qml \
     qmlui/PanelContents.qml \
     qmlui/List.qml \
     qmlui/RoutingPanel.qml \
-    qmlui/RoutingDelegate.qml
+    qmlui/RoutingDelegate.qml \
+    qmlui/DelegateBase.qml \
+    qmlui/DetailRow.qml
 
 QT += network \
     webkit  \