Attachment menu

8 years ago · cdfe1d207d
parent 9f81603afb
commit cdfe1d207d
8 changed files with 171 additions and 110 deletions
--- 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";


--- a/skins/elastic/styles/widgets/attachmentlist.less
+++ b/skins/elastic/styles/widgets/attachmentlist.less
@ -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 */
-    }
-}
--- 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;
 }
--- 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 */
+    }
+}
--- 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;
    }
--- 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>
--- 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>
--- 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();