Turn the FX type label into the FX type selection ComboBox

[anthonyalfimov]

Currently, the top-right FX selection comboBox and the big FX type label in the FX Panel overlap in their purpose. Both indicate the current FX type, but the label is more visible, while the comboBox allows to change it.

This can be streamlined by turning the FX type label into an interactive UI component that changes the FX type. It can be a comboBox with a popup, or simply two arrows both sides of the label to cycle through types.

ComboBox seems like a preferable option to me, since it allows to view the available options before changing the FX type. Since switching the type produces an audible transition effect, this is preferable for this plugin. Visually, I don't want the comboBox to alter the look of the label too much. Perhaps, just an arrow next to the label that somehow highlights on hover. On mouse down, a popup should appear. I would look cool if the order of the popup list is changed so that the currently selected type is always on top and matches the position of the label exactly. So, the popup should use exactly the same (large) font as the label, and have a semi-transparent background.

This will free up the top-right space on the "shelf" for the ~"Output Clipping Curve" combobox #47~ lowpass filter control #33.

[anthonyalfimov]

TODO:

• [x] Tune up the comboBox look.
• [x] Tune up the popup look.

[anthonyalfimov]

FX Type ComboBox and Popup look

General considerations

I gravitate towards placing the popup on top of the combobox (left image), so that you don't see the currently selected option twice. With a very short list of options (just three), it should look cleaner.

---

ComboBox Look

FX Type combobox controls a parameter that in most cases would be set just once per instance. Therefore, it shouldn't draw too much attention, while remaining prominent.

---

CB1. Standard combobox

FX Type font colour roughly matches the background around the combobox, appearing as a "negative" shape.

---

CB2. Light combobox

FX Type font colour roughly matches the colour of the label in the older UI.

---

CB3. Standard combobox with thin border

FX Type font colour roughly matches the colour of the label in the older UI.

---

CB4. Just the border

FX Type font colour is brighter than the colour of the label in the older UI.

---

CB5. Using colour

Each FX Type would be associated with its own colour:

This can be a striking look, but it draws a lot of attention.

---

Popup Look

All options here use a drop shadow effect to help separate them from the background.

---

PP1. No border

The most elegant look to my taste. However, it's not very well separated from the background. Highlighting the first option can look confusing if using the same highlight colour for both the combobox and the popup (first popup item will blend with the combobox behind).

---

PP2. Thin dark border

---

PP3. Thin bright border

---

PP4. Thick border

---

[anthonyalfimov]

Currently implemented state of the popup:

https://user-images.githubusercontent.com/43878921/119038554-ecee5f80-b9bb-11eb-9b7c-f671e270d4f0.mov

[anthonyalfimov]

PP1-A. No border, edge glow

Add subtle "glow" effect to the edges of the popup to improve separation from the background. Use 1 px separators between options. Match for CB1 / CB2 ComboBox designs.

---

PP2-A. Thinner dark border

Use 1 px thin borders and item separators. Match for CB1 / CB2 ComboBox designs.

[anthonyalfimov]

CB3-A. Standard combobox with thinner border

Use 1 px border for the ComboBox.

---

PP3-A. Thinner bright border

A matching partner for CB3-A: 1 px borders and item separators.

[LizAryslanova]

I’m gravitating towards: CB2. Light combobox It is visible and not distracting.

There is a thought of combining it with the border from this option: PP3-A. Thinner bright border Just to see how it looks

[anthonyalfimov]

CB2. (For reference)

---

I've been going back and forth between liking and disliking CB2. My problem with it is that neither the text colour nor the background colour of CB2 are used anywhere else in the plugin. So to me it looks too disconnected from the rest of the UI. What do you think?

Here are some variations on CB2 with borders:

CB2-A. 2px border

---

CB2-B. 1px Border

---

I think that the 2px border looks more appropriate, since it matches the thickness of the downward arrow here.

Here's another variation: now the background colour is the same as the background for the "Invert" toggle. It's a transparent colour, so they don't necessarily look the same, but they should dim the colour behind them roughly the same.

CB2-C. 2px border

Here, it almost looks as if the ComboBox background is transparent, but it still adds a bit of contrast for the text.

---

I'll need to have a look at these with fresh eyes, but I think the border might be making these CB2 variations look less alien among the UI...

[anthonyalfimov]

Speaking of other ComboBox options, I assume we can agree that CB4 and CB5 are not worth considering. CB1 and CB3 use the same background as the rest of the UI elements like labels and buttons, which is good for consistency. Here are they for reference, plus an intermediate version (CB1 with the font colour of CB2 and CB3).

CB1

---

CB1-A

---

CB3

---

These do make the plugin feel darker overall. But they tie in with the rest of the UI language.

[anthonyalfimov]

Speaking of the Popup design, my favourite right now is PP2-A, the thin 1px border. PP2 with 2px border is fine too, but doesn't look as elegant.

The trick here is, if the ComboBox has a border, then the Popup should match the colour and the thickness of the border. I'm not a fan of ComboBoxes with 1px borders. So that leaves only the ComboBoxes with no border to be paired with the 1px-border Popup.

So at this point it makes sense to be looking at CB+PP pairs, rather than choosing in isolation. Here are some possible pairings:

CB1 + PP2-A

---

CB1-A + PP2-A

---

CB2 + PP2-A

---

CB3 + PP3

---

CB2-A + PP3

[anthonyalfimov]

There's one bit of context that these mock-ups don't show well. When you mouse over a control, it is highlighted in a dark grey colour. This highlight colour is the same for all existing controls. With the ComboBox, you can see that in the video here and underneath the Popup in Popup mock-ups.

[anthonyalfimov]

This is the look I am going with for now. The Dropdown background is consistent with other UI elements, and the font matches the background enough to appear as negative space.