Add support for Mailvelope's encrypt and sign feature

skins/elastic/styles/widgets/toolbar.less

@@ -591,6 +591,12 @@
     a.vcard:before {
         content: @fa-var-paperclip;
     }
+    a.encrypt:before {
+        content: @fa-var-lock;
+    }
+    a.encrypt.sign:before {
+        content: @fa-var-lock; // TODO
+    }
 }
 
 .toolbarmenu.listing li {

skins/elastic/templates/compose.html

@@ -136,9 +136,14 @@
 				</a>
 			</span>
 			<roundcube:endif />
-			<roundcube:button command="compose-encrypted" type="link" class="button encrypt disabled"
+			<span class="dropbutton" style="display:none">
-				classAct="button encrypt" classSel="button encrypt selected" innerclass="inner"
+				<roundcube:button command="compose-encrypted" type="link" class="button encrypt disabled"
-				label="encrypt" title="encryptmessagemailvelope" tabindex="2" style="display:none" />
+					classAct="button encrypt" classSel="button encrypt selected" innerclass="inner"
+					label="encrypt" title="encryptmessagemailvelope" tabindex="2" />
+				<a href="#encryption" id="encryption-menu-button" class="button dropdown" tabindex="2" data-popup="encryption-menu">
+					<span class="inner"><roundcube:label name="encryptmessagemailvelope" /></span>
+				</a>
+			</span>
 			<roundcube:container name="toolbar" id="compose-toolbar" />
 		</div>
 	</div>
@@ -269,4 +274,11 @@
 	</ul>
 </div>
 
+<div id="encryption-menu" class="popupmenu">
+	<ul class="toolbarmenu listing" role="menu">
+		<roundcube:button command="compose-encrypted" type="link-menuitem" label="encryptmessage" class="encrypt" classAct="encrypt active" />
+		<roundcube:button command="compose-encrypted-signed" type="link-menuitem" label="encryptandsign" class="encrypt sign" classAct="encrypt sign active" />
+	</ul>
+</div>
+
 <roundcube:include file="includes/footer.html" />

skins/elastic/ui.js

@@ -1164,10 +1164,15 @@ function rcube_elastic_ui()
             case 'compose-encrypted':
                 // show the toolbar button for Mailvelope
                 if (args.status) {
-                    $('a.button.encrypt').show();
+                    $('a.button.encrypt').parent().show();
                 }
                 break;
 
+            case 'compose-encrypted-signed':
+                // enable selector for encrypt and sign
+                $('#encryption-menu-button').show();
+                break;
+
             case 'mark':
                 // show the toolbar button for Mailvelope
                 $('a.button.markmessage')[args.status ? 'removeClass' : 'addClass']('disabled');