mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-07-13 03:27:39 +03:00
Replace my old ResizeObserver workaround for RainLoop bugs with proper CSS flex.
And removed wysiwyg resize() in favor of flexbox.
This commit is contained in:
djmaze
parent
d305e090c5
commit
789dc264f7
11 changed files with 386 additions and 441 deletions
|
|
@ -29,12 +29,6 @@ export class HtmlEditor {
|
|||
this.onBlur = onBlur;
|
||||
this.onModeChange = onModeChange;
|
||||
|
||||
this.resize = (() => {
|
||||
try {
|
||||
this.editor && this.editor.resize(element.clientWidth, element.clientHeight);
|
||||
} catch (e) {} // eslint-disable-line no-empty
|
||||
}).throttle(100);
|
||||
|
||||
if (element) {
|
||||
let editor;
|
||||
|
||||
|
|
@ -42,7 +36,6 @@ export class HtmlEditor {
|
|||
this.onReady = fn => onReady.push(fn);
|
||||
const readyCallback = () => {
|
||||
this.editor = editor;
|
||||
this.resize();
|
||||
this.onReady = fn => fn();
|
||||
onReady.forEach(fn => fn());
|
||||
};
|
||||
|
|
|
|||
6
dev/External/SquireUI.js
vendored
6
dev/External/SquireUI.js
vendored
|
|
@ -540,12 +540,6 @@ class SquireUI
|
|||
focus() {
|
||||
('plain' == this.mode ? this.plain : this.squire).focus();
|
||||
}
|
||||
|
||||
resize(width, height) {
|
||||
height = Math.max(200, (height - this.wysiwyg.offsetTop)) + 'px';
|
||||
this.wysiwyg.style.height = height;
|
||||
this.plain.style.height = height;
|
||||
}
|
||||
}
|
||||
|
||||
this.SquireUI = SquireUI;
|
||||
|
|
|
|||
|
|
@ -2,21 +2,32 @@
|
|||
.b-compose {
|
||||
|
||||
&.modal {
|
||||
width: 98%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100% - 52px);
|
||||
max-width: 1000px;
|
||||
min-height: calc(100% - 52px);
|
||||
width: 98%;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.textAreaParent, .attachmentAreaParent {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
min-height: 200px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.textAreaParent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.attachmentAreaParent {
|
||||
border-top: 1px solid #ccc;
|
||||
overflow-y: auto;
|
||||
|
|
|
|||
|
|
@ -13,6 +13,11 @@ html.rl-no-preview-pane {
|
|||
|
||||
.messageList {
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
border: 1px solid @rlMainDarkColor;
|
||||
border-radius: @rlMainBorderRadius;
|
||||
box-shadow: @rlMainShadow;
|
||||
z-index: 101;
|
||||
|
||||
.toolbar {
|
||||
position: absolute;
|
||||
|
|
@ -25,14 +30,15 @@ html.rl-no-preview-pane {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.b-message-list-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.b-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 30px;
|
||||
flex-shrink: 0;
|
||||
padding: 7px;
|
||||
z-index: 101;
|
||||
|
||||
background-color: var(--message-list-toolbar-bg-color, #eee);
|
||||
// #gradient > .vertical(#f4f4f4, #dfdfdf);
|
||||
|
|
@ -59,23 +65,9 @@ html.rl-no-preview-pane {
|
|||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.b-message-list-wrapper {
|
||||
border: 1px solid @rlMainDarkColor;
|
||||
height: 100%;
|
||||
|
||||
box-shadow: @rlMainShadow;
|
||||
border-radius: @rlMainBorderRadius;
|
||||
z-index: 101;
|
||||
}
|
||||
|
||||
.second-toolbar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: 29px;
|
||||
flex-shrink: 0;
|
||||
padding: 10px 8px 10px 11px;
|
||||
z-index: 101;
|
||||
white-space: nowrap;
|
||||
|
||||
background-color: var(--message-list-toolbar-bg-color, #eee);
|
||||
|
|
@ -108,18 +100,11 @@ html.rl-no-preview-pane {
|
|||
}
|
||||
|
||||
.b-content {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
bottom: 45px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
z-index: 101;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
background-color: #fff;
|
||||
|
||||
.listClear {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
|
|
@ -179,8 +164,7 @@ html.rl-no-preview-pane {
|
|||
}
|
||||
}
|
||||
|
||||
&.focused .b-message-list-wrapper {
|
||||
background-color: #000;
|
||||
&.focused {
|
||||
border-color: #9d9d9d;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@
|
|||
}
|
||||
|
||||
.messageView {
|
||||
background-color: #fff;
|
||||
border: 1px solid @rlMainDarkColor;
|
||||
border-radius: @rlMainBorderRadius;
|
||||
height: 100%;
|
||||
|
||||
.toolbar {
|
||||
|
|
@ -16,10 +19,14 @@
|
|||
}
|
||||
|
||||
.b-content {
|
||||
background-color: #fff;
|
||||
border: 1px solid @rlMainDarkColor;
|
||||
border-radius: @rlMainBorderRadius;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.b-message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.b-message-view-checked-helper {
|
||||
text-align: center;
|
||||
|
|
@ -77,14 +84,14 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.messageItemHeader {
|
||||
|
||||
padding: 10px;
|
||||
background-color: #f8f8f8;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-radius: @rlMainBorderRadius @rlMainBorderRadius 0 0;
|
||||
padding: 10px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.subjectParent {
|
||||
font-size: 18px;
|
||||
|
|
@ -162,11 +169,7 @@
|
|||
.messageItem {
|
||||
|
||||
color: #000;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
|
|
@ -443,8 +446,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.focused .b-content {
|
||||
z-index: 101;
|
||||
&.focused {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
border-color: darken(@rlMainDarkColor, 5%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
|
||||
.squire-toolbar {
|
||||
padding: 2px;
|
||||
border-bottom: 1px solid #b6b6b6;
|
||||
min-height: 28px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
padding: 2px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
|
@ -38,6 +39,7 @@
|
|||
.squire-wysiwyg, .squire-plain {
|
||||
box-sizing: border-box;
|
||||
font-size: 13px;
|
||||
height: 100%;
|
||||
line-height: 16px;
|
||||
min-height: 200px;
|
||||
overflow: auto;
|
||||
|
|
@ -155,6 +157,7 @@ Secondly, we can't rely on MUA's what to do with :empty
|
|||
}
|
||||
|
||||
/* @media (hover: none) */
|
||||
@media screen and (max-height: 600px) {
|
||||
.rl-mobile .textAreaParent:not(:focus-within) .squire-toolbar {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -162,9 +165,14 @@ Secondly, we can't rely on MUA's what to do with :empty
|
|||
background: #EEE;
|
||||
padding: 1px;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
top: 18px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
/*
|
||||
transform: translateY(-42px);
|
||||
z-index: 9;
|
||||
*/
|
||||
}
|
||||
}
|
||||
|
||||
.rl-mobile .b-compose.modal,
|
||||
|
|
|
|||
|
|
@ -312,8 +312,6 @@ class ComposePopupView extends AbstractViewPopup {
|
|||
}
|
||||
});
|
||||
|
||||
this.resizeObserver = new ResizeObserver(this.resizerTrigger.throttle(50).bind(this));
|
||||
|
||||
decorateKoCommands(this, {
|
||||
sendCommand: self => self.canBeSentOrSaved(),
|
||||
saveCommand: self => self.canBeSentOrSaved(),
|
||||
|
|
@ -641,8 +639,6 @@ class ComposePopupView extends AbstractViewPopup {
|
|||
|
||||
rl.route.on();
|
||||
|
||||
this.resizeObserver.disconnect();
|
||||
|
||||
(getFullscreenElement() === this.oContent) && exitFullscreen();
|
||||
}
|
||||
|
||||
|
|
@ -709,10 +705,6 @@ class ComposePopupView extends AbstractViewPopup {
|
|||
onShow(type, oMessageOrArray, aToEmails, aCcEmails, aBccEmails, sCustomSubject, sCustomPlainText) {
|
||||
rl.route.off();
|
||||
|
||||
const ro = this.resizeObserver;
|
||||
ro.observe(ro.compose);
|
||||
ro.observe(ro.header);
|
||||
|
||||
this.autosaveStart();
|
||||
|
||||
this.viewModelDom.dataset.wysiwyg = SettingsUserStore.editorDefaultType();
|
||||
|
|
@ -1088,7 +1080,7 @@ class ComposePopupView extends AbstractViewPopup {
|
|||
}
|
||||
}
|
||||
|
||||
onBuild(dom) {
|
||||
onBuild() {
|
||||
// initUploader
|
||||
|
||||
if (this.composeUploaderButton()) {
|
||||
|
|
@ -1249,12 +1241,6 @@ class ComposePopupView extends AbstractViewPopup {
|
|||
return false;
|
||||
});
|
||||
|
||||
const ro = this.resizeObserver;
|
||||
ro.compose = dom.querySelector('.b-compose');
|
||||
ro.header = dom.querySelector('.b-header');
|
||||
ro.toolbar = dom.querySelector('.b-header-toolbar');
|
||||
ro.els = [dom.querySelector('.textAreaParent'), dom.querySelector('.attachmentAreaParent')];
|
||||
|
||||
this.editor(editor => editor[this.isPlainEditor()?'modePlain':'modeWysiwyg']());
|
||||
|
||||
// Fullscreen must be on app, else other popups fail
|
||||
|
|
@ -1463,16 +1449,6 @@ class ComposePopupView extends AbstractViewPopup {
|
|||
item => item.id
|
||||
);
|
||||
}
|
||||
|
||||
resizerTrigger() {
|
||||
let ro = this.resizeObserver,
|
||||
height = Math.max(200, ro.compose.clientHeight - ro.header.offsetHeight - ro.toolbar.offsetHeight) + 'px';
|
||||
if (ro.height !== height) {
|
||||
ro.height = height;
|
||||
ro.els.forEach(element => element.style.height = height);
|
||||
this.oEditor && this.oEditor.resize();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export { ComposePopupView, ComposePopupView as default };
|
||||
|
|
|
|||
|
|
@ -60,7 +60,6 @@ export class MailMessageView extends AbstractViewRight {
|
|||
}
|
||||
}, this.messageVisibility);
|
||||
|
||||
this.oHeaderDom = null;
|
||||
this.oMessageScrollerDom = null;
|
||||
|
||||
this.addObservables({
|
||||
|
|
@ -116,7 +115,6 @@ export class MailMessageView extends AbstractViewRight {
|
|||
this.viewUid = '';
|
||||
this.viewHash = '';
|
||||
this.addObservables({
|
||||
viewBodyTopValue: 0,
|
||||
viewSubject: '',
|
||||
viewFromShort: '',
|
||||
viewFromDkimData: ['none', ''],
|
||||
|
|
@ -304,10 +302,6 @@ export class MailMessageView extends AbstractViewRight {
|
|||
showMessageComposer([sType, MessageUserStore.message()]);
|
||||
}
|
||||
|
||||
checkHeaderHeight() {
|
||||
this.oHeaderDom && this.viewBodyTopValue(MessageUserStore.message() ? this.oHeaderDom.offsetHeight : 0);
|
||||
}
|
||||
|
||||
onBuild(dom) {
|
||||
this.oMessageScrollerDom = dom.querySelector('.messageItem');
|
||||
|
||||
|
|
@ -316,19 +310,8 @@ export class MailMessageView extends AbstractViewRight {
|
|||
|
||||
this.showFullInfo.subscribe(value => Local.set(ClientSideKeyName.MessageHeaderFullInfo, value ? '1' : '0'));
|
||||
|
||||
let el = dom.querySelector('.messageItemHeader');
|
||||
this.oHeaderDom = el;
|
||||
if (el) {
|
||||
if (!this.resizeObserver) {
|
||||
this.resizeObserver = new ResizeObserver(this.checkHeaderHeight.debounce(50).bind(this));
|
||||
}
|
||||
this.resizeObserver.observe(el);
|
||||
} else if (this.resizeObserver) {
|
||||
this.resizeObserver.disconnect();
|
||||
}
|
||||
|
||||
let event = 'fullscreenchange';
|
||||
el = dom.querySelector('.b-message-view-wrapper');
|
||||
let event = 'fullscreenchange',
|
||||
el = dom.querySelector('.b-content');
|
||||
if (!el.requestFullscreen && el.webkitRequestFullscreen) {
|
||||
el.requestFullscreen = el.webkitRequestFullscreen;
|
||||
event = 'webkit'+event;
|
||||
|
|
|
|||
|
|
@ -23,8 +23,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="b-content b-message-view-wrapper">
|
||||
<div style="height: 100%">
|
||||
<div class="b-content">
|
||||
<div class="b-message-view-backdrop" data-bind="visible: moveAction">
|
||||
<div class="backdrop-message">
|
||||
<i class="fontastic">📁</i>
|
||||
|
|
@ -158,7 +157,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div data-bind="visible: message">
|
||||
<div class="b-message" data-bind="visible: message">
|
||||
<div class="messageItemHeader" data-bind="css: {'emptySubject': '' === viewSubject()}">
|
||||
<div class="subjectParent">
|
||||
<button class="close" data-bind="command: closeMessageCommand" style="margin-top: -2px;">×</button>
|
||||
|
|
@ -241,7 +240,7 @@
|
|||
</div>
|
||||
<div class="hasVirus" data-bind="visible: hasVirus()" data-i18n="MESSAGE/HAS_VIRUS_WARNING"></div>
|
||||
</div>
|
||||
<div class="messageItem" data-bind="css: viewLineAsCss(), attr: {'style': 'top:' + viewBodyTopValue() + 'px' }">
|
||||
<div class="messageItem" data-bind="css: viewLineAsCss()">
|
||||
<div tabindex="0" data-bind="hasfocus: messageDomFocused">
|
||||
|
||||
<div>
|
||||
|
|
@ -319,4 +318,3 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -153,7 +153,7 @@
|
|||
</table>
|
||||
</div>
|
||||
|
||||
<div class="attachmentAreaParent b-content" data-bind="visible: attachmentsPlace">
|
||||
<div class="attachmentAreaParent" data-bind="visible: attachmentsPlace">
|
||||
<div class="b-attachment-place" data-bind="visible: addAttachmentEnabled() && dragAndDropVisible(), initDom: composeUploaderDropPlace, css: {'dragAndDropOver': dragAndDropOver}"
|
||||
data-i18n="COMPOSE/ATTACH_DROP_FILES_DESC"></div>
|
||||
<ul class="attachmentList" data-bind="foreach: attachments">
|
||||
|
|
|
|||
|
|
@ -71,15 +71,11 @@
|
|||
border-top-color: var(--main-color);
|
||||
}
|
||||
|
||||
.messageList .b-message-list-wrapper {
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
.well,
|
||||
.modal,
|
||||
.b-settins-right .b-content,
|
||||
.messageList .b-content,
|
||||
.messageView .b-content,
|
||||
.messageList,
|
||||
.messageView,
|
||||
.b-admin-right .b-content,
|
||||
.b-compose .b-attachment-place {
|
||||
background-color: #000;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue