extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-11-25 01:13:25 +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 1b3ce756f9
commit 6ace2c1fbc
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();
}
});
/*Trigger compose_resizeHandler after the TinyMCE is fully loaded*/
/*Trigger after the TinyMCE is fully loaded*/
jQuery('#mail-compose').on ('load',function() {
if (textAreaWidget && textAreaWidget.tinymce)
{
textAreaWidget.tinymce.then(()=>{
that.compose_resizeHandler();
if (textAreaWidget.editor) jQuery(textAreaWidget.editor.iframeElement.contentWindow.document).on('dragenter', function(){
// anything to bind on tinymce iframe
});
textAreaWidget.tinymce.then(()=>
{
// Clear explicit height so browser can manage it
textAreaWidget.tinymce_container.style.height = "";
if (textAreaWidget.editor)
{
jQuery(textAreaWidget.editor.iframeElement.contentWindow.document).on('dragenter', function ()
{
// anything to bind on tinymce iframe
});
}
});
}
else
@ -389,7 +396,6 @@ app.classes.mail = AppJS.extend(
e.stopImmediatePropagation();
return false;
}
that.compose_resizeHandler();
});
// Init key handler
this.init_keyHandler();
@ -3936,9 +3942,6 @@ app.classes.mail = AppJS.extend(
var groupbox = boxAttachment.getParent();
if (groupbox) groupbox.set_disabled(false);
}
//Resize the compose dialog
var self = this;
setTimeout(function(){self.compose_resizeHandler();}, 100);
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
*
* @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"?>
<!DOCTYPE overlay PUBLIC "-//EGroupware GmbH//eTemplate 2.0//EN" "https://www.egroupware.org/etemplate2.0.dtd">
<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%">
<toolbar id="composeToolbar" width="et2_fullWidth" view_range="7" flat_list="false" list_header="short"/>
<et2-hbox class="mail-compose_toolbar_assist" width="100%">
@ -67,59 +67,59 @@
</row>
<row class="mailComposeHeaders mailComposeJQueryCc">
<et2-description value="Cc"></et2-description>
<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"
placeholder="select or insert email address" includeLists="true" allowPlaceholder="true"></et2-select-email>
<et2-description></et2-description>
</row>
<row class="mailComposeHeaders mailComposeJQueryBcc">
<et2-description value="Bcc"></et2-description>
<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"
placeholder="select or insert email address" includeLists="true" allowPlaceholder="true"></et2-select-email>
<et2-description></et2-description>
</row>
<row class="mailComposeHeaders">
<et2-description value="Subject"></et2-description>
<et2-textbox align="left" width="100%" id="subject" height="25" onchange="app.mail.subject2title"></et2-textbox>
<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-hbox>
</row>
</rows>
</grid>
</et2-vbox>
<et2-vbox class="mailComposeBodySection" width="100%">
<et2-vbox class="et2_file mailUploadSection" disabled="@no_griddata">
<et2-details toggleAlign="left" title="@attachmentsBlockTitle" toggleOnHover="true" class="attachments" hoist="true" disabled="!@attachments">
<et2-hbox slot="summary">
<grid class="previewAttachmentArea egwGridView_grid" >
<columns>
<column width= "3%"/>
<column disabled="!@showtempname" width="10%"/>
<column width="85%"/>
<column width="8%"/>
</columns>
<rows>
<row class="row attachmentRow">
<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 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]" />
</row>
</rows>
</grid>
</et2-hbox>
<grid id="attachments" class="previewAttachmentArea egwGridView_grid">
<columns>
<column width= "3%"/>
<column disabled="!@showtempname" width="10%"/>
<column width="85%"/>
<column width="8%"/>
<column width="" />
</columns>
<rows>
<row class="row attachmentRow">
<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"
placeholder="select or insert email address" includeLists="true" allowPlaceholder="true"></et2-select-email>
<et2-description></et2-description>
</row>
<row class="mailComposeHeaders mailComposeJQueryBcc">
<et2-description value="Bcc"></et2-description>
<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"
placeholder="select or insert email address" includeLists="true" allowPlaceholder="true"></et2-select-email>
<et2-description></et2-description>
</row>
<row class="mailComposeHeaders">
<et2-description value="Subject"></et2-description>
<et2-textbox align="left" width="100%" id="subject" height="25" onchange="app.mail.subject2title"></et2-textbox>
<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-hbox>
</row>
</rows>
</grid>
</et2-vbox>
<et2-vbox class="mailComposeBodySection">
<et2-vbox class="et2_file mailUploadSection" disabled="@no_griddata">
<et2-details toggleAlign="left" title="@attachmentsBlockTitle" toggleOnHover="true" class="attachments" hoist="true" disabled="!@attachments">
<et2-hbox slot="summary">
<grid class="previewAttachmentArea egwGridView_grid">
<columns>
<column width="3%"/>
<column disabled="!@showtempname" width="10%"/>
<column width="85%"/>
<column width="8%"/>
</columns>
<rows>
<row class="row attachmentRow">
<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 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]"/>
</row>
</rows>
</grid>
</et2-hbox>
<grid id="attachments" class="previewAttachmentArea egwGridView_grid">
<columns>
<column width="3%"/>
<column disabled="!@showtempname" width="10%"/>
<column width="85%"/>
<column width="8%"/>
<column width=""/>
</columns>
<rows>
<row class="row attachmentRow">
<et2-image src="$row_cont[filemode_icon]" statustext="$row_cont[filemode_title]"></et2-image>
<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>
@ -136,15 +136,24 @@
<et2-date id="expiration" placeholder="@expiration_blur" dataFormat="Y-m-d"></et2-date>
</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-hbox>
</et2-vbox>
<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"/>
</et2-hbox>
<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-hbox>
</et2-hbox>
</et2-vbox>
<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" width="100%" resize_ratio="0"/>
</et2-hbox>
<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-hbox>
</et2-vbox>
</template>
</et2-vbox>
<styles>
#mail-compose > div {
display: flex;
flex-direction: column;
}
#mail-compose .mailComposeBodySection, #mail-compose .mailComposeBody.mailComposeHtmlContainer {
flex: 1 1 auto;
}
</styles>
</template>
</overlay>