Attachment menu

pull/5742/merge
Aleksander Machniak 8 years ago
parent 9f81603afb
commit cdfe1d207d

@ -190,7 +190,6 @@ html.iframe body {
@import "widgets/searchbar.less"; @import "widgets/searchbar.less";
@import "widgets/lists.less"; @import "widgets/lists.less";
@import "widgets/messagebody.less"; @import "widgets/messagebody.less";
@import "widgets/attachmentlist.less";
@import "widgets/googiespell.less"; @import "widgets/googiespell.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 */
}
}

@ -74,6 +74,10 @@ a.button.icon.back-sidebar-button:before {
a.button.icon.back-list-button:before { a.button.icon.back-list-button:before {
content: @fa-var-arrow-left; content: @fa-var-arrow-left;
} }
a.button.icon.dropdown:before {
content: @fa-var-caret-down;
font-size: 1em;
}
a.button.icon > span.inner { a.button.icon > span.inner {
display: none; display: none;
} }

@ -407,3 +407,105 @@ table.fixedcopy {
content: @fa-var-flag-o; 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 */
}
}

@ -161,6 +161,9 @@
a.edit:before { a.edit:before {
content: @fa-var-edit; /* TODO: edit.asnew */ content: @fa-var-edit; /* TODO: edit.asnew */
} }
a.rename:before {
content: @fa-var-pencil; /* TODO: better icon? */
}
a.read:before { a.read:before {
content: @fa-var-star-o; content: @fa-var-star-o;
} }

@ -225,12 +225,12 @@
</ul> </ul>
</div> </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> <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"> <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="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="icon" classAct="icon active" innerclass="icon download" /> <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="icon" classAct="icon active" innerclass="icon rename" /> <roundcube:button command="rename-attachment" id="attachmenurename" type="link-menuitem" label="rename" class="rename" classAct="rename active" />
<roundcube:container name="attachmentmenu" id="attachmentoptionsmenu" /> <roundcube:container name="attachmentmenu" id="attachmentoptionsmenu" />
</ul> </ul>
</div> </div>

@ -33,11 +33,11 @@
</div> </div>
<!-- popup menus --> <!-- 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> <h3 id="aria-label-attachmentmenu" class="voice"><roundcube:label name="arialabelattachmentmenu" /></h3>
<ul class="toolbarmenu listing" role="menu" aria-labelledby="aria-label-attachmentmenu"> <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="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="icon" classAct="icon active" innerclass="icon download" /> <roundcube:button command="download-attachment" id="attachmenudownload" type="link-menuitem" label="download" class="download" classAct="download active" />
<roundcube:container name="attachmentmenu" id="attachmentoptionsmenu" /> <roundcube:container name="attachmentmenu" id="attachmentoptionsmenu" />
</ul> </ul>
</div> </div>

@ -48,6 +48,7 @@ function rcube_elastic_ui()
this.about_dialog = about_dialog; this.about_dialog = about_dialog;
this.spellmenu = spellmenu; this.spellmenu = spellmenu;
this.searchmenu = searchmenu; this.searchmenu = searchmenu;
this.attachmentmenu = attachmentmenu;
// Initialize layout // Initialize layout
@ -225,6 +226,13 @@ function rcube_elastic_ui()
rcmail[list].checkbox_selection = true; 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) function rcmail_popup_init(o)
{ {
@ -361,7 +369,8 @@ function rcube_elastic_ui()
if (!div.length) { if (!div.length) {
div = $('<div>').attr({ div = $('<div>').attr({
id: 'screen-size', 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' + 'opacity:0.5;color:white;background-color:black;white-space:nowrap'
}).appendTo(document.body); }).appendTo(document.body);
} }
@ -682,16 +691,16 @@ function rcube_elastic_ui()
placement: popup_position, placement: popup_position,
html: true html: true
}) })
.on('show.bs.popover', function() { .on('show.bs.popover', function(event) {
var init_func = $(popup).data('popup-init'); var init_func = $(popup).data('popup-init');
$(popup).attr('aria-hidden', false); $(popup).attr('aria-hidden', false);
if (init_func && ref[init_func]) { if (init_func && ref[init_func]) {
ref[init_func](popup); ref[init_func](popup, item, event);
} }
else if (init_func && window[init_func]) { else if (init_func && window[init_func]) {
window[init_func](popup); window[init_func](popup, item, event);
} }
}) })
.on('hide.bs.popover', function() { .on('hide.bs.popover', function() {
@ -958,7 +967,47 @@ function rcube_elastic_ui()
el.removeClass('selected').removeAttr('aria-selected'); 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(); var UI = new rcube_elastic_ui();

Loading…
Cancel
Save