diff --git a/webui-src/app/mail/mail_compose.js b/webui-src/app/mail/mail_compose.js
index 65ce12c..488a0aa 100644
--- a/webui-src/app/mail/mail_compose.js
+++ b/webui-src/app/mail/mail_compose.js
@@ -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')]
),
]),
]);
diff --git a/webui-src/app/mail/mail_resolver.js b/webui-src/app/mail/mail_resolver.js
index 0529838..824276c 100644
--- a/webui-src/app/mail/mail_resolver.js
+++ b/webui-src/app/mail/mail_resolver.js
@@ -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 = {
diff --git a/webui-src/app/mail/mail_util.js b/webui-src/app/mail/mail_util.js
index ced0495..248531e 100644
--- a/webui-src/app/mail/mail_util.js
+++ b/webui-src/app/mail/mail_util.js
@@ -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,
diff --git a/webui-src/app/main.js b/webui-src/app/main.js
index 9eece54..c9a137e 100644
--- a/webui-src/app/main.js
+++ b/webui-src/app/main.js
@@ -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'),
+ ],
};
};
diff --git a/webui-src/app/scss/pages/_mail.scss b/webui-src/app/scss/pages/_mail.scss
index 0384e0b..df78045 100644
--- a/webui-src/app/scss/pages/_mail.scss
+++ b/webui-src/app/scss/pages/_mail.scss
@@ -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;
+ }
+ }
+}
diff --git a/webui-src/assets/index.html b/webui-src/assets/index.html
index ad4e3d6..5bf7bab 100644
--- a/webui-src/assets/index.html
+++ b/webui-src/assets/index.html
@@ -19,7 +19,5 @@
-
-