feat: restructure menubar #2

[mejo-]

📝 Summary

• refactor(menu): Support several types in a list for isActive check
• feat(menu): Group block elements in a submenu
• fix(menu): Move heading left of bold, links and attachments neighbors
• fix(menu): change headings submenu icon to FormatSize icon
• Contributes to: Menu bar redesign #2836

🖼️ Screenshots

🏚️ Headings menu before	🏡 Headings menu after

🏚️ Callouts menu before	🏡 Blocks menu after

Screencast

🏁 Checklist

• Code is properly formatted (npm run lint / npm run stylelint / composer run cs:check)
• Sign-off message is added to all commits
• Tests (unit, integration and/or end-to-end) passing and the changes are covered with tests

[marcoambrosini]

hmm not sure about the block icon, I think it's not too clear 🤔

[juliusknorr]

I find it quite fitting, also considering the other icons we looked at this week

[mejo-]

hmm not sure about the block icon, I think it's not too clear 🤔

@marcoambrosini I find it fitting well, given that it shows a box with text inside - which describes text boxes pretty well. Do you have an idea for an alternative icon? And are you against the icon or just not 100% sure?

[max-nextcloud]

I like it. I'm not sure about the 'no heading' icon with the two T though. If the text is not bold the icon is just deselected and does not change to a thin 'F' either. Same for the lists. If no list type is selected the icon still displays a list and not a 'non-list' state.

[mejo-]

I'm not sure about the 'no heading' icon with the two T though. If the text is not bold the icon is just deselected and does not change to a thin 'F' either. Same for the lists. If no list type is selected the icon still displays a list and not a 'non-list' state.

I implemented it as it was once decided in #2836. I think the idea was that it's a more generic icon to communicate "text size" than "H1". I don't have a strong opinion on which one communicates better. "H1" might also be hard to understand for non-english speakers. Maybe designers can comment here @marcoambrosini @nimishavijay 😊

[marcoambrosini]

I find it:

• too similar to lists > difficult to quickly find
• Rectangle shape similar to neighbouring icons > difficult to quickly find
• reminds me of left-alignment icon > possibly confusing

Maybe brackets are good for this case?

So I would go with:
https://fonts.google.com/icons?selected=Material+Symbols+Outlined:data_array:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=parenthe&icon.size=24&icon.color=%235f6368

[juliusknorr]

Brackets I would find to easy to only associate with a code block, not sure this is a good one for average users as well to refer to as blocks

[mejo-]

I tried the brackets and have to say that both work well in my opinion. I don't have a strong opinion here. Maybe @nextcloud/designers can give a final word which one to use?

🖼️ CardText	🖼️ CodeBrackets

[nimishavijay]

My vote would go for the second one :) it looks more like a generic box

[mejo-]

My vote would go for the second one :) it looks more like a generic box

Agreed and implemented 😊

[mejo-]

I like it. I'm not sure about the 'no heading' icon with the two T though. If the text is not bold the icon is just deselected and does not change to a thin 'F' either. Same for the lists. If no list type is selected the icon still displays a list and not a 'non-list' state.

I implemented it as it was once decided in #2836. I think the idea was that it's a more generic icon to communicate "text size" than "H1". I don't have a strong opinion on which one communicates better. "H1" might also be hard to understand for non-english speakers. Maybe designers can comment here @marcoambrosini @nimishavijay 😊

@nimishavijay what's your take on this?

[nimishavijay]

I think the idea was that it's a more generic icon to communicate "text size" than "H1". I don't have a strong opinion on which one communicates better. "H1" might also be hard to understand for non-english speakers.

I agree :) H1, H2, etc are almost rather technical markdown terms, and it's really just the size of the heading, so I would go for the T icon :)