Problem with ComboBox when plugin is docked

• May 12, 2023 - 17:06

Example attached is simplified from a real plugin that I am working on.

If I make the plugin of type Dock then the dropdown choices appear in the wrong place when the plugin is actually docked:

If I drag the plugin's UI outside of the main Musescore window then it works as expected:

What do I need to do to make it work when docked? I have tried it as a dialog plugin and it works properly but dialogs cannot be kept on top of the main Musescore window.

Here is the code for this example:

DockDropdown.qml

Comments

parkingb

• May 14, 2023 - 22:44

There is no more problem if you move to QtQuick Controls 2 (but you must accept the Flat style of QTUick Controls 2):

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import QtQuick.Dialogs 1.2
import QtQuick.Window 2.3
import Qt.labs.settings 1.0
import FileIO 3.0
import MuseScore 3.0

These are (I think) the latest version allowed by MS3.6

yonah_ag

• May 15, 2023 - 12:25

Much appreciated. :-)

This does indeed solve the problem and flat style is equally acceptable. I've lost the background colour of dropdown but I expect that there will be a property for this somewhere in the new Qt.Controls.

parkingb

• May 15, 2023 - 21:29

Have a look at my plugin's. All are using QtQuick Controls 2 and most are using ComboBox,
SoloAnalyser has its own NiceComboBox that auto-determines its width based on its content.

yonah_ag

• May 15, 2023 - 22:57

Thanks again, there's so much useful learning for me in your plugins. It looks like contentItem is one of the pieces of the puzzle that I was missing. Flickable was another essential to get my TextArea scrolling again. I have also found the reference documentation for Qt 5.9 which is proving helpful.

parkingb

• May 16, 2023 - 17:54

I've got one Flickable in Scale Workout Builder that could serve as an example

parkingb

• May 16, 2023 - 17:59

ScrollView is another alternative for panels or elements that need to be scrolled.
I used it in the Euclidean Rhythm plugin.

yonah_ag

• May 17, 2023 - 21:15

The flat styles just about work on Windows:

But on macOS it's a mess:

Is there anything that I can do to fix these issues?

parkingb

• May 17, 2023 - 22:29

I can't test under MacOs. But I've tested all my plugins on both Window 10 and Ubuntu and never encountered such problem.

What puzzles me is the look of your ComboBoxes on Windows. Rounded. Have you tweaked them to obtain that effect ? If yes, have you tested un-tweaked ComboBoxes ?
Have you tested one of my plugin in MacOs ? For example Scale Workout Builder has ComboBoxes. How does it behave ? Have you the same mess ?

You can always create improved versions those items. I did it for the RadioButton (i.e. NiceradioButton) and for the CheckBox (i.e. SmallCheckBox). In both elements next to L&F improvements I also corrected some issues with the base components themselves in dark mode.
Both can be seen in action in the Batch Convert plugin.

You could follow the same way and create a new element "MyComboBox" where you define your own Indicator.

yonah_ag

• May 18, 2023 - 18:07

Yes, I had rounded the ComboBoxes, (but have now removed this.)

Thanks for the links. These have set me on the right path to defining my own indicator and also changing other properties of the components. It seems a lot more work than the earlier version of Qt and involves a fair bit of trial and error in Musescore's plugin creator. I can only test on Windows but have a collaborator on this project who is running macOS so I'll ask him how the revised UI is working out.

yonah_ag

• May 19, 2023 - 17:03

I've got my own indicator styling working now but have a couple of questions.
1) Is there any way to shrink the vertical spacing of items in the ComboBox dropdown list?
2) Is there any way to highlight an item in the dropdown list when the mouse pointer hovers over it?

yonah_ag

• May 20, 2023 - 02:16

Got there in they end by including:

  delegate: ItemDelegate {
     width: 220
     background: Rectangle {
        color: hovered ? "#f0f0f0" : "#ffffff"
     }
     contentItem: Text {
        text: modelData
        color: hovered ? "#0000B0" : "#000000"
        verticalAlignment: Text.AlignVCenter
     }
     height: 22
     leftPadding: 10; topPadding: 0; bottomPadding: 0; rightPadding: 0
   }

davil123

• May 19, 2023 - 18:43

Hi,yonah_ Ag. I would like to ask. Are there many bugs in graphic design like this on Mac?

yonah_ag

• May 19, 2023 - 23:16

Given that Qt is a mature product and that I am something of a novice with it, (having only just moved to Qt5.9), I think that it is more a case of my lack of understanding. I have made a good bit of progress since the above screenshot, mainly by specifying properties in more detail rather than relying on defaults.

The links and examples posted above by parkingb are all worth exploring if you need to increase your understanding.