Font dropdown menu should display what a font looks like.

[octopols]

While selecting font for some text selected the font selection dropdown (Properties > Text > Font) should display what the font looks like.
For example -

the current font selection dropdown looks like this -

[Tantacrul]

Would be nice to see for sure. I don't think this needs to be assigned to me because I don't think it really requires a design. I know from experience that this can either be very simple or really hard. Some professional UI applications avoid it.

If someone can work on the widget to produce the result desired in this request, I'll happily look over it and give any needed UI / spacing advice.

[pratyaksh1610]

I am happy to work on it. I have also figured out the file , but I am unable to figure out how to proceed further i.e implementation.

[pratyaksh1610]

@Tantacrul Can you please help a bit .

[pratyaksh1610]

The font families are pushed into an array inside a model.

[cbjeukendrup]

@pratyaksh1610 I've quickly investigated a bit and it looks like the easiest option would be to add a boolean isFontDropdown property in StyledDropdown.qml.
Then, you'd need to pass that property down the hierarchy, via the StyledDropdownLoader (which is a wrapper around the popup of the dropdown), via StyledDropdownView.qml (which is the popup itself), to the StyledTextLabel inside that file.
Then, based on that boolean, set the font.family property of the label to either ui.theme.bodyFont.family (the default font) or Utils.getItemValue(root.model, model.index, root.valueRole, undefined) (the font family for that item in the list).
Finally, in those dropdowns that are font dropdowns, set the newly created isFontDropdown property to true.

Philosophical note: in general, a solution like this is not the most beautiful one. Ideally, you would want to make a subclass called FontDropdown of StyledDropdown; and you would want to put all FontDropdown-specific logic in FontDropdown and not in StyledDropdown. But in this case, due to the deep hierarchy of components inside StyledDropdown, that is quite difficult to achieve, and in this case it would be more efficient to implement the logic in StyledDropdown.

