diff --git a/dev/App/Abstract.js b/dev/App/Abstract.js index bf2b8304f..bcbb005c3 100644 --- a/dev/App/Abstract.js +++ b/dev/App/Abstract.js @@ -31,20 +31,6 @@ class AbstractApp extends AbstractBoot { this.isLocalAutocomplete = true; this.lastErrorTime = 0; - addEventListener( - 'resize', - (()=>{ - const iH = $win.height(), - iW = $win.height(); - - if ($win.__sizes[0] !== iH || $win.__sizes[1] !== iW) { - $win.__sizes[0] = iH; - $win.__sizes[1] = iW; - dispatchEvent(new CustomEvent('resize.real')); - } - }).throttle(50) - ); - const $doc = document; $doc.addEventListener('keydown', (event) => { if (event && event.ctrlKey) { diff --git a/dev/App/User.js b/dev/App/User.js index 3a9fb177e..26ee841ed 100644 --- a/dev/App/User.js +++ b/dev/App/User.js @@ -80,31 +80,6 @@ import { AbstractApp } from 'App/Abstract'; const doc = document; -if (!window.ResizeObserver) { - window.ResizeObserver = class { - constructor(callback) { - callback = callback.debounce(250); - this.observer = new MutationObserver(mutations => { - let i = mutations.length; - while (i--) { - if ('style' == mutations[i].attributeName) { - callback(); - break; - } - } - }); - } - - disconnect() { - this.observer.disconnect(); - } - - observe(target) { - this.observer.observe(target, { attributes: true }); - } - }; -} - class AppUser extends AbstractApp { constructor() { super(Remote); diff --git a/dev/Common/Globals.js b/dev/Common/Globals.js index 259f4e546..c960d293a 100644 --- a/dev/Common/Globals.js +++ b/dev/Common/Globals.js @@ -2,7 +2,6 @@ import ko from 'ko'; import { KeyState } from 'Common/Enums'; const $win = jQuery(window); -$win.__sizes = [0, 0]; export { $win }; diff --git a/dev/External/ko.js b/dev/External/ko.js index c5d55ad70..f97af93fe 100644 --- a/dev/External/ko.js +++ b/dev/External/ko.js @@ -245,22 +245,6 @@ ko.bindingHandlers.initDom = { init: (element, fValueAccessor) => fValueAccessor()(element) }; -ko.bindingHandlers.initResizeTrigger = { - init: (element, fValueAccessor) => - element.style.height = element.style.minHeight = ko.unwrap(fValueAccessor())[1] + 'px', - update: (element, fValueAccessor) => { - const values = ko.unwrap(fValueAccessor()); - let offset = element.getBoundingClientRect().top + pageYOffset; - if (0 < offset) { - offset += parseInt(values[2], 10) || 0; - element.style.height = element.style.minHeight = Math.max( - parseInt(values[1], 10) || 0, - window.innerHeight - offset - ) + 'px'; - } - } -}; - ko.bindingHandlers.appendDom = { update: (element, fValueAccessor) => { $(element) diff --git a/dev/Styles/Compose.less b/dev/Styles/Compose.less index 958faf8b1..6535a4dfb 100644 --- a/dev/Styles/Compose.less +++ b/dev/Styles/Compose.less @@ -2,9 +2,10 @@ .b-compose { &.modal { - - width: 850px; + width: 98%; + max-width: 1000px; margin: 10px auto; +/* height: 94vh;*/ .modal-body { overflow: auto; @@ -15,6 +16,9 @@ .textAreaParent, .attachmentAreaParent { overflow: hidden; position: relative; + + height: 200px; + min-height: 200px; } .attachmentAreaParent { diff --git a/dev/Styles/Layout.less b/dev/Styles/Layout.less index c9e21226d..9667e6c3e 100644 --- a/dev/Styles/Layout.less +++ b/dev/Styles/Layout.less @@ -186,10 +186,6 @@ html.ssm-state-desktop-large { left: 500px; } - .b-compose.modal { - width: 1000px; - } - .b-contacts-content.modal { width: 900px; } @@ -213,10 +209,6 @@ html.ssm-state-desktop { left: 400px; } - .b-compose.modal { - width: 1000px; - } - .b-contacts-content.modal { width: 900px; } @@ -244,10 +236,6 @@ html.ssm-state-tablet, html.ssm-state-mobile { left: 310px; } - .b-compose.modal { - width: 720px; - } - .b-contacts-content.modal { width: 700px; } @@ -261,10 +249,6 @@ html.ssm-state-tablet, html.ssm-state-mobile { html.ssm-state-tablet { - .b-compose.modal { - width: 720px; - } - .b-contacts-content.modal { width: 800px; } diff --git a/dev/Styles/_BootstrapFix.less b/dev/Styles/_BootstrapFix.less index 8b16ade84..1fdb9e3e6 100644 --- a/dev/Styles/_BootstrapFix.less +++ b/dev/Styles/_BootstrapFix.less @@ -337,7 +337,7 @@ html.no-rgba .modal { .popups { - position: absolute; + position: fixed; top: 0; bottom: 0; left: 0; @@ -449,4 +449,4 @@ html.rl-mobile { opacity: .6; } } -} \ No newline at end of file +} diff --git a/dev/View/Popup/Compose.js b/dev/View/Popup/Compose.js index 8a33acada..fc15d56d5 100644 --- a/dev/View/Popup/Compose.js +++ b/dev/View/Popup/Compose.js @@ -84,8 +84,6 @@ class ComposePopupView extends AbstractViewNext { this.sLastFocusedField = 'to'; - this.resizerTrigger = this.resizerTrigger.debounce(50).bind(this); - this.allowContacts = !!AppStore.contactsIsAllowed(); this.allowFolders = !!Settings.capa(Capa.Folders); @@ -141,11 +139,7 @@ class ComposePopupView extends AbstractViewNext { this.sendErrorDesc = ko.observable(''); this.savedErrorDesc = ko.observable(''); - this.sendError.subscribe((value) => { - if (!value) { - this.sendErrorDesc(''); - } - }); + this.sendError.subscribe(value => !value && this.sendErrorDesc('')); this.savedError.subscribe(value => !value && this.savedErrorDesc('')); @@ -217,9 +211,6 @@ class ComposePopupView extends AbstractViewNext { this.attachmentsPlace = ko.observable(false); - this.attachments.subscribe(this.resizerTrigger); - this.attachmentsPlace.subscribe(this.resizerTrigger); - this.attachmentsInErrorCount.subscribe((value) => { if (0 === value) { this.attachmentsInErrorError(false); @@ -278,14 +269,6 @@ class ComposePopupView extends AbstractViewNext { } }); - this.resizer = ko.observable(false).extend({ throttle: 50 }); - - this.resizer.subscribe(() => { - if (this.oEditor) { - this.oEditor.resize(); - } - }); - this.canBeSentOrSaved = ko.computed(() => !this.sending() && !this.saving()); setInterval(() => { @@ -302,16 +285,14 @@ class ComposePopupView extends AbstractViewNext { } }, 120000); - this.showCc.subscribe(this.resizerTrigger); - this.showBcc.subscribe(this.resizerTrigger); - this.showReplyTo.subscribe(this.resizerTrigger); - this.bDisabeCloseOnEsc = true; this.sDefaultKeyScope = KeyState.Compose; this.tryToClosePopup = this.tryToClosePopup.debounce(200); this.iTimer = 0; + + this.resizeObserver = new ResizeObserver(this.resizerTrigger.throttle(50).bind(this)); } getMessageRequestParams(sSaveFolder) @@ -660,6 +641,8 @@ class ComposePopupView extends AbstractViewNext { this.to.focused(false); routeOn(); + + this.resizeObserver.disconnect(); } editor(fOnInit) { @@ -671,7 +654,6 @@ class ComposePopupView extends AbstractViewNext { null, () => { fOnInit(this.oEditor); - this.resizerTrigger(); }, (bHtml) => { this.isHtml(!!bHtml); @@ -680,7 +662,6 @@ class ComposePopupView extends AbstractViewNext { // }, 1000); } else if (this.oEditor) { fOnInit(this.oEditor); - this.resizerTrigger(); } } } @@ -1077,7 +1058,12 @@ class ComposePopupView extends AbstractViewNext { this.currentIdentity(identity); } - this.resizerTrigger(); + let el = document.querySelector('.b-compose'); + this.resizeObserver.compose = el; + this.resizeObserver.popups = el.parentNode; // el.closest('.popups'); + this.resizeObserver.els = [el.querySelector('.textAreaParent'), el.querySelector('.attachmentAreaParent')]; + this.resizeObserver.observe(el); + this.resizeObserver.observe(el.querySelector('.b-header')); } onMessageUploadAttachments(sResult, oData) { @@ -1113,10 +1099,6 @@ class ComposePopupView extends AbstractViewNext { } } - onShowWithDelay() { - this.resizerTrigger(); - } - tryToClosePopup() { const PopupsAskViewModel = require('View/Popup/Ask'); if (!isPopupVisible(PopupsAskViewModel) && this.modalVisibility()) { @@ -1179,14 +1161,6 @@ class ComposePopupView extends AbstractViewNext { } return false; }); - - addEventListener('resize.real', this.resizerTrigger); - - setInterval(() => { - if (this.modalVisibility() && this.oEditor) { - this.oEditor.resize(); - } - }, 5000); } /** @@ -1542,7 +1516,17 @@ class ComposePopupView extends AbstractViewNext { } resizerTrigger() { - this.resizer(!this.resizer()); + let top = 0; + this.resizeObserver.els.forEach(element => top = Math.max(top, element.getBoundingClientRect().top)); + if (0 < top) { + top = this.resizeObserver.popups.clientHeight - this.resizeObserver.compose.offsetTop - 50 - top; + this.resizeObserver.els.forEach(element => + element.style.height = Math.max(top, Math.max(200,parseInt(element.style.minHeight,10))) + 'px' + ); + if (this.oEditor) { + this.oEditor.resize(); + } + } } } diff --git a/dev/polyfill.js b/dev/polyfill.js index 113166870..3721e96f0 100644 --- a/dev/polyfill.js +++ b/dev/polyfill.js @@ -14,3 +14,19 @@ Array.prototype.flat || Object.defineProperty(Array.prototype, 'flat', { }, writable: true }); + +if (!window.ResizeObserver) { + window.ResizeObserver = class { + constructor(callback) { + this.observer = new MutationObserver(callback.debounce(250)); + } + + disconnect() { + this.observer.disconnect(); + } + + observe(target) { + this.observer.observe(target, { attributes: true, subtree: true, attributeFilter: ['style'] }); + } + }; +} diff --git a/rainloop/v/0.0.0/app/templates/Views/User/PopupsCompose.html b/rainloop/v/0.0.0/app/templates/Views/User/PopupsCompose.html index 75254f327..d6cd13a79 100644 --- a/rainloop/v/0.0.0/app/templates/Views/User/PopupsCompose.html +++ b/rainloop/v/0.0.0/app/templates/Views/User/PopupsCompose.html @@ -185,7 +185,7 @@ -
+
@@ -199,8 +199,7 @@
-
+