Modify attachements view at thread envelope

[sazanof]

Hello! I don't know whether to open a PR or ISSUE, but as a suggestion, I decided to experiment a little with the visual arrangement of attachments in the message.
I don't know if my PR will be useful, but if there is an opportunity, please read it.

I'll try to attach a GIF to fully show the logic of the work. In this drop-down menu, it may be worth moving the preview as well

As an option - it would be possible to use vertical scrolling of two rows ...
Thank you!

Fixes #7120

[ChristophWurst]

@jancborchardt @nimishavijay please have a look. We can create a ticket if this needs any kind of discussion :)

[jancborchardt]

@sazanof very cool! Did you see the mockup by @nimishavijay at #5768 (comment) about attachments when writing a message?

We could use the same style here, and yours is mostly there, I’m mainly seeing 2 things:

• The menu icon should be on the right and displayed for all items, not only on hover (so it is discoverable and also works on mobile)
• Might be good to collapse it at a certain point if there are a lot of attachments

[sazanof]

@jancborchardt, @ChristophWurst hello! Yes, I saw this comment. I really liked the implementation. I came across it after (=)) how I implemented this functionality. So far I haven't figured out how to render previews. And so, I have already opened a branch in parallel to implement exactly the idea you referred to. However, there will be much more changes than those that I made earlier.

Perhaps as a temporary measure.

Why did I move the additional actions button to the icon - we mainly use laptops 1920x1080 15.6"
It seemed that there was not quite enough space both in the modal onk when creating a message and when viewing it. I decided to make it more compact. But here the user may suffer, he will not immediately understand where the button is =)

Might be good to collapse it at a certain point if there are a lot of attachments

maybe. I just looked at roundcube and a couple more email clients and made a display of all attachments at once.

[sazanof]

Do you think it might be worth moving the block with attachments above the body of the letter?

[sazanof]

I have received a lot of feedback from users that attachments on top are more convenient. I also looked at how it is implemented by other clients. In the vast majority - attachments are located on top. Therefore, I suggest you consider this revision. Perhaps, in terms of convenience, this is indeed the case. Thanks!

multiline

oneline

[st3iny]

@jancborchardt @nimishavijay Could we get another round of feedback for this (especially regarding showing on top vs bottom)? Both bullet points from the last review have been implemented.

[st3iny]

Awesome! I like it but have some minor pieces of feedback for you.

1. The outer hover container could need some padding (e.g. 5px). It looks a bit crammed when hovered.

2. This PR contains the same bug as #6631. The solution is at #6696. (Make only the image preview square clickable).

[sazanof]

@st3iny thank you for you review. I corrected the attachment padding and click on the image.

[st3iny]

Tested and works. My previous feedback was addressed.

I'd suggest to keep the attachments on the top and open an issue for discussion. This can be changed easily later.

[st3iny]

@sazanof Please squash your commits into one.

[nimishavijay]

It actually looks really good! The design itself looks great, only one question: Is the name of the file in bold? We should change it to regular.

I would actually expect the attachments to be below the body text. Gmail and Apple Mail show it below. Outlook shows it above. Do you know what other clients show it above?
I agree that in case there a lot of quoted text the attachments are easily accessible from above, but I think showing it above introduces additional complexity, for eg. requiring a collapse/expand action in case are there many attachments. I would suggest we show it below, always expanded to show all the attachments :)

[sazanof]

@nimishavijay hello! Thank you for your feedback!

Rainloop

Roundcube

TB (bottom, but with fixed position)

Yandex

I think it will be (almost) equally cool anywhere. Why did I give preference to the top? Because it immediately catches the eye, it is immediately emphasized that the letter has attachments. Yes, if the text is large, then as you said, in this case, attachments are also better on top.

The fact that they are collapsed in my opinion does not matter: there is a similar design of attachments when writing a letter.

I thought it would be more compact and clearer, more accessible. Of course, all decisions are yours. But I had to share my point of view. 🌹

PS. Yes, the bold font should be removed. 😅

UPD bold font restore to regular

[JuliaKirschenheuter]

The attachments on the top looks great, and works well (on mobile too)

[nimishavijay]

Thanks for the examples! I'm leaning towards showing it at the bottom because we try to avoid expanding/collapsing interactions, but since there are many clients which show on top this sounds alright as well :)
If we are going with showing at the top, we need a better indication of if there are more attachments, right now it's not so clear that there are 7 attachments because only 3 are shown by default. I would suggest having another smaller row at the bottom which says "View 4 more attachments" or something similar, and clicking on it would show the rest of the attachments.

cc @jancborchardt about the placement

[jancborchardt]

Agree with @nimishavijay (and the initial design) that attachments should be shown on the bottom. :)

• The text of the message is most likely more important than the attachments
• We already have an attachment indicator icon in the message list to communicate there are attachments
• Even if it's shown at the bottom and the message exceeds the viewport, they can be sticky at the bottom of the viewport for visibility
• Often there are useless or technical attachments which are visualized or used otherwise, like a PGP signature, or ics file which should be shown via iMIP, etc
• Sidenote: The most popular and well-designed mail apps (Google Mail and Apple Mail) show it at the bottom as well. So it's not about number of apps who dilo it, but more number of users / popularity. :)

Hope that clarifies it

[st3iny]

Don't merge yet due to what Jan and Nimisha said.

[sazanof]

@jancborchardt @nimishavijay like this?

[jancborchardt]

Yes @sazanof, beautiful! :)

[jancborchardt]

@st3iny I guess your review is outdated since @nimishavijay’s and my points were addressed? Design-wise this is good to go now. cc @ChristophWurst

[ChristophWurst]

this got lost. images should appear clickable if clicking triggers a preview. this will conflict with #7066

[sazanof]

Restored.

I didn't quite understand what exactly was lost. I didn't see the difference. Unless there was no style for .attachment span:hover.

[sazanof]

Hello! I resolved conflicts =)

[ChristophWurst]

Code and UI look good

This will likely conflict with #7066, which is planned to be merged today. I'll see if I can resolve the conflicts later on.

[sazanof]

This will likely conflict with #7066, which is planned to be merged today. I'll see if I can resolve the co

@ChristophWurst
Do I understand correctly that today "this" is normal behavior when clicking on an image? I updated main, made npm i && npm run watch and this error came out (I just couldn't understand why I couldn't fix the conflicts)

[ChristophWurst]

It is not expected. @GretaD ran into the same bug. Could you possibly provide the info from #7066 (comment)?

[ChristophWurst]

Tested & works