extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2025-02-02 11:29:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

Mail: Let browser deal with text area sizing in compose

Browse Source 
Fixes bug where toolbar can get hidden when editing certain emails
This commit is contained in:
nathan 2023-07-05 11:23:28 -06:00
parent dffa51e3dd
commit 1ecdc28359
2 changed files with 87 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
mail/js/app.js
View File

@ -363,16 +363,23 @@ app.classes.mail = AppJS.extend(
that.compose_fieldExpander(); that.compose_fieldExpander();
} }
}); });
/*Trigger compose_resizeHandler after the TinyMCE is fully loaded*/ /*Trigger after the TinyMCE is fully loaded*/
jQuery('#mail-compose').on ('load',function() { jQuery('#mail-compose').on ('load',function() {
if (textAreaWidget && textAreaWidget.tinymce) if (textAreaWidget && textAreaWidget.tinymce)
{ {
textAreaWidget.tinymce.then(()=>{ textAreaWidget.tinymce.then(()=>
that.compose_resizeHandler(); {
if (textAreaWidget.editor) jQuery(textAreaWidget.editor.iframeElement.contentWindow.document).on('dragenter', function(){ // Clear explicit height so browser can manage it
// anything to bind on tinymce iframe textAreaWidget.tinymce_container.style.height = "";
});
if (textAreaWidget.editor)
{
jQuery(textAreaWidget.editor.iframeElement.contentWindow.document).on('dragenter', function ()
{
// anything to bind on tinymce iframe
});
}
}); });
} }
else else
@ -389,7 +396,6 @@ app.classes.mail = AppJS.extend(
e.stopImmediatePropagation(); e.stopImmediatePropagation();
return false; return false;
} }
that.compose_resizeHandler();
}); });
// Init key handler // Init key handler
this.init_keyHandler(); this.init_keyHandler();
@ -3936,9 +3942,6 @@ app.classes.mail = AppJS.extend(
var groupbox = boxAttachment.getParent(); var groupbox = boxAttachment.getParent();
if (groupbox) groupbox.set_disabled(false); if (groupbox) groupbox.set_disabled(false);
} }
//Resize the compose dialog
var self = this;
setTimeout(function(){self.compose_resizeHandler();}, 100);
return true; return true;
}, },
@ -4672,65 +4675,7 @@ app.classes.mail = AppJS.extend(
} }
}, },
/** /**
* Control textArea size based on available free space at the bottom
*
*/
compose_resizeHandler: function()
{
// Do not resize compose dialog if it's running on mobile device
// in this case user would be able to edit mail body by scrolling down,
// which is more convenient on small devices. Also resize mailbody with
// tinyMCE may causes performance regression, especially on devices with
// very limited resources and slow proccessor.
if (egwIsMobile()) return false;
try {
var bodyH = egw_getWindowInnerHeight();
var textArea = this.et2.getWidgetById('mail_plaintext');
var $headerSec = jQuery('.mailComposeHeaderSection');
var content = this.et2.getArrayMgr('content').data;
if (typeof textArea != 'undefined' && textArea != null)
{
if (textArea.getParent().disabled)
{
textArea = this.et2.getWidgetById('mail_htmltext');
}
// Tolerate values base on plain text or html, in order to calculate freespaces
var textAreaDelta = textArea.id == "mail_htmltext"?20:40;
// while attachments are in progress take progress visiblity into account
// otherwise the attachment progress is finished and consider attachments list
var delta = textAreaDelta;
var bodySize = (bodyH - Math.round($headerSec.height() + $headerSec.offset().top) - delta);
if (textArea.id != "mail_htmltext")
{
textArea.getParent().style.height = `${bodySize}px`;
}
else if (typeof textArea != 'undefined' && textArea.id == 'mail_htmltext')
{
if (textArea.editor)
{
jQuery(textArea.editor.editorContainer).height(bodySize);
jQuery(textArea.editor.iframeElement).height(bodySize - (textArea.editor.editorContainer.getElementsByClassName('tox-toolbar')[0].clientHeight +
textArea.editor.editorContainer.getElementsByClassName('tox-statusbar')[0].clientHeight));
}
}
else
{
textArea.set_height(bodySize - 90);
}
}
}
catch(e) {
// ignore errors causing compose to load twice
}
},
/**
* Display Folder,Cc or Bcc fields in compose popup * Display Folder,Cc or Bcc fields in compose popup
* *
* @param {jQuery event} event * @param {jQuery event} event
@ -4823,7 +4768,6 @@ app.classes.mail = AppJS.extend(
} }
} }
} }
this.compose_resizeHandler();
}, },
/** /**

137
mail/templates/default/compose.xet
View File

@ -1,7 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE overlay PUBLIC "-//EGroupware GmbH//eTemplate 2.0//EN" "https://www.egroupware.org/etemplate2.0.dtd"> <!DOCTYPE overlay PUBLIC "-//EGroupware GmbH//eTemplate 2.0//EN" "https://www.egroupware.org/etemplate2.0.dtd">
<overlay> <overlay>
<template id="mail.compose" template="" lang="" group="0" version="1.9.001"> <template id="mail.compose" template="" lang="" group="0" version="23.1">
<et2-vbox class="mailCompose mailComposeHeaderSection" width="100%"> <et2-vbox class="mailCompose mailComposeHeaderSection" width="100%">
<toolbar id="composeToolbar" width="et2_fullWidth" view_range="7" flat_list="false" list_header="short"/> <toolbar id="composeToolbar" width="et2_fullWidth" view_range="7" flat_list="false" list_header="short"/>
<et2-hbox class="mail-compose_toolbar_assist" width="100%"> <et2-hbox class="mail-compose_toolbar_assist" width="100%">
@ -67,59 +67,59 @@
</row> </row>
<row class="mailComposeHeaders mailComposeJQueryCc"> <row class="mailComposeHeaders mailComposeJQueryCc">
<et2-description value="Cc"></et2-description> <et2-description value="Cc"></et2-description>
<et2-select-email id="cc" width="100%" allowDragAndDrop="true" onclick="app.mail.address_click" multiple="true" <et2-select-email id="cc" width="100%" allowDragAndDrop="true" onclick="app.mail.address_click" multiple="true"
onchange="app.mail.recipients_onchange" searchUrl="EGroupware\Api\Etemplate\Widget\Taglist::ajax_email" onchange="app.mail.recipients_onchange" searchUrl="EGroupware\Api\Etemplate\Widget\Taglist::ajax_email"
placeholder="select or insert email address" includeLists="true" allowPlaceholder="true"></et2-select-email> placeholder="select or insert email address" includeLists="true" allowPlaceholder="true"></et2-select-email>
<et2-description></et2-description> <et2-description></et2-description>
</row> </row>
<row class="mailComposeHeaders mailComposeJQueryBcc"> <row class="mailComposeHeaders mailComposeJQueryBcc">
<et2-description value="Bcc"></et2-description> <et2-description value="Bcc"></et2-description>
<et2-select-email id="bcc" width="100%" allowDragAndDrop="true" onclick="app.mail.address_click" multiple="true" <et2-select-email id="bcc" width="100%" allowDragAndDrop="true" onclick="app.mail.address_click" multiple="true"
onchange="app.mail.recipients_onchange" searchUrl="EGroupware\Api\Etemplate\Widget\Taglist::ajax_email" onchange="app.mail.recipients_onchange" searchUrl="EGroupware\Api\Etemplate\Widget\Taglist::ajax_email"
placeholder="select or insert email address" includeLists="true" allowPlaceholder="true"></et2-select-email> placeholder="select or insert email address" includeLists="true" allowPlaceholder="true"></et2-select-email>
<et2-description></et2-description> <et2-description></et2-description>
</row> </row>
<row class="mailComposeHeaders"> <row class="mailComposeHeaders">
<et2-description value="Subject"></et2-description> <et2-description value="Subject"></et2-description>
<et2-textbox align="left" width="100%" id="subject" height="25" onchange="app.mail.subject2title"></et2-textbox> <et2-textbox align="left" width="100%" id="subject" height="25" onchange="app.mail.subject2title"></et2-textbox>
<et2-hbox align="left"> <et2-hbox align="left">
<et2-checkbox statustext="Change editor type" label="HTML" id="mimeType" onchange="app.mail.submitOnChange" tabindex="7" roTrue=" " roFalse="disable"></et2-checkbox> <et2-checkbox statustext="Change editor type" label="HTML" id="mimeType" onchange="app.mail.submitOnChange" tabindex="7" roTrue=" " roFalse="disable"></et2-checkbox>
</et2-hbox> </et2-hbox>
</row> </row>
</rows> </rows>
</grid> </grid>
</et2-vbox> </et2-vbox>
<et2-vbox class="mailComposeBodySection" width="100%"> <et2-vbox class="mailComposeBodySection">
<et2-vbox class="et2_file mailUploadSection" disabled="@no_griddata"> <et2-vbox class="et2_file mailUploadSection" disabled="@no_griddata">
<et2-details toggleAlign="left" title="@attachmentsBlockTitle" toggleOnHover="true" class="attachments" hoist="true" disabled="!@attachments"> <et2-details toggleAlign="left" title="@attachmentsBlockTitle" toggleOnHover="true" class="attachments" hoist="true" disabled="!@attachments">
<et2-hbox slot="summary"> <et2-hbox slot="summary">
<grid class="previewAttachmentArea egwGridView_grid" > <grid class="previewAttachmentArea egwGridView_grid">
<columns> <columns>
<column width= "3%"/> <column width="3%"/>
<column disabled="!@showtempname" width="10%"/> <column disabled="!@showtempname" width="10%"/>
<column width="85%"/> <column width="85%"/>
<column width="8%"/> <column width="8%"/>
</columns> </columns>
<rows> <rows>
<row class="row attachmentRow"> <row class="row attachmentRow">
<et2-image src="@attachments[0][filemode_icon]" statustext="@attachments[0][filemode_title]"></et2-image> <et2-image src="@attachments[0][filemode_icon]" statustext="@attachments[0][filemode_title]"></et2-image>
<et2-description id="attachments[0][tmp_name]"></et2-description> <et2-description id="attachments[0][tmp_name]"></et2-description>
<et2-description class="useEllipsis et2_link" value="@attachments[0][name]" id="0[name]" onclick="app.mail.displayUploadedFile" noLang="1"></et2-description> <et2-description class="useEllipsis et2_link" value="@attachments[0][name]" id="0[name]" onclick="app.mail.displayUploadedFile" noLang="1"></et2-description>
<vfs-size align="right" id="attachments[0][size]" /> <vfs-size align="right" id="attachments[0][size]"/>
</row> </row>
</rows> </rows>
</grid> </grid>
</et2-hbox> </et2-hbox>
<grid id="attachments" class="previewAttachmentArea egwGridView_grid"> <grid id="attachments" class="previewAttachmentArea egwGridView_grid">
<columns> <columns>
<column width= "3%"/> <column width="3%"/>
<column disabled="!@showtempname" width="10%"/> <column disabled="!@showtempname" width="10%"/>
<column width="85%"/> <column width="85%"/>
<column width="8%"/> <column width="8%"/>
<column width="" /> <column width=""/>
</columns> </columns>
<rows> <rows>
<row class="row attachmentRow"> <row class="row attachmentRow">
<et2-image src="$row_cont[filemode_icon]" statustext="$row_cont[filemode_title]"></et2-image> <et2-image src="$row_cont[filemode_icon]" statustext="$row_cont[filemode_title]"></et2-image>
<et2-description id="${row}[tmp_name]"></et2-description> <et2-description id="${row}[tmp_name]"></et2-description>
<et2-description class="useEllipsis et2_link" id="${row}[name]" onclick="app.mail.displayUploadedFile" noLang="1"></et2-description> <et2-description class="useEllipsis et2_link" id="${row}[name]" onclick="app.mail.displayUploadedFile" noLang="1"></et2-description>
@ -136,15 +136,24 @@
<et2-date id="expiration" placeholder="@expiration_blur" dataFormat="Y-m-d"></et2-date> <et2-date id="expiration" placeholder="@expiration_blur" dataFormat="Y-m-d"></et2-date>
</et2-hbox> </et2-hbox>
<et2-password id="password" statustext="Only makes sense, if you transport password through a different channel / outside of this mail to recipients!" placeholder="password protect"></et2-password> <et2-password id="password" statustext="Only makes sense, if you transport password through a different channel / outside of this mail to recipients!" placeholder="password protect"></et2-password>
</et2-hbox> </et2-hbox>
</et2-vbox> </et2-vbox>
<et2-hbox disabled="@is_plain" class="mailComposeBody mailComposeHtmlContainer"> <et2-hbox disabled="@is_plain" class="mailComposeBody mailComposeHtmlContainer">
<htmlarea name="mail_htmltext" id="mail_htmltext" statusbar="false" menubar="false" toolbar="@html_toolbar" imageUpload="link_to" expand_toolbar="true" height="478px" width="100%" resize_ratio="0"/> <htmlarea name="mail_htmltext" id="mail_htmltext" statusbar="false" menubar="false" toolbar="@html_toolbar" imageUpload="link_to" expand_toolbar="true" width="100%" resize_ratio="0"/>
</et2-hbox> </et2-hbox>
<et2-hbox disabled="@is_html" class="mailComposeBody mailComposeTextContainer"> <et2-hbox disabled="@is_html" class="mailComposeBody mailComposeTextContainer">
<et2-textarea width="100%" span="all" name="mail_plaintext" id="mail_plaintext" noLang="1" resizeRatio="0"></et2-textarea> <et2-textarea width="100%" span="all" name="mail_plaintext" id="mail_plaintext" noLang="1" resizeRatio="0"></et2-textarea>
</et2-hbox> </et2-hbox>
</et2-vbox> </et2-vbox>
</template> <styles>
#mail-compose > div {
display: flex;
flex-direction: column;
}
#mail-compose .mailComposeBodySection, #mail-compose .mailComposeBody.mailComposeHtmlContainer {
flex: 1 1 auto;
}
</styles>
</template>
</overlay> </overlay>