Merge lp:~renatofilho/address-book-app/focus-improvements into lp:address-book-app

[Renato Araujo Oliveira Filho]

Fixed focus feedback visual.
Use UbuntuListiView to make use of theme colors.
Allow to overwrite ContactViewPage leadingActions

[system-apps-ci-bot (system-apps-ci-bot)]

FAILED: Continuous integration, rev:675
https://jenkins.canonical.com/system-apps/job/lp-address-book-app-ci/56/
Executed test runs:
    FAILURE: https://jenkins.canonical.com/system-apps/job/build/2280/console
    FAILURE: https://jenkins.canonical.com/system-apps/job/build-0-fetch/2283/console

Click here to trigger a rebuild:
https://jenkins.canonical.com/system-apps/job/lp-address-book-app-ci/56/rebuild

review: Needs Fixing (continuous-integration)

[lp:~renatofilho/address-book-app/focus-improvements]

676. By Renato Araujo Oliveira Filho on 2017-02-21

Allow create IRC accounts.

677. By Renato Araujo Oliveira Filho on 2017-02-23

Allow user to add a provider on online accounts.

678. By Renato Araujo Oliveira Filho on 2017-02-24

Does not show provider as a individual field.

User should fill account alias with <user>@<server> to correct match on messaging app.

[system-apps-ci-bot (system-apps-ci-bot)]

FAILED: Continuous integration, rev:678
https://jenkins.canonical.com/system-apps/job/lp-address-book-app-ci/1/
Executed test runs:

Click here to trigger a rebuild:
https://jenkins.canonical.com/system-apps/job/lp-address-book-app-ci/1/rebuild

review: Needs Fixing (continuous-integration)

[Tiago Salem Herrmann (tiagosh)]

looks good to me.

review: Approve

Unmerged revisions

678. By Renato Araujo Oliveira Filho on 2017-02-24

Does not show provider as a individual field.

User should fill account alias with <user>@<server> to correct match on messaging app.

677. By Renato Araujo Oliveira Filho on 2017-02-23

Allow user to add a provider on online accounts.

676. By Renato Araujo Oliveira Filho on 2017-02-21

Allow create IRC accounts.

675. By Renato Araujo Oliveira Filho on 2017-01-22

Allow to overwrite ContactViewPage leadingActions

674. By Renato Araujo Oliveira Filho on 2017-01-19

Use UbuntuListiView to make use of theme colors.

673. By Renato Araujo Oliveira Filho on 2017-01-19

Fixed foocus feedback visual.

=== modified file 'src/imports/Ubuntu/AddressBook/ContactEditor/ContactDetailOnlineAccountsEditor.qml'
--- src/imports/Ubuntu/AddressBook/ContactEditor/ContactDetailOnlineAccountsEditor.qml	2015-10-26 13:18:11 +0000
+++ src/imports/Ubuntu/AddressBook/ContactEditor/ContactDetailOnlineAccountsEditor.qml	2017-02-24 13:55:25 +0000
@@ -19,12 +19,16 @@
 
 import Ubuntu.Contacts 0.1
 
-ContactDetailGroupWithTypeEditor {
-    title: i18n.dtr("address-book-app", "IM")
+ContactDetailGroupWithTypeEditor {       
+    title: i18n.dtr("address-book-app", "Social")
+    detailQmlTypeName: "OnlineAccount"
     detailType: ContactDetail.OnlineAccount
-    detailQmlTypeName: "OnlineAccount"
-    fields: [ OnlineAccount.AccountUri ]
-    placeholderTexts: [ i18n.dtr("address-book-app", "Enter a social alias") ]
+    fields: [
+        OnlineAccount.AccountUri
+    ]
+    placeholderTexts: [
+        i18n.dtr("address-book-app", "Enter an alias"),
+    ]
     typeModel: ContactDetailOnlineAccountTypeModel { }
     inputMethodHints: Qt.ImhEmailCharactersOnly
 }

=== modified file 'src/imports/Ubuntu/AddressBook/ContactEditor/ContactEditorPage.qml'
--- src/imports/Ubuntu/AddressBook/ContactEditor/ContactEditorPage.qml	2016-09-23 12:35:41 +0000
+++ src/imports/Ubuntu/AddressBook/ContactEditor/ContactEditorPage.qml	2017-02-24 13:55:25 +0000
@@ -152,7 +152,10 @@
         switch (contactEditor.initialFocusSection)
         {
         case "phones":
-            contactEditor.focusToLastPhoneField()
+            contactEditor.focusToLastField(phonesEditor)
+            break;
+        case "ims":
+            contactEditor.focusToLastField(accountsEditor)
             break;
         case "name":
         default:
@@ -161,10 +164,13 @@
         }
     }
 
-    function focusToLastPhoneField()
+    function focusToLastField(editor)
     {
-        var lastPhoneField = phonesEditor.detailDelegates[phonesEditor.detailDelegates.length - 2].item
-        lastPhoneField.forceActiveFocus()
+        var lastField = editor.detailDelegates[editor.detailDelegates.length - 2].item
+        if (lastField.repeater.count > 0)
+            lastField.repeater.itemAt(0).forceActiveFocus()
+        else
+            lastField.forceActiveFocus()
     }
 
     function focusToFirstEntry(field)
@@ -498,6 +504,14 @@
         }
     }
 
+    onEnabledChanged: {
+        if (!active || !enabled) {
+            return
+        }
+
+        focusTimer.restart()
+    }
+
     onActiveChanged: {
         if (!active || !enabled) {
             return

=== modified file 'src/imports/Ubuntu/AddressBook/ContactView/ContactDetailOnlineAccountsView.qml'
--- src/imports/Ubuntu/AddressBook/ContactView/ContactDetailOnlineAccountsView.qml	2015-10-26 13:18:11 +0000
+++ src/imports/Ubuntu/AddressBook/ContactView/ContactDetailOnlineAccountsView.qml	2017-02-24 13:55:25 +0000
@@ -22,7 +22,9 @@
 
 ContactDetailGroupWithTypeView {
     detailType: QtContacts.ContactDetail.OnlineAccount
-    fields: [ QtContacts.OnlineAccount.AccountUri ]
+    fields: [
+        QtContacts.OnlineAccount.AccountUri
+    ]
     title: i18n.dtr("address-book-app", "Social")
     typeModel: ContactDetailOnlineAccountTypeModel { }
     defaultAction: Action {

=== modified file 'src/imports/Ubuntu/AddressBook/ContactView/ContactViewPage.qml'
--- src/imports/Ubuntu/AddressBook/ContactView/ContactViewPage.qml	2016-09-23 12:35:41 +0000
+++ src/imports/Ubuntu/AddressBook/ContactView/ContactViewPage.qml	2017-02-24 13:55:25 +0000
@@ -30,6 +30,7 @@
     property alias model: contactFetch.model
     property alias editable: contactDetailAvatar.editable
     property alias headerActions: trailingBar.actions
+    property list<Action> leadingActions
 
     signal contactFetched(QtObject contact)
     signal contactRemoved()
@@ -50,6 +51,8 @@
         trailingActionBar {
             id: trailingBar
         }
+
+        leadingActionBar.actions: root.leadingActions
     }
 
     Connections {

=== modified file 'src/imports/Ubuntu/Contacts/ContactDelegate.qml'
--- src/imports/Ubuntu/Contacts/ContactDelegate.qml	2016-02-05 16:07:45 +0000
+++ src/imports/Ubuntu/Contacts/ContactDelegate.qml	2017-02-24 13:55:25 +0000
@@ -43,6 +43,9 @@
         }
     }
 
+    Keys.onEnterPressed: root.clicked(index, contact)
+    Keys.onReturnPressed: root.clicked(index, contact)
+
     Item {
         id: delegate
 

=== modified file 'src/imports/Ubuntu/Contacts/ContactDetailOnlineAccountTypeModel.qml'
--- src/imports/Ubuntu/Contacts/ContactDetailOnlineAccountTypeModel.qml	2015-10-26 13:18:11 +0000
+++ src/imports/Ubuntu/Contacts/ContactDetailOnlineAccountTypeModel.qml	2017-02-24 13:55:25 +0000
@@ -29,6 +29,8 @@
             return 0;
         case 2:
             return 1;
+        case 3:
+            return 6;
         case 4:
             return 2;
         case 5:
@@ -59,14 +61,14 @@
     Component.onCompleted: {
         //append({"value": 0, "label": i18n.dtr("address-book-app", "Other"), icon: "artwork:/protocol-other.svg"})
         /*0*/ // TRANSLATORS: This refers to the AIM chat network http://en.wikipedia.org/wiki/AOL_Instant_Messenger
-                append({"value": 1, "label": i18n.dtr("address-book-app", "Aim"), "icon": "artwork:/protocol-aim.svg"})
-        /*1*/   append({"value": 2, "label": i18n.dtr("address-book-app", "ICQ"), "icon": "artwork:/protocol-icq.svg"})
-        //append({"value": 3, "label": i18n.dtr("address-book-app", "IRC"), icon: "artwork:/protocol-irc.svg"})
+        /*0*/   append({"value": 1, "label": i18n.dtr("address-book-app", "Aim"), "icon": "artwork:/protocol-aim.svg"})
+        /*1*/   append({"value": 2, "label": i18n.dtr("address-book-app", "ICQ"), "icon": "artwork:/protocol-icq.svg"})       
         /*2*/   append({"value": 4, "label": i18n.dtr("address-book-app", "Jabber"), "icon": "artwork:/protocol-jabber.svg"})
         /*3*/   append({"value": 5, "label": i18n.dtr("address-book-app", "MSN"), "icon": "artwork:/protocol-msn.svg"})
         // append({"value": 6, "label": i18n.dtr("address-book-app", "QQ"), icon: "artwork:/protocol-qq.svg"})
         /*4*/   append({"value": 7, "label": i18n.dtr("address-book-app", "Skype"), "icon": "artwork:/protocol-skype.svg"})
         /*5*/   append({"value": 8, "label": i18n.dtr("address-book-app", "Yahoo"), "icon": "artwork:/protocol-yahoo.svg"})
+        /*6*/   append({"value": 3, "label": i18n.dtr("address-book-app", "IRC"), "icon": "artwork:/protocol-irc.svg"})
         loaded()
     }
 }

=== modified file 'src/imports/Ubuntu/Contacts/ContactListButtonDelegate.qml'
--- src/imports/Ubuntu/Contacts/ContactListButtonDelegate.qml	2016-09-23 13:47:49 +0000
+++ src/imports/Ubuntu/Contacts/ContactListButtonDelegate.qml	2017-02-24 13:55:25 +0000
@@ -17,9 +17,10 @@
 import QtQuick 2.4
 import Ubuntu.Components 1.3
 
-Item {
+FocusScope {
    id: root
 
+   readonly property bool _allowFocus: true
    property string iconSource
    property alias labelText: name.text
    property bool expandIcon: false
@@ -31,13 +32,21 @@
        right: parent.right
    }
    height: visible ? units.gu(8) : 0
+   activeFocusOnTab: true
+
+   Keys.onEnterPressed: clicked()
+   Keys.onReturnPressed: clicked()
 
    Rectangle {
        anchors.fill: parent
-       color: Theme.palette.selected.background
-       opacity: addNewContactButtonArea.pressed ?  1.0 : 0.0
+       border {
+           color: UbuntuColors.orange
+           width: parent.activeFocus ? 1 : 0
+       }
+       color: addNewContactButtonArea.pressed ? Theme.palette.selected.background  : "transparent"
    }
 
+
    UbuntuShape {
        id: uShape
 
@@ -77,6 +86,7 @@
        }
        elide: Text.ElideRight
        visible: root.showContents
+       color: parent.activeFocus ? UbuntuColors.blue : UbuntuColors.darkGrey
    }
 
    MouseArea {

=== modified file 'src/imports/Ubuntu/Contacts/ContactListView.qml'
--- src/imports/Ubuntu/Contacts/ContactListView.qml	2016-12-12 18:54:08 +0000
+++ src/imports/Ubuntu/Contacts/ContactListView.qml	2017-02-24 13:55:25 +0000
@@ -444,129 +444,155 @@
             onTriggered: view.positionViewAtBeginning()
         }
 
-        header: Column {
+        header: FocusScope {
             anchors {
                 left: parent.left
                 right: parent.right
             }
 
-            // top margin
-            Item {
-                anchors {
-                    left: parent.left
-                    right: parent.right
-                }
-                height: units.gu(0.5)
-            }
-
-            Binding {
-                target: view
-                property: 'currentIndex'
-                value: -1
-                when: root.showNewContact
-            }
-
-            // AddNewButton
-            ContactListButtonDelegate {
-                anchors {
-                    left: parent.left
-                    right: parent.right
-                    margins: units.gu(1)
-                }
-                objectName: "addNewButton"
-
-                iconSource: "image://theme/add"
-                // TRANSLATORS: this refers to a new contact
-                labelText: i18n.dtr("address-book-app", "+ Create New")
-                onClicked: root.addNewContactClicked()
-                visible: root.showAddNewButton
-            }
-
-            ContactDelegate {
-                property var contact: Contact {
-                    Name {
-                        firstName: i18n.tr("New contact")
-                    }
-                    Avatar {
-                        imageUrl: "image://theme/contact"
-                    }
-                }
-                selected: pageStack.hasKeyboard
-                visible: root.showNewContact
-                height: root.showNewContact ? defaultHeight : 0
-                onHeightChanged: {
-                    if (visible)
-                        view.positionViewAtBeginning()
-                }
-                Behavior on height {UbuntuNumberAnimation {}}
-            }
+            height: childrenRect.height
 
             Column {
-                id: importFromButtons
-                objectName: "importFromButtons"
-
-                readonly property bool isSearching: (root.filterTerm && root.filterTerm !== "")
-
                 anchors {
                     left: parent.left
                     right: parent.right
-                    margins: units.gu(1)
-                }
-                height: visible ? childrenRect.height : 0
-
-                visible: root.showImportOptions &&
-                         !indicator.visible &&
-                         (root.count === 0) &&
-                         !view.favouritesIsSelected &&
-                         !isSearching
-
-                // avoid show the button while the list still loading contacts
-                Behavior on visible {
-                    SequentialAnimation {
-                         PauseAnimation {
-                             duration: !importFromButtons.visible ? 500 : 0
-                         }
-                         PropertyAction {
-                             target: importFromButtons
-                             property: "visible"
-                         }
-                    }
-                }
-
-                // Import from google
-                ContactListButtonDelegate {
-                    id: importFromGoogleButton
-                    objectName: "%1.importFromOnlineAccountButton".arg(root.objectName)
-
-                    visible: (onlineAccountHelper.status === Loader.Ready)
-                    expandIcon: true
-                    iconSource: "image://theme/google"
-                    labelText: i18n.dtr("address-book-app", "Import contacts from Google")
-                    onClicked: root.createOnlineAccount(false)
-                }
-
-                // Import from sim card
-                ContactListButtonDelegate {
-                    id: importFromSimCard
-                    objectName: "%1.importFromSimCardButton".arg(root.objectName)
-
-                    expandIcon: true
-                    iconSource: "image://theme/import"
-                    labelText: i18n.dtr("address-book-app", "Import contacts from SIM card")
-                    // Does not show the button if the list is not in a pageStack
-                    visible: (typeof(pageStack) !== "undefined") &&
-                             ((simList.sims.length > 0) && (simList.present.length > 0))
-                    onClicked: {
-                        if (pageStack.addPageToNextColumn)
-                            pageStack.addPageToNextColumn(pageStack.primaryPage, Qt.resolvedUrl("SIMCardImportPage.qml"),
-                                                      {"objectName": "simCardImportPage",
-                                                       "targetModel": view.listModel,
-                                                       "sims": simList.sims})
-                        else
-                            pageStack.push(Qt.resolvedUrl("SIMCardImportPage.qml"),
-                                           {"objectName": "simCardImportPage",
-                                            "targetModel": view.listModel,
-                                            "sims": simList.sims})
+                }
+
+                height: childrenRect.height
+                onActiveFocusChanged: {
+                    if (activeFocus) {
+                        for(var i = 0; i < children.length; i++) {
+                            if (children[i].enabled) {
+                                children[i].forceActiveFocus()
+                                break
+                            }
+                        }
+                    }
+                }
+
+                // top margin
+                Item {
+                    objectName: "Marging"
+                    anchors {
+                        left: parent.left
+                        right: parent.right
+                    }
+                    height: units.gu(0.5)
+                    enabled: false
+                }
+
+                Binding {
+                    target: view
+                    property: 'currentIndex'
+                    value: -1
+                    when: root.showNewContact
+                }
+
+                // AddNewButton
+                ContactListButtonDelegate {
+                    anchors {
+                        left: parent.left
+                        right: parent.right
+                        margins: units.gu(1)
+                    }
+
+                    objectName: "addNewButton"
+
+                    iconSource: "image://theme/add"
+                    // TRANSLATORS: this refers to a new contact
+                    labelText: i18n.dtr("address-book-app", "+ Create New")
+                    onClicked: root.addNewContactClicked()
+                    visible: root.showAddNewButton
+                    focus: visible
+                }
+
+                ContactDelegate {
+                    property var contact: Contact {
+                        Name {
+                            firstName: i18n.tr("New contact")
+                        }
+                        Avatar {
+                            imageUrl: "image://theme/contact"
+                        }
+                    }
+                    activeFocusOnTab: false
+                    selected: pageStack.hasKeyboard
+                    visible: root.showNewContact
+                    height: root.showNewContact ? defaultHeight : 0
+                    onHeightChanged: {
+                        if (visible)
+                            view.positionViewAtBeginning()
+                    }
+                    Behavior on height {UbuntuNumberAnimation {}}
+                }
+
+                Column {
+                    id: importFromButtons
+                    objectName: "importFromButtons"
+
+                    readonly property bool isSearching: (root.filterTerm && root.filterTerm !== "")
+
+                    anchors {
+                        left: parent.left
+                        right: parent.right
+                        margins: units.gu(1)
+                    }
+                    height: visible ? childrenRect.height : 0
+
+                    visible: root.showImportOptions &&
+                             !indicator.visible &&
+                             (root.count === 0) &&
+                             !view.favouritesIsSelected &&
+                             !isSearching
+
+                    // avoid show the button while the list still loading contacts
+                    Behavior on visible {
+                        SequentialAnimation {
+                             PauseAnimation {
+                                 duration: !importFromButtons.visible ? 500 : 0
+                             }
+                             PropertyAction {
+                                 target: importFromButtons
+                                 property: "visible"
+                             }
+                        }
+                    }
+
+                    // Import from google
+                    ContactListButtonDelegate {
+                        id: importFromGoogleButton
+                        objectName: "%1.importFromOnlineAccountButton".arg(root.objectName)
+
+                        visible: (onlineAccountHelper.status === Loader.Ready)
+                        expandIcon: true
+                        iconSource: "image://theme/google"
+                        labelText: i18n.dtr("address-book-app", "Import contacts from Google")
+                        onClicked: root.createOnlineAccount(false)
+                    }
+
+                    // Import from sim card
+                    ContactListButtonDelegate {
+                        id: importFromSimCard
+                        objectName: "%1.importFromSimCardButton".arg(root.objectName)
+
+                        expandIcon: true
+                        iconSource: "image://theme/import"
+                        labelText: i18n.dtr("address-book-app", "Import contacts from SIM card")
+                        // Does not show the button if the list is not in a pageStack
+                        visible: (typeof(pageStack) !== "undefined") &&
+                                 ((simList.sims.length > 0) && (simList.present.length > 0))
+                        onClicked: {
+                            if (pageStack.addPageToNextColumn)
+                                pageStack.addPageToNextColumn(pageStack.primaryPage, Qt.resolvedUrl("SIMCardImportPage.qml"),
+                                                          {"objectName": "simCardImportPage",
+                                                           "targetModel": view.listModel,
+                                                           "sims": simList.sims})
+                            else
+                                pageStack.push(Qt.resolvedUrl("SIMCardImportPage.qml"),
+                                               {"objectName": "simCardImportPage",
+                                                "targetModel": view.listModel,
+                                                "sims": simList.sims})
+                        }
                     }
                 }
             }
@@ -696,7 +722,8 @@
         //WORKAROUND: SDK does not allow us to disable focus for items due bug: #1514822
         //because of that we need this
         if (view.currentIndex == 0) {
-            pageStack._nextItemInFocusChain(view, false)
+            view.currentIndex = -1
+            view.headerItem.forceActiveFocus()
         } else {
             view.currentIndex -= 1
         }

=== modified file 'src/imports/Ubuntu/Contacts/MultipleSelectionListView.qml'
--- src/imports/Ubuntu/Contacts/MultipleSelectionListView.qml	2015-11-10 19:51:19 +0000
+++ src/imports/Ubuntu/Contacts/MultipleSelectionListView.qml	2017-02-24 13:55:25 +0000
@@ -55,7 +55,7 @@
     \endqml
 */
 
-ListView {
+UbuntuListView {
     id: listView
 
     /*!