From 41a62de4d78dc7ebf4bdfa7d26e8fca6c0c36c7b Mon Sep 17 00:00:00 2001 From: Mechiel Lukkien Date: Sat, 20 Apr 2024 17:51:27 +0200 Subject: [PATCH] webmail: with 6 or more attachments, show the first 4, and a button to show the rest. for issue #113 --- webmail/webmail.js | 38 ++++++++++++++++++-------------- webmail/webmail.ts | 55 ++++++++++++++++++++++++++-------------------- 2 files changed, 53 insertions(+), 40 deletions(-) diff --git a/webmail/webmail.js b/webmail/webmail.js index beb23e4..ec2325f 100644 --- a/webmail/webmail.js +++ b/webmail/webmail.js @@ -3643,22 +3643,28 @@ const newMsgView = (miv, msglistView, listMailboxes, possibleLabels, messageLoad popupRoot.focus(); attachmentView = { key: keyHandler(attachShortcuts) }; }; - dom._kids(msgattachmentElem, (mi.Attachments && mi.Attachments.length === 0) ? [] : dom.div(style({ borderTop: '1px solid #ccc' }), dom.div(dom._class('pad'), 'Attachments: ', (mi.Attachments || []).map(a => { - const name = a.Filename || '(unnamed)'; - const viewable = isViewable(a); - const size = formatSize(a.Part.DecodedSize); - const eye = '👁'; - const dl = '⤓'; // \u2913, actually ⭳ \u2b73 would be better, but in fewer fonts (at least macos) - const dlurl = 'msg/' + m.ID + '/download/' + [0].concat(a.Path || []).join('.'); - const viewbtn = dom.clickbutton(eye, viewable ? ' ' + name : style({ padding: '0px 0.25em' }), attr.title('View this file. Size: ' + size), style({ lineHeight: '1.5' }), function click() { - view(a); - }); - const dlbtn = dom.a(dom._class('button'), attr.download(''), attr.href(dlurl), dl, viewable ? style({ padding: '0px 0.25em' }) : ' ' + name, attr.title('Download this file. Size: ' + size), style({ lineHeight: '1.5' })); - if (viewable) { - return [dom.span(dom._class('btngroup'), viewbtn, dlbtn), ' ']; - } - return [dom.span(dom._class('btngroup'), dlbtn, viewbtn), ' ']; - }), dom.a('Download all as zip', attr.download(''), style({ color: 'inherit' }), attr.href('msg/' + m.ID + '/attachments.zip'))))); + const renderAttachments = (all) => { + const l = mi.Attachments || []; + dom._kids(msgattachmentElem, (l && l.length === 0) ? [] : dom.div(style({ borderTop: '1px solid #ccc' }), dom.div(dom._class('pad'), 'Attachments: ', l.slice(0, all ? l.length : 4).map(a => { + const name = a.Filename || '(unnamed)'; + const viewable = isViewable(a); + const size = formatSize(a.Part.DecodedSize); + const eye = '👁'; + const dl = '⤓'; // \u2913, actually ⭳ \u2b73 would be better, but in fewer fonts (at least macos) + const dlurl = 'msg/' + m.ID + '/download/' + [0].concat(a.Path || []).join('.'); + const viewbtn = dom.clickbutton(eye, viewable ? ' ' + name : style({ padding: '0px 0.25em' }), attr.title('View this file. Size: ' + size), style({ lineHeight: '1.5' }), function click() { + view(a); + }); + const dlbtn = dom.a(dom._class('button'), attr.download(''), attr.href(dlurl), dl, viewable ? style({ padding: '0px 0.25em' }) : ' ' + name, attr.title('Download this file. Size: ' + size), style({ lineHeight: '1.5' })); + if (viewable) { + return [dom.span(dom._class('btngroup'), viewbtn, dlbtn), ' ']; + } + return [dom.span(dom._class('btngroup'), dlbtn, viewbtn), ' ']; + }), all || l.length < 6 ? [] : dom.clickbutton('More...', function click() { + renderAttachments(true); + }), ' ', dom.a('Download all as zip', attr.download(''), style({ color: 'inherit' }), attr.href('msg/' + m.ID + '/attachments.zip'))))); + }; + renderAttachments(false); const root = dom.div(style({ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, display: 'flex', flexDirection: 'column' })); dom._kids(root, msgmetaElem, msgcontentElem); const loadText = (pm) => { diff --git a/webmail/webmail.ts b/webmail/webmail.ts index 64b3754..26191e4 100644 --- a/webmail/webmail.ts +++ b/webmail/webmail.ts @@ -3215,31 +3215,38 @@ const newMsgView = (miv: MsgitemView, msglistView: MsglistView, listMailboxes: l attachmentView = {key: keyHandler(attachShortcuts)} } - dom._kids(msgattachmentElem, - (mi.Attachments && mi.Attachments.length === 0) ? [] : dom.div( - style({borderTop: '1px solid #ccc'}), - dom.div(dom._class('pad'), - 'Attachments: ', - (mi.Attachments || []).map(a => { - const name = a.Filename || '(unnamed)' - const viewable = isViewable(a) - const size = formatSize(a.Part.DecodedSize) - const eye = '👁' - const dl = '⤓' // \u2913, actually ⭳ \u2b73 would be better, but in fewer fonts (at least macos) - const dlurl = 'msg/'+m.ID+'/download/'+[0].concat(a.Path || []).join('.') - const viewbtn = dom.clickbutton(eye, viewable ? ' '+name : style({padding: '0px 0.25em'}), attr.title('View this file. Size: '+size), style({lineHeight: '1.5'}), function click() { - view(a) - }) - const dlbtn = dom.a(dom._class('button'), attr.download(''), attr.href(dlurl), dl, viewable ? style({padding: '0px 0.25em'}) : ' '+name, attr.title('Download this file. Size: '+size), style({lineHeight: '1.5'})) - if (viewable) { - return [dom.span(dom._class('btngroup'), viewbtn, dlbtn), ' '] - } - return [dom.span(dom._class('btngroup'), dlbtn, viewbtn), ' '] - }), - dom.a('Download all as zip', attr.download(''), style({color: 'inherit'}), attr.href('msg/'+m.ID+'/attachments.zip')), - ), + const renderAttachments = (all: boolean) => { + const l = mi.Attachments || [] + dom._kids(msgattachmentElem, + (l && l.length === 0) ? [] : dom.div( + style({borderTop: '1px solid #ccc'}), + dom.div(dom._class('pad'), + 'Attachments: ', + l.slice(0, all ? l.length : 4).map(a => { + const name = a.Filename || '(unnamed)' + const viewable = isViewable(a) + const size = formatSize(a.Part.DecodedSize) + const eye = '👁' + const dl = '⤓' // \u2913, actually ⭳ \u2b73 would be better, but in fewer fonts (at least macos) + const dlurl = 'msg/'+m.ID+'/download/'+[0].concat(a.Path || []).join('.') + const viewbtn = dom.clickbutton(eye, viewable ? ' '+name : style({padding: '0px 0.25em'}), attr.title('View this file. Size: '+size), style({lineHeight: '1.5'}), function click() { + view(a) + }) + const dlbtn = dom.a(dom._class('button'), attr.download(''), attr.href(dlurl), dl, viewable ? style({padding: '0px 0.25em'}) : ' '+name, attr.title('Download this file. Size: '+size), style({lineHeight: '1.5'})) + if (viewable) { + return [dom.span(dom._class('btngroup'), viewbtn, dlbtn), ' '] + } + return [dom.span(dom._class('btngroup'), dlbtn, viewbtn), ' '] + }), + all || l.length < 6 ? [] : dom.clickbutton('More...', function click() { + renderAttachments(true) + }), ' ', + dom.a('Download all as zip', attr.download(''), style({color: 'inherit'}), attr.href('msg/'+m.ID+'/attachments.zip')), + ), + ) ) - ) + } + renderAttachments(false) const root = dom.div(style({position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, display: 'flex', flexDirection: 'column'})) dom._kids(root, msgmetaElem, msgcontentElem)