Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-08-29 03:59:21 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Replace my old ResizeObserver workaround for RainLoop bugs with proper CSS flex.

Browse source 
And removed wysiwyg resize() in favor of flexbox.
This commit is contained in:
djmaze 2021-11-05 14:47:19 +01:00
parent d305e090c5
commit 789dc264f7
11 changed files with 386 additions and 441 deletions
Download patch file Download diff file Expand all files Collapse all files

7
dev/Common/Html.js
View file

@ -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
View file

@ -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;

15
dev/Styles/User/Compose.less
View file

@ -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;

46
dev/Styles/User/MessageList.less
View file

@ -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;
}
}

126
dev/Styles/User/MessageView.less
View file

@ -3,6 +3,9 @@
}
.messageView {
background-color: #fff;
border: 1px solid @rlMainDarkColor;
border-radius: @rlMainBorderRadius;
height: 100%;
.toolbar {
@ -16,75 +19,79 @@
}
.b-content {
background-color: #fff;
border: 1px solid @rlMainDarkColor;
border-radius: @rlMainBorderRadius;
height: 100%;
}
.b-message-view-checked-helper {
text-align: center;
font-size: 70px;
line-height: 70px;
padding-top: 100px;
color: #999;
.b-message {
display: flex;
flex-direction: column;
height: 100%;
}
.icon-mail {
font-size: 100px;
font-size: 50px;
line-height: 90px;
padding-left: 10px;
}
.b-message-view-checked-helper {
text-align: center;
font-size: 70px;
line-height: 70px;
padding-top: 100px;
color: #999;
.icon-mail {
font-size: 100px;
font-size: 50px;
line-height: 90px;
padding-left: 10px;
}
}
.b-message-view-desc {
text-align: center;
font-size: 24px;
line-height: 30px;
color: #999;
padding: 120px 10px 0 10px;
}
.b-message-view-desc.error {
color: #DA4F49;
}
.message-fixed-button-toolbar {
z-index: 100;
position: absolute;
top: 33px;
right: 10px;
}
.infoParent {
cursor: pointer;
opacity: 0.5;
&:hover {
opacity: 1;
}
}
.flagParent {
cursor: pointer;
margin: 0 0.25em;
.flagOn {
color: orange;
}
.b-message-view-desc {
text-align: center;
font-size: 24px;
line-height: 30px;
color: #999;
padding: 120px 10px 0 10px;
}
.b-message-view-desc.error {
color: #DA4F49;
}
.message-fixed-button-toolbar {
z-index: 100;
position: absolute;
top: 33px;
right: 10px;
}
.infoParent {
cursor: pointer;
&.flagOff:not(:hover) {
opacity: 0.5;
&:hover {
opacity: 1;
}
}
.flagParent {
cursor: pointer;
margin: 0 0.25em;
.flagOn {
color: orange;
}
&.flagOff:not(:hover) {
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%);
}

30
dev/Styles/User/SquireUI.less
View file

@ -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,16 +157,22 @@ Secondly, we can't rely on MUA's what to do with :empty
}
/* @media (hover: none) */
.rl-mobile .textAreaParent:not(:focus-within) .squire-toolbar {
display: none;
}
.rl-mobile .squire-toolbar {
background: #EEE;
padding: 1px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
@media screen and (max-height: 600px) {
.rl-mobile .textAreaParent:not(:focus-within) .squire-toolbar {
display: none;
}
.rl-mobile .squire-toolbar {
background: #EEE;
padding: 1px;
position: fixed;
top: 18px;
left: 0;
right: 0;
/*
transform: translateY(-42px);
z-index: 9;
*/
}
}
.rl-mobile .b-compose.modal,

26
dev/View/Popup/Compose.js
View file

@ -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 };

21
dev/View/User/MailBox/MessageView.js
View file

@ -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;