Make the Put in calendar option more obvious in Mail

This commit is contained in:
Ronak Patel 2023-09-28 11:06:21 -07:00
parent 49010a70a0
commit c599847aea
3 changed files with 92 additions and 27 deletions

View file

@ -29,13 +29,14 @@ const
</propfind>`, </propfind>`,
propfindCal = `<?xml version="1.0"?> propfindCal = `<?xml version="1.0"?>
<propfind xmlns="DAV:"> <d:propfind xmlns:d="DAV:" xmlns:x1="http://apple.com/ns/ical/">
<prop> <d:prop>
<resourcetype/> <d:resourcetype/>
<current-user-privilege-set/> <d:current-user-privilege-set/>
<displayname/> <d:displayname/>
</prop> <x1:calendar-color/>
</propfind>`, </d:prop>
</d:propfind>`,
xmlParser = new DOMParser(), xmlParser = new DOMParser(),
pathRegex = /.*\/remote.php\/dav\/[^/]+\/[^/]+/g, pathRegex = /.*\/remote.php\/dav\/[^/]+\/[^/]+/g,
@ -285,7 +286,51 @@ class NextcloudFilesPopupView extends rl.pluginPopupView {
} }
}); });
} }
createCalendarListItem(calendarData, treeElement) {
const {
displayName,
href,
calendarColor
} = calendarData;
const li = document.createElement('li');
li.style.display = 'flex';
const span = document.createElement('span');
span.setAttribute('role', 'img');
span.className = 'material-design-icon checkbox-blank-circle-icon';
span.style.fill = calendarColor;
span.style.width = '20px';
span.style.height = '20px';
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width', '20');
svg.setAttribute('height', '20');
svg.setAttribute('viewBox', '0 0 24 24');
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttribute('d', 'M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z');
svg.appendChild(path);
span.appendChild(svg);
const button = document.createElement('button');
button.className = 'button-vue';
button.style.backgroundColor = 'transparent';
button.style.border = '0';
button.style.fontSize = 'large';
button.style.padding = '0';
button.style.cursor = 'pointer';
button.style.marginLeft = '5px';
button.href = href.replace(pathRegex, '').replace(/\/$/, '');
button.textContent = displayName;
button.style.color = '#1968DF';
li.appendChild(span);
li.appendChild(button);
treeElement.appendChild(li);
}
// Happens after showModal() // Happens after showModal()
beforeShow(files, fResolve) { beforeShow(files, fResolve) {
this.select = ''; this.select = '';
@ -341,26 +386,30 @@ class NextcloudCalendarsPopupView extends rl.pluginPopupView {
}) })
.then(response => (response.status < 400) ? response.text() : Promise.reject(new Error({ response }))) .then(response => (response.status < 400) ? response.text() : Promise.reject(new Error({ response })))
.then(text => { .then(text => {
const // Parse the XML text
responseList = getDavElementsByTagName( const xmlDoc = xmlParser.parseFromString(text, 'application/xml').documentElement;
xmlParser.parseFromString(text, 'application/xml').documentElement, const responseList = getElementsInNamespaces(xmlDoc, 'response');
'response'
);
for (let i = 0; i < responseList.length; ++i) { for (let i = 0; i < responseList.length; ++i) {
const e = responseList.item(i); const e = responseList[i];
if (getDavElementByTagName(e, 'resourcetype').getElementsByTagNameNS(nsCalDAV, 'calendar').length) { if (getDavElementByTagName(e, 'resourcetype').getElementsByTagNameNS(nsCalDAV, 'calendar').length) {
// && getDavElementsByTagName(getDavElementByTagName(e, 'current-user-privilege-set'), 'write').length) { const displayNameElement = getElementsInNamespaces(e, 'displayname')[0];
const li = document.createElement('li'), const displayName = displayNameElement ? displayNameElement.textContent.trim() : '';
btn = document.createElement('button');
li.dataset.icon = '📅'; const hrefElement = getElementsInNamespaces(e, 'href')[0];
li.textContent = getDavElementByTagName(e, 'displayname').textContent; const href = hrefElement ? hrefElement.textContent.trim() : '';
btn.href = getDavElementByTagName(e, 'href').textContent
.replace(pathRegex, '').replace(/\/$/, ''); const calendarColorElement = getElementsInNamespaces(e, 'calendar-color')[0];
btn.textContent = 'select'; const calendarColor = calendarColorElement ? calendarColorElement.textContent.trim() : '#000000';
btn.className = 'button-vue';
btn.style.marginLeft = '1em'; // Create an object to hold calendar data
li.append(btn); const calendarData = {
this.tree.append(li); displayName,
href,
calendarColor
};
// Call the function to create and append the list item
this.createCalendarListItem(calendarData, this.tree);
} }
} }
}) })
@ -433,3 +482,19 @@ rl.nextcloud = {
}; };
})(window.rl); })(window.rl);
function getElementsInNamespaces(xmlDocument, tagName) {
const namespaces = {
d: 'DAV:',
x1: 'http://apple.com/ns/ical/',
};
const results = [];
for (const prefix in namespaces) {
const namespaceURI = namespaces[prefix];
const elements = xmlDocument.getElementsByTagNameNS(namespaceURI, tagName);
for (const element of elements) {
results.push(element);
}
}
return results;
}

View file

@ -2,7 +2,7 @@
"NEXTCLOUD": { "NEXTCLOUD": {
"SAVE_ATTACHMENTS": "Save in Nextcloud", "SAVE_ATTACHMENTS": "Save in Nextcloud",
"SAVE_EML": "Save as .eml in Nextcloud", "SAVE_EML": "Save as .eml in Nextcloud",
"SAVE_ICS": "Put in Calendar", "SAVE_ICS": "Add to calendar",
"SELECT_FOLDER": "Select folder", "SELECT_FOLDER": "Select folder",
"SELECT_FILES": "Select file(s)", "SELECT_FILES": "Select file(s)",
"ATTACH_FILES": "Attach Nextcloud files", "ATTACH_FILES": "Attach Nextcloud files",

View file

@ -225,7 +225,7 @@
<div class="bodySubHeader" data-bind="if: message, i18nUpdate: message"> <div class="bodySubHeader" data-bind="if: message, i18nUpdate: message">
<div class="readReceipt" data-bind="visible: askReadReceipt, click: readReceipt" <div class="readReceipt" data-bind="visible: askReadReceipt, click: readReceipt"
data-icon="✉" data-i18n="MESSAGE/BUTTON_NOTIFY_READ_RECEIPT"></div> data-icon="✉" data-i18n="MESSAGE/BUTTON_NOTIFY_READ_RECEIPT"></div>
<details class="attachmentsPlace" data-bind="visible: hasAttachments, css: {'selection-mode' : showAttachmentControls}"> <details class="attachmentsPlace" data-bind="visible: hasAttachments, css: {'selection-mode' : showAttachmentControls}, attr: { 'open': hasAttachments }">
<summary data-i18n="MESSAGE/PRINT_LABEL_ATTACHMENTS"></summary> <summary data-i18n="MESSAGE/PRINT_LABEL_ATTACHMENTS"></summary>
<!-- ko ifnot: simpleAttachmentsList --> <!-- ko ifnot: simpleAttachmentsList -->
<ul class="attachmentList" data-bind="foreach: listAttachments"> <ul class="attachmentList" data-bind="foreach: listAttachments">