diff --git a/linphone-desktop/ui/modules/Common/Form/ComboBox.qml b/linphone-desktop/ui/modules/Common/Form/ComboBox.qml index fb19d0c44..602265483 100644 --- a/linphone-desktop/ui/modules/Common/Form/ComboBox.qml +++ b/linphone-desktop/ui/modules/Common/Form/ComboBox.qml @@ -1,5 +1,6 @@ import QtQuick 2.7 import QtQuick.Controls 2.0 +import QtQuick.Layouts 1.3 import Common 1.0 import Common.Styles 1.0 @@ -11,6 +12,10 @@ ComboBox { // --------------------------------------------------------------------------- + property string iconRole: '' + + // --------------------------------------------------------------------------- + background: Rectangle { border { color: ComboBoxStyle.background.border.color @@ -24,6 +29,22 @@ ComboBox { implicitWidth: ComboBoxStyle.background.width } + // --------------------------------------------------------------------------- + + contentItem: Text { + color: ComboBoxStyle.contentItem.text.color + elide: Text.ElideRight + + font.pointSize: ComboBoxStyle.contentItem.text.fontSize + + rightPadding: comboBox.indicator.width + comboBox.spacing + verticalAlignment: Text.AlignVCenter + + text: comboBox.displayText + } + + // --------------------------------------------------------------------------- + indicator: Icon { icon: 'drop_down' iconSize: ComboBoxStyle.background.iconSize @@ -37,6 +58,12 @@ ComboBox { delegate: ItemDelegate { id: item + readonly property var flattenedModel: textRole.length + && (typeof modelData !== 'undefined' ? modelData : model) + + hoverEnabled: true + width: comboBox.width + background: Rectangle { color: item.hovered ? ComboBoxStyle.delegate.color.hovered @@ -63,11 +90,35 @@ ComboBox { } } - font.bold: comboBox.currentIndex === index - hoverEnabled: true - text: textRole.length - ? (typeof modelData !== 'undefined' ? modelData[textRole] : model[textRole]) - : modelData - width: comboBox.width + contentItem: RowLayout { + spacing: ComboBoxStyle.delegate.contentItem.spacing + width: item.width + + Icon { + Layout.alignment: Qt.AlignVCenter + + icon: { + var iconRole = comboBox.iconRole + return (iconRole.length && item.flattenedModel[iconRole]) || '' + } + iconSize: ComboBoxStyle.delegate.contentItem.iconSize + + visible: icon.length > 0 + } + + Text { + Layout.fillWidth: true + + color: ComboBoxStyle.delegate.contentItem.text.color + elide: Text.ElideRight + + font { + bold: comboBox.currentIndex === index + pointSize: ComboBoxStyle.delegate.contentItem.text.fontSize + } + + text: item.flattenedModel[textRole] || modelData + } + } } } diff --git a/linphone-desktop/ui/modules/Common/Styles/Form/ComboBoxStyle.qml b/linphone-desktop/ui/modules/Common/Styles/Form/ComboBoxStyle.qml index 0310491f3..136fa312a 100644 --- a/linphone-desktop/ui/modules/Common/Styles/Form/ComboBoxStyle.qml +++ b/linphone-desktop/ui/modules/Common/Styles/Form/ComboBoxStyle.qml @@ -19,12 +19,29 @@ QtObject { } } + property QtObject contentItem: QtObject { + property QtObject text: QtObject { + property color color: Colors.d + property int fontSize: 10 + } + } + property QtObject delegate: QtObject { property QtObject color: QtObject { property color hovered: Colors.y property color normal: Colors.k } + 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 + } + } + property QtObject indicator: QtObject { property color color: Colors.i property int width: 5