diff --git a/linphone-desktop/ui/modules/Common/Form/ComboBox.js b/linphone-desktop/ui/modules/Common/Form/ComboBox.js new file mode 100644 index 000000000..d20fa966c --- /dev/null +++ b/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) +} diff --git a/linphone-desktop/ui/modules/Common/Form/ComboBox.qml b/linphone-desktop/ui/modules/Common/Form/ComboBox.qml index 602265483..5056ea81d 100644 --- a/linphone-desktop/ui/modules/Common/Form/ComboBox.qml +++ b/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 diff --git a/linphone-desktop/ui/modules/Common/Styles/Form/ComboBoxStyle.qml b/linphone-desktop/ui/modules/Common/Styles/Form/ComboBoxStyle.qml index 136fa312a..fdaccdc55 100644 --- a/linphone-desktop/ui/modules/Common/Styles/Form/ComboBoxStyle.qml +++ b/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