[MU4 Task] To make 'More' drop-downs in Properties consistent

[abariska]

Task description There're different implementation for 'More' drop-downs in Properties. E.g. in Note section it's implemented as a cllapsable section called "Show more" and for Text section as a "More.." button with dialog style drop-down. Will be great to make these cases consistent and choose only one variant of implementation.

@Tantacrul @bkunda please, confirm

[Tantacrul]

Yes. We just need to figure out which is better!

[bkunda]

I'm going to try to make this really easy for us...

As far as I can tell, the ‘show more‘ collapsible dropdown appears in far more discrete places than the big grey ‘More...‘ button. In fact, the only context in which I can get this ‘More...‘ button to appear is with the ‘Text' properties section.

I see no reason why the additional settings in ‘Text‘ can't be accessed from the ‘show more‘ collapsible dropdown. Further, I'd be in favour of reverting to this pattern because the grey button alternative currently triggers things like dialogs, so it is arguably advantageous to not confuse these two behaviours with the same indicator.

So my recommendation is: use the ‘show more‘ collapsible text button.

[bkunda]

I.e. (See below images)

Additionally, I'd also suggest relocating the ‘Insert special characters‘ button to the ‘Show more‘ section in Text.

[MarcSabatella]

I'd like to put in a vote against moving the special characters button. It's already one additional click to reach this compared to MU3 (since it now requires the properties panel to be open whereas previously it was on the text toolbar), plus the shortcut changed. People are already complaining they can't figure out how to access this feature anymore. I'd rather not see us make it even harder for people to find.

[abariska]

It looks confusable to me. By the hierarchy of the menu 'Show more' is on one level lower than main points like Text, Note etc. But in your case @bkunda 'Show more' visually looks like one more point in the top level menu. There should be a way to show that 'Show more' belongs to one of the main menu points and I think that 'More' button can do this better

[bkunda]

Just to ensure I'm understanding you right @abariska, do you find this behaviour confusing (or likely to cause confusion)?

https://user-images.githubusercontent.com/86290556/211584670-91f6c712-9c8e-4403-b28a-feaa97f10ef7.mov

[abariska]

No. Your case looks good. I'm talking particulary about the case when full measure with notes and text is selected. Then I see this

https://user-images.githubusercontent.com/101250347/211586149-6d89a646-8f59-45cb-bbd8-98a87d498c97.mp4

[Tantacrul]

My 2 cents:

1. Agree that the collapsible element ("show more") makes more sense. It would be even better if they were persistent (which was the intention... but hasn't been implemented yet). So, if I open 'show more' once, then the options are exposed next time I select text.

2. Agree with Borys that the way 'show more' is displayed should be visually distinct from the category headers (like 'Text', 'General', etc.)

3. 100% agree that 'Special Characters' should not be burried. It's far too important. I wonder if it makes more sense to have it displayed all the time, rather than only appearing when a user is in edit mode?

[bkunda]

I think I see your point here. For me, the difference between ‘Show more‘ and ‘Text‘ is actually harder to make out in dark mode than in light mode, perhaps because the separator line in dark mode isn't as easy to make out compared to light mode:

If the aim is to use a consistent design pattern for everything in Properties though, then my main concern about using the ‘More‘ button is when multiple elements are selected, potentially giving rise to a popup-over-a-popup effect like this:

This is where the current ‘Show more‘ pattern is, to my eye at least, preferable.

[Tantacrul]

@bkunda

I agree. I think I wasn't very clear above. What I meant was that I agree with you that the collapsible element ("show more") is generally preferable.

I wonder could we mock up a little community project to fix up the Inspector with a few fixes like this?

[bkunda]

I'm happy to mock this up 🙂

As far as I can tell, the only real change is to replace the 'More' button in the ‘Text‘ properties panel to a ‘Show more‘ (collapsible) panel.

I'm not sure the ‘Insert special characters‘ button needs to be displayed all the time (I.e. even when no text is selected), but for the sake of argument, one could hypothetically add it as an option in the note input toolbar (but have it hidden by default: that way, users who want it visible all the time can enable it so).

As an aside, I do wonder whether we may want to slightly tweak the separator line colour in dark mode? Either that, or my eyes have somehow deteriorated since last year (😮), but I am finding it a little difficult to make out for vertically-stacked panel elements.

[Tantacrul]

I think the 'Show more' should definitely look a little different. It's weird that they look like categories. I don't think making the separator lines darker will sufficiently fix that problem.

I also think we need a text widget floating over text as you are editing it, which would contain a much better version of the Special Character options. This is something I'm proposing for planning next week.

[bkunda]

I'll see what I can come up with 🤓, and I love the idea of floating widgets!

[RobFog]

This may be tangential to this issue at this point, but as someone with poor eyesight, I'd appreciate more obvious separator lines. While I can read most items in Properties easily, I'm having trouble seeing the separator lines in both light and dark modes.