Add "List is empty..." element (#76)

skins/elastic/styles/layout.less

@@ -115,6 +115,7 @@ body > #layout {
 
         & > .scroller {
             flex: 1;
+            position: relative; // for .listing-info positioning
         }
 
         & > .content.only > .scroller {

skins/elastic/styles/widgets/lists.less

@@ -180,6 +180,17 @@ ul.listing {
     }
 }
 
+.listing-info {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 80%;
+    text-align: center;
+    font-weight: bold;
+    color: @color-list-secondary;
+}
+
 html.touch {
     .listing:not(.toolbar) li,
     .listing tbody td {

skins/elastic/templates/addressbook.html

@@ -35,8 +35,9 @@
 	<roundcube:include file="includes/pagenav.html" />
 	<div class="scroller">
 		<h2 id="aria-label-contactslist" class="voice"><roundcube:label name="contacts" /></h2>
-		<roundcube:object name="addresslist" id="contacts-table" class="listing iconized contactlist" noheader="true"
-			role="listbox" data-list="contact_list" />
+		<roundcube:object name="addresslist" id="contacts-table" class="listing iconized contactlist"
+			noheader="true" role="listbox" data-list="contact_list"
+			data-label-msg="listempty" data-label-ext="listusebutton" data-create-command="add" />
 	</div>
 </div>
 

skins/elastic/templates/folders.html

@@ -15,7 +15,8 @@
 	</div>
 	<div class="scroller" tabindex="-1">
 		<roundcube:object name="foldersubscription" id="subscription-table"
-			class="treelist listing folderlist iconized" role="listbox" data-list="subscription_list" />
+			class="treelist listing folderlist iconized" role="listbox" data-list="subscription_list"
+			data-label-msg="listempty" data-label-ext="listusebutton" data-create-command="folder-create" />
 	</div>
 	<div class="footer">
 		<roundcube:if condition="env:quota" />

skins/elastic/templates/identities.html

@@ -12,8 +12,9 @@
 		<a class="button icon toolbar-menu-button" href="#list-menu"><span class="inner"><roundcube:label name="menu" /></span></a>
 	</div>
 	<div class="scroller">
-		<roundcube:object name="identitieslist" id="identities-table" class="listing" noheader="true"
-			role="listbox" data-list="identity_list" />
+		<roundcube:object name="identitieslist" id="identities-table" class="listing"
+			noheader="true" role="listbox" data-list="identity_list"
+			data-label-msg="listempty" data-label-ext="listusebutton" data-create-command="add" />
 	</div>
 	<div class="footer"></div>
 </div>

skins/elastic/templates/mail.html

@@ -40,12 +40,10 @@
 	<roundcube:include file="includes/pagenav.html" />
 	<div id="messagelist-content" class="scroller" tabindex="-1">
 		<h2 id="aria-label-messagelist" class="voice"><roundcube:label name="arialabelmessagelist" /></h2>
-		<roundcube:object name="messages"
-			id="messagelist"
+		<roundcube:object name="messages" id="messagelist" optionsmenuIcon="true"
 			class="listing messagelist sortheader fixedheader"
-			optionsmenuIcon="true"
 			aria-labelledby="aria-label-messagelist"
-			data-list="message_list"
+			data-list="message_list" data-label-msg="listempty"
 		/>
 	</div>
 	<div id="messagelist-footer" class="footer toolbar" role="toolbar">

skins/elastic/templates/responses.html

@@ -12,8 +12,9 @@
 		<a class="button icon toolbar-menu-button" href="#list-menu"><span class="inner"><roundcube:label name="menu" /></span></a>
 	</div>
 	<div class="scroller">
-		<roundcube:object name="responseslist" id="responses-table" class="listing" noheader="true"
-			role="listbox" data-list="responses_list" />
+		<roundcube:object name="responseslist" id="responses-table" class="listing"
+			noheader="true" role="listbox" data-list="responses_list"
+			data-label-msg="listempty" data-label-ext="listusebutton" data-create-command="add" />
 	</div>
 	<div class="footer"></div>
 </div>

skins/elastic/ui.js

@@ -424,10 +424,14 @@ function rcube_elastic_ui()
      */
     function init()
     {
-        // Enable checkbox selection on list widgets
+        // Additional functionality on list widgets
         $('table[data-list]').each(function() {
-            var button, table = $(this), list = table.data('list');
+            var button,
+                table = $(this),
+                list = table.data('list');
+
             if (rcmail[list] && rcmail[list].multiselect) {
+                // Enable checkbox selection on list widgets
                 rcmail[list].checkbox_selection = true;
 
                 // Add Select button to the list navigation bar
@@ -461,6 +465,54 @@ function rcube_elastic_ui()
             }
         });
 
+        // Display "List is empty..." on the list
+        if (window.MutationObserver) {
+            $('[data-label-msg]').filter('li,table').each(function() {
+                var fn, observer, callback,
+                    info = $('<div class="listing-info hidden">').insertAfter(this),
+                    table = $(this),
+
+                fn = function() {
+                    var ext, command,
+                        msg = table.data('label-msg'),
+                        list = table.is('ul') ? table : table.children('tbody');
+
+                    if (!rcmail.env.search_request && !rcmail.env.qsearch
+                        && msg && !list.children(':visible').length
+                    ) {
+                        ext = table.data('label-ext');
+                        command = table.data('create-command');
+
+                        if (ext && (!command || rcmail.commands[command])) {
+                            msg += ' ' + ext;
+                        }
+
+                        info.text(msg).removeClass('hidden');
+                        return;
+                    }
+
+                    info.addClass('hidden');
+                };
+
+                callback = function() {
+                    // wait until the UI stops loading and the list is visible
+                    if (rcmail.busy || !table.is(':visible')) {
+                        return setTimeout(callback, 250);
+                    }
+
+                    clearTimeout(env.list_timer);
+                    env.list_timer = setTimeout(fn, 50);
+                };
+
+                // show/hide the message when something changes on the list
+                observer = new MutationObserver(callback);
+                observer.observe(table[0], {childList: true, subtree: true, attributes: true, attributeFilter: ['style']});
+
+                // initialize the message
+                callback();
+            });
+        }
+
         // Create floating action button(s)
         if (layout.list.length && is_mobile()) {
             var fabuttons = [];