Merge lp:~renatofilho/quick-memo/fix-item-focus into lp:quick-memo/trunk

[Renato Araujo Oliveira Filho]

Fixed note items navigation and focus.

OBS: The keyboard "Enter" label still broken due a bug on ubuntu-keyboard, you will need this MR to get this fully working: https://code.launchpad.net/~renatofilho/ubuntu-keyboard/fix-qml-inputMethod-extensions/+merge/245775

[lp:~renatofilho/quick-memo/fix-item-focus]

57. By Renato Araujo Oliveira Filho on 2015-01-07

Fixed note itens navigation and focus.

[Stefano Verzegnassi (verzegnassi-stefano)]

Hi Renato,

Thanks for reporting this issue and submitting a patch.
During these days I'm studying for some exams, so I don't have much time to spend with source code.

I'm working on the "reboot" branch for Quick Memo, using a new database (in order to solve some issue with U1DB) and refactoring some parts of code that don't look so good ("Details" page is one of those "parts").

I just took a look at the diff and the code looks good to me. I just need some time to make a deeper review of the code and integrate it in the "reboot" branch (which, I hope, should be "almost" ready to be receive MPs during the next weekend).

Thank you again! :)
Stefano

[Bill Filler (bfiller)]

I tested this and it works well with ubuntu-keyboard in silo 19

review: Approve

[Bill Filler (bfiller)]

Stefano,
Wondering if you had plans to release a new version before the reboot branch? If so would be great to get this merged and released prior to the reboot branch as these changes really help usability alot. I use the app all the time (it's awesome!) and these make it even better.

[Stefano Verzegnassi (verzegnassi-stefano)]

Bill,
Sorry for the late replay, I didn't get any notification by email about your comment.
I had no plan about an "intermediate" release, but I can definitely do it.
Just need some time to fix some issue with in-app notifications (hopefully it should be done during this week).

Renato,
Thank you very much for this contribution! It's really a great improvement! :D

review: Approve

=== modified file 'app/components/ListManager.qml'
--- app/components/ListManager.qml	2014-11-03 00:21:23 +0000
+++ app/components/ListManager.qml	2015-01-07 18:28:07 +0000
@@ -29,8 +29,8 @@
     property Flickable flickable
     property alias model: repeater.model
     property alias delegate: repeater.delegate
-
     property alias footer: footerLoader.sourceComponent
+    readonly property bool focusOnLastItem: (model.focusedIndex === -1) || (model.focusedIndex === (model.count - 1))
 
     signal listChanged()
 
@@ -44,6 +44,8 @@
 
         model: ListModel {
             id: dataModel
+
+            property int focusedIndex: -1
         }
 
         delegate: delegate
@@ -99,7 +101,7 @@
             }
 
             onClicked: {
-                rootItem.model.append({"checked": false, "text": ""})
+                rootItem.addItem({"checked": false, "text": ""})
                 // Here we don't send listChanged signal, since it is an empty item that should not be saved
             }
         }
@@ -120,6 +122,64 @@
         return list
     }
 
+    function addItem(args) {
+        rootItem.model.append(args)
+        var newItem = repeater.itemAt(repeater.count - 1)
+        newItem.textArea.forceActiveFocus()
+        autoScrollAnimation.makeMeVisible(newItem)
+    }
+
+    SequentialAnimation {
+        id: autoScrollAnimation
+
+        property var targetItem: null
+        alwaysRunToEnd: true
+
+        // wait item be moved to correct place
+        PauseAnimation {
+            duration: 100
+        }
+        // scroll to new item position
+        ScriptAction {
+            script: {
+                if (autoScrollAnimation.targetItem) {
+                    autoScrollAnimation.makeMeVisibleImpl(autoScrollAnimation.targetItem)
+                    autoScrollAnimation.targetItem = null
+                }
+            }
+        }
+
+        function makeMeVisible(newItem) {
+            autoScrollAnimation.targetItem = newItem
+            autoScrollAnimation.restart()
+        }
+
+        function makeMeVisibleImpl(newItem) {
+            if (!newItem) {
+                return
+            }
+
+            var positionY = rootItem.y + repeater.y + newItem.y
+
+            // check if the item is already visible
+            var bottomY = flickable.contentY + flickable.height
+            var itemBottom = positionY + (newItem.height *3) // margin
+            if (positionY >= flickable.contentY && itemBottom <= bottomY) {
+                return;
+            }
+
+            // if it is not, try to scroll and make it visible
+            var targetY = itemBottom - flickable.height
+            if (targetY >= 0 && positionY) {
+                flickable.contentY = targetY
+            } else if (positionY < flickable.contentY) {
+                // if it is hidden at the top, also show it
+                flickable.contentY = positionY
+            }
+            flickable.returnToBounds()
+        }
+    }
+
 
     // *** DELEGATE ***
     Component {
@@ -197,17 +257,14 @@
 
                 NoteTextField {
                     id: textArea
+
                     width: parent.width - (checkBox.width + (parent.spacing * 2))
                     anchors.verticalCenter: parent.verticalCenter
 
                     font.strikeout: checkBox.checked
 
-                    __inverseMouseArea.parent: item
-                    onFocusLost: {
-                        if (rootItem.flickable)
-                            rootItem.flickable.forceActiveFocus()
-                        else
-                            rootItem.forceActiveFocus()
+                    onFocusReceived: {
+                       rootItem.model.focusedIndex = model.index
                     }
 
                     text: model.text
@@ -222,23 +279,25 @@
                     }
 
                     //hasClearButton: false
-                    focus: false
+                    focus: true
 
                     // Ubuntu Keyboard
+                    // TODO: Disable Enter key if model.text is empty.
                     InputMethod.extensions: {
-                        "enterKeyText": (model.index < (rootItem.model.count - 1)) ? i18n.tr("Next") : i18n.tr("Add")
-                        // TODO: Disable Enter key if model.text is empty.
+                        "enterKeyText": rootItem.focusOnLastItem ? i18n.tr("Add") : i18n.tr("Next")
                     }
+
                     Keys.onReturnPressed: {
-                        if ((model.index === (rootItem.model.count - 1)) && model.text !== "") {
+                        if (rootItem.focusOnLastItem && (model.text !== "")) {
                             // Create a new item.
-                            rootItem.model.append({"checked": false, "text": ""})
+                            rootItem.addItem({"checked": false, "text": ""})
+                        } else if (!rootItem.focusOnLastItem) {
+                            var nextItem = repeater.itemAt(model.index + 1)
+                            if (nextItem) {
+                                nextItem.textArea.forceActiveFocus()
+                                autoScrollAnimation.makeMeVisible(nextItem)
+                            }
                         }
-                        repeater.itemAt(model.index + 1).textArea.forceActiveFocus()
-
-                        // Focused textArea should be always visible. Move the Flickable as needed.
-                        flickable.contentY = rootItem.y + repeater.itemAt(model.index + 1).y
-                        flickable.returnToBounds()
                     }
                 }
 

=== modified file 'app/components/NoteTextField.qml'
--- app/components/NoteTextField.qml	2014-10-04 01:24:43 +0000
+++ app/components/NoteTextField.qml	2015-01-07 18:28:07 +0000
@@ -35,21 +35,19 @@
     // Prevent data loss
     inputMethodHints: Qt.ImhNoPredictiveText
 
-    property alias __inverseMouseArea: inverseMouseArea
-    signal focusLost()   
+    signal focusLost()
+    signal focusReceived()
+
+    onActiveFocusChanged: {
+        if (activeFocus) {
+            focusReceived()
+        } else {
+            focusLost()
+        }
+    }
 
     style: TextFieldStyle {
         frameSpacing: 0
         background: Item { anchors.fill: parent }
     }
-
-    InverseMouseArea {
-        id: inverseMouseArea
-        enabled: textArea.activeFocus
-        anchors.fill: parent
-        onClicked: {
-            textArea.focusLost()
-            mouse.accepted = false
-        }
-    }
 }