Composer alignment and text issues

[ChristophWurst]

Steps to reproduce

1. Open the app
2. Add an account
3. Click + New message

Expected behavior

Good design

Actual behavior

1. The From selector and the To and CC boxes are not aligned properly
2. From has a scrollbar with accounts that have very long names or email addresses (or both)

Mail app version

No response

Mailserver or service

No response

Operating system

No response

PHP engine version

None

Web server

None

Database

None

Additional info

No response

[ChristophWurst]

I'm still discussing how the alignment can actually be improved

1. From is shorter to make room for the modal minimize/maximize/close actions
2. To is shorter to make room for the cc/bcc toggle
3. CC/BCC take full width

Some options

1. Move everything down to avoid the collision with the modal actions and make all NcSelects as wide as the To NcSelect
2. Make all NcSelects full width and put the cc/bcc toggle elsewhere (actions menu?)

cc @jancborchardt @nimishavijay

[ChristophWurst]

New idea:

• All the boxes (From, To, CC) should have the same width.
• The From field should always be a one line box. Cut the email if it doens't fit. Everyone will get the different sender addresses based on the visual part

[ChristophWurst]

we could do it like this. If we always show the cc/bcc inputs then we eliminate the toggle button.

@jancborchardt @nimishavijay please let us know if this is ok for you

[nimishavijay]

Move everything down to avoid the collision with the modal actions

This sounds good! In the future, if the width of the from/to/cc/bcc labels can be reduced, they can be left aligned and on the top row with the modal actions there could be a "New message" heading for the modal too.

Make all NcSelects full width and put the cc/bcc toggle elsewhere

This sounds good to me too. Not sure about an action menu elsewhere, but would it be possible to have a button inside the "To" field which toggles cc/bcc fields? Something like the emoji picker button in Talk.

If we always show the cc/bcc inputs then we eliminate the toggle button.

This I would generally advise against, as then the body text field will be very small, and this is where people spend most time while composing.

The From field should always be a one line box. Cut the email if it doens't fit. Everyone will get the different sender addresses based on the visual part

This is also something I would advise against, as a lot of people have the same name for their account but different email addresses, and often even the email addresses are differentiated only at the end (eg. alex.doe@abc.com for work vs alex.doe@xyz.edu for uni vs alex.doe@gmx.de for personal). In fact I would even suggest that the email and avatars are the most important part and if anything the name can be removed.

[ChristophWurst]

would it be possible to have a button inside the "To" field which toggles cc/bcc fields? Something like the emoji picker button in Talk.

I've checked https://nextcloud-vue-components.netlify.app/#/Components/NcSelect?id=ncselect-1 and https://vue-select.org/api/slots.html and there is no option for a floating button

[ChristophWurst]

^ except no bold font for the cc/bcc toggle is the designer spec

[ChristophWurst]

from has a scrollbar with accounts that have very long names or email addresses (or both)

Something I can't wrap my head around is that at https://nextcloud-vue-components.netlify.app/#/Components/NcSelect long options use https://github.com/nextcloud-libraries/nextcloud-vue/blob/master/src/components/NcEllipsisedOption/NcEllipsisedOption.vue while in our app it's not used. @GVodyanov please investiage with the Vue tools.

[GVodyanov]

from has a scrollbar with accounts that have very long names or email addresses (or both)

Something I can't wrap my head around is that at https://nextcloud-vue-components.netlify.app/#/Components/NcSelect long options use https://github.com/nextcloud-libraries/nextcloud-vue/blob/master/src/components/NcEllipsisedOption/NcEllipsisedOption.vue while in our app it's not used. @GVodyanov please investiage with the Vue tools.

Basically because that's what we specified: inside the #selected-option-container slot we specify a RecipientListItem (custom mail component) to be used. I assume this is because NcEllipsisedOption doesn't have support for images. The only issue here was RecipientListItem had some old styling that needed to be updated. @ChristophWurst

[ChristophWurst]

Makes sense. Thanks!