(The proper "subclass" way is not impossible though: in StyledDropdown, you can create a property of type Component that can be used to customise the delegate used in the StyledListView inside StyledDropdownView. However, making the delegate overridable is not trivial either, because currently the "hardcoded" delegate relies a lot on other code in StyledDropdownView, and that other code relies on the specifics of the delegate. So you'd somehow need to decouple the delegate from the rest of the code. But again, in my opinion this solution is not worth the trouble, so feel free to go with the simpler one.)

[pratyaksh1610]

@cbjeukendrup I am unable to understand, I am new to this, apologies for the same. Can you explain the other way ?

[pratyaksh1610]

Basically the flow as to how to achieve that or in general.

[cbjeukendrup]

Okay, I'll write this as a "code-along" style tutorial. Apologies if I'm explaining too basic stuff, I don't know how much you know already. Enjoy the read...

Each QML file represents a component. A component is some object in the UI: a text label, a button, a dropdown, a list, or simply an Item, the most generic UI object. As you can guess from the syntax of QML files, they define a hierarchy of components, in a declarative style. The most ubiquitous declarative language is HTML; in a way, QML is a bit like that.

Let's consider the StyledDropdown component as an example. It is defined in StyledDropdown.qml. Its root component is an Item. It contains several child components: a DropdownItem and a StyledIconLabel. Additionally, it defines some properties, sets some existing properties (the width and the height, which are defined as properties by Item), and some functions.
The DropdownItem also contains another nested component, namely a StyledDropdownLoader. This is the component we are interested in. Let's go to the file where it is defined: StyledDropdownLoader.qml (or, in Qt Creator, just Ctrl+Click the name).

There, we find some slightly mysterious code and the root item is a Loader; the docs for that are here: https://doc.qt.io/qt-5/qml-qtquick-loader.html
It's not very interesting for what we are trying to do, so let's skip straight to the subcomponent that is interesting: StyledDropdownView.qml.

The root item in this file represents the popup that appears when the user clicks the dropdown. Its most important child item is a StyledListView, which will load the list of available items. What such an item should look like, is defined by the delegate property. This property lets you specify a prototype component, from which all list items will be created.

The value for the delegate property is a ListItemBlank (a somewhat generic component that we have defined for ourselves which is useful as the delegate item in many kinds of lists). Inside that list item, we put a StyledTextLabel. As you can guess from the context, this is the label that displays the text of each option in the list of options. What we want to do, is changing the font of this label; specifically, for each option, the font family of the label should be equal to the value of the option.

The font can be changed by setting the font.family property of the StyledTextLabel. The value of the option can be retrieved using the somewhat cryptical expression Utils.getItemValue(root.model, model.index, root.valueRole, undefined). That makes that we will add the following line of code:

    // StyledDropDown.qml, somewhere near line 265
    font.family: Utils.getItemValue(root.model, model.index, root.valueRole, undefined)

Now, let's try to run the app again. For font dropdowns, it seems to work well indeed! But hold on... for other dropdowns, this causes trouble of course! If there is a dropdown where the options are "above" and "below", our change would mean that we set the font family for the dropdown options to "above" and "below" respectively, which is nonsense. Of course, we want that our change only affects font dropdowns!

The stupid solution is: create a copy of StyledDropdown.qml under a different name, and the subcomponents (StyledDropdownLoader.qml and StyledDropdownView.qml, also under different names), and in the copy of StyledDropdownView.qml make our change. Then use the copy of StyledDropdown in those places where we want a font dropdown specifically.

Why is this stupid? It means that we are duplicating a lot of code, which makes it difficult to maintain. If you need to fix a bug in one copy, you need to remember to fix it in the other copy too. So let's not do this.

Instead, we want to re-use the StyledDropdown.qml but give it a property that lets us enable the font-dropdown-specific behaviour in those cases where we want it.

Let's start in StyledDropdownView.qml. At the top of the file, we define a new property by writing property bool isFontDropdown: false. This means: we define a property of type bool, called isFontDropdown, with an initial value of false (by default, a dropdown is not a font dropdown).

Then, we need to adjust our change at the bottom of the file: now we change the font of the text label conditionally, based on the property we just defined. We change it to:

    font.family: root.isFontDropdown ? Utils.getItemValue(root.model, model.index, root.valueRole, undefined) : ui.theme.bodyFont.family

So now we have this new property of StyledDropdownView.qml, but we still need to use it. We can't use it directly yet in the places where we create StyledDropdowns, because StyledDropdownView is hidden deep inside StyledDropdown, so when you see a StyledDropdown you cannot see or change the properties of a StyledDropdownView.

So, we need to add some intermediate properties, in the places where we can see the StyledDropdownView, and work our way upwards in the hierarchy. What is the (only) place where you can see StyledDropdownView? It's StyledDropdownLoader.qml, because that is where the StyledDropdownView.qml is created.
But to which value are we going to set the property? The answer is, inside StyledDropdownLoader.qml, we don't know, so we want to get this information from outside, i.e. from higher in the hierarchy. To do that, we give StyledDropdownLoader.qml also a property at the top of the file:

    // StyledDropdownLoader.qml, somewhere near line 39
    property bool isFontDropdown: false

Now, we can pass the value from this property to the property of StyledDropdownView:

        // StyledDropdownLoader.qml, somewhere near line 66
        isFontDropdown: root.isFontDropdown

So now StyledDropdownLoader also has this property, but from there it is never used yet. To solve that, we basically repeat the same steps, but now we are one level higher in the hierarchy of components. So, in StyledDropdown.qml we add property bool isFontDropdown: false so that the dropdown can receive a value for this property from outside, and to the StyledDropdownLoader, we pass the value of this property:

        // StyledDropdown.qml, somewhere near line 99
        isFontDropdown: root.isFontDropdown

Now, we are ready to set the property to true for those StyledDropdowns that are actually font dropdowns. So, for example, the dropdown in TextInspectorView.qml.

In this case, the dropdown here is wrapped into some wrapper here, which is for didactical purposes a bit unfortunate because it complicates things a little bit. Anyway, normally, you would do:

    StyledDropdown {
        // possibly other properties here...
        isFontDropdown: true // let's make this specific dropdown a font dropdown
        // possibly more properties here...
    }

But in this case, where the StyledDropdown is wrapped, we do:

    DropdownPropertyView {
        // (...)
        dropdown.isFontDropdown: true
        // (...)
    }

And then it should work!

Working on this issue should give you a sense of how to work with QML in general, and especially how to pass properties from one component to another, via the hierarchy of components. So it's a good exercise!

[SilverGreen93]

Make sure that fonts with only symbols or missing characters are treated separately as they will not be able to display their name in their own font. See Wingdings font as an example.
You can also take a look at the font drop down style in LibreOffice Writer.

[octopols]

@pratyaksh1610 are you working on this?