Make possible to add more recipient inputs via a popup menu

skins/elastic/templates/compose.html

@@ -96,7 +96,7 @@
 					<label for="_to" class="col-1 col-form-label"><roundcube:label name="to" /></label>
 					<div class="input-group col-11">
 						<roundcube:object name="composeHeaders" part="to" id="_to" tabindex="1" aria-required="true" data-recipient-input="true" />
-						<a href="#add-header" onclick="/* TODO */" class="input-group-addon icon add" title="<roundcube:label name="addheader" />" tabindex="1"><span class="inner"><roundcube:label name="addheader" /></span></a>
+						<a href="#add-header" data-popup="headers-menu" class="input-group-addon icon add" title="<roundcube:label name="addheader" />" tabindex="1"><span class="inner"><roundcube:label name="addheader" /></span></a>
 					</div>
 				</div>
 				<div id="compose_cc" class="hidden form-group row">
@@ -185,10 +185,20 @@
 
 <div id="spell-menu" class="popupmenu" data-popup-init="spellmenu"></div>
 
+<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"><roundcube:label name="cc" /></a></li>
+		<li role="menuitem"><a data-target="bcc" href="#" role="button" tabindex="-1"><roundcube:label name="bcc" /></a></li>
+		<li role="menuitem"><a data-target="replyto" href="#" role="button" tabindex="-1"><roundcube:label name="replyto" /></a></li>
+		<li role="menuitem"><a data-target="followupto" href="#" role="button" tabindex="-1"><roundcube:label name="followupto" /></a></li>
+	</ul>
+</div>
+
 <div id="responses-menu" class="popupmenu">
 	<h3 id="aria-label-responsesmenu" class="voice"><roundcube:label name="arialabelresponsesmenu" /></h3>
 	<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-responsesmenu">
-		<li role="separator" class="separator" id=""><label><roundcube:label name="insertresponse" /></label></li>
+		<li role="separator" class="separator"><label><roundcube:label name="insertresponse" /></label></li>
 		<roundcube:object name="responseslist" id="responseslist" tagname="ul" itemclass="active" />
 		<li role="separator" class="separator"><label><roundcube:label name="manageresponses" /></label></li>
 		<roundcube:button command="save-response" type="link-menuitem" label="newresponse" class="newresponse" classAct="newresponse active" unselectable="on" />

skins/elastic/ui.js

@@ -48,6 +48,7 @@ function rcube_elastic_ui()
     this.about_dialog = about_dialog;
     this.spellmenu = spellmenu;
     this.searchmenu = searchmenu;
+    this.headersmenu = headersmenu;
     this.attachmentmenu = attachmentmenu;
 
 
@@ -1095,6 +1096,19 @@ function rcube_elastic_ui()
         }
     };
 
+    /**
+     * Headers menu in mail compose
+     */
+    function headersmenu(obj, button, event)
+    {
+        $('li > a', obj).each(function() {
+            var target = '#compose_' + $(this).data('target');
+
+            $(this)[$(target).is(':visible') ? 'removeClass' : 'addClass']('active')
+                .off().on('click', function() { $(target).removeClass('hidden'); });
+        });
+    };
+
     /**
      * Replaces recipient input with content-editable element that uses "recipient boxes"
      */
@@ -1258,6 +1272,10 @@ function rcube_elastic_ui()
             .on('focus', function(e) { input.focus(); })
             .on('change', function(e) { input.text(this.value).change(); });
 
+        // this one line is here to fix border of Bootstrap's input-group
+        // input-group should not contain any hidden elements
+        $(obj).detach().insertBefore(input.parent());
+
         // Copy and parse the value already set
         input.text($(obj).val()).change();