mirror of
https://github.com/RetroShare/RSNewWebUI.git
synced 2026-09-14 11:05:47 +05:00
feat: created attachment section in mail view
This commit is contained in:
zelfroster
parent
3e9e1b3628
commit
4a29ae0733
@ -1,5 +1,6 @@
|
||||
const m = require('mithril');
|
||||
const rs = require('rswebui');
|
||||
const util = require('files/files_util');
|
||||
const widget = require('widgets');
|
||||
const peopleUtil = require('people/people_util');
|
||||
|
||||
@ -118,10 +119,11 @@ const MessageSummary = () => {
|
||||
|
||||
const MessageView = () => {
|
||||
let details = {};
|
||||
let files = [];
|
||||
let message = '';
|
||||
let toList = {};
|
||||
let ccList = {};
|
||||
let bccList = {};
|
||||
const toList = {};
|
||||
const ccList = {};
|
||||
const bccList = {};
|
||||
|
||||
return {
|
||||
oninit: async (v) => {
|
||||
@ -130,36 +132,28 @@ const MessageView = () => {
|
||||
});
|
||||
if (res.body.retval) {
|
||||
details = res.body.msg;
|
||||
files = details.files;
|
||||
// regex to detect html tags
|
||||
// better regex? /<[a-z][\s\S]*>/gi
|
||||
if (/<\/*[a-z][^>]+?>/gi.test(details.msg)) {
|
||||
message = details.msg;
|
||||
} else {
|
||||
message = '<p style="white-space: pre">' + details.msg + '</p>';
|
||||
message = /<\/*[a-z][^>]+?>/gi.test(details.msg)
|
||||
? details.msg
|
||||
: `<p style="white-space: pre">${details.msg}</p>`;
|
||||
}
|
||||
details?.destinations?.map((destDetail) => {
|
||||
if (destDetail._mode === MSG_ADDRESS_MODE_TO && !toList[destDetail._addr_string]) {
|
||||
toList[destDetail._addr_string] = destDetail;
|
||||
} else if (destDetail._mode === MSG_ADDRESS_MODE_CC && !ccList[destDetail._addr_string]) {
|
||||
ccList[destDetail._addr_string] = destDetail;
|
||||
} else if (destDetail._mode === MSG_ADDRESS_MODE_BCC && !bccList[destDetail._addr_string]) {
|
||||
bccList[destDetail._addr_string] = destDetail;
|
||||
}
|
||||
}
|
||||
if (details && details.destinations) {
|
||||
details.destinations.map((destDetail) => {
|
||||
if (destDetail._mode === MSG_ADDRESS_MODE_TO && !toList[destDetail._addr_string]) {
|
||||
toList[destDetail._addr_string] = destDetail;
|
||||
} else if (destDetail._mode === MSG_ADDRESS_MODE_CC && !ccList[destDetail._addr_string]) {
|
||||
ccList[destDetail._addr_string] = destDetail;
|
||||
} else if (
|
||||
destDetail._mode === MSG_ADDRESS_MODE_BCC &&
|
||||
!bccList[destDetail._addr_string]
|
||||
) {
|
||||
bccList[destDetail._addr_string] = destDetail;
|
||||
}
|
||||
});
|
||||
}
|
||||
rs.rsJsonApiRequest(
|
||||
});
|
||||
await rs.rsJsonApiRequest(
|
||||
'/rsIdentity/getIdDetails',
|
||||
{
|
||||
id: details.from._addr_string,
|
||||
},
|
||||
(data) => {
|
||||
details = { ...details, avatar: data.details.mAvatar };
|
||||
}
|
||||
(data) => (details = { ...details, avatar: data.details.mAvatar })
|
||||
);
|
||||
},
|
||||
view: (v) =>
|
||||
@ -182,50 +176,66 @@ const MessageView = () => {
|
||||
m('h3', details.title),
|
||||
m('.msgHeader', [
|
||||
details.from &&
|
||||
m(peopleUtil.UserAvatar, { avatar: details.avatar, firstLetter: rs.userList.userMap[details.from._addr_string] ? rs.userList.userMap[details.from._addr_string].slice(0, 1).toUpperCase() : '' }),
|
||||
m(peopleUtil.UserAvatar, {
|
||||
avatar: details.avatar,
|
||||
firstLetter: rs.userList.userMap[details.from._addr_string]
|
||||
? rs.userList.userMap[details.from._addr_string].slice(0, 1).toUpperCase()
|
||||
: '',
|
||||
}),
|
||||
m('.msgHeaderDetails', [
|
||||
details.from &&
|
||||
m('from', { style: { display: 'block ruby' } }, [
|
||||
m('p', { style: { fontWeight: 'bold' } }, 'From: '),
|
||||
rs.userList.userMap[details.from._addr_string],
|
||||
]),
|
||||
m('from', { style: { display: 'block ruby' } }, [
|
||||
m('p', { style: { fontWeight: 'bold' } }, 'From: '),
|
||||
rs.userList.userMap[details.from._addr_string],
|
||||
]),
|
||||
toList &&
|
||||
Object.keys(toList).length > 0 &&
|
||||
// TODO: optimize javascript for show-more and show-less working
|
||||
m('to', { style: { display: 'block ruby' } }, [
|
||||
m('p', { style: { fontWeight: 'bold' } }, 'To: '),
|
||||
m('div.truncate[id=truncate]',
|
||||
Object.keys(toList).map((key, index) => m('p', rs.userList.userMap[key] + ', ')),
|
||||
),
|
||||
m('button[id=show-more]', {
|
||||
style: { display: Object.keys(toList).length > 10 ? 'block' : 'none' },
|
||||
onclick: () => {
|
||||
document.querySelector('#show-more').style.display = 'none';
|
||||
document.querySelector('#truncate').style.height = 'max-content';
|
||||
document.querySelector('#show-less').style.display = 'block';
|
||||
}
|
||||
}, 'Show More'),
|
||||
m('button[id=show-less][style="display: none;"]', {
|
||||
onclick: () => {
|
||||
document.querySelector('#show-more').style.display = 'block';
|
||||
document.querySelector('#truncate').style.height = '22px';
|
||||
document.querySelector('#show-less').style.display = 'none';
|
||||
}
|
||||
}, 'Show Less'),
|
||||
]),
|
||||
Object.keys(toList).length > 0 &&
|
||||
// TODO: optimize javascript for show-more and show-less working
|
||||
m('to', { style: { display: 'block ruby' } }, [
|
||||
m('p', { style: { fontWeight: 'bold' } }, 'To: '),
|
||||
m(
|
||||
'div.truncate[id=truncate]',
|
||||
Object.keys(toList).map((key, index) => m('p', rs.userList.userMap[key] + ', '))
|
||||
),
|
||||
m(
|
||||
'button[id=show-more]',
|
||||
{
|
||||
style: {
|
||||
display: Object.keys(toList).length > 10 ? 'block' : 'none',
|
||||
},
|
||||
onclick: () => {
|
||||
document.querySelector('#show-more').style.display = 'none';
|
||||
document.querySelector('#truncate').style.height = 'max-content';
|
||||
document.querySelector('#show-less').style.display = 'block';
|
||||
},
|
||||
},
|
||||
'Show More'
|
||||
),
|
||||
m(
|
||||
'button[id=show-less][style="display: none;"]',
|
||||
{
|
||||
onclick: () => {
|
||||
document.querySelector('#show-more').style.display = 'block';
|
||||
document.querySelector('#truncate').style.height = '22px';
|
||||
document.querySelector('#show-less').style.display = 'none';
|
||||
},
|
||||
},
|
||||
'Show Less'
|
||||
),
|
||||
]),
|
||||
ccList &&
|
||||
Object.keys(ccList).length > 0 &&
|
||||
m('cc', { style: { display: 'block ruby' } }, [
|
||||
m('p', { style: { fontWeight: 'bold' } }, 'CC: '),
|
||||
Object.keys(ccList).map((key, index) => m('p', rs.userList.userMap[key] + ', ')),
|
||||
]),
|
||||
Object.keys(ccList).length > 0 &&
|
||||
m('cc', { style: { display: 'block ruby' } }, [
|
||||
m('p', { style: { fontWeight: 'bold' } }, 'CC: '),
|
||||
Object.keys(ccList).map((key, index) => m('p', rs.userList.userMap[key] + ', ')),
|
||||
]),
|
||||
bccList &&
|
||||
Object.keys(bccList).length > 0 &&
|
||||
m('bcc', { style: { display: 'block ruby' } }, [
|
||||
m('p', { style: { fontWeight: 'bold' } }, 'BCC: '),
|
||||
Object.keys(bccList).map((key, index) => m('p', rs.userList.userMap[key] + ', ')),
|
||||
]),
|
||||
])
|
||||
Object.keys(bccList).length > 0 &&
|
||||
m('bcc', { style: { display: 'block ruby' } }, [
|
||||
m('p', { style: { fontWeight: 'bold' } }, 'BCC: '),
|
||||
Object.keys(bccList).map((key, index) => m('p', rs.userList.userMap[key] + ', ')),
|
||||
]),
|
||||
]),
|
||||
]),
|
||||
m('button', 'Reply'),
|
||||
m('button', 'Reply All'),
|
||||
@ -247,17 +257,17 @@ const MessageView = () => {
|
||||
const res = await rs.rsJsonApiRequest('/rsMsgs/MessageDelete', {
|
||||
msgId: details.msgId,
|
||||
});
|
||||
res.body.retval === false
|
||||
res.body.retval
|
||||
? widget.popupMessage([
|
||||
m('h3', 'Error'),
|
||||
m('hr'),
|
||||
m('p', res.body.errorMessage),
|
||||
])
|
||||
m('h3', 'Success'),
|
||||
m('hr'),
|
||||
m('p', 'Mail Deleted.'),
|
||||
])
|
||||
: widget.popupMessage([
|
||||
m('h3', 'Success'),
|
||||
m('hr'),
|
||||
m('p', 'Mail Deleted.'),
|
||||
]);
|
||||
m('h3', 'Error'),
|
||||
m('hr'),
|
||||
m('p', res.body.errorMessage),
|
||||
]);
|
||||
m.redraw();
|
||||
m.route.set('/mail/:tab', {
|
||||
tab: m.route.param().tab,
|
||||
@ -271,7 +281,6 @@ const MessageView = () => {
|
||||
'Delete'
|
||||
),
|
||||
m('hr'),
|
||||
|
||||
m(
|
||||
'iframe[title=message].msg',
|
||||
{
|
||||
@ -279,6 +288,52 @@ const MessageView = () => {
|
||||
},
|
||||
message
|
||||
),
|
||||
files.length > 0 &&
|
||||
m('', [
|
||||
m('hr'),
|
||||
m('h3', 'Attachments'),
|
||||
m('.attachment-container', [
|
||||
files.map((item) =>
|
||||
m('.attachment', [
|
||||
m('.detail', [m('i.fas.fa-file'), m('span', item.fname)]),
|
||||
m(
|
||||
'button',
|
||||
{
|
||||
onclick: () => {
|
||||
try {
|
||||
rs.rsJsonApiRequest(
|
||||
'/rsFiles/FileRequest',
|
||||
{
|
||||
fileName: item.fname,
|
||||
hash: item.hash,
|
||||
flags: util.RS_FILE_REQ_ANONYMOUS_ROUTING,
|
||||
size: {
|
||||
xstr64: item.size.xstr64,
|
||||
},
|
||||
},
|
||||
(status) => {
|
||||
status.retval
|
||||
? widget.popupMessage([
|
||||
m('i.fas.fa-file-medical'),
|
||||
m('h3', 'File is being downloaded!'),
|
||||
])
|
||||
: widget.popupMessage([
|
||||
m('i.fas.fa-file-medical'),
|
||||
m('h3', 'File is already downloaded!'),
|
||||
]);
|
||||
}
|
||||
);
|
||||
} catch (error) {
|
||||
console.log('error: ', error);
|
||||
}
|
||||
},
|
||||
},
|
||||
m('i.fas.fa-download')
|
||||
),
|
||||
])
|
||||
),
|
||||
]),
|
||||
]),
|
||||
]
|
||||
),
|
||||
};
|
||||
@ -286,7 +341,7 @@ const MessageView = () => {
|
||||
|
||||
const Table = () => {
|
||||
return {
|
||||
oninit: (v) => { },
|
||||
oninit: (v) => {},
|
||||
view: (v) =>
|
||||
m('table.mails', [
|
||||
m('tr', [
|
||||
|
||||
@ -73,7 +73,8 @@ input.star-check:checked + label.star-check {
|
||||
gap: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#show-more, #show-less {
|
||||
#show-more,
|
||||
#show-less {
|
||||
font-size: 0.8em;
|
||||
width: 100px;
|
||||
height: max-content;
|
||||
@ -84,30 +85,29 @@ iframe.msg {
|
||||
width: 100%;
|
||||
height: 450px;
|
||||
}
|
||||
#composebtn{
|
||||
#composebtn {
|
||||
text-align: center;
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
/* float: left; */
|
||||
}
|
||||
#searchmail{
|
||||
#searchmail {
|
||||
float: right;
|
||||
position: relative;
|
||||
margin-right: 20px;
|
||||
}
|
||||
#tags{
|
||||
#tags {
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
font-size: medium;
|
||||
margin-left: 20px;
|
||||
height: 40px;
|
||||
}
|
||||
#composepopup{
|
||||
#composepopup {
|
||||
height: 80%;
|
||||
width: 70%;
|
||||
bottom: 50%;
|
||||
right: 58%;
|
||||
|
||||
}
|
||||
.mail-node-panel {
|
||||
position: relative;
|
||||
@ -124,3 +124,23 @@ iframe.msg {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
// Download Files
|
||||
.attachment-container {
|
||||
max-height: 20vh;
|
||||
height: auto;
|
||||
overflow-y: scroll;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
|
||||
& .attachment {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
|
||||
& .detail span {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user