The_Great_Archive/RSNewWebUI
1
0
Fork 0
mirror of https://github.com/RetroShare/RSNewWebUI.git synced 2026-09-14 11:05:47 +05:00
Code Issues Packages Projects Releases Wiki Activity

feat: mail compose working (improved)

Browse Source
This commit is contained in:
zelfroster 2023-07-03 12:20:46 +05:30
parent f674f86433
commit 7fe03147c0
7 changed files with 231 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
webui-src/app/mail/mail_compose.js
View File

@ -14,21 +14,22 @@ const Layout = () => {
bcc: [],
};
return {
oninit: (v) => (identity = v.attrs.ownId[0]),
oninit: (v) => {
identity = v.attrs.ownId[0];
inputList = v.attrs.allUsers;
},
view: (v) => {
function handleInput(e) {
inputTo = e.target.value;
console.log(inputTo);
inputList = v.attrs.allUsers.filter((item) =>
item.mGroupName.toLowerCase().includes(e.target.value.toLowerCase())
);
console.log(inputList);
m.redraw();
}
function handleClick(e, item) {
console.log(e.target.value, item);
function handleClick(item) {
recipients.to.push(item);
m.redraw();
// reset values
inputTo = '';
inputList = v.attrs.allUsers;
}
return m('.widget', [
m('.widget__heading', m('h3', 'Compose a mail')),
@ -55,59 +56,70 @@ const Layout = () => {
]),
m('.compose-mail__recipients', [
m('label.bold', 'To: '),
m('.compose-mail__recipients-to', [
recipients.to.length > 0 &&
m(
'ul.selected',
recipients.to && [recipients.to.map((to) => m('li', to.mGroupName))]
m('.recipients__to', [
recipients.to &&
recipients.to.length > 0 &&
recipients.to.map((recipient) =>
m('.recipients__to__selected', [
m('span', recipient.mGroupName),
m('i.fas.fa-times', {
onclick: () => {
recipients.to = recipients.to.filter(
(item) => item.mGroupId !== recipient.mGroupId
);
m.redraw();
},
}),
])
),
m('.recipient-input', [
m('input[type=text][list=to-list]', {
m('.recipients__to__input', [
m('input[type=text].recipients__to__input-field', {
value: inputTo,
oninput: handleInput,
}),
m('ul#to-list[autocomplete=off]', [
m('ul.recipients__to__input-list[autocomplete=off]', [
inputList && inputList.length > 0
? inputList.map((item) =>
m('li', { onclick: (e) => handleClick(e, item) }, item.mGroupName)
m('li', { onclick: () => handleClick(item) }, item.mGroupName)
)
: m('li', 'No Item'),
]),
]),
]),
]),
m('input[type=text][placeholder=Subject].compose-mail__subject', {
m('input.compose-mail__subject[type=text][placeholder=Subject]', {
oninput: (e) => (subject = e.target.value),
}),
m('textarea[placeholder=Message].compose-mail__message', {
m('textarea.compose-mail__message[placeholder=Message]', {
oninput: (e) => (mailBody = e.target.value),
value: mailBody,
}),
v.attrs.allUsers &&
m(
'button',
'button.compose-mail__send-btn',
{
onclick: () => {
const to = recipients.to.map((toItem) => toItem.mGroupId);
const cc = recipients.cc.map((toItem) => toItem.mGroupId);
const bcc = recipients.bcc.map((toItem) => toItem.mGroupId);
rs.rsJsonApiRequest('/rsMsgs/sendMail', {
from: identity,
subject,
mailBody,
to: recipients.to,
cc: recipients.cc,
bcc: recipients.bcc,
to,
cc,
bcc,
}).then((res) => {
if (res.body.retval) {
recipients.to = [];
recipients.cc = [];
recipients.bcc = [];
subject = '';
mailBody = '';
m.redraw();
}
res.body.retval !== 1
? widget.popupMessage([
m('h3', 'Error'),
m('hr'),
m('p', res.body.errorMessage),
])
? widget.popupMessage([m('h3', 'Error'), m('hr'), m('p', res.body.errorMsg)])
: widget.popupMessage([
m('h3', 'Success'),
m('hr'),
@ -116,7 +128,7 @@ const Layout = () => {
});
},
},
'Send'
[m('span', 'Send Mail'), m('i.fas.fa-paper-plane')]
),
]),
]);

174
webui-src/app/mail/mail_resolver.js
View File

@ -80,88 +80,108 @@ const tagselect = {
showval: 'Tags',
opts: ['Tags', 'Important', 'Work', 'Personal'],
};
const Layout = {
oninit: async () => {
Messages.load();
await peopleUtil.ownIds(async (data) => {
composeData.ownId = await data;
for (let i = 0; i < composeData.ownId.length; i++) {
if (Number(composeData.ownId[i]) === 0) {
composeData.ownId.splice(i, 1); // workaround for id '0'
const Layout = () => {
let showCompose = false;
return {
oninit: async () => {
Messages.load();
await peopleUtil.ownIds(async (data) => {
composeData.ownId = await data;
for (let i = 0; i < composeData.ownId.length; i++) {
if (Number(composeData.ownId[i]) === 0) {
composeData.ownId.splice(i, 1); // workaround for id '0'
}
}
}
// identity = ownId[0];
});
composeData.allUsers = await peopleUtil.sortUsers(rs.userList.users);
},
view: (vnode) => {
const sectionsSize = {
inbox: Messages.inbox.length,
outbox: Messages.outbox.length,
drafts: Messages.drafts.length,
sent: Messages.sent.length,
trash: Messages.trash.length,
};
const sectionsquickviewSize = {
starred: Messages.starred.length,
system: Messages.system.length,
spam: Messages.spam.length,
attachment: Messages.attachment.length,
important: Messages.important.length,
work: Messages.work.length,
todo: Messages.todo.length,
later: Messages.later.length,
personal: Messages.personal.length,
};
// identity = ownId[0];
});
composeData.allUsers = await peopleUtil.sortUsers(rs.userList.users);
},
view: (vnode) => {
const sectionsSize = {
inbox: Messages.inbox.length,
outbox: Messages.outbox.length,
drafts: Messages.drafts.length,
sent: Messages.sent.length,
trash: Messages.trash.length,
};
const sectionsquickviewSize = {
starred: Messages.starred.length,
system: Messages.system.length,
spam: Messages.spam.length,
attachment: Messages.attachment.length,
important: Messages.important.length,
work: Messages.work.length,
todo: Messages.todo.length,
later: Messages.later.length,
personal: Messages.personal.length,
};
return [
m('.side-bar', [
return [
m('.side-bar', [
m(
'button.mail-compose-btn',
{
onclick: () => (showCompose = true),
},
'Compose'
),
m(util.Sidebar, {
tabs: Object.keys(sections),
size: sectionsSize,
baseRoute: '/mail/',
}),
m(util.SidebarQuickView, {
tabs: Object.keys(sectionsquickview),
size: sectionsquickviewSize,
baseRoute: '/mail/',
}),
]),
m(
'button.mail-compose-btn',
{
onclick: () =>
composeData.allUsers &&
composeData.ownId &&
util.popupMessageCompose(
m(compose, { allUsers: composeData.allUsers, ownId: composeData.ownId })
),
},
'Compose'
),
m(util.Sidebar, {
tabs: Object.keys(sections),
size: sectionsSize,
baseRoute: '/mail/',
}),
m(util.SidebarQuickView, {
tabs: Object.keys(sectionsquickview),
size: sectionsquickviewSize,
baseRoute: '/mail/',
}),
]),
m(
'.node-panel',
m('.widget', [
m('.top-heading', [
m(
'select.mail-tag',
{
value: tagselect.showval,
onchange: (e) => {
tagselect.showval = tagselect.opts[e.target.selectedIndex];
'.node-panel',
m('.widget', [
m('.top-heading', [
m(
'select.mail-tag',
{
value: tagselect.showval,
onchange: (e) => {
tagselect.showval = tagselect.opts[e.target.selectedIndex];
},
},
[tagselect.opts.map((o) => m('option', { value: o }, o.toLocaleString()))]
),
m(util.SearchBar, {
list: {},
}),
]),
vnode.children,
])
),
m(
'.composePopupOverlay',
{
style: { display: showCompose ? 'block' : 'none' },
},
m(
'.composePopup',
composeData.allUsers &&
composeData.ownId &&
m(compose, {
allUsers: composeData.allUsers,
ownId: composeData.ownId,
}),
m(
'button.red.close-btn',
{
onclick: () => (showCompose = false),
},
[tagselect.opts.map((o) => m('option', { value: o }, o.toLocaleString()))]
),
m(util.SearchBar, {
list: {},
}),
]),
vnode.children,
])
),
];
},
m('i.fas.fa-times')
)
)
),
];
},
};
};
module.exports = {

19
webui-src/app/mail/mail_util.js
View File

@ -435,24 +435,6 @@ const SearchBar = () => {
};
};
function popupMessageCompose(message) {
const container = document.getElementById('modal-container');
container.style.display = 'block';
m.render(
container,
m('.modal-content[id=composepopup]', [
m(
'button.red.close-btn',
{
onclick: () => (container.style.display = 'none'),
},
m('i.fas.fa-times')
),
message,
])
);
}
const activeSideLink = {
sideactive: 0,
quicksideactive: -1,
@ -519,7 +501,6 @@ module.exports = {
SearchBar,
Sidebar,
SidebarQuickView,
popupMessageCompose,
RS_MSG_BOXMASK,
RS_MSG_INBOX,
RS_MSG_SENTBOX,

5
webui-src/app/main.js
View File

@ -74,7 +74,7 @@ const Layout = () => {
localStorage.getItem('rsBaseFontSize') ||
window.getComputedStyle(document.body).getPropertyValue('font-size');
},
view: (vnode) =>
view: (vnode) => [
m('.content', [
m(navbar, {
links: {
@ -92,6 +92,9 @@ const Layout = () => {
}),
m('.tab-content', vnode.children),
]),
m('#notification-container'),
m('#modal-container'),
],
};
};

113
webui-src/app/scss/pages/_mail.scss
View File

@ -13,40 +13,74 @@
}
.compose-mail {
gap: 0.5rem;
&__from {
padding-bottom: 0.5rem;
display: flex;
justify-content: space-between;
border-bottom: 2px solid $light-color;
}
&__recipients {
padding: 0.5rem 0;
display: flex;
gap: 0.5rem;
&-list {
display: flex;
gap: 0.25rem;
flex-wrap: wrap;
}
&-to {
border-bottom: 2px solid $light-color;
.recipients__to {
width: 100%;
box-shadow: none;
border: 0;
border-radius: 0;
display: flex;
flex-direction: column;
.recipient-input {
position: relative;
input[type='text'] {
width: 100%;
gap: 0.75rem;
flex-wrap: wrap;
&__selected {
padding: 0.25rem 0.5rem;
display: flex;
gap: 0.5rem;
align-items: center;
border: 1px solid $light-color;
border-radius: 3px;
cursor: default;
& i {
cursor: pointer;
padding: 0.25rem;
}
&__list {
}
&__input {
display: flex;
position: relative;
flex-grow: 1;
&-field {
flex-grow: 1;
min-width: 200px;
padding: 0;
border: none;
box-shadow: none;
&:focus + .recipients__to__input-list {
display: flex;
}
}
&-list {
position: absolute;
padding: 0.5rem;
top: 1.5rem;
padding: 0;
width: 100%;
max-height: 15rem;
background: $light-color;
flex-direction: column;
overflow: auto;
display: none;
background: white;
border-bottom: 1px solid $light-color;
&:hover {
display: flex;
}
& li {
list-style: none;
padding: 0.5rem;
cursor: pointer;
background: white;
border: 1px solid $light-color;
border-top: 0px;
&:hover {
background: $light-color;
}
}
}
}
}
@ -54,22 +88,28 @@
padding: 0.125rem 0.5rem;
}
}
&__subject {
margin-top: 0.5rem;
padding: 0.5rem 0 0;
input[type='text'].compose-mail__subject {
padding: 0.5rem 0;
border: none;
box-shadow: none;
border-top: 2px solid $light-color;
border-bottom: 2px solid $light-color;
border-radius: 0;
}
&__message {
padding: 0.5rem 0 0;
padding: 0.5rem 0;
border: none;
height: 100%;
border-top: 2px solid $light-color;
border-radius: 0;
resize: none;
}
&__send-btn {
display: flex;
align-items: center;
gap: 0.5rem;
& i {
transform: translateY(-1px);
}
}
}
.msg-view {
@ -320,3 +360,28 @@ table.attachment-container {
border-radius: 4px;
}
}
.composePopupOverlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
background-color: rgba(0, 0, 0, 0.2);
.composePopup {
position: absolute;
inset: 0;
margin: auto;
width: 80%;
height: 80%;
& > .widget {
padding: 2rem;
}
& .close-btn {
position: absolute;
top: 1.5rem;
right: 1.5rem;
}
}
}

2
webui-src/assets/index.html
View File

@ -19,7 +19,5 @@
</script>
<noscript>Sorry but JavaScript is needed here! Please enable it in your browser.</noscript>
</div>
<div id="notification-container"></div>
<div id="modal-container"></div>
</body>
</html>

2
webui-src/styles/app.css
View File

File diff suppressed because one or more lines are too long