Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-09-05 23:47:03 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improved initHorizontalLayoutResizer and initVerticalLayoutResizer with custom resizer

Browse source
This commit is contained in:
djmaze 2020-07-17 13:46:49 +02:00
parent e3aaea8035
commit 1e71698b79
4 changed files with 164 additions and 235 deletions
Download patch file Download diff file Expand all files Collapse all files

206
dev/App/User.js
View file

@ -95,6 +95,36 @@ import { hideLoading, routeOff, routeOn, setHash, startScreens, showScreenPopup
import { AbstractApp } from 'App/Abstract'; import { AbstractApp } from 'App/Abstract';
if (!window.ResizeObserver) {
window.ResizeObserver = class {
constructor(callback) {
this.observer = new window.MutationObserver(mutations => {
let entries = [];
mutations.forEach(mutation => {
if ('style' == mutation.attributeName) {
entries.push({
contentRect: {
width: mutation.target.offsetWidth,
height: mutation.target.offsetHeight
},
target: mutation.target
});
}
});
callback(entries);
});
}
disconnect() {
this.observer.disconnect();
}
observe(target) {
this.observer.observe(target, { attributes: true });
}
};
}
class AppUser extends AbstractApp { class AppUser extends AbstractApp {
constructor() { constructor() {
super(Remote); super(Remote);
@ -881,112 +911,102 @@ class AppUser extends AbstractApp {
Local.set(ClientSideKeyName.ExpandedFolders, aExpandedList); Local.set(ClientSideKeyName.ExpandedFolders, aExpandedList);
} }
initHorizontalLayoutResizer() { setLayoutResizer(source, target, bDisable) {
let top = null, if (bDisable) {
bottom = null, source.observer && source.observer.disconnect();
observer = null; source.classList.remove('resizable');
} else {
const source.classList.add('resizable');
fDisable = (bDisable) => { if (!source.querySelector('.resizer')) {
if (bDisable) { const resizer = window.document.createElement('div'),
if (observer) { css = window.getComputedStyle(source, null),
observer.disconnect(); cssint = s => parseFloat(css.getPropertyValue(s).replace('px', ''));
top.removeAttribute('style'); resizer.className = 'resizer';
top.classList.remove('resizable'); source.appendChild(resizer);
bottom.removeAttribute('style'); resizer.addEventListener('mousedown', {
} source: source,
} else if ($htmlCL.contains('rl-bottom-preview-pane')) { handleEvent: function(e) {
top = window.document.querySelector('.b-message-list-wrapper'); if ('mousedown' == e.type) {
bottom = window.document.querySelector('.b-message-view-wrapper'); e.preventDefault();
if (top && bottom) { if ('horizontal' == css.getPropertyValue('resize')) {
top.classList.add('resizable'); this.mode = 'width';
if (window.ResizeObserver) { this.pos = e.pageX;
if (!observer) { } else {
observer = new window.ResizeObserver(entries => { this.mode = 'height';
entries.forEach(entry => { this.pos = e.pageY;
if (entry.target === top) {
bottom.style.top = (56 + entry.borderBoxSize.blockSize) + 'px';
}
});
});
} }
observer.observe(top); this.min = cssint('min-'+this.mode);
} else { this.max = cssint('max-'+this.mode);
if (!observer) { this.org = cssint(this.mode);
observer = new window.MutationObserver(mutations => { window.addEventListener('mousemove', this);
mutations.forEach(mutation => { window.addEventListener('mouseup', this);
if (mutation.target === top && 'style' == mutation.attributeName) { } else if ('mousemove' == e.type) {
bottom.style.top = (56 + top.offsetHeight) + 'px'; const length = this.org + (('width' == this.mode ? e.pageX : e.pageY) - this.pos);
} if (length >= this.min && length <= this.max ) {
}); this.source.style[this.mode] = length + 'px';
});
} }
observer.observe(top, { attributes: true }); } else if ('mouseup' == e.type) {
window.removeEventListener('mousemove', this);
window.removeEventListener('mouseup', this);
} }
} }
});
if ('horizontal' == css.getPropertyValue('resize')) {
source.observer = new window.ResizeObserver(entries => {
entries.forEach(entry => {
// target.style.left = entry.borderBoxSize.blockSize + 'px';
// target.style.left = source.offsetWidth + 'px';
target.style.left = entry.contentRect.width + 'px';
});
});
} else {
source.observer = new window.ResizeObserver(entries => {
entries.forEach(entry => {
// target.style.top = entry.borderBoxSize.inlineSize + 'px';
// target.style.top = (4 + source.offsetTop + source.offsetHeight) + 'px';
target.style.top = (4 + source.offsetTop + entry.contentRect.height) + 'px';
});
});
} }
}; }
source.observer.observe(source, { box: 'border-box' });
}
source.removeAttribute('style');
target.removeAttribute('style');
}
fDisable(false); initHorizontalLayoutResizer() {
let top = window.document.querySelector('.b-message-list-wrapper'),
bottom = window.document.querySelector('.b-message-view-wrapper');
Events.sub('layout', (layout) => { if (top && bottom) {
fDisable(Layout.BottomPreview !== layout); const
}); fDisable = (bDisable) => {
this.setLayoutResizer(top, bottom, bDisable || !$htmlCL.contains('rl-bottom-preview-pane'));
};
fDisable(false);
Events.sub('layout', layout => fDisable(Layout.BottomPreview !== layout));
}
} }
initVerticalLayoutResizer() { initVerticalLayoutResizer() {
let rlLeft = null, let left = window.document.getElementById('rl-left'),
rlRight = null, right = window.document.getElementById('rl-right');
observer = null;
const if (left && right) {
fDisable = (bDisable) => { const
if (bDisable) { fDisable = bDisable => {
if (observer) { this.setLayoutResizer(left, right, bDisable);
observer.disconnect(); };
}
rlLeft.classList.remove('resizable');
rlLeft.removeAttribute('style');
rlRight.removeAttribute('style');
} else {
rlLeft = window.document.getElementById('rl-left');
rlRight = window.document.getElementById('rl-right');
if (rlLeft && rlRight) {
rlLeft.classList.add('resizable');
rlLeft.removeAttribute('style');
rlRight.removeAttribute('style');
if (window.ResizeObserver) {
let observer = new window.ResizeObserver(entries => {
entries.forEach(entry => {
if (entry.target === rlLeft) {
rlRight.style.left = entry.borderBoxSize.inlineSize + 'px';
}
});
});
observer.observe(rlLeft);
} else {
let observer = new window.MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.target === rlLeft && 'style' == mutation.attributeName) {
rlRight.style.left = rlLeft.offsetWidth + 'px';
}
});
});
observer.observe(rlLeft, { attributes: true });
}
}
}
};
fDisable(false);
Events.sub('left-panel.off', () => {
fDisable(true);
});
Events.sub('left-panel.on', () => {
fDisable(false); fDisable(false);
});
Events.sub('left-panel.off', () => fDisable(true));
Events.sub('left-panel.on', () => fDisable(false));
}
} }
logout() { logout() {

51
dev/Styles/Layout.less
View file

@ -53,18 +53,67 @@ html.rl-mobile {
min-width: 60px; min-width: 60px;
} }
/*
.resizable::after {
pointer-events: none;
position: absolute;
height: 22px;
width: 20px;
text-align: center;
bottom: 0;
right: 0;
background-color: #aaa;
}
.resizable::-webkit-resizer {
background: #aaa;
background: rgba(255,255,255,0.5);
}
*/
.resizable > .resizer {
background: #aaa;
background: rgba(255,255,255,0.5);
display: none;
opacity: 0;
position: absolute;
z-index: 102;
}
.resizable > .resizer:hover {
opacity: 1;
}
html:not(.rl-left-panel-disabled) #rl-left.resizable { html:not(.rl-left-panel-disabled) #rl-left.resizable {
resize: horizontal; resize: horizontal;
overflow: hidden; overflow: hidden;
min-width: 155px; min-width: 155px;
max-width: 350px; max-width: 350px;
} }
#rl-left > .resizer {
cursor: ew-resize;
height: 100%;
right: 0;
top: 0;
width: 5px;
}
.b-message-list-wrapper.resizable { .b-message-list-wrapper.resizable {
resize: vertical; resize: vertical;
overflow: hidden; overflow: hidden;
min-height: 200px; min-height: 200px;
max-height: 500px; max-height: 500px;
} }
.b-message-list-wrapper > .resizer {
cursor: ns-resize;
height: 5px;
left: 0;
bottom: 0;
width: 100%;
}
html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
.b-message-list-wrapper > .resizer {
display: block;
}
#rl-right { #rl-right {
.g-ui-absolute-reset; .g-ui-absolute-reset;
@ -300,7 +349,7 @@ html.rl-no-preview-pane {
} }
} }
html.rl-side-preview-pane #rl-right .ui-resizable-handle { html.rl-side-preview-pane #rl-right .resizer {
display: none !important; display: none !important;
} }

