mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-09-05 23:47:03 +03:00
Get the stored resized layout working again
This commit is contained in:
parent
3c4b3e3b50
commit
f16f604f48
2 changed files with 27 additions and 22 deletions
|
|
@ -911,30 +911,21 @@ class AppUser extends AbstractApp {
|
||||||
Local.set(ClientSideKeyName.ExpandedFolders, aExpandedList);
|
Local.set(ClientSideKeyName.ExpandedFolders, aExpandedList);
|
||||||
}
|
}
|
||||||
|
|
||||||
setLayoutResizer(source, target, bDisable) {
|
setLayoutResizer(source, target, sClientSideKeyName, mode) {
|
||||||
if (bDisable) {
|
if (mode) {
|
||||||
source.observer && source.observer.disconnect();
|
|
||||||
source.classList.remove('resizable');
|
|
||||||
} else {
|
|
||||||
source.classList.add('resizable');
|
source.classList.add('resizable');
|
||||||
if (!source.querySelector('.resizer')) {
|
if (!source.querySelector('.resizer')) {
|
||||||
const resizer = window.document.createElement('div'),
|
const resizer = window.document.createElement('div'),
|
||||||
css = window.getComputedStyle(source, null),
|
cssint = s => parseFloat(window.getComputedStyle(source, null).getPropertyValue(s).replace('px', ''));
|
||||||
cssint = s => parseFloat(css.getPropertyValue(s).replace('px', ''));
|
|
||||||
resizer.className = 'resizer';
|
resizer.className = 'resizer';
|
||||||
source.appendChild(resizer);
|
source.appendChild(resizer);
|
||||||
resizer.addEventListener('mousedown', {
|
resizer.addEventListener('mousedown', {
|
||||||
source: source,
|
source: source,
|
||||||
|
mode: mode,
|
||||||
handleEvent: function(e) {
|
handleEvent: function(e) {
|
||||||
if ('mousedown' == e.type) {
|
if ('mousedown' == e.type) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if ('horizontal' == css.getPropertyValue('resize')) {
|
this.pos = ('width' == this.mode) ? e.pageX : e.pageY;
|
||||||
this.mode = 'width';
|
|
||||||
this.pos = e.pageX;
|
|
||||||
} else {
|
|
||||||
this.mode = 'height';
|
|
||||||
this.pos = e.pageY;
|
|
||||||
}
|
|
||||||
this.min = cssint('min-'+this.mode);
|
this.min = cssint('min-'+this.mode);
|
||||||
this.max = cssint('max-'+this.mode);
|
this.max = cssint('max-'+this.mode);
|
||||||
this.org = cssint(this.mode);
|
this.org = cssint(this.mode);
|
||||||
|
|
@ -951,27 +942,41 @@ class AppUser extends AbstractApp {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
if ('horizontal' == css.getPropertyValue('resize')) {
|
if ('width' == mode) {
|
||||||
source.observer = new window.ResizeObserver(() => {
|
source.observer = new window.ResizeObserver(() => {
|
||||||
target.style.left = source.offsetWidth + 'px';
|
target.style.left = source.offsetWidth + 'px';
|
||||||
|
Local.set(sClientSideKeyName, source.offsetWidth);
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
source.observer = new window.ResizeObserver(() => {
|
source.observer = new window.ResizeObserver(() => {
|
||||||
target.style.top = (4 + source.offsetTop + source.offsetHeight) + 'px';
|
target.style.top = (4 + source.offsetTop + source.offsetHeight) + 'px';
|
||||||
|
Local.set(sClientSideKeyName, source.offsetHeight);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
source.observer.observe(source, { box: 'border-box' });
|
source.observer.observe(source, { box: 'border-box' });
|
||||||
|
const length = Local.get(sClientSideKeyName);
|
||||||
|
if (length) {
|
||||||
|
if ('width' == mode) {
|
||||||
|
source.style.width = length + 'px';
|
||||||
|
} else {
|
||||||
|
source.style.height = length + 'px';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
source.observer && source.observer.disconnect();
|
||||||
|
source.classList.remove('resizable');
|
||||||
|
target.removeAttribute('style');
|
||||||
|
source.removeAttribute('style');
|
||||||
}
|
}
|
||||||
target.removeAttribute('style');
|
|
||||||
source.removeAttribute('style');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
initHorizontalLayoutResizer() {
|
initHorizontalLayoutResizer(sClientSideKeyName) {
|
||||||
const top = window.document.querySelector('.b-message-list-wrapper'),
|
const top = window.document.querySelector('.b-message-list-wrapper'),
|
||||||
bottom = window.document.querySelector('.b-message-view-wrapper'),
|
bottom = window.document.querySelector('.b-message-view-wrapper'),
|
||||||
fDisable = bDisable => {
|
fDisable = bDisable => {
|
||||||
this.setLayoutResizer(top, bottom, bDisable || !$htmlCL.contains('rl-bottom-preview-pane'));
|
this.setLayoutResizer(top, bottom, sClientSideKeyName,
|
||||||
|
(bDisable || !$htmlCL.contains('rl-bottom-preview-pane')) ? null : 'height');
|
||||||
};
|
};
|
||||||
if (top && bottom) {
|
if (top && bottom) {
|
||||||
fDisable(false);
|
fDisable(false);
|
||||||
|
|
@ -979,11 +984,11 @@ class AppUser extends AbstractApp {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
initVerticalLayoutResizer() {
|
initVerticalLayoutResizer(sClientSideKeyName) {
|
||||||
const left = window.document.getElementById('rl-left'),
|
const left = window.document.getElementById('rl-left'),
|
||||||
right = window.document.getElementById('rl-right'),
|
right = window.document.getElementById('rl-right'),
|
||||||
fDisable = bDisable => {
|
fDisable = bDisable => {
|
||||||
this.setLayoutResizer(left, right, bDisable);
|
this.setLayoutResizer(left, right, sClientSideKeyName, bDisable ? null : 'width');
|
||||||
};
|
};
|
||||||
if (left && right) {
|
if (left && right) {
|
||||||
fDisable(false);
|
fDisable(false);
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue