Modern UI / Nextcloud Theme

[hampoelz]

Introduction

In order to improve the experience with snappymail - especially with the snappymail app for nextcloud - I decided to create a new snappymail theme that follows the style of nextcloud and offers an integration with the nextcloud theme app to provide a seamless experience.

Already mentioned in: #96 and #569

Compromises

SnappyMail's default CSS variables for styling

I didn't use SnappyMail's variables for two reasons:

• I've played around with these CSS variables provided by snappymail for styling, but they seemed incomplete and inconsistent.
• Since Snappymail needed a complete theme overhaul anyway, I redesigned each element individually.

So it was cleaner for me not to use the snappymail variables.

Suggestions/Discussion

placeholder for blocked images

Currently there are some issues with blocking images/tracking in mail - it leads to wrong layouts or even distorted images - and it just doesn't look good in the end.

My suggestion would be instead of displaying broken/not loaded images, display styleable placeholders with a width and height - like many other webmail pages (Roundcube, Protonmail, ...) do.

standalone SnappyMail theme

It would also be possible to add this theme to the "standalone" Snappymail version - color changes of the theme are possible through the variables.css-file I added. When the theme is done, it should be possible to change every single color using this file/css variables - unlike SnappyMail's current CSS variables.

(Disadvantage: These variables are then applied globally to the entire theme and are not as modular as those of snappymail, where each area (login, settings, ...) can be color-adjusted individually.)

Nextcloud backwards compatibility

I only tested the theme on Nextcloud 25, as this is the upstream version. Theoretically, the theme could also be provided for older versions.

---

Checklist

To give an insight into the current status of the theme, here is a checklist:

• side panel
• buttons
• checkboxes
• input & selection fields
• message list & view
• message flags
• dropdown menus
• popups
• file picker
• loading- & login-screen
• responsive design
• scrollbars
• settings pages
• placeholder for blocked images?
• [something else I forgot or is incomplete?]

ℹ️ The theme is currently in test phase. Feedback is appreciated.

---

Conclusion

The theme isn't quite finished yet, but it's already usable. This pull request is used to provide some information about the status of the theme and to track the progress.

To have a larger discussion on any of the above topics, consider creating a separate issue as it is beyond the scope of this PR.

[the-djmaze]

Great work hampoelz!
Instead of /integrations/nextcloud/snappymail/app/themes/Nextcloud/styles.css
Could you put it in something like /integrations/nextcloud/snappymail/app/themes/Nextcloud25/styles.css

This way there's my simple CSS and your terrific advanced one.
Then you don't have to solve conflicts with my changes and we could easily put yours as default and provide the other as reference as well so that people can modify yours/mine.

[the-djmaze]

Sorry, it seems i accidentally released your WIP in the Nextcloud release while i was testing your work.

I've removed it so that next release won't have it.

[hampoelz]

Ah, no problem. Let's just say it's a short public test. ;)

But you might want to take a look at Nextcloud app release automations to prevent such things.
https://docs.nextcloud.com/server/latest/developer_manual/app_publishing_maintenance/release_automation.html

[Niveshkrishna]

Great work @hampoelz this new theme looks amazing. Wondering what is pending for it be released @the-djmaze

[elhananjair]

@hampoelz How can we install this theme for a test?

[hampoelz]

@elhananjair You need to perform the following steps to install the theme:

First download the files styles.css and images/preview.png from this pull request.

Then create a folder named "NextcloudV25+" inside your_nextcloud_root/custom_apps/snappymail/app/themes/ if you're using Nextcloud, or your_snappymail_root/snappymail/v/x.x.x/themes/ if you're using the standalone SnappyMail version.

Finally, copy the previously downloaded files to .../NextcloudV25+/styles.css and .../NextcloudV25+/images/preview.png.

Since the theme isn't officially included yet, you need to reinstall it after each SnappyMail update.

Note: Depending on your Nextcloud installation, SnappyMail may be installed in the apps folder instead of custom_apps.

[elhananjair]

Thank you very much, I like it a lot and it seems complete, here are some little comments I have on it on my first use:

Text-overflow

HTML Rendered differently

New tags do not have color assigned

[hampoelz]

@elhananjair Thank you very much for your report.

• The text overflow issue in the sidebar menu items should be fixed now.
• The issue with the HTML rendering shouldn't be related to the theme.
• I didn't set a color for custom tags, since they don't actually have one. But you're right, this isn't optimal. The custom tags in the dropdown are now marked with the same gray color as in the list of assigned message tags.

[elhananjair]

Hello @hampoelz
I wanted to suggest this change if you could add more contrast to the layout, I tried this take a look and comment...

1. Search input should not have a check box I guess
2. The top tools are not well contrasted with the component listing emails and the content on the right (In my opinion). This will help us to focus on a new email list and easily apply the top options.

[hampoelz]

Hey @elhananjair,

The checkbox next to the search bar is for selecting all mails at once and is provided by SnappyMail, not by the theme.

I don't want to change the contrast much as it wouldn't match the rest of the Nextcloud theming. Also, I don't think it's a good idea to separate the search more from the list. However, after some fiddling around, I came up with the following style, which would at least contrast the top tools slightly:

[elhananjair]

Hello @hampoelz

I liked the style you applied to the top tools, which, I think is enough for slight contrast between the top tools and other components.

[cm-schl]

@the-djmaze the work of @hampoelz looks very good, would you add something or could this PR be merged? 🙂

[johnnyq]

Yup I think its ready for the merge as well

[elhananjair]

I hope this theme will be the default theme for Snappymail.

[cm-schl]

Thanks again @hampoelz for your great work 🙂🥳

[eibex]

Is it possible to use this without the Nextcloud app? I run snappymail on a separate domain but it can also be accessed via an iframe on nextcloud. For now I created a custom theme by copying your styles.css (great work btw), but it would be great if it was available as a "normal" theme.

[hampoelz]

The theme is not dependent on Nextcloud. So it would be theoretically possible.

It even contains styles for some elements that are not shown in the Nextcloud version of SnappyMail, like the login screen.

[jdaviescoates]

I'm not sure this is really the best place to ask/ suggest this, but on larger screens I think I'd prefer the top tools to be left aligned instead of centred. Is that possible? (possibly even already possibly someone in a setting?)

[the-djmaze]

The theme is not dependent on Nextcloud. So it would be theoretically possible.

Then i will move it from https://github.com/the-djmaze/snappymail/tree/master/integrations/nextcloud/snappymail/app/themes/NextcloudV25%2B to https://github.com/the-djmaze/snappymail/tree/master/snappymail/v/0.0.0/themes

[hampoelz]

I will take this into consideration @jdaviescoates. But this may take a few weeks as I want to wait for feedback / issues before creating a PR with fixes and improvements for the theme.