Customizing the Nextcloud Mail App

As the mail app developers don’t want to add a horizontal reading pane to the app I have been using the custom css app 5 in order to do so, I also wrote a quick user script to automatically expand all my folders as that isn't an option in the mail app.

Jump to the Auto Expand script

Horizontal reading pane in mail app

Note: Tested in Firefox and Nextcloud 15

Usage:

1. Know what you are doing.
2. Install the custom css app.
3. Navigate to Admin -> Theming.
4. Paste contents of this CSS file into the custom CSS text area 6.
5. Save.

Currently I have:

• The basic Horizontal layout
• Added a resize to the message list so you can drag it up and down for simpler management of mail
• Added a yellow highlight to The images have been blocked to protect your privacy notification
• Added the color #ebebeb as the message header background to better separate panes
• Added a thick border color #ebebeb to the top of the reply field to better separate it from the current message
• Shrunk the load more messages scroll down area
• Realigned the empty messages background
• Changed subfolder background color from gradient to solid
• Added indicator line to subfolder Parent
• Added indicator line and Bold text to open Parent Folder

Auto Expand mail folders using GreaseMonkey

Requirements:

1. The Latest Firefox
2. Greasemonkey 4.3 or greater

Open the Greasemonkey dashboard and click the + sign to add a new script.

Past the following code, changing the yourdomain.tld to your domain:

// ==UserScript==
// @name     Nextcloud Mail Expand folders
// @namespace   https://yourdomain.tld/
// @include     https://yourdomain.tld/apps/mail/*
// @require     https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
// @require     https://gist.github.com/raw/2625891/waitForKeyElements.js
// @version  1
// @grant    NEXTCLOUDMAIL
// ==/UserScript==

/* Paste Here */

this.$ = this.jQuery = jQuery.noConflict(true);

console.log('[ NMEF ] - Waiting');
waitForKeyElements (".navigation-account", expandALL, true);

function expandALL() {
  console.log('[ NMEF ] - Expand ALL Folders');
  $('.account-toggle-collapse').trigger("click");
  console.log('[ NMEF ] - Expand individual Folders');
    $('.with-counter.collapsible > button').trigger('hover').trigger("click");
    $('.with-counter.collapsible.ui-droppable > button').trigger('hover').trigger("click");
}

Note: this loads the remote content jquery and waitForKeyElements.js, if you wish to have them bound locally open the // @require links and past the contents at the / Paste Here / line. Then just delete the lines:

// @require     https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
// @require     https://gist.github.com/raw/2625891/waitForKeyElements.js