Font dropdown will display the actual fonts

[krasko78]

Resolves: #16555

Overview
Adds a string type property to StyledDropdown, StyledDropdownLoader and StyledDropdownView that can be set to "font" to make the drop down display the actual fonts. TextInspectorView and TextStylePopup enable this. StyledDropdownView uses the type property to choose a corresponding StyledTextLabel to render. For type "font", it is almost identical to the default one except it of course sets the font.family. I have made it also set clip to true and textFormat to Text.PlainText.

We could instead go with the subclass solution described by Casper in the issue. I had it implemented initially but decided to simplify it like this. The customization we need for the font is really small and with this solution both the default (non-font) scenario as well as the font scenario live in the same file next to each other. Let me know what you think.

Preview
Font drop down in Properties panel for text elements:

Font drop down in the Text popup:

Remarks
On my machine, there are a few fonts that have extra spacing at the bottom and do not render well (they are not vertically centered within the list item bounds), e.g.:

I believe all of those fonts that exhibit this behavior are followed by the same font with " Text" added to the name that does not exhibit this behavior. In the image above "FinaleBroadway" is not centered but is followed by "FinaleBroadway Text". Same for "Finale Maestro". Should we hide some fonts and if yes, based on what? Aren't these MuseScore related fonts?

In this comment it was brought up that some fonts are made up of symbols and therefore do not display their names in a legible form such as Wingdings and it was proposed to exclude them manually. Personally I am not a big fan of this approach as it hides fonts that the users may look for (and the exclusion code is too manual). I don't mind seeing a font that is only symbols even if I am not able to read its name; I am much more interested in what the font looks like than its name. The name can always be looked up by selecting the font in the drop down. If seeing the name is important, we could add tooltips to each font item. Currently tooltips only appear for truncated font names, such as this one (very few names are truncated on my machine):

• I signed the CLA
• The title of the PR describes the problem it addresses
• Each commit's message describes its purpose and effects, and references the issue it resolves
• If changes are extensive, there is a sequence of easily reviewable commits
• The code in the PR follows the coding rules
• There are no unnecessary changes
• The code compiles and runs on my machine, preferably after each commit individually
• I created a unit test or vtest to verify the changes I made (if applicable)

[Eism]

Hey @krasko78

I actually like the subclass idea. A dropdown is like a base class and shouldn't contain specific use cases. I can imagine a use case where we want to display a dropdown with colors, then we'd have to add another component to the base class, and so on, the base class would grow.
The idea of ​​passing a component through is practically no different from passing a type through, so I'd still suggest creating a separate component.

As for displaying text with different fonts, maybe we can solve this with cacheBuffer or perhaps TextMetrics/FontMetrics? I think we need to solve this problem somehow, but hiding such fonts isn't a good idea.

[krasko78]

Thanks for the feedback @Eism! Here's what I was able to come up with.

[Eism]

Looks good! Can you please also use FontDropdown in Preferences->Appearance?

[Eism]

let's use contentItem (like in our other components, for example, FlatButton)

[krasko78]

If I use contentItem, it goes in conflict with the conntentItem property of DropdownView in StyledDropdownView.qml.

[Jojo-Schmitz]

Remarks On my machine, there are a few fonts that have extra spacing at the bottom and do not render well (they are not vertically centered within the list item bounds), e.g.: I believe all of those fonts that exhibit this behavior are followed by the same font with " Text" added to the name that does not exhibit this behavior. In the image above "FinaleBroadway" is not centered but is followed by "FinaleBroadway Text". Same for "Finale Maestro". Should we hide some fonts and if yes, based on what? Aren't these MuseScore related fonts?

These fonts (Finale Broadway, Finale Maestro...) are plain musical symbol fonts, as opposed to their ...Text variants (which are musical text fonts), I'd drop them from being shown, that also seems consistent with Mu3. which does showr e.g. Bravita Text but not Bravura, Gootville Text but not Gotville/Gonville, MuseJazz Text, but not MuseJazz and MScore Text but not MScore/Emmentaler etc.