70
vendors/jquery-ui/css/no-theme/jquery-ui-1.12.1.custom.css vendored
View file

@ -88,73 +88,3 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.ui-resizable {
position: relative;
}
.ui-resizable-handle {
position: absolute;
font-size: 0.1px;
display: block;
-ms-touch-action: none;
touch-action: none;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
display: none;
}
.ui-resizable-n {
cursor: n-resize;
height: 7px;
width: 100%;
top: -5px;
left: 0;
}
.ui-resizable-s {
cursor: s-resize;
height: 7px;
width: 100%;
bottom: -5px;
left: 0;
}
.ui-resizable-e {
cursor: e-resize;
width: 7px;
right: -5px;
top: 0;
height: 100%;
}
.ui-resizable-w {
cursor: w-resize;
width: 7px;
left: -5px;
top: 0;
height: 100%;
}
.ui-resizable-se {
cursor: se-resize;
width: 12px;
height: 12px;
right: 1px;
bottom: 1px;
}
.ui-resizable-sw {
cursor: sw-resize;
width: 9px;
height: 9px;
left: -5px;
bottom: -5px;
}
.ui-resizable-nw {
cursor: nw-resize;
width: 9px;
height: 9px;
left: -5px;
top: -5px;
}
.ui-resizable-ne {
cursor: ne-resize;
width: 9px;
height: 9px;
right: -5px;
top: -5px;
}

72
vendors/jquery-ui/css/smoothness/jquery-ui-1.12.1.custom.css vendored
View file

@ -1,6 +1,6 @@
/*! jQuery UI - v1.10.3 - 2013-11-25 /*! jQuery UI - v1.10.3 - 2013-11-25
* http://jqueryui.com * http://jqueryui.com
* Includes: jquery.ui.core.css, jquery.ui.resizable.css, jquery.ui.selectable.css, jquery.ui.autocomplete.css, jquery.ui.menu.css, jquery.ui.theme.css * Includes: jquery.ui.core.css, jquery.ui.selectable.css, jquery.ui.autocomplete.css, jquery.ui.menu.css, jquery.ui.theme.css
* Copyright 2013 jQuery Foundation and other contributors; Licensed MIT */ * Copyright 2013 jQuery Foundation and other contributors; Licensed MIT */
/* Layout helpers /* Layout helpers
@ -90,76 +90,6 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.ui-resizable {
position: relative;
}
.ui-resizable-handle {
position: absolute;
font-size: 0.1px;
display: block;
-ms-touch-action: none;
touch-action: none;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
display: none;
}
.ui-resizable-n {
cursor: n-resize;
height: 7px;
width: 100%;
top: -5px;
left: 0;
}
.ui-resizable-s {
cursor: s-resize;
height: 7px;
width: 100%;
bottom: -5px;
left: 0;
}
.ui-resizable-e {
cursor: e-resize;
width: 7px;
right: -5px;
top: 0;
height: 100%;
}
.ui-resizable-w {
cursor: w-resize;
width: 7px;
left: -5px;
top: 0;
height: 100%;
}
.ui-resizable-se {
cursor: se-resize;
width: 12px;
height: 12px;
right: 1px;
bottom: 1px;
}
.ui-resizable-sw {
cursor: sw-resize;
width: 9px;
height: 9px;
left: -5px;
bottom: -5px;
}
.ui-resizable-nw {
cursor: nw-resize;
width: 9px;
height: 9px;
left: -5px;
top: -5px;
}
.ui-resizable-ne {
cursor: ne-resize;
width: 9px;
height: 9px;
right: -5px;
top: -5px;
}
.ui-selectable-helper { .ui-selectable-helper {
position: absolute; position: absolute;
z-index: 100; z-index: 100;