Keyboard navigation for the conversation view

Removed the manual currentIndex handling again as we seem to be able to
use the regular stuff now.
Additionally the listview is now resized if we don't have enough mails,
so the first mail is shown on top.
We can also move from mail to mail using keyboard navigation.
The mail highlight also serves as focus indicator for the conversation
view in general, and as such is cleared when loosing focus.

1 files changed, 111 insertions, 118 deletions

diff --git a/framework/qml/ConversationView.qml b/framework/qml/ConversationView.qml
index fb7a435e..1da1a9db 100644
--- a/framework/qml/ConversationView.qml
+++ b/framework/qml/ConversationView.qml
@@ -25,13 +25,10 @@ import org.kube.framework 1.0 as Kube
 import QtQml 2.2 as QtQml
 
 
-Rectangle {
+FocusScope {
     id: root
 
     property variant mail;
-    property int currentIndex: 0;
-    property bool scrollToEnd: true;
-    property variant currentMail: null;
     property bool hideTrash: true;
     property bool hideNonTrash: false;
 
@@ -39,6 +36,7 @@ Rectangle {
         filter: Kube.Messages.mailSelection
         onMessageReceived: {
             root.mail = message.mail
+            listView.forceLayout()
         }
     }
 
@@ -50,143 +48,138 @@ Rectangle {
         }
     }
 
-    onCurrentIndexChanged: {
-        markAsReadTimer.restart();
-    }
-    onMailChanged: {
-        scrollToEnd = true;
-        currentMail = null;
-    }
-
-    color: Kube.Colors.backgroundColor
-
-    Kube.ListView {
-        id: listView
-
+    Rectangle {
         anchors.fill: parent
+        color: Kube.Colors.backgroundColor
+
+        Kube.ListView {
+            id: listView
+            focus: true
 
-        ScrollBar.vertical: ScrollBar {}
-        verticalLayoutDirection: ListView.BottomToTop
-
-        function setCurrentIndex()
-        {
-            /**
-             * This will detect the index at the "scrollbar-position" (visibleArea.yPosition).
-             * This ensures that the first and last entry can become the currentIndex,
-             * but in the middle of the list the item in the middle is set as the current item.
-             */
-            var yPos = 0.5;
-            if (listView.visibleArea.yPosition < 0.4) {
-                yPos = 0.2 + (0.2 * listView.visibleArea.yPosition);
+            anchors {
+                top: parent.top
+                left: parent.left
+                right: parent.right
             }
-            if (listView.visibleArea.yPosition > 0.6) {
-                yPos = 0.6 + (0.2 * listView.visibleArea.yPosition)
+            //Shrink the listview if the content doesn't fill the full height, so the email appears on top instead of on the bottom.
+            height: Math.min(contentHeight, parent.height)
+
+            verticalLayoutDirection: ListView.BottomToTop
+
+            onActiveFocusChanged: {
+                if (activeFocus) {
+                    if (currentIndex < 0) {
+                        currentIndex = 0
+                    }
+                } else {
+                    currentIndex = -1
+                }
             }
-            var indexAtCenter = listView.indexAt(root.width / 2, contentY + root.height * yPos);
-            if (indexAtCenter >= 0) {
-                root.currentIndex = indexAtCenter;
-            } else {
-                root.currentIndex = count - 1;
+
+            //Position view so the last email begins on top of the view
+            onContentHeightChanged: {
+                //FIXME This doesn't work quite correctly when we have headers and footers in the listview and the mail loads to slowly and only one item to show.
+                listView.positionViewAtIndex(0, ListView.End)
+                //A futile attempt to fix the problem above
+                listView.returnToBounds()
             }
-        }
 
-        clip: true
+            Keys.onDownPressed: {
+                decrementCurrentIndex()
+                positionViewAtIndex(listView.currentIndex, ListView.End)
+            }
 
-        model: Kube.MailListModel {
-            mail: root.mail
-        }
+            Keys.onUpPressed: {
+                incrementCurrentIndex()
+                positionViewAtIndex(listView.currentIndex, ListView.End)
+            }
 
-        header: Item {
-            height: Kube.Units.gridUnit * 0.5
-            width: parent.width
+            onCurrentIndexChanged: {
+                markAsReadTimer.restart();
+            }
 
-        }
+            model: Kube.MailListModel {
+                mail: root.mail
+            }
 
-        footer: Item {
-            height: Kube.Units.gridUnit
-            width: parent.width
-        }
+            header: Item {
+                height: Kube.Units.gridUnit * 0.5
+                width: parent.width
+            }
 
-        delegate: mailDelegate
+            footer: Item {
+                height: Kube.Units.gridUnit
+                width: parent.width
+            }
 
-        //Setting the currentIndex results in further lags. So we don't do that either.
-        // currentIndex: root.currentIndex
+            delegate: FocusScope {
+                id: delegateRoot
 
-        //Optimize for view quality
-        pixelAligned: true
+                property var currentData: model
 
-        onContentYChanged: {
-            //We have to track our current mail manually
-            setCurrentIndex();
-        }
+                focus: false
+                activeFocusOnTab: false
 
-        //The cacheBuffer needs to be large enough to fit the whole thread.
-        //Otherwise the contentHeight will constantly increase and decrease,
-        //which will break lot's of things.
-        cacheBuffer: 100000
-
-        Timer {
-            id: markAsReadTimer
-            interval: 2000
-            running: false
-            repeat: false
-            onTriggered: {
-                if (!!root.currentMail) {
-                    Kube.Fabric.postMessage(Kube.Messages.markAsRead, {"mail": root.currentMail})
+                height: sheet.height + Kube.Units.gridUnit
+                width: parent.width
+                visible: !((root.hideTrash && model.trash) || (root.hideNonTrash && !model.trash))
+
+                MouseArea {
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    onEntered: delegateRoot.ListView.view.currentIndex = index
+                    onClicked: delegateRoot.ListView.view.currentIndex = index
                 }
-            }
-        }
 
-        //Intercept all scroll events,
-        //necessary due to the webengineview
-        Kube.MouseProxy {
-            anchors.fill: parent
-            target: listView.mouseProxy
-            forwardWheelEvents: true
-        }
-    }
-    Component {
-        id: mailDelegate
-
-        Item {
-            id: wrapper
-            property bool isCurrent: root.currentIndex === index;
-            onIsCurrentChanged: {
-                if (isCurrent) {
-                    root.currentMail = model.mail
+                MailViewer {
+                    id: sheet
+                    anchors.centerIn: parent
+                    width: parent.width - Kube.Units.gridUnit * 2
+
+                    message: model.mimeMessage
+                    subject: model.subject
+                    sender: model.sender
+                    senderName: model.senderName
+                    to: model.to
+                    cc: model.cc
+                    bcc: model.bcc
+                    date: model.date
+                    trash: model.trash
+                    draft: model.draft
+                    sent: model.sent
+                    incomplete: model.incomplete
+                    current: delegateRoot.ListView.isCurrentItem
                 }
             }
 
-            height: sheet.height + Kube.Units.gridUnit
-            width: parent.width
-            visible: !((root.hideTrash && model.trash) || (root.hideNonTrash && !model.trash))
 
-            MouseArea {
-                anchors.fill: parent
-                enabled: parent.enabled
-                hoverEnabled: true
-                onEntered: root.currentIndex = index
-                onClicked: root.currentIndex = index
+            //Optimize for view quality
+            pixelAligned: true
+
+
+            //The cacheBuffer needs to be large enough to fit the whole thread.
+            //Otherwise the contentHeight will constantly increase and decrease,
+            //which will break lot's of things.
+            cacheBuffer: 100000
+
+            Timer {
+                id: markAsReadTimer
+                interval: 2000
+                running: false
+                repeat: false
+                onTriggered: {
+                    if (listView.currentItem && !!listView.currentItem.currentData.mail) {
+                        Kube.Fabric.postMessage(Kube.Messages.markAsRead, {"mail": listView.currentItem.currentData.mail})
+                    }
+                }
             }
 
-            MailViewer {
-                id: sheet
-                anchors.centerIn: parent
-                width: parent.width - Kube.Units.gridUnit * 2
-
-                message: model.mimeMessage
-                subject: model.subject
-                sender: model.sender
-                senderName: model.senderName
-                to: model.to
-                cc: model.cc
-                bcc: model.bcc
-                date: model.date
-                trash: model.trash
-                draft: model.draft
-                sent: model.sent
-                incomplete: model.incomplete
-                current: isCurrent
+            //Intercept all scroll events,
+            //necessary due to the webengineview
+            Kube.MouseProxy {
+                anchors.fill: parent
+                target: listView.mouseProxy
+                forwardWheelEvents: true
             }
         }
     }