From cdfe1d207d7a4dcbe60bb6fe283071281256cfb9 Mon Sep 17 00:00:00 2001
From: Aleksander Machniak <machniak@kolabsys.com>
Date: Sat, 25 Mar 2017 10:02:06 +0100
Subject: [PATCH] Attachment menu

---
 skins/elastic/styles/styles.less              |   1 -
 .../styles/widgets/attachmentlist.less        |  96 -----------------
 skins/elastic/styles/widgets/buttons.less     |   4 +
 skins/elastic/styles/widgets/lists.less       | 102 ++++++++++++++++++
 skins/elastic/styles/widgets/toolbar.less     |   3 +
 skins/elastic/templates/compose.html          |   8 +-
 skins/elastic/templates/message.html          |   6 +-
 skins/elastic/ui.js                           |  61 +++++++++--
 8 files changed, 171 insertions(+), 110 deletions(-)
 delete mode 100644 skins/elastic/styles/widgets/attachmentlist.less

diff --git a/skins/elastic/styles/styles.less b/skins/elastic/styles/styles.less
index bc05b2b29..829c55b70 100644
--- a/skins/elastic/styles/styles.less
+++ b/skins/elastic/styles/styles.less
@@ -190,7 +190,6 @@ html.iframe body {
 @import "widgets/searchbar.less";
 @import "widgets/lists.less";
 @import "widgets/messagebody.less";
-@import "widgets/attachmentlist.less";
 @import "widgets/googiespell.less";
 
 
diff --git a/skins/elastic/styles/widgets/attachmentlist.less b/skins/elastic/styles/widgets/attachmentlist.less
deleted file mode 100644
index 4c3cb8a4c..000000000
--- a/skins/elastic/styles/widgets/attachmentlist.less
+++ /dev/null
@@ -1,96 +0,0 @@
-/* Attachments list */
-
-
-.attachmentslist li {
-    &:before {
-        &:extend(.font-icon-class);
-        content: @fa-var-file-o;
-    }
-
-    &.txt:before,
-    &.text:before {
-        content: @fa-var-file-text-o;
-    }
-
-    &.pdf:before {
-        content: @fa-var-file-pdf-o;
-    }
-
-    &.odt:before,
-    &.doc:before,
-    &.docx:before,
-    &.msword:before {
-        content: @fa-var-file-word-o;
-    }
-
-    &.ods:before,
-    &.xls:before,
-    &.xlsx:before,
-    &.msexcel:before {
-        content: @fa-var-file-excel-o;
-    }
-
-    &.rar:before,
-    &.zip:before,
-    &.gz:before {
-        content: @fa-var-file-zip-o;
-    }
-
-    &.image:before,
-    &.jpg:before,
-    &.jpeg:before,
-    &.png:before {
-        content: @fa-var-file-image-o;
-    }
-
-    &.mp3:before,
-    &.audio:before {
-        content: @fa-var-file-audio-o;
-    }
-
-    &.m4p:before,
-    &.video:before {
-        content: @fa-var-file-video-o;
-    }
-
-    &.ics:before,
-    &.calendar:before {
-        /* TODO */
-    }
-
-    &.vcard:before {
-        content: @fa-var-vcard;
-    }
-
-    &.html:before {
-        content: @fa-var-file-code-o;
-    }
-
-    &.eml:before,
-    &.rfc822:before {
-        /* TODO */
-    }
-
-    &.odp:before,
-    &.otp:before,
-    &.ppt:before,
-    &.pptx:before,
-    &.ppsx:before,
-    &.vnd.mspowerpoint:before {
-        content: @fa-var-file-powerpoint-o;
-    }
-
-    &.sig:before,
-    &.pgp-signature:before,
-    &.pkcs7-signature:before {
-        /* TODO */
-    }
-
-    &.application.asc:before {
-        /* TODO */
-    }
-
-    &.application.pgp-keys:before {
-        /* TODO */
-    }
-}
diff --git a/skins/elastic/styles/widgets/buttons.less b/skins/elastic/styles/widgets/buttons.less
index 34c430b57..3fbb8b539 100644
--- a/skins/elastic/styles/widgets/buttons.less
+++ b/skins/elastic/styles/widgets/buttons.less
@@ -74,6 +74,10 @@ a.button.icon.back-sidebar-button:before {
 a.button.icon.back-list-button:before {
     content: @fa-var-arrow-left;
 }
+a.button.icon.dropdown:before {
+    content: @fa-var-caret-down;
+    font-size: 1em;
+}
 a.button.icon > span.inner {
     display: none;
 }
diff --git a/skins/elastic/styles/widgets/lists.less b/skins/elastic/styles/widgets/lists.less
index 9ec970d8d..3d9c058eb 100644
--- a/skins/elastic/styles/widgets/lists.less
+++ b/skins/elastic/styles/widgets/lists.less
@@ -407,3 +407,105 @@ table.fixedcopy {
         content: @fa-var-flag-o;
     }
 }
+
+/* Attachments list */
+
+.attachmentslist li {
+    display: inline-block;
+
+    a.button {
+        float: right;
+    }
+
+    &:before {
+        &:extend(.font-icon-class);
+        content: @fa-var-file-o;
+    }
+
+    &.txt:before,
+    &.text:before {
+        content: @fa-var-file-text-o;
+    }
+
+    &.pdf:before {
+        content: @fa-var-file-pdf-o;
+    }
+
+    &.odt:before,
+    &.doc:before,
+    &.docx:before,
+    &.msword:before {
+        content: @fa-var-file-word-o;
+    }
+
+    &.ods:before,
+    &.xls:before,
+    &.xlsx:before,
+    &.msexcel:before {
+        content: @fa-var-file-excel-o;
+    }
+
+    &.rar:before,
+    &.zip:before,
+    &.gz:before {
+        content: @fa-var-file-zip-o;
+    }
+
+    &.image:before,
+    &.jpg:before,
+    &.jpeg:before,
+    &.png:before {
+        content: @fa-var-file-image-o;
+    }
+
+    &.mp3:before,
+    &.audio:before {
+        content: @fa-var-file-audio-o;
+    }
+
+    &.m4p:before,
+    &.video:before {
+        content: @fa-var-file-video-o;
+    }
+
+    &.ics:before,
+    &.calendar:before {
+        /* TODO */
+    }
+
+    &.vcard:before {
+        content: @fa-var-vcard;
+    }
+
+    &.html:before {
+        content: @fa-var-file-code-o;
+    }
+
+    &.eml:before,
+    &.rfc822:before {
+        /* TODO */
+    }
+
+    &.odp:before,
+    &.otp:before,
+    &.ppt:before,
+    &.pptx:before,
+    &.ppsx:before,
+    &.vnd.mspowerpoint:before {
+        content: @fa-var-file-powerpoint-o;
+    }
+
+    &.sig:before,
+    &.pgp-signature:before,
+    &.pkcs7-signature:before {
+        /* TODO */
+    }
+
+    &.application.asc:before {
+        /* TODO */
+    }
+
+    &.application.pgp-keys:before {
+        /* TODO */
+    }
+}
diff --git a/skins/elastic/styles/widgets/toolbar.less b/skins/elastic/styles/widgets/toolbar.less
index 5b2638e91..b534bbf0a 100644
--- a/skins/elastic/styles/widgets/toolbar.less
+++ b/skins/elastic/styles/widgets/toolbar.less
@@ -161,6 +161,9 @@
     a.edit:before {
         content: @fa-var-edit; /* TODO: edit.asnew */
     }
+    a.rename:before {
+        content: @fa-var-pencil; /* TODO: better icon?  */
+    }
     a.read:before {
         content: @fa-var-star-o;
     }
diff --git a/skins/elastic/templates/compose.html b/skins/elastic/templates/compose.html
index 0cd6ee737..4921b7bfb 100644
--- a/skins/elastic/templates/compose.html
+++ b/skins/elastic/templates/compose.html
@@ -225,12 +225,12 @@
 	</ul>
 </div>
 
-<div id="attachment-menu" class="ui popup">
+<div id="attachment-menu" class="ui popup" data-popup-init="attachmentmenu">
 	<h3 id="aria-label-attachmentmenu" class="voice"><roundcube:label name="arialabelattachmentmenu" /></h3>
 	<ul class="toolbarmenu listing" id="attachmentoptionsmenu" role="menu" aria-labelledby="aria-label-attachmentmenu">
-		<roundcube:button command="open-attachment" id="attachmenuopen" type="link-menuitem" label="open" class="icon" classAct="icon active" innerclass="icon extwin" />
-		<roundcube:button command="download-attachment" id="attachmenudownload" type="link-menuitem" label="download" class="icon" classAct="icon active" innerclass="icon download" />
-		<roundcube:button command="rename-attachment" id="attachmenurename" type="link-menuitem" label="rename" class="icon" classAct="icon active" innerclass="icon rename" />
+		<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:button command="rename-attachment" id="attachmenurename" type="link-menuitem" label="rename" class="rename" classAct="rename active" />
 		<roundcube:container name="attachmentmenu" id="attachmentoptionsmenu" />
 	</ul>
 </div>
diff --git a/skins/elastic/templates/message.html b/skins/elastic/templates/message.html
index b92cd6701..94e57c205 100644
--- a/skins/elastic/templates/message.html
+++ b/skins/elastic/templates/message.html
@@ -33,11 +33,11 @@
 </div>
 
 <!-- popup menus -->
-<div id="attachment-menu" class="ui popup">
+<div id="attachment-menu" class="ui popup" data-popup-init="attachmentmenu">
 	<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="icon" classAct="icon active" innerclass="icon extwin" />
-		<roundcube:button command="download-attachment" id="attachmenudownload" type="link-menuitem" label="download" class="icon" classAct="icon active" innerclass="icon download" />
+		<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" />
 	</ul>
 </div>
diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js
index 08f1891fd..3640d93a6 100644
--- a/skins/elastic/ui.js
+++ b/skins/elastic/ui.js
@@ -48,6 +48,7 @@ function rcube_elastic_ui()
     this.about_dialog = about_dialog;
     this.spellmenu = spellmenu;
     this.searchmenu = searchmenu;
+    this.attachmentmenu = attachmentmenu;
 
 
     // Initialize layout
@@ -225,6 +226,13 @@ function rcube_elastic_ui()
                 rcmail[list].checkbox_selection = true;
             }
         });
+
+        // add menu link for each attachment
+        $('#attachment-list > li').each(function() {
+            attachmentmenu_append(this);
+        });
+
+        rcmail.addEventListener('fileappended', function(e) { if (e.attachment.complete) attachmentmenu_append(e.item); });
     };
 
     /**
@@ -319,7 +327,7 @@ function rcube_elastic_ui()
     };
 
     /**
-     * Handler for roundcube some popups
+     * Handler for some Roundcube core popups
      */
     function rcmail_popup_init(o)
     {
@@ -361,7 +369,8 @@ function rcube_elastic_ui()
         if (!div.length) {
             div = $('<div>').attr({
                 id: 'screen-size',
-                style: 'position:absolute;display:block;right:0;bottom:0;z-index:100;'
+                style: 'position:absolute;display:block;right:0;z-index:100;'
+                    + (rcmail.is_framed() ? 'top:0;' : 'bottom:0;')
                     + 'opacity:0.5;color:white;background-color:black;white-space:nowrap'
             }).appendTo(document.body);
         }
@@ -682,16 +691,16 @@ function rcube_elastic_ui()
                 placement: popup_position,
                 html: true
             })
-            .on('show.bs.popover', function() {
+            .on('show.bs.popover', function(event) {
                 var init_func = $(popup).data('popup-init');
 
                 $(popup).attr('aria-hidden', false);
 
                 if (init_func && ref[init_func]) {
-                    ref[init_func](popup);
+                    ref[init_func](popup, item, event);
                 }
                 else if (init_func && window[init_func]) {
-                    window[init_func](popup);
+                    window[init_func](popup, item, event);
                 }
             })
             .on('hide.bs.popover', function() {
@@ -958,7 +967,47 @@ function rcube_elastic_ui()
                 el.removeClass('selected').removeAttr('aria-selected');
             }
         });
-    }
+    };
+
+    /**
+     * Attachment menu
+     */
+    function attachmentmenu(obj, button, event)
+    {
+        var id = $(button).parent().attr('id').replace(/^attach/, '');
+
+        $.each(['open', 'download', 'rename'], function() {
+            var action = this;
+            $('#attachmenu' + action, obj).off('click').attr('onclick', '').click(function(e) {
+                return rcmail.command(action + '-attachment', id, this);
+            });
+        });
+
+        // call menu-open so core can set state of menu commands
+        rcmail.command('menu-open', {menu: 'attachmentmenu', id: id}, obj, event);
+    };
+
+    /**
+     * Appends drop-icon to attachments list item (to invoke attachment menu)
+     */
+    function attachmentmenu_append(item)
+    {
+        item = $(item);
+
+        if (!item.children('.drop').length) {
+            var button = $('<a>')
+                .attr({
+                    href: '#',
+                    tabindex: 0,
+                    'class': 'button icon dropdown skip-content',
+                    'data-popup': 'attachment-menu',
+                })
+                .append($('<span class="inner">').text('Show options')) // TODO: Localize "Show options" below
+                .appendTo(item);
+
+            popup_init(button);
+        }
+    };
 }
 
 var UI = new rcube_elastic_ui();