feat(ManageAccounts): use a ListItemSelector instead of a ComboBox to show accounts

resources.qrc

@@ -227,6 +227,8 @@
     <file>ui/modules/Common/Form/Fields/TextField.qml</file>
     <file>ui/modules/Common/Form/ListForm.js</file>
     <file>ui/modules/Common/Form/ListForm.qml</file>
+    <file>ui/modules/Common/Form/ListItemSelector.js</file>
+    <file>ui/modules/Common/Form/ListItemSelector.qml</file>
     <file>ui/modules/Common/Form/Placements/FormEmptyLine.qml</file>
     <file>ui/modules/Common/Form/Placements/FormGroup.qml</file>
     <file>ui/modules/Common/Form/Placements/FormHGroup.qml</file>

ui/modules/Common/Form/ListItemSelector.js

@@ -0,0 +1,18 @@
+// =============================================================================
+// `ListItemSelector.qml` Logic.
+// =============================================================================
+
+.import 'qrc:/ui/scripts/Utils/utils.js' as Utils
+
+// =============================================================================
+
+function getEntryIcon (item) {
+  var iconRole = view.iconRole
+  if (iconRole == null || iconRole.length === 0) {
+    return ''
+  }
+
+  return Utils.isFunction(iconRole)
+    ? iconRole(item.flattenedModel)
+    : item.flattenedModel[iconRole]
+}

ui/modules/Common/Form/ListItemSelector.qml

@@ -0,0 +1,42 @@
+import Common 1.0
+
+import 'ListItemSelector.js' as Logic
+
+// =============================================================================
+
+ScrollableListViewField {
+  property alias currentIndex: view.currentIndex
+  property alias iconRole: view.iconRole
+  property alias model: view.model
+  property alias textRole: view.textRole
+
+  signal activated (int index)
+
+  radius: 0
+
+  ScrollableListView {
+    id: view
+
+    // -------------------------------------------------------------------------
+
+    property string textRole
+    property var iconRole
+
+    // -------------------------------------------------------------------------
+
+    anchors.fill: parent
+    currentIndex: -1
+
+    delegate: CommonItemDelegate {
+      id: item
+
+      container: view
+      flattenedModel: view.textRole.length &&
+        (typeof modelData !== 'undefined' ? modelData : model)
+      itemIcon: Logic.getEntryIcon(item)
+      width: parent.width
+
+      onClicked: activated(index)
+    }
+  }
+}

ui/modules/Common/qmldir

@@ -22,6 +22,7 @@ CheckBoxText            1.0 Form/CheckBoxText.qml
 ComboBox                1.0 Form/ComboBox.qml
 DroppableTextArea       1.0 Form/DroppableTextArea.qml
 ListForm                1.0 Form/ListForm.qml
+ListItemSelector        1.0 Form/ListItemSelector.qml
 SearchBox               1.0 Form/SearchBox.qml
 Slider                  1.0 Form/Slider.qml
 StaticListForm          1.0 Form/StaticListForm.qml

ui/views/App/Main/Dialogs/ManageAccounts.qml

@@ -53,7 +53,10 @@ DialogPlus {
       FormGroup {
         label: qsTr('selectAccountLabel')
 
-        ComboBox {
+        ListItemSelector {
+          width: parent.width
+          height: ManageAccountsStyle.accountSelector.height
+
           currentIndex: Utils.findIndex(AccountSettingsModel.accounts, function (account) {
             return account.sipAddress === AccountSettingsModel.sipAddress
           })

ui/views/App/Styles/Main/Dialogs/ManageAccountsStyle.qml

@@ -4,7 +4,11 @@ import QtQml 2.2
 // =============================================================================
 
 QtObject {
-  property int height: 234
-  property int heightWithoutPresence: 165
+  property int height: 303
+  property int heightWithoutPresence: 234
   property int width: 450
+
+  property QtObject accountSelector: QtObject {
+    property int height: 126
+  }
 }