feat(ui/modules/Common/Form/ComboBox): supports icon on selected entry + create logic file

linphone-desktop/ui/modules/Common/Form/ComboBox.js

@@ -0,0 +1,32 @@
+// =============================================================================
+// `ComboBox.qml` Logic.
+// =============================================================================
+
+function getSelectedEntryIcon () {
+  var iconRole = comboBox.iconRole
+  if (iconRole.length === 0) {
+    return ''
+  }
+
+  var currentIndex = comboBox.currentIndex
+  if (currentIndex < 0) {
+    return ''
+  }
+
+  var model = comboBox.model
+  return (
+    Utils.isArray(model)
+      ? model[currentIndex][iconRole]
+      : model.get(currentIndex)[iconRole]
+  ) || ''
+}
+
+function getEntryIcon () {
+  var iconRole = comboBox.iconRole
+  return (iconRole.length && item.flattenedModel[iconRole]) || ''
+}
+
+function getFlattenedModel () {
+  return comboBox.textRole.length &&
+    (typeof modelData !== 'undefined' ? modelData : model)
+}

linphone-desktop/ui/modules/Common/Form/ComboBox.qml

@@ -5,6 +5,10 @@ import QtQuick.Layouts 1.3
 import Common 1.0
 import Common.Styles 1.0
 
+import Utils 1.0
+
+import 'ComboBox.js' as Logic
+
 // =============================================================================
 
 ComboBox {
@@ -31,16 +35,28 @@ ComboBox {
 
   // ---------------------------------------------------------------------------
 
-  contentItem: Text {
-    color: ComboBoxStyle.contentItem.text.color
-    elide: Text.ElideRight
+  contentItem: RowLayout {
+    spacing: ComboBoxStyle.contentItem.spacing
+    width: comboBox.width
 
-    font.pointSize: ComboBoxStyle.contentItem.text.fontSize
+    Icon {
+      icon: Logic.getSelectedEntryIcon()
+      iconSize: ComboBoxStyle.contentItem.iconSize
 
-    rightPadding: comboBox.indicator.width + comboBox.spacing
-    verticalAlignment: Text.AlignVCenter
+      visible: icon.length > 0
+    }
 
-    text: comboBox.displayText
+    Text {
+      Layout.fillWidth: true
+
+      color: ComboBoxStyle.contentItem.text.color
+      elide: Text.ElideRight
+
+      font.pointSize: ComboBoxStyle.contentItem.text.fontSize
+      rightPadding: comboBox.indicator.width + comboBox.spacing
+
+      text: comboBox.displayText
+    }
   }
 
   // ---------------------------------------------------------------------------
@@ -58,8 +74,7 @@ ComboBox {
   delegate: ItemDelegate {
     id: item
 
-    readonly property var flattenedModel: textRole.length
-      && (typeof modelData !== 'undefined' ? modelData : model)
+    readonly property var flattenedModel: Logic.getFlattenedModel()
 
     hoverEnabled: true
     width: comboBox.width
@@ -95,12 +110,7 @@ ComboBox {
       width: item.width
 
       Icon {
-        Layout.alignment: Qt.AlignVCenter
-
-        icon: {
-          var iconRole = comboBox.iconRole
-          return (iconRole.length && item.flattenedModel[iconRole]) || ''
-        }
+        icon: Logic.getEntryIcon()
         iconSize: ComboBoxStyle.delegate.contentItem.iconSize
 
         visible: icon.length > 0

linphone-desktop/ui/modules/Common/Styles/Form/ComboBoxStyle.qml

@@ -20,6 +20,9 @@ QtObject {
   }
 
   property QtObject contentItem: QtObject {
+    property int iconSize: 20
+    property int spacing: 5
+
     property QtObject text: QtObject {
       property color color: Colors.d
       property int fontSize: 10