Skip to content

Commit

Permalink
Merge pull request #1473 from SergeyMosin/compact-composer-plugin-v1.0.1
Browse files Browse the repository at this point in the history 
Compact composer plugin v1.0.1
  • Loading branch information
@the-djmaze
the-djmaze authored Mar 1, 2024
2 parents 2efe90f + d6acf55 commit 380eae6
Show file tree
Hide file tree
Showing 4 changed files with 50 additions and 63 deletions.
1 change: 1 addition & 0 deletions plugins/compact-composer/css/composer.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@

.squire-toolbar-svg-icon {
display: block;
fill: var(--dialog-clr, #333);
}

.squire2-mode-wysiwyg .squire-plain,
Expand Down
4 changes: 2 additions & 2 deletions plugins/compact-composer/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.0',
VERSION = '1.0.1',
RELEASE = '2024-02-23',
REQUIRED = '2.34.0',
LICENSE = 'AGPL v3',
DESCRIPTION = 'WYSIWYG editor with a compact toolbar';

public function Init(): void
{
$this->addTemplate('templates/PopupsCompose.html');
$this->addTemplate('templates/PopupsCompactCompose.html');
$this->addCss('css/composer.css');
$this->addJs('js/squire-raw.js');
$this->addJs('js/parsel.js');
Expand Down
65 changes: 44 additions & 21 deletions plugins/compact-composer/js/CompactComposer.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,47 @@
/* eslint max-len: 0 */
(win => {

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 rl = win.rl;

if (!rl) {
return;
}

rl.registerWYSIWYG('CompactComposer', (owner, container, onReady) => {
const editor = new CompactComposer(container);
onReady(editor);
});

const doc = win.document;
const rl = win.rl;

// 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;
}
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',
Expand Down Expand Up @@ -114,9 +145,6 @@

this.container = container;

toolbar.className = 'squire-toolbar btn-toolbar';
const actions = this.#makeActions(squire, toolbar);

plain.className = 'squire-plain';
wysiwyg.className = 'squire-wysiwyg';
wysiwyg.dir = 'auto';
Expand All @@ -126,6 +154,9 @@
this.wysiwyg = wysiwyg;
this.toolbar = toolbar;

toolbar.className = 'squire-toolbar btn-toolbar';
const actions = this.#makeActions(squire, toolbar);

this.squire.addEventListener('willPaste', pasteSanitizer);
this.squire.addEventListener('pasteImage', (e) => {
pasteImageHandler(e, squire);
Expand Down Expand Up @@ -663,13 +694,13 @@
return indicators;
case 'menu':
case 'menu_more':
const menuWrap = document.createElement('div');
const menuWrap = createElement('div');
menuWrap.className = 'btn-group dropdown squire-toolbar-menu-wrap';
menuWrap.title = item.label;
if (!item.showInPlainMode) {
menuWrap.className += ' squire-html-mode-item';
}
const menuBtn = document.createElement('a');
const menuBtn = createElement('button');
menuBtn.className = 'btn dropdown-toggle';
if (item.icon !== '') {
menuBtn.innerHTML = item.icon;
Expand All @@ -680,7 +711,7 @@
}
menuWrap.appendChild(menuBtn);

const menu = document.createElement('ul');
const menu = createElement('ul');
menu.className = 'dropdown-menu squire-toolbar-menu';
if (item.rightEdge) {
menu.className += ' right-edge';
Expand Down Expand Up @@ -956,12 +987,4 @@
}
}
}

if (rl) {
rl.registerWYSIWYG('CompactComposer', (owner, container, onReady) => {
const editor = new CompactComposer(container);
onReady(editor);
});
}

})(window);
43 changes: 3 additions & 40 deletions ...act-composer/templates/PopupsCompose.html → ...poser/templates/PopupsCompactCompose.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,10 +145,10 @@
</a>
</div>
<div class="btn-group">
<a class="btn fontastic" style="padding-left: 10px; padding-right: 10px;" id="composeUploadButton"
data-bind="visible: addAttachmentEnabled()" data-i18n="[title]COMPOSE/ATTACH_FILES">
<button class="btn fontastic" id="composeUploadButton"
data-bind="visible: addAttachmentEnabled()" data-i18n="[title]COMPOSE/ATTACH_FILES">
⁺📎
</a>
</button>
</div>
</div>
</div>
Expand All @@ -167,41 +167,6 @@
<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="attachments" id="tab-attachments" data-bind="checked: viewArea">-->
<!-- <label for="tab-attachments"-->
<!-- role="tab"-->
<!-- aria-selected="false"-->
<!-- aria-controls="panel2"-->
<!-- tabindex="0"-->
<!-- data-bind="-->
<!-- css: { 'btn-danger': attachmentsInErrorCount() },-->
<!-- tooltipErrorTip: attachmentsErrorTooltip">-->
<!-- <b data-bind="visible: attachmentsCount, text: attachmentsCount"></b>-->
<!-- <i data-bind="css: { 'icon-attachment': !attachmentsInProcessCount(), 'icon-spinner': attachmentsInProcessCount()}"></i>-->
<!-- <span data-i18n="GLOBAL/ATTACHMENTS"></span>-->
<!-- </label>-->
<!-- <div class="tab-content attachmentAreaParent" role="tabpanel" aria-hidden="true" style="grid-column-end:4">-->
<!-- <div class="b-attachment-place" data-bind="visible: addAttachmentEnabled() && dragAndDropVisible(), css: {dragAndDropOver: dragAndDropOver}"-->
<!-- 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">-->
<!-- <i class="iconMain" data-bind="css: iconClass, visible: !uploading() || 0 === progress()"></i>-->
<!-- <div class="iconProgress" data-bind="attr: { style: progressStyle }, visible: uploading"></div>-->
<!-- <div class="iconBG" data-bind="text: progressText, visible: uploading"></div>-->
<!-- </div>-->
<!-- <div class="attachmentNameParent">-->
<!-- <a href="#" class="close pull-right" style="margin-top:-4px;" data-bind="click: cancel">×</a>-->
<!-- <div class="attachmentName" data-bind="text: fileName"></div>-->
<!-- <span class="attachmentSize" data-bind="text: friendlySize"></span>-->
<!-- </div>-->
<!-- </li>-->
<!-- </ul>-->
<!-- <div class="no-attachments-desc" data-bind="visible: 0 === attachments().length"-->
<!-- data-i18n="COMPOSE/NO_ATTACHMENTS_HERE_DESC"></div>-->
<!-- </div>-->

<input type="radio" name="tabs" value="mailvelope" id="tab-mailvelope" data-bind="checked: viewArea">
<label for="tab-mailvelope"
role="tab"
Expand All @@ -219,8 +184,6 @@
<div class="attachmentAreaParent compact">
<div class="b-attachment-place" data-bind="visible: addAttachmentEnabled(), css: {dragAndDropOver: dragAndDropVisible}"
data-i18n="COMPOSE/ATTACH_DROP_FILES_DESC"></div>
<!-- <div class="b-attachment-place dragAndDropOver"-->
<!-- 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">
Expand Down

0 comments on commit 380eae6

Please sign in to comment.