Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Compact composer plugin v1.0.1 #1473

Merged
merged 3 commits into from
Mar 1, 2024
Merged

Compact composer plugin v1.0.1 #1473

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c0247ff
improve: fire the 'squire2-toolbar' event after more props are added
SergeyMosin Mar 1, 2024
6169f60
improve: add dark theme support and use 'button' element as menu trig…
SergeyMosin Mar 1, 2024
d6acf55
fix: use compact template in non-destructive way (do not replace the …
SergeyMosin Mar 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions plugins/compact-composer/css/composer.css
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading