serv/mox
1
0
Fork 0
mirror of https://github.com/mjl-/mox.git synced 2025-01-14 01:06:27 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

webmail: with 6 or more attachments, show the first 4, and a button to show the rest.

Browse source 
for issue #113
This commit is contained in:
Mechiel Lukkien 2024-04-20 17:51:27 +02:00
parent 9529ae0bd4
commit 41a62de4d7
No known key found for this signature in database
2 changed files with 53 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
webmail/webmail.js
View file

@ -3643,22 +3643,28 @@ const newMsgView = (miv, msglistView, listMailboxes, possibleLabels, messageLoad
popupRoot.focus(); popupRoot.focus();
attachmentView = { key: keyHandler(attachShortcuts) }; 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 renderAttachments = (all) => {
const name = a.Filename || '(unnamed)'; const l = mi.Attachments || [];
const viewable = isViewable(a); 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 size = formatSize(a.Part.DecodedSize); const name = a.Filename || '(unnamed)';
const eye = '👁'; const viewable = isViewable(a);
const dl = '⤓'; // \u2913, actually ⭳ \u2b73 would be better, but in fewer fonts (at least macos) const size = formatSize(a.Part.DecodedSize);
const dlurl = 'msg/' + m.ID + '/download/' + [0].concat(a.Path || []).join('.'); const eye = '👁';
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() { const dl = '⤓'; // \u2913, actually ⭳ \u2b73 would be better, but in fewer fonts (at least macos)
view(a); 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() {
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' })); view(a);
if (viewable) { });
return [dom.span(dom._class('btngroup'), viewbtn, dlbtn), ' ']; 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'), dlbtn, viewbtn), ' ']; return [dom.span(dom._class('btngroup'), viewbtn, dlbtn), ' '];
}), dom.a('Download all as zip', attr.download(''), style({ color: 'inherit' }), attr.href('msg/' + m.ID + '/attachments.zip'))))); }
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' })); const root = dom.div(style({ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, display: 'flex', flexDirection: 'column' }));
dom._kids(root, msgmetaElem, msgcontentElem); dom._kids(root, msgmetaElem, msgcontentElem);
const loadText = (pm) => { const loadText = (pm) => {

55
webmail/webmail.ts
View file

@ -3215,31 +3215,38 @@ const newMsgView = (miv: MsgitemView, msglistView: MsglistView, listMailboxes: l
attachmentView = {key: keyHandler(attachShortcuts)} attachmentView = {key: keyHandler(attachShortcuts)}
} }
dom._kids(msgattachmentElem, const renderAttachments = (all: boolean) => {
(mi.Attachments && mi.Attachments.length === 0) ? [] : dom.div( const l = mi.Attachments || []
style({borderTop: '1px solid #ccc'}), dom._kids(msgattachmentElem,
dom.div(dom._class('pad'), (l && l.length === 0) ? [] : dom.div(
'Attachments: ', style({borderTop: '1px solid #ccc'}),
(mi.Attachments || []).map(a => { dom.div(dom._class('pad'),
const name = a.Filename || '(unnamed)' 'Attachments: ',
const viewable = isViewable(a) l.slice(0, all ? l.length : 4).map(a => {
const size = formatSize(a.Part.DecodedSize) const name = a.Filename || '(unnamed)'
const eye = '👁' const viewable = isViewable(a)
const dl = '⤓' // \u2913, actually ⭳ \u2b73 would be better, but in fewer fonts (at least macos) const size = formatSize(a.Part.DecodedSize)
const dlurl = 'msg/'+m.ID+'/download/'+[0].concat(a.Path || []).join('.') const eye = '👁'
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() { const dl = '⤓' // \u2913, actually ⭳ \u2b73 would be better, but in fewer fonts (at least macos)
view(a) 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() {
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'})) view(a)
if (viewable) { })
return [dom.span(dom._class('btngroup'), viewbtn, dlbtn), ' '] 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'), dlbtn, viewbtn), ' '] return [dom.span(dom._class('btngroup'), viewbtn, dlbtn), ' ']
}), }
dom.a('Download all as zip', attr.download(''), style({color: 'inherit'}), attr.href('msg/'+m.ID+'/attachments.zip')), 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'})) const root = dom.div(style({position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, display: 'flex', flexDirection: 'column'}))
dom._kids(root, msgmetaElem, msgcontentElem) dom._kids(root, msgmetaElem, msgcontentElem)