Merge lp:~mzanetti/reminders-app/improve-edit-focus into lp:reminders-app

[Michael Zanetti]

Improve focus handling when entering EditNoteView

[Riccardo Padovani (rpadovani)]

Lgtm, thanks

review: Approve

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

PASSED: Continuous integration, rev:486
http://91.189.93.70:8080/job/reminders-app-ci/781/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/reminders-app-vivid-amd64-ci/203

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/reminders-app-ci/781/rebuild

review: Approve (continuous-integration)

=== modified file 'src/app/qml/components/Header.qml'
--- src/app/qml/components/Header.qml	2015-07-25 01:52:22 +0000
+++ src/app/qml/components/Header.qml	2015-09-10 21:53:52 +0000
@@ -6,10 +6,10 @@
 import Evernote 0.1
 
 
-Column {
+FocusScope {
     id: root
     width: parent.width
-    height: childrenRect.height
+    height: column.height
 
     property var note: null
 
@@ -19,16 +19,16 @@
 
     signal editReminders();
     signal editTags();
-
     Notebooks {
         id: notebooks
     }
-
     Component.onCompleted: setNotebookTimer.start();
     onNoteChanged: setNotebookTimer.start();
     // in case note is set during creation, the animation breaks if we set selectedIndex. Wait for a eventloop pass
     Timer { id: setNotebookTimer; interval: 1; repeat: false; onTriggered: updateNotebook(); }
 
+    onFocusChanged: if (focus) titleTextField.forceActiveFocus();
+
     function updateNotebook() {
         if (!root.note) return;
         for (var i = 0; i < notebooks.count; i++) {
@@ -39,103 +39,109 @@
             }
         }
     }
-
-    TextField {
-        id: titleTextField
-        height: units.gu(6)
-        width: parent.width
-        text: root.note ? root.note.title : ""
-        placeholderText: i18n.tr("Untitled")
-        font.pixelSize: units.gu(4)
-        visible: root.editingEnabled
-        style: TextFieldStyle {
-            background: null
-        }
-    }
-
-    Label {
-        height: units.gu(6)
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.margins: units.gu(1)
-        text: root.note ? root.note.title : ""
-        visible: !root.editingEnabled
-        font.pixelSize: units.gu(4)
-        verticalAlignment: Text.AlignVCenter
-    }
-
-    ThinDivider {}
-
-    ItemSelector {
-        id: notebookSelector
-        width: parent.width
-        model: notebooks
-
-        onDelegateClicked: {
-            var newNotebookGuid = model.notebook(index).guid;
-            if (newNotebookGuid != root.note.notebookGuid) {
-                root.note.notebookGuid = newNotebookGuid;
-                NotesStore.saveNote(root.note.guid)
-            }
-        }
-
-        delegate: OptionSelectorDelegate {
-            Rectangle {
-                anchors.fill: parent
-                color: "white"
-
-                RowLayout {
-                    anchors {
-                        fill: parent
-                        leftMargin: units.gu(1)
-                        rightMargin: units.gu(1)
-                        topMargin: units.gu(0.5)
-                        bottomMargin: units.gu(0.5)
-                    }
-
-                    Item {
-                        height: parent.height
-                        width: height
-                        Icon {
-                            anchors.fill: parent
-                            anchors.margins: units.gu(0.5)
-                            name: "notebook"
+    Column {
+        id: column
+        width: parent.width
+        height: childrenRect.height
+
+        TextField {
+            id: titleTextField
+            height: units.gu(6)
+            width: parent.width
+            text: root.note ? root.note.title : ""
+            placeholderText: i18n.tr("Untitled")
+            font.pixelSize: units.gu(4)
+            visible: root.editingEnabled
+            style: TextFieldStyle {
+                background: null
+            }
+        }
+
+        Label {
+            height: units.gu(6)
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.margins: units.gu(1)
+            text: root.note ? root.note.title : ""
+            visible: !root.editingEnabled
+            font.pixelSize: units.gu(4)
+            verticalAlignment: Text.AlignVCenter
+        }
+
+        ThinDivider {}
+
+        ItemSelector {
+            id: notebookSelector
+            width: parent.width
+            model: notebooks
+
+            onDelegateClicked: {
+                var newNotebookGuid = model.notebook(index).guid;
+                if (newNotebookGuid != root.note.notebookGuid) {
+                    root.note.notebookGuid = newNotebookGuid;
+                    NotesStore.saveNote(root.note.guid)
+                }
+            }
+
+            delegate: OptionSelectorDelegate {
+                Rectangle {
+                    anchors.fill: parent
+                    color: "white"
+
+                    RowLayout {
+                        anchors {
+                            fill: parent
+                            leftMargin: units.gu(1)
+                            rightMargin: units.gu(1)
+                            topMargin: units.gu(0.5)
+                            bottomMargin: units.gu(0.5)
+                        }
+
+                        Item {
+                            height: parent.height
+                            width: height
+                            Icon {
+                                anchors.fill: parent
+                                anchors.margins: units.gu(0.5)
+                                name: "notebook"
+                                color: preferences.colorForNotebook(model.guid)
+                            }
+                        }
+
+                        Label {
+                            text: model.name
+                            Layout.fillWidth: true
                             color: preferences.colorForNotebook(model.guid)
                         }
-                    }
-
-                    Label {
-                        text: model.name
-                        Layout.fillWidth: true
-                        color: preferences.colorForNotebook(model.guid)
-                    }
-                    RtfButton {
-                        iconName: root.note && root.note.reminder ? "reminder" : "reminder-new"
-                        height: parent.height
-                        width: height
-                        iconColor: root.note && note.reminder ? UbuntuColors.blue : Qt.rgba(0.0, 0.0, 0.0, 0.0)
-                        visible: index == notebookSelector.selectedIndex
-                        onClicked: {
-                            Qt.inputMethod.hide();
-                            root.editReminders();
+                        RtfButton {
+                            iconName: root.note && root.note.reminder ? "reminder" : "reminder-new"
+                            height: parent.height
+                            width: height
+                            iconColor: root.note && note.reminder ? UbuntuColors.blue : Qt.rgba(0.0, 0.0, 0.0, 0.0)
+                            visible: index == notebookSelector.selectedIndex
+                            onClicked: {
+                                Qt.inputMethod.hide();
+                                root.editReminders();
+                            }
                         }
-                    }
-                    RtfButton {
-                        id: tagsButton
-                        iconSource: "../images/tags.svg"
-                        height: parent.height
-                        width: height
-                        visible: index == notebookSelector.selectedIndex
-                        onClicked: {
-                            Qt.inputMethod.hide();
-                            root.editTags();
+                        RtfButton {
+                            id: tagsButton
+                            iconSource: "../images/tags.svg"
+                            height: parent.height
+                            width: height
+                            visible: index == notebookSelector.selectedIndex
+                            onClicked: {
+                                Qt.inputMethod.hide();
+                                root.editTags();
+                            }
                         }
                     }
                 }
             }
         }
+
+        ThinDivider {}
     }
-
-    ThinDivider {}
 }
 
+

=== modified file 'src/app/qml/reminders.qml'
--- src/app/qml/reminders.qml	2015-09-08 18:10:48 +0000
+++ src/app/qml/reminders.qml	2015-09-10 21:53:52 +0000
@@ -480,12 +480,13 @@
             var note = NotesStore.note(guid);
             print("note created:", note.guid);
             if (root.narrowMode) {
-                var page = pagestack.push(Qt.resolvedUrl("ui/EditNotePage.qml"), {note: note});
+                var page = pagestack.push(Qt.resolvedUrl("ui/EditNotePage.qml"), {note: note, newNote: true});
                 page.exitEditMode.connect(function() {Qt.inputMethod.hide(); pagestack.pop();});
             } else {
                 notesPage.selectedNote = note;
                 var view = sideViewLoader.embed(Qt.resolvedUrl("ui/EditNoteView.qml"));
                 view.note = note;
+                view.newNote = true;
                 view.exitEditMode.connect(function(note) {root.displayNote(note)});
             }
         }

=== modified file 'src/app/qml/ui/EditNotePage.qml'
--- src/app/qml/ui/EditNotePage.qml	2015-07-25 01:52:22 +0000
+++ src/app/qml/ui/EditNotePage.qml	2015-09-10 21:53:52 +0000
@@ -25,6 +25,8 @@
 Page {
     id: root
     property alias note: editNoteView.note
+    property alias newNote: editNoteView.newNote
+    property alias isBottomEdge: editNoteView.isBottomEdge
 
     signal exitEditMode(var note)
 

=== modified file 'src/app/qml/ui/EditNoteView.qml'
--- src/app/qml/ui/EditNoteView.qml	2015-07-25 01:52:22 +0000
+++ src/app/qml/ui/EditNoteView.qml	2015-09-10 21:53:52 +0000
@@ -30,6 +30,8 @@
 Item {
     id: root
     property var note
+    property bool newNote: false
+    property bool isBottomEdge: false
 
     onNoteChanged: {
         note.renderWidth = noteTextArea.width - noteTextArea.textMargin * 2
@@ -51,6 +53,28 @@
         }
     }
 
+    Component.onCompleted: {
+        init();
+    }
+
+    onNewNoteChanged: {
+        init();
+    }
+
+    function init() {
+        if (root.isBottomEdge) {
+            return;
+        }
+
+        if (root.newNote) {
+            header.title = "";
+            header.forceActiveFocus();
+        } else {
+            noteTextArea.forceActiveFocus();
+        }
+    }
+
+
     QtObject {
         id: priv
         property int insertPosition
@@ -134,6 +158,7 @@
                      Header {
                         id: header
                         note: root.note
+                        focus: root.newNote
 
                         onEditReminders: {
                             pageStack.push(Qt.resolvedUrl("SetReminderPage.qml"), { note: root.note});

=== modified file 'src/app/qml/ui/NotesPage.qml'
--- src/app/qml/ui/NotesPage.qml	2015-07-25 01:52:22 +0000
+++ src/app/qml/ui/NotesPage.qml	2015-09-10 21:53:52 +0000
@@ -42,6 +42,7 @@
     bottomEdgeLabelVisible: narrowMode && (!notes.filterNotebookGuid || !notes.loading)
     bottomEdgeTitle: i18n.tr("Add note")
     bottomEdgePageComponent: EditNotePage {
+        isBottomEdge: true
         MouseArea {
             anchors.fill: parent
         }