mirror of
https://github.com/the-djmaze/snappymail.git
synced 2024-09-20 07:35:55 +08:00
CompactComposer support older browsers and a different idea to modify the dialog for #1498
This commit is contained in:
the-djmaze
parent
0d34d0b25b
commit
70b1a93108
|
|
@ -6,15 +6,15 @@ class CompactComposerPlugin extends \RainLoop\Plugins\AbstractPlugin
|
|||
NAME = 'Compact Composer',
|
||||
AUTHOR = 'Sergey Mosin',
|
||||
URL = 'https://github.com/the-djmaze/snappymail/pull/1466',
|
||||
VERSION = '1.0.2',
|
||||
RELEASE = '2024-02-23',
|
||||
VERSION = '1.0.3-beta',
|
||||
RELEASE = '2024-03-19',
|
||||
REQUIRED = '2.34.0',
|
||||
LICENSE = 'AGPL v3',
|
||||
DESCRIPTION = 'WYSIWYG editor with a compact toolbar';
|
||||
|
||||
public function Init(): void
|
||||
{
|
||||
$this->addTemplate('templates/PopupsCompactCompose.html');
|
||||
// $this->addTemplate('templates/PopupsCompactCompose.html');
|
||||
$this->addCss('css/composer.css');
|
||||
$this->addJs('js/squire-raw.js');
|
||||
$this->addJs('js/parsel.js');
|
||||
|
|
|
|||
|
|
@ -14,34 +14,26 @@
|
|||
|
||||
const doc = win.document;
|
||||
|
||||
// If a user (or admin) selected the CompactComposer we need to
|
||||
// replace PopupsCompose template with PopupsCompactCompose template.
|
||||
// --
|
||||
// This might break some plugins if they query/change PopupsCompose template
|
||||
// before this code is called. They should instead listen for
|
||||
// 'rl-view-model.create' to work properly.
|
||||
if (rl.settings.get('editorWysiwyg') === 'CompactComposer') {
|
||||
const compactTemplate = doc.getElementById('PopupsCompactCompose');
|
||||
if (!compactTemplate) {
|
||||
console.error('CompactComposer: PopupsCompactCompose template not found');
|
||||
return;
|
||||
addEventListener('rl-view-model', e => {
|
||||
const vm = e.detail;
|
||||
if ('PopupsCompose' === vm.viewModelTemplateID && rl.settings.get('editorWysiwyg') === 'CompactComposer') {
|
||||
vm.querySelector('.tabs label[for="tab-body"]').dataset.bind = "visible: canMailvelope";
|
||||
// Now move the attachments tab to the bottom of the screen
|
||||
const
|
||||
input = vm.querySelector('.tabs input[value="attachments"]'),
|
||||
label = vm.querySelector('.tabs label[for="tab-attachments"]'),
|
||||
area = vm.querySelector('.tabs .attachmentAreaParent');
|
||||
input.remove();
|
||||
label.remove();
|
||||
area.remove();
|
||||
area.classList.add('compact');
|
||||
area.querySelector('.b-attachment-place').dataset.bind = "visible: addAttachmentEnabled(), css: {dragAndDropOver: dragAndDropVisible}";
|
||||
vm.viewModelDom.append(area);
|
||||
// There is a better way to do this probably,
|
||||
// but we need this for drag and drop to work
|
||||
e.detail.attachmentsArea = e.detail.bodyArea;
|
||||
}
|
||||
const originalTemplate = doc.getElementById('PopupsCompose');
|
||||
if (originalTemplate) {
|
||||
originalTemplate.id = 'PopupsCompose_replaced';
|
||||
} else {
|
||||
console.warn('CompactComposer: PopupsCompose template not found');
|
||||
}
|
||||
compactTemplate.id = 'PopupsCompose';
|
||||
|
||||
addEventListener('rl-view-model.create', e => {
|
||||
if (e.detail.viewModelTemplateID === 'PopupsCompose') {
|
||||
// There is a better way to do this probably,
|
||||
// but we need this for drag and drop to work
|
||||
e.detail.attachmentsArea = e.detail.bodyArea;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const
|
||||
removeElements = 'HEAD,LINK,META,NOSCRIPT,SCRIPT,TEMPLATE,TITLE',
|
||||
|
|
@ -155,7 +147,7 @@
|
|||
this.toolbar = toolbar;
|
||||
|
||||
toolbar.className = 'squire-toolbar btn-toolbar';
|
||||
const actions = this.#makeActions(squire, toolbar);
|
||||
const actions = this.makeActions(squire, toolbar);
|
||||
|
||||
this.squire.addEventListener('willPaste', pasteSanitizer);
|
||||
this.squire.addEventListener('pasteImage', (e) => {
|
||||
|
|
@ -300,10 +292,11 @@
|
|||
* @param {Squire} squire
|
||||
* @param {HTMLDivElement} toolbar
|
||||
* @returns {Array}
|
||||
* @private
|
||||
*/
|
||||
#makeActions(squire, toolbar) {
|
||||
makeActions(squire, toolbar) {
|
||||
|
||||
const clr = this.#makeClr();
|
||||
const clr = this.makeClr();
|
||||
const doClr = name => input => {
|
||||
// https://github.com/the-djmaze/snappymail/issues/826
|
||||
clr.style.left = (input.offsetLeft + input.parentNode.offsetLeft) + 'px';
|
||||
|
|
@ -640,11 +633,14 @@
|
|||
actions: actions
|
||||
}
|
||||
}));
|
||||
this.indicators = this.#addActionsToParent(actions, toolbar);
|
||||
this.indicators = this.addActionsToParent(actions, toolbar);
|
||||
return actions;
|
||||
}
|
||||
|
||||
#makeClr() {
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
makeClr() {
|
||||
/**@type {HTMLInputElement} clr*/
|
||||
const clr = createElement('input');
|
||||
clr.type = 'color';
|
||||
|
|
@ -675,8 +671,9 @@
|
|||
/**
|
||||
* @param {Array} items
|
||||
* @param {HTMLElement} parent
|
||||
* @private
|
||||
*/
|
||||
#addActionsToParent(items, parent) {
|
||||
addActionsToParent(items, parent) {
|
||||
const indicators = [];
|
||||
items.forEach(item => {
|
||||
let element, event;
|
||||
|
|
@ -688,7 +685,7 @@
|
|||
group.className += ' squire-html-mode-item';
|
||||
}
|
||||
if (item.items) {
|
||||
indicators.push(...this.#addActionsToParent(item.items, group));
|
||||
indicators.push(...this.addActionsToParent(item.items, group));
|
||||
}
|
||||
parent.append(group);
|
||||
return indicators;
|
||||
|
|
@ -720,7 +717,7 @@
|
|||
menu.setAttribute('role', 'menu');
|
||||
|
||||
if (item.items) {
|
||||
indicators.push(...this.#addActionsToParent(item.items, menu));
|
||||
indicators.push(...this.addActionsToParent(item.items, menu));
|
||||
}
|
||||
menuWrap.appendChild(menu);
|
||||
parent.append(menuWrap);
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@
|
|||
<tr>
|
||||
<td>
|
||||
<label data-bind="css: {'error-to': emptyToError}, tooltipErrorTip: emptyToErrorTooltip"
|
||||
data-i18n="GLOBAL/TO"></label>
|
||||
data-i18n="GLOBAL/TO"></label>
|
||||
</td>
|
||||
<td>
|
||||
<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" data-bind="emailsTags: to, autoCompleteSource: emailsSource">
|
||||
|
|
@ -146,7 +146,7 @@
|
|||
</div>
|
||||
<div class="btn-group">
|
||||
<button class="btn fontastic" id="composeUploadButton"
|
||||
data-bind="visible: addAttachmentEnabled()" data-i18n="[title]COMPOSE/ATTACH_FILES">
|
||||
data-bind="visible: addAttachmentEnabled()" data-i18n="[title]COMPOSE/ATTACH_FILES">
|
||||
⁺📎
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -156,24 +156,25 @@
|
|||
<div class="tabs">
|
||||
<input type="radio" name="tabs" value="body" id="tab-body" data-bind="checked: viewArea">
|
||||
<label for="tab-body"
|
||||
role="tab"
|
||||
aria-selected="true"
|
||||
aria-controls="panel1"
|
||||
data-bind="visible: canMailvelope"
|
||||
tabindex="0">
|
||||
role="tab"
|
||||
aria-selected="true"
|
||||
aria-controls="panel1"
|
||||
data-bind="visible: canMailvelope"
|
||||
tabindex="0">
|
||||
<i class="icon-file-text"></i>
|
||||
<span data-i18n="GLOBAL/TEXT"></span>
|
||||
</label>
|
||||
<div class="tab-content" role="tabpanel" aria-hidden="false" style="grid-column-end:3">
|
||||
<div class="textAreaParent" data-bind="initDom: editorArea, attr:{spellcheck:allowSpellcheck()?'true':'false'}"></div>
|
||||
</div>
|
||||
|
||||
<input type="radio" name="tabs" value="mailvelope" id="tab-mailvelope" data-bind="checked: viewArea">
|
||||
<label for="tab-mailvelope"
|
||||
role="tab"
|
||||
aria-selected="false"
|
||||
aria-controls="panel3"
|
||||
tabindex="0"
|
||||
data-bind="visible: canMailvelope">
|
||||
role="tab"
|
||||
aria-selected="false"
|
||||
aria-controls="panel3"
|
||||
tabindex="0"
|
||||
data-bind="visible: canMailvelope">
|
||||
<i class="mailvelope-icon"></i>
|
||||
<span>Mailvelope</span>
|
||||
</label>
|
||||
|
|
@ -183,7 +184,7 @@
|
|||
|
||||
<div class="attachmentAreaParent compact">
|
||||
<div class="b-attachment-place" data-bind="visible: addAttachmentEnabled(), css: {dragAndDropOver: dragAndDropVisible}"
|
||||
data-i18n="COMPOSE/ATTACH_DROP_FILES_DESC"></div>
|
||||
data-i18n="COMPOSE/ATTACH_DROP_FILES_DESC"></div>
|
||||
<ul class="attachmentList" data-bind="foreach: attachments">
|
||||
<li class="attachmentItem" data-bind="attr: { title: title }, css: { waiting: waiting, error: '' !== error() }">
|
||||
<div class="attachmentIcon">
|
||||
|
|
|
|||
Loading…
Reference in a new issue