Primary actions design issues

[ChristophWurst]

Steps to reproduce

1. Open the actions menu of a message/thread

Expected behavior

The three primary actions have the same width.

Actual behavior

Mail app version

1.x

Mailserver or service

No response

Operating system

No response

PHP engine version

No response

Web server

No response

Database

No response

Additional info

Ref #6098

[JuliaKirschenheuter]

@ChristophWurst i have discussed this issue with @jancborchardt, as i've implemented it. To have a same width for primary actions i have to do a some fix width for them. And it is not always helpful for different languages (because the title will be either cut or have a second line).

@jancborchardt told that is is ok, how it is looks like. Is there some new info?
@ChristophWurst, @jancborchardt please reply

[ChristophWurst]

If this is intended then I'm okay with it. I'm not a designer. It's just that something makes this UI look unpolished. Maybe @nimishavijay can share a secondary opinion? :)

[nimishavijay]

Yes, we had discussed this. We thought we could calculate the width of the button with the longest text, and use that length for all the buttons, but turns out it's too difficult, so we decided to keep it this way :)

If it is possible to adjust the width of the buttons considering all languages and lengths of text without any fancy javascript stuff then I think we should totally do it like that :)

[ChristophWurst]

I can't help it but something feels off with this new menu. Do we need larger icons? Some breathing space somewhere? A rounded background like in #6200 (comment)?

[JuliaKirschenheuter]

A rounded background like in #6200 (comment)?

I'm not sure, that rounded background would help (it looks nice, but we should rethink a way of positioning). My suggestion: leave only icons, without text, text put into <aria-label>. And change icons depends on the state (read - unread)

[jancborchardt]

It's also possible that now that actions can't have the whole width, we need to make sure translations cut their wording down too, like we did from "Mark as read" to "Read" etc.

Going icon-only is not really user-friendly, especially the "Important" icon is not common. Before we end up going that route, I'd say going back to putting the top 3 normally in the list is better. (But not before we tried the text cutting in translations.)

[JuliaKirschenheuter]

It's also possible that now that actions can't have the whole width, we need to make sure translations cut their wording down too, like we did from "Mark as read" to "Read" etc.

Hm, how could we influence translations in this special case?

Going icon-only is not really user-friendly, especially the "Important" icon is not common.

Ok

[ChristophWurst]

We have to adjust the English text and hope that the translations are also short.

We will likely run into strangely translated strings for some languages, though. Like the English Read will likely be translated to Lesen or Gelesen for German.

https://cdn.vox-cdn.com/uploads/chorus_asset/file/20032761/Hey_image_2.png they do something similar and it looks "designed".

[ChristophWurst]

I'm experiment with more modern, consistent icon design. I think this looks a bit more "designed" than what we currently have:

Before	After	After with rounded corners

Please ignore the other missing icons. This problem is tracked in #6478.

[jancborchardt]

@ChristophWurst nice, good stuff on using Material Design icons. Rounded corners also look good, but should then be done consistently in the menu entries below, as well as on the menu itself → @nimishavijay you mocked that up somewhere but I can’t find it, could you link it? :)

[ChristophWurst]

#6200 (comment).

I know those things are not tightly related, hence the two screenshots. But I'd push to get there soon.

[ChristophWurst]

Things are round now and look a lot better.