Use the ListDelegate

3 files changed, 68 insertions, 101 deletions

diff --git a/components/kube/contents/ui/ComposerView.qml b/components/kube/contents/ui/ComposerView.qml
index b295bf4a..89d78399 100644
--- a/components/kube/contents/ui/ComposerView.qml
+++ b/components/kube/contents/ui/ComposerView.qml
@@ -143,110 +143,64 @@ Kube.View {
                     showDrafts: true
                 }
 
-                delegate: Item {
-                    property variant currentData: model
+                delegate: Kube.ListDelegate {
+                    id: delegateRoot
 
-                    width: delegateRoot.width
-                    height: delegateRoot.height
+                    color: Kube.Colors.textColor
+                    border.width: 0
+                    onClicked: listView.currentIndex = index
 
                     Item {
-                        id: delegateRoot
+                        id: content
 
-                        property variant mail : model.domainObject
-
-                        width: listView.width
-                        height: Kube.Units.gridUnit * 3
-
-                        states: [
-                        State {
-                            name: "selected"
-                            when: listView.currentIndex == index
-
-                            PropertyChanges {target: background; color: Kube.Colors.highlightColor}
-                            PropertyChanges {target: subject; color: Kube.Colors.highlightedTextColor}
-                        },
-                        State {
-                            name: "hovered"
-                            when: ( mouseArea.containsMouse || buttons.containsMouse )
-
-                            PropertyChanges {target: background; color: Kube.Colors.highlightColor; opacity: 0.6}
-                            PropertyChanges {target: subject; color: Kube.Colors.highlightedTextColor}
-                            PropertyChanges {target: date; visible: false}
-                            PropertyChanges {target: buttons; visible: true}
-                        }
-                        ]
-
-                        MouseArea {
-                            id: mouseArea
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            onClicked: listView.currentIndex = index
+                        anchors {
+                            fill: parent
+                            margins: Kube.Units.smallSpacing
                         }
 
-                        Rectangle {
-                            id: background
-                            anchors.fill: parent
-                            color: Kube.Colors.textColor
+                        Kube.Label{
+                            width: content.width - Kube.Units.largeSpacing * 2
+                            text: model.subject
+                            color: Kube.Colors.highlightedTextColor
+                            maximumLineCount: 2
+                            wrapMode: Text.WrapAnywhere
+                            elide: Text.ElideRight
                         }
 
-                        Item {
-                            id: content
-
+                        Kube.Label {
                             anchors {
-                                top: parent.top
-                                bottom: parent.bottom
-                                left: parent.left
                                 right: parent.right
-                                margins: Kube.Units.smallSpacing
-                            }
-
-
-                            Kube.Label{
-                                id: subject
-                                width: content.width - Kube.Units.largeSpacing * 2
-                                text: model.subject
-                                color: Kube.Colors.highlightedTextColor
-                                maximumLineCount: 2
-                                wrapMode: Text.WrapAnywhere
-                                elide: Text.ElideRight
-                            }
-
-                            Kube.Label {
-                                id: date
-
-                                anchors {
-                                    right: parent.right
-                                    bottom: parent.bottom
-                                }
-                                text: Qt.formatDateTime(model.date, "dd MMM yyyy")
-                                font.italic: true
-                                color: Kube.Colors.disabledTextColor
-                                font.pointSize: 9
+                                bottom: parent.bottom
                             }
+                            text: Qt.formatDateTime(model.date, "dd MMM yyyy")
+                            font.italic: true
+                            color: Kube.Colors.disabledTextColor
+                            font.pointSize: 9
+                            visible: !delegateRoot.hovered
                         }
-                        Row {
-                            id: buttons
+                    }
+                    Row {
+                        id: buttons
 
-                            property bool containsMouse: deleteButton.hovered
+                        property bool containsMouse: deleteButton.hovered
 
-                            anchors {
-                                right: parent.right
-                                bottom: parent.bottom
-                                margins: Kube.Units.smallSpacing
-                            }
+                        anchors {
+                            right: parent.right
+                            bottom: parent.bottom
+                            margins: Kube.Units.smallSpacing
+                        }
 
-                            visible: false
-                            spacing: Kube.Units.smallSpacing
-                            opacity: 0.7
-
-                            Kube.IconButton {
-                                id: deleteButton
-                                activeFocusOnTab: true
-                                iconName: Kube.Icons.moveToTrash
-                                visible: enabled
-                                enabled: !!model.mail
-                                onClicked: Kube.Fabric.postMessage(Kube.Messages.moveToTrash, {"mail": model.mail})
-                            }
+                        visible: delegateRoot.hovered
+                        spacing: Kube.Units.smallSpacing
+                        opacity: 0.7
+
+                        Kube.IconButton {
+                            id: deleteButton
+                            activeFocusOnTab: true
+                            iconName: Kube.Icons.moveToTrash
+                            visible: enabled
+                            enabled: !!model.mail
+                            onClicked: Kube.Fabric.postMessage(Kube.Messages.moveToTrash, {"mail": model.mail})
                         }
                     }
                 }
diff --git a/components/kube/contents/ui/LogView.qml b/components/kube/contents/ui/LogView.qml
index b71d3692..98d92ccd 100644
--- a/components/kube/contents/ui/LogView.qml
+++ b/components/kube/contents/ui/LogView.qml
@@ -55,6 +55,8 @@ Controls.SplitView {
                 details.timestamp = currentItem.currentData.timestamp
             }
             delegate: Kube.ListDelegate {
+                border.color: Kube.Colors.buttonColor
+                border.width: 1
                 Kube.Label {
                     id: description
                     anchors {
diff --git a/framework/qml/ListDelegate.qml b/framework/qml/ListDelegate.qml
index 3c63ccbe..002027d6 100644
--- a/framework/qml/ListDelegate.qml
+++ b/framework/qml/ListDelegate.qml
@@ -19,23 +19,34 @@
 
 import QtQuick 2.7
 import org.kube.framework 1.0 as Kube
+import QtQuick.Templates 2.0 as T
 
-Rectangle {
+T.ItemDelegate {
     id: root
     property variant currentData: model
-    property var listView: root.parent
-    default property alias contentItem: root.children
+    property alias color: background.color
+    property alias border: background.border
 
     height: Kube.Units.gridUnit * 3
-    width: listView.width
+    width: root.ListView.view.width
+    hoverEnabled: true
 
-    border.color: Kube.Colors.buttonColor
-    border.width: 1
-    color: listView.currentIndex == root.index ? Kube.Colors.highlightColor : Kube.Colors.viewBackgroundColor
-
-    MouseArea {
-        id: mouseArea
-        anchors.fill: parent
-        onClicked: listView.currentIndex = root.index
+    background: Rectangle {
+        id: background
+        border.color: Kube.Colors.buttonColor
+        border.width: 1
+        color: Kube.Colors.viewBackgroundColor
+        Rectangle {
+            anchors.fill: parent
+            visible: root.ListView.isCurrentItem
+            color: Kube.Colors.highlightColor
+        }
+        Rectangle {
+            anchors.fill: parent
+            visible: root.hovered || root.activeFocus
+            border.color: Kube.Colors.focusedButtonColor
+            border.width: 2
+            color: "transparent"
+        }
     }
 }