Replace "Add to addressbook" icon with a menu (#47)

skins/elastic/styles/widgets/buttons.less

@@ -13,7 +13,7 @@
 
 
 a.rcmaddcontact {
-    text-decoration: none;
+    display: none;
 }
 
 .button.disabled {
@@ -110,15 +110,6 @@ a.button.icon {
     }
 }
 
-a.rcmaddcontact:before {
-    &:extend(.font-icon-class);
-    content: @fa-var-user-plus;
-    display: inline;
-    float: none;
-    margin-left: 5px;
-    font-size: inherit;
-}
-
 @media screen and (max-width: @screen-width-small) {
     .btn:focus {
         box-shadow: none;

skins/elastic/styles/widgets/toolbar.less

@@ -439,6 +439,12 @@
     a.insertresponse:before {
         content: @fa-var-comment;
     }
+    a.compose:before {
+        content: @fa-var-edit;
+    }
+    a.addressbook:before {
+        content: @fa-var-user;
+    }
 }
 
 #layout > .sidebar,

skins/elastic/templates/message.html

@@ -49,9 +49,18 @@
 <div id="attachmentmenu" class="popupmenu">
 	<h3 id="aria-label-attachmentmenu" class="voice"><roundcube:label name="arialabelattachmentmenu" /></h3>
 	<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-attachmentmenu">
-		<roundcube:button command="open-attachment" id="attachmenuopen" type="link-menuitem" label="open" class="extwin" classAct="extwin active" />
-		<roundcube:button command="download-attachment" id="attachmenudownload" type="link-menuitem" label="download" class="download" classAct="download active" />
-		<roundcube:container name="attachmentmenu" id="attachmentoptionsmenu" />
+		<roundcube:button command="open-attachment" type="link-menuitem" label="open" class="extwin" classAct="extwin active" />
+		<roundcube:button command="download-attachment" type="link-menuitem" label="download" class="download" classAct="download active" />
+		<roundcube:container name="attachmentmenu" id="attachmentmenu" />
+	</ul>
+</div>
+
+<div id="mailto-menu" class="popupmenu">
+	<h3 id="aria-label-mailtomenu" class="voice"><roundcube:label name="arialabelmailtomenu" /></h3>
+	<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-mailtomenu">
+		<roundcube:button name="addtoaddressbook" type="link-menuitem" label="addtoaddressbook" class="addressbook" />
+		<roundcube:button name="composeto" type="link-menuitem" label="composeto" class="compose active" />
+		<roundcube:container name="mailtomenu" id="mailto-menu" />
 	</ul>
 </div>
 

skins/elastic/ui.js

@@ -56,6 +56,7 @@ function rcube_elastic_ui()
     this.searchmenu = searchmenu;
     this.headersmenu = headersmenu;
     this.attachmentmenu = attachmentmenu;
+    this.mailtomenu = mailtomenu;
     this.show_list = show_list;
     this.show_sidebar = show_sidebar;
 
@@ -421,6 +422,13 @@ function rcube_elastic_ui()
             if (rcmail.env.action == 'compose' && !rcmail.env.extwin) {
                 $('a.button.mail', layout.menu).attr('onclick', "return rcmail.command('list','',this,event)");
             }
+
+            // Append contact menu to all mailto: links
+            if (rcmail.env.action == 'preview' || rcmail.env.action == 'show') {
+                $('a').filter('[href^="mailto:"]').each(function() {
+                    mailtomenu_append(this);
+                });
+            }
         }
 
         rcmail.env.thread_padding = '1.5rem';
@@ -1814,16 +1822,59 @@ function rcube_elastic_ui()
                     title: label,
                     'class': 'button icon dropdown skip-content'
                 })
-                .on('click keypress', function(e) {
-                    if (e.type != 'keypress' || rcube_event.get_keycode(e) == 13) {
-                        attachmentmenu($('#attachmentmenu'), button, e);
-                    }
+                .on('click', function(e) {
+                    attachmentmenu($('#attachmentmenu'), button, e);
                 })
                 .append($('<span>').attr('class', 'inner').text(label))
                 .appendTo(item);
         }
     };
 
+    /**
+     * Mailto menu
+     */
+    function mailtomenu(obj, button, event)
+    {
+        var mailto = $(button).attr('href').replace(/^mailto:/, '');
+
+        if (mailto.indexOf('@') < 0) {
+            return true; // let the browser to handle this
+        }
+
+        if (rcmail.env.has_writeable_addressbook) {
+            $('.addressbook', obj).addClass('active')
+                .off('click').on('click', function(e) {
+                    var i, contact = mailto,
+                        txt = $(button).filter('.rcmContactAddress').text();
+
+                    contact = contact.split('?')[0].replace(/(^<|>$)/g, '');
+
+                    if (txt) {
+                        txt = txt.replace('<' + contact + '>', '');
+                        contact = $.trim(txt) + ' <' + contact + '>';
+                    }
+
+                    return rcmail.command('add-contact', contact, this);
+                });
+        }
+
+        $('.compose', obj).off('click').on('click', function(e) {
+            return rcmail.command('compose', mailto, this);
+        });
+
+        return rcmail.command('menu-open', {menu: 'mailto-menu', link: button}, button, event);
+    };
+
+    /**
+     * Appends popup menu to mailto links
+     */
+    function mailtomenu_append(item)
+    {
+        $(item).attr('onclick', '').on('click', function(e) {
+            return mailtomenu($('#mailto-menu'), item, e);
+        });
+    };
+
     /**
      * Headers menu in mail compose
      */