tutanota
tutanota copied to clipboard
Change attachment layout in mail viewer
Ui proposals This approach might be a little bit more consistent in user navigation but we need to play around with really wide screens. It also does not use the bubbles anymore as we have the buttons available already.
One attachment
Multiple attachments - collapsed
Multiple attachments - expanded
So I went and implemented a quick working demo on top of Tutanota's current UI, and here is what it looks like on a widescreen display.
In normal usage, the window will look like this:
When stretched, the window will look like this:
And if we made just the attachments handle widescreen displays, it looks like this:
It seems if you set a maximum width on just the list, it will not be aligned with the rest of the mail. You could have it left aligned and the right side won't be aligned. And you could have it right aligned, but the left side won't be aligned. Center alignment gives a more neutral appearance, but it doesn't go with the rest of the mail, either.
After a short discussion with a couple people, we think it would probably be even better if widescreen support was a considered for the entire mail viewer's UI rather than just attachments, as that would allow the attachments to look more in place with the rest of the viewer, too.
The proposed list method is really nice, but we couldn't come up with a way to make it work at both lower and higher resolutions. I noted what the issues were at higher resolutions in my previous commit, but lower resolutions resulted in some more annoying issues, too, since we need room for both the attachment and the download button (and possibly an Open button).
As a list:
To make matters worse, some clients have some of these buttons disabled such as the web client having no Open button thus one of the buttons on the header does not have anything to align to:
We decided for now to stick to the old styling and just fix the problem with the buttons being in a weird location in between attachments.
We will need to revisit this later for the new layout.
Design work was done in #4290