Mail app Feature Requests : UI enhance

[jdaviescoates]

This should perhaps be a new thread, but I also have some UI requests:

Mostly, I've never liked split-screen UIs and would much prefer a Gmail-like interface, like in SnappyMail:

Similarly, I've never understood why Nextcloud Mail (and also now Cloudron Mail) default to having such a tiny compose pop-up:

Again, I much prefer being able to use all of my screens real estate, again, like in SnappyMail:

Perhaps one way to achieve this would be to remember that last size it was resized to? then I could just resize it to e.g. something like this and it'd remember that's how I like it?

Also, it's a strange UX that when minimising the compose window it just become as random little floating bar, rather than e.g. being docked down the bottom of the screen as in Gmail:

[timconsidine]

UI is always difficult because firm preferences on either side of any option.
Only real solution is to support both ways of a particular option and let user choose in settings.
Cloudron Mail Settings are sparse compared to some clients, so while I would not advocate for a forest of options, there is scope for a few more UI options there.

[timconsidine]

@humpty installed Firefox Stylus plugin.
Works a treat.
Thanks for the recommendation.

[humpty]

@timconsidine I also use with Youtube & Facebook to "declutter" the UI a bit There's a section that redirects you to a site that has user codes that you can browse/add.

[nebulon]

Ok so I think I have fixed all of the original issues:

new package requires new cloudron version, so that is a bit delayed for testing

[jdaviescoates]

@nebulon said:

Ok so I think I have fixed all of the original issues:

Looking forward to testing. BTW, but "the original issues" I presume that's just these ones?

@timconsidine said:

ability to star certain messages
show read mail in different colour, not simply a non-bold same colour as unread mail
sort options include Date up/down and From up/down but To up/down would also be helpful (mail in an inbox is not always to mailbox address)
filter for unread would also be useful

And therefore any other UI or additional suggestions shared in this now solved thread ought to get their own new thread to make it easier for you to track?

[nebulon]

ah yes please create a new one for the non-split view to keep track.

from the above issues the toplevel folder creation and the spam mail direct deletion is also fixed

[jdaviescoates]

@nebulon I've added three new feature request posts:

https://forum.cloudron.io/topic/16082/mail-app-feature-request-add-no-split-screen-option-and-horizontal-vertical-options-for-those-that-like-splits

https://forum.cloudron.io/topic/16083/mail-app-feature-request-larger-compose-window-or-just-remember-last-re-sized-size

https://forum.cloudron.io/topic/16084/mail-app-feature-request-improve-minimized-compose-ux

Thanks!

[sponch]

mh...my mail app does not update since 1.1.1 although there seem to be 2 package updates. Any hidden dependencies?

[nebulon]

yes, it relies on new cloudron platform changes, so the update will show when Cloudron is updated to at least 10.1.1

[sponch]

thanks for the explanation

[humpty]

@timconsidine the latest mail updates changed the code and the circle got wonky so here's an updated version. I went with gold, similar to the app's native yellow for the unread bar and still matches with the blue nicely.

.mail-item.unread {
    color: #ffbf00 !important;
    animation: pulseUnread 2.3s ease-in-out infinite;
}

@keyframes pulseUnread {
0%, 100% { opacity: 0.50; }
50%      { opacity: 1; }
}

.mail-item.unread::after {
    width: 4px !important;
    background-color: #ffbf00 !important;
}

---

 

Edit: This version modifies the starred icon as well (drop in replacement code for the above).

.mail-item.unread {
    color: #ffbf00 !important;
    animation: pulseUnread 2.3s ease-in-out infinite;
}

@keyframes pulseUnread {
0%, 100% { opacity: 0.50; }
50%      { opacity: 1; }
}

.mail-item.unread::after {
    width: 4px !important;
    background-color: #ffbf00 !important;
}

.col-star.starred {
    color: #ffbf00 !important;
    animation: glowUnread 1.8s ease-in-out infinite;
}

@keyframes glowUnread {
    0%, 100% {
        opacity: 0.6;
        filter: drop-shadow(0 0 1px #f50);
    }
    50% {
        opacity: 1;
        filter: drop-shadow(0 0 5px #f50);
    }
}

[timconsidine]

@humpty thank you !

[humpty]

My bad! I did that code when my system was in dark mode and now the yellow isn't visible on the white. I added a dark blue background to make the text pop.

.mail-item.unread {
    color: #ffbf00 !important;
    background: #124978;
    animation: pulseUnread 2.3s ease-in-out infinite;
}

@keyframes pulseUnread {
0%, 100% { opacity: 0.50; }
50%      { opacity: 1; }
}

.mail-item.unread::after {
    width: 4px !important;
    background-color: #ffbf00 !important;
}

.col-star.starred {
    color: #ffbf00 !important;
    animation: glowUnread 1.8s ease-in-out infinite;
}

@keyframes glowUnread {
    0%, 100% {
        opacity: 0.6;
        filter: drop-shadow(0 0 1px #f50);
    }
    50% {
        opacity: 1;
        filter: drop-shadow(0 0 5px #f50);
    }
}

[timconsidine]

@humpty I only use dark mode, but goo to have the option