- Make menu button inactive if all subactions are inactive (#6444)

Elastic skin only (for now)

CHANGELOG

@@ -11,6 +11,7 @@ CHANGELOG Roundcube Webmail
 - Password: Added 'modoboa' driver (#6361)
 - Password: Fix bug where password_dovecotpw_with_method setting could be ignored (#6436)
 - Password: Fix bug where new users could skip forced password change (#6434)
+- Elastic: Make menu button inactive if all subactions are inactive (#6444)
 - Elastic: On mobile/tablet jump to the list on folder selection (#6415)
 - Elastic: Various improvements on mail compose screen (#6413)
 - Elastic: Support new-line char as a separator for pasted recipients (#6460)

program/include/rcmail_output_html.php

@@ -1628,8 +1628,9 @@ EOF;
         else if ($attrib['type'] == 'link') {
             $btn_content = isset($attrib['content']) ? $attrib['content'] : ($attrib['label'] ? $attrib['label'] : $attrib['command']);
             $link_attrib = array_merge(html::$common_attrib, array('href', 'onclick', 'tabindex', 'target', 'rel'));
-            if ($attrib['innerclass'])
+            if ($attrib['innerclass']) {
                 $btn_content = html::span($attrib['innerclass'], $btn_content);
+            }
         }
         else if ($attrib['type'] == 'input') {
             $attrib['type'] = 'button';

program/js/app.js

@@ -47,6 +47,7 @@ function rcube_webmail()
   this.group2expand = {};
   this.http_request_jobs = {};
   this.menu_stack = [];
+  this.menu_buttons = [];
   this.entity_selectors = [];
   this.image_style = {};
 
@@ -121,6 +122,47 @@ function rcube_webmail()
       this.init_button(command, button_prop);
   };
 
+  // register a button with popup menu, to set its state according to the state of all commands in the menu
+  this.register_menu_button = function(button, menu_id)
+  {
+    var commands = [];
+
+    $('#' + menu_id).find('a').each(function() {
+      var command, link = $(this), onclick = link.attr('onclick');
+
+      if (onclick && String(onclick).match(/rcmail\.command\(\'([^']+)/))
+        command = RegExp.$1;
+      else
+        command = function() { return link.is('.active'); };
+
+      commands.push(command);
+    });
+
+    if (commands.length)
+      this.menu_buttons.push([button, commands]);
+
+    this.set_menu_buttons();
+  };
+
+  // set state of a menu button according to state of all menu actions
+  this.set_menu_buttons = function()
+  {
+    // Use timeouts to not block and set menu button states only once
+    clearTimeout(this.menu_buttons_timeout);
+    this.menu_buttons_timeout = setTimeout(function() {
+      $.each(ref.menu_buttons, function() {
+        var disabled = true;
+        $.each(this[1], function() {
+          var is_func = typeof(this) == 'function';
+          if ((is_func && this()) || (!is_func && ref.commands[this])) {
+            return disabled = false;
+          }
+        });
+        $(this[0]).addClass(disabled ? 'disabled' : 'active').removeClass(disabled ? 'active' : 'disabled');
+      });
+    }, 50);
+  };
+
   // register a specific gui object
   this.gui_object = function(name, id)
   {
@@ -666,6 +708,9 @@ function rcube_webmail()
         this.onloads[n]();
     }
 
+    // register menu buttons
+    $('[data-popup]').each(function() { ref.register_menu_button(this, $(this).data('popup')); });
+
     // start keep-alive and refresh intervals
     this.start_refresh();
     this.start_keepalive();
@@ -1463,6 +1508,8 @@ function rcube_webmail()
           args.push(cmd[i]);
       }
     }
+
+    this.set_menu_buttons();
   };
 
   this.command_enabled = function(cmd)

skins/elastic/styles/styles.less

@@ -111,6 +111,10 @@ a {
         color: @color-link-hover;
     }
 
+    &.disabled {
+        pointer-events: none;
+    }
+
     &.disabled:not(.btn) {
         opacity: .5;
     }

skins/elastic/templates/compose.html

@@ -229,10 +229,10 @@
 <div id="headers-menu" class="popupmenu" data-popup-init="headersmenu">
 	<h3 id="aria-label-headersmenu" class="voice"><roundcube:label name="arialabelheadersmenu" /></h3>
 	<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-headersmenu">
-		<li role="menuitem"><a data-target="cc" href="#" role="button" tabindex="-1" class="recipient"><roundcube:label name="cc" /></a></li>
-		<li role="menuitem"><a data-target="bcc" href="#" role="button" tabindex="-1" class="recipient"><roundcube:label name="bcc" /></a></li>
-		<li role="menuitem"><a data-target="replyto" href="#" role="button" tabindex="-1" class="recipient"><roundcube:label name="replyto" /></a></li>
-		<li role="menuitem"><a data-target="followupto" href="#" role="button" tabindex="-1" class="recipient"><roundcube:label name="followupto" /></a></li>
+		<li role="menuitem"><a data-target="cc" href="#" role="button" tabindex="-1" class="recipient active"><roundcube:label name="cc" /></a></li>
+		<li role="menuitem"><a data-target="bcc" href="#" role="button" tabindex="-1" class="recipient active"><roundcube:label name="bcc" /></a></li>
+		<li role="menuitem"><a data-target="replyto" href="#" role="button" tabindex="-1" class="recipient active"><roundcube:label name="replyto" /></a></li>
+		<li role="menuitem"><a data-target="followupto" href="#" role="button" tabindex="-1" class="recipient active"><roundcube:label name="followupto" /></a></li>
 	</ul>
 </div>
 

skins/elastic/templates/mail.html

@@ -32,9 +32,9 @@
 		<a class="button icon back-sidebar-button folders" href="#sidebar"><span class="inner"><roundcube:label name="mailboxlist" /></span></a>
 		<span class="header-title"></span>
 		<div class="toolbar" role="toolbar">
-			<a href="#select" class="button select active" data-popup="listselect-menu" data-toggle-button="list-toggle-button" title="<roundcube:label name="select" />"><span class="inner"><roundcube:label name="select" /></span></a>
+			<a href="#select" class="button select disabled" data-popup="listselect-menu" data-toggle-button="list-toggle-button" title="<roundcube:label name="select" />"><span class="inner"><roundcube:label name="select" /></span></a>
 			<roundcube:if condition="env:threads" />
-				<a href="#threads" class="button threads active" data-popup="threadselect-menu" title="<roundcube:label name="threads" />"><span class="inner"><roundcube:label name="threads" /></span></a>
+				<a href="#threads" class="button threads disabled" data-popup="threadselect-menu" title="<roundcube:label name="threads" />"><span class="inner"><roundcube:label name="threads" /></span></a>
 			<roundcube:endif />
 			<roundcube:object name="listmenulink" class="button settings active" label="options" innerclass="inner" />
 			<roundcube:container name="listcontrols" id="listcontrols" />

skins/elastic/ui.js

@@ -2530,6 +2530,10 @@ function rcube_elastic_ui()
      */
     function import_dialog()
     {
+        if (!rcmail.commands['import-messages']) {
+            return;
+        }
+
         var content = $('#uploadform'),
             dialog = content.clone();
 
@@ -2795,11 +2799,13 @@ function rcube_elastic_ui()
     function headersmenu(obj, button, event)
     {
         $('li > a', obj).each(function() {
-            var target = '#compose_' + $(this).data('target');
+            var link = $(this), target = '#compose_' + link.data('target');
 
-            $(this)[$(target).is(':visible') ? 'removeClass' : 'addClass']('active')
+            link[$(target).is(':visible') ? 'removeClass' : 'addClass']('active')
                 .off().on('click', function() {
                     $(target).removeClass('hidden').find('.recipient-input input').focus();
+                    link.removeClass('active');
+                    rcmail.set_menu_buttons();
                 });
         });
     };
@@ -2812,6 +2818,9 @@ function rcube_elastic_ui()
         $('#' + id).val('').change()
             // jump to the next input
             .closest('.form-group').nextAll(':not(.hidden)').first().find('input').focus();
+
+        $('a[data-target=' + id.replace(/^_/, '') + ']').addClass('active');
+        rcmail.set_menu_buttons();
     };
 
     /**