Font dropdown will display the actual fonts

src/framework/uicomponents/qml/Muse/UiComponents/CMakeLists.txt

@@ -106,6 +106,7 @@ qt_add_qml_module(muse_uicomponents_qml
         FlatToggleButton.qml
         FocusableControl.qml
         FocusableItem.qml
+        FontDropdown.qml
         GradientRectangle.qml
         GridViewSectional.qml
         IncrementalPropertyControl.qml

src/framework/uicomponents/qml/Muse/UiComponents/FontDropdown.qml

@@ -0,0 +1,38 @@
+/*
+ * SPDX-License-Identifier: GPL-3.0-only
+ * MuseScore-Studio-CLA-applies
+ *
+ * MuseScore Studio
+ * Music Composition & Notation
+ *
+ * Copyright (C) 2021 MuseScore Limited
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as
+ * published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+import QtQuick 2.15
+
+StyledDropdown {
+    listItemComp: Component {
+        StyledTextLabel {
+            anchors.fill: parent
+            anchors.leftMargin: 12
+            horizontalAlignment: Text.AlignLeft
+
+            text: "" // will be set from outside
+            font.family: text
+
+            clip: true
+            textFormat: Text.PlainText
+        }
+    }
+}

src/framework/uicomponents/qml/Muse/UiComponents/StyledDropdown.qml

@@ -31,6 +31,7 @@ Item {
     id: root
 
     property var model: null
+    property alias listItemComp: dropdownLoader.listItemComp
     property int count: Boolean(model) ? model.length : 0
     property string textRole: "text"
     property string valueRole: "value"

src/framework/uicomponents/qml/Muse/UiComponents/internal/StyledDropdownLoader.qml

@@ -42,6 +42,8 @@ Loader {
     property alias dropdown: loader.item
     property alias isOpened: loader.active
 
+    property Component listItemComp: null
+
     active: false
 
     signal handleItem(int index, var value)
@@ -69,6 +71,7 @@ Loader {
         itemWidth: loader.itemWidth
         itemHeight: loader.itemHeight
 
+        listItemComp: loader.listItemComp
         textRole: loader.textRole
         valueRole: loader.valueRole
 

src/framework/uicomponents/qml/Muse/UiComponents/internal/StyledDropdownView.qml

@@ -31,6 +31,7 @@ DropdownView {
     id: root
 
     property var model: null
+    property Component listItemComp: null
     required property int visibleItemsCount
 
     default property alias contentData: content.contentData
@@ -229,10 +230,10 @@ DropdownView {
 
                 isSelected: index === root.currentIndex
 
-                navigation.name: label.text
+                navigation.name: loader.text
                 navigation.panel: view.navigationPanel
                 navigation.row: index
-                navigation.accessible.name: label.text
+                navigation.accessible.name: loader.text
                 navigation.accessible.window: root.accessibleWindow
                 navigation.onActiveChanged: {
                     if (navigation.highlight) {
@@ -263,13 +264,31 @@ DropdownView {
                     }
                 }
 
-                StyledTextLabel {
-                    id: label
+                Loader {
+                    id: loader
                     anchors.fill: parent
-                    anchors.leftMargin: 12
-                    horizontalAlignment: Text.AlignLeft
 
-                    text: Utils.getItemValue(root.model, item.index, root.textRole, "")
+                    property string text: Utils.getItemValue(root.model, index, root.textRole, "")
+
+                    sourceComponent: root.listItemComp ?? defaultListItemComp
+
+                    onLoaded: {
+                        if (loader.item) {
+                            loader.item.text = Qt.binding(function() { return loader.text })
+                        }
+                    }
+
+                    Component {
+                        id: defaultListItemComp
+
+                        StyledTextLabel {
+                            anchors.fill: parent
+                            anchors.leftMargin: 12
+                            horizontalAlignment: Text.AlignLeft
+
+                            text: loader.text
+                        }
+                    }
                 }
 
                 onClicked: {
@@ -278,12 +297,12 @@ DropdownView {
                 }
 
                 mouseArea.onContainsMouseChanged: {
-                    if (!label.truncated) {
+                    if (!loader.item.truncated) {
                         return
                     }
 
                     if (mouseArea.containsMouse) {
-                        ui.tooltip.show(item, label.text)
+                        ui.tooltip.show(item, loader.item.text)
                     } else {
                         ui.tooltip.hide(item)
                     }

src/inspector/qml/MuseScore/Inspector/common/DropdownPropertyView.qml

@@ -28,32 +28,74 @@ import MuseScore.Inspector
 InspectorPropertyView {
     id: root
 
-    property alias dropdown: dropdownItem
-    property alias model: dropdownItem.model
+    required property var model
+
+    property Component dropdownComp: null
+    property string dropdownTextRole: ""
+    property string dropdownValueRole: ""
 
     navigationName: "DropdownPropertyView"
-    navigationRowEnd: dropdownItem.navigation.row
+    navigationRowEnd: dropdownLoader.item.navigation.row
 
     function focusOnFirst() {
-        dropdownItem.navigation.requestActive()
+        dropdownLoader.item.navigation.requestActive()
     }
 
-    StyledDropdown {
-        id: dropdownItem
+    Loader {
+        id: dropdownLoader
 
         width: parent.width
 
-        navigation.name: root.navigationName + " Dropdown"
-        navigation.panel: root.navigationPanel
-        navigation.row: root.navigationRowStart + 1
-        navigation.accessible.name: root.accessibleName + " " + currentText
+        sourceComponent: root.dropdownComp ?? defaultDropdownComp
+
+        onLoaded: {
+            let dropdownComp = dropdownLoader.item
+            if (!dropdownComp) {
+                return
+            }
+
+            dropdownComp.width = Qt.binding(function() { return dropdownLoader.width })
+
+            dropdownComp.navigation.name = Qt.binding(function() {
+                return root.navigationName + " Dropdown"
+            })
+
+            dropdownComp.navigation.panel = Qt.binding(function() { return root.navigationPanel })
+
+            dropdownComp.navigation.row = Qt.binding(function() { return root.navigationRowStart + 1 })
+
+            dropdownComp.navigation.accessible.name = Qt.binding(function() {
+                return root.accessibleName + " " + dropdownComp.currentText
+            })
 
-        currentIndex: root.propertyItem && !root.propertyItem.isUndefined
-                      ? dropdownItem.indexOfValue(root.propertyItem.value)
-                      : -1
+            dropdownComp.model = Qt.binding(function() { return root.model })
 
-        onActivated: function(index, value) {
-            root.propertyItem.value = value
+            dropdownComp.textRole = Qt.binding(function() {
+                return root.dropdownTextRole ? root.dropdownTextRole : dropdownComp.textRole
+            })
+            dropdownComp.valueRole = Qt.binding(function() {
+                return root.dropdownValueRole ? root.dropdownValueRole : dropdownComp.valueRole
+            })
+
+            dropdownComp.currentIndex = Qt.binding(function() {
+                return root.propertyItem && !root.propertyItem.isUndefined
+                    ? dropdownComp.indexOfValue(root.propertyItem.value)
+                    : -1
+            })
+        }
+
+        Connections {
+            target: dropdownLoader.item
+
+            function onActivated(index, value) {
+                root.propertyItem.value = value
+            }
         }
     }
+
+    Component {
+        id: defaultDropdownComp
+
+        StyledDropdown { }
+    }
 }

src/inspector/qml/MuseScore/Inspector/text/TextInspectorView.qml

@@ -55,8 +55,12 @@ InspectorSectionView {
             titleText: qsTrc("inspector", "Font")
             propertyItem: root.model ? root.model.fontFamily : null
 
-            dropdown.textRole: "text"
-            dropdown.valueRole: "text"
+            dropdownComp: Component {
+                FontDropdown { }
+            }
+
+            dropdownTextRole: "text"
+            dropdownValueRole: "text"
 
             model: {
                 var resultList = []

src/inspector/qml/MuseScore/Inspector/text/textstylepopup/TextStylePopup.qml

@@ -78,7 +78,7 @@ AbstractElementPopup {
             RowLayout {
                 spacing: root.controlSpacing
 
-                StyledDropdown { // 1
+                FontDropdown { // 1
                     id: fontDropdown
 
                     Layout.fillWidth: true