Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-07-13 03:27:39 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Properly fix #928 by redesign using display: flex

Browse source
This commit is contained in:
the-djmaze 2023-02-08 17:39:30 +01:00
parent 8b8b0fc7e4
commit b448b8661d
7 changed files with 94 additions and 141 deletions
Download patch file Download diff file Expand all files Collapse all files

2
dev/App/User.js
View file

@ -251,7 +251,7 @@ export class AppUser extends AbstractApp {
setTimeout(() => { setTimeout(() => {
const left = elementById('rl-left'), const left = elementById('rl-left'),
fToggle = () => fToggle = () =>
setLayoutResizer(left, null, ClientSideKeyNameFolderListSize, setLayoutResizer(left, ClientSideKeyNameFolderListSize,
(ThemeStore.isMobile() || leftPanelDisabled()) ? 0 : 'Width'); (ThemeStore.isMobile() || leftPanelDisabled()) ? 0 : 'Width');
if (left) { if (left) {
fToggle(); fToggle();

19
dev/Common/UtilsUser.js
View file

@ -196,37 +196,24 @@ showMessageComposer = (params = []) =>
rl.app.showMessageComposer(params); rl.app.showMessageComposer(params);
}, },
setLayoutResizer = (source, target, sClientSideKeyName, mode) => setLayoutResizer = (source, sClientSideKeyName, mode) =>
{ {
if (source.layoutResizer && source.layoutResizer.mode != mode) { if (source.layoutResizer && source.layoutResizer.mode != mode) {
target?.removeAttribute('style');
source.removeAttribute('style'); source.removeAttribute('style');
} }
source.observer?.disconnect(); source.observer?.disconnect();
// source.classList.toggle('resizable', mode); // source.classList.toggle('resizable', mode);
if (mode) { if (mode) {
const length = Local.get(sClientSideKeyName + mode) || SettingsGet('Resizer' + sClientSideKeyName + mode), const length = Local.get(sClientSideKeyName + mode) || SettingsGet('Resizer' + sClientSideKeyName + mode);
setTargetPos = mode => {
let value;
if ('Width' == mode) {
value = source.offsetWidth;
target && (target.style.left = value + 'px');
} else {
value = source.offsetHeight;
target && (target.style.top = value + 'px');
}
return value;
};
if (length) { if (length) {
source.style[mode.toLowerCase()] = length + 'px'; source.style[mode.toLowerCase()] = length + 'px';
setTargetPos(mode);
} }
if (!source.layoutResizer) { if (!source.layoutResizer) {
const resizer = createElement('div', {'class':'resizer'}), const resizer = createElement('div', {'class':'resizer'}),
save = (data => Remote.saveSettings(0, data)).debounce(500), save = (data => Remote.saveSettings(0, data)).debounce(500),
size = {}, size = {},
store = () => { store = () => {
const value = setTargetPos(resizer.mode), const value = ('Width' == resizer.mode) ? source.offsetWidth : source.offsetHeight,
prop = resizer.key + resizer.mode; prop = resizer.key + resizer.mode;
(value == Local.get(prop)) || Local.set(prop, value); (value == Local.get(prop)) || Local.set(prop, value);
(value == SettingsGet('Resizer' + prop)) || save({['Resizer' + prop]: value}); (value == SettingsGet('Resizer' + prop)) || save({['Resizer' + prop]: value});

24
dev/Screen/User/MailBox.js
View file

@ -1,11 +1,9 @@
import { Scope } from 'Common/Enums'; import { Scope } from 'Common/Enums';
import { Layout, ClientSideKeyNameMessageListSize } from 'Common/EnumsUser'; import { doc, createElement, leftPanelDisabled, Settings } from 'Common/Globals';
import { doc, createElement, leftPanelDisabled, Settings, elementById } from 'Common/Globals';
import { pString, pInt } from 'Common/Utils'; import { pString, pInt } from 'Common/Utils';
import { setLayoutResizer, moveAction } from 'Common/UtilsUser'; import { moveAction } from 'Common/UtilsUser';
import { getFolderFromCacheList, getFolderFullName, getFolderInboxName } from 'Common/Cache'; import { getFolderFromCacheList, getFolderFullName, getFolderInboxName } from 'Common/Cache';
import { i18n, initOnStartOrLangChange } from 'Common/Translator'; import { i18n, initOnStartOrLangChange } from 'Common/Translator';
import { SettingsUserStore } from 'Stores/User/Settings';
import { AppUserStore } from 'Stores/User/App'; import { AppUserStore } from 'Stores/User/App';
import { AccountUserStore } from 'Stores/User/Account'; import { AccountUserStore } from 'Stores/User/Account';
@ -113,24 +111,6 @@ export class MailBoxUserScreen extends AbstractScreen {
* @returns {void} * @returns {void}
*/ */
onBuild() { onBuild() {
setTimeout(() => {
// initMailboxLayoutResizer
const top = elementById('V-MailMessageList'),
bottom = elementById('V-MailMessageView'),
fToggle = () => {
let layout = SettingsUserStore.layout();
setLayoutResizer(top, bottom, ClientSideKeyNameMessageListSize,
(ThemeStore.isMobile() || Layout.NoPreview === layout)
? 0
: (Layout.SidePreview === layout ? 'Width' : 'Height')
);
};
if (top && bottom) {
fToggle();
addEventListener('rl-layout', fToggle);
}
}, 1);
doc.addEventListener('click', event => doc.addEventListener('click', event =>
event.target.closest('#rl-right') && moveAction(false) event.target.closest('#rl-right') && moveAction(false)
); );

116
dev/Styles/User/Layout.less
View file

@ -15,10 +15,12 @@
} }
#rl-right { #rl-right {
display: flex;
flex-grow: 1; flex-grow: 1;
max-width: 100vw; width: 20%;
position: relative; }
z-index: 1; .rl-bottom-preview-pane #rl-right {
flex-direction: column;
} }
/* /*
@ -58,82 +60,28 @@ html:not(.rl-left-panel-disabled) #rl-left {
} }
#rl-left > .resizer, #rl-left > .resizer,
.rl-side-preview-pane #V-MailMessageList > .resizer { .rl-side-preview-pane #V-MailMessageList .resizer {
cursor: ew-resize; cursor: ew-resize;
height: 100%; cursor: col-resize;
right: 0; right: 0;
top: 0; top: 0;
bottom: 0;
width: 5px; width: 5px;
} }
.rl-bottom-preview-pane #V-MailMessageList .resizer {
.rl-side-preview-pane #V-MailMessageList {
resize: horizontal; /*overflow: auto;*/
min-width: 320px;
max-width: 60%;
}
.rl-bottom-preview-pane #V-MailMessageList {
resize: vertical; /*overflow: auto;*/
min-height: 200px;
max-height: 60%;
}
.rl-bottom-preview-pane #V-MailMessageList > .resizer {
cursor: ns-resize; cursor: ns-resize;
height: 5px; cursor: row-resize;
left: 0;
bottom: 0; bottom: 0;
width: 100%; left: 0;
right: 0;
height: 5px;
} }
html:not(.rl-left-panel-disabled) #rl-left > .resizer, html:not(.rl-left-panel-disabled) #rl-left > .resizer,
#V-MailMessageList > .resizer { #V-MailMessageList .resizer {
display: block; display: block;
} }
#V-MailMessageList {
position: relative;
height: 100%;
width: 50%;
}
#V-MailMessageView {
position: absolute;
top: 0;
bottom: 13px;
right: 0;
left: 0;
.b-message-view-backdrop {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .4);
z-index: 10;
text-align: center;
.backdrop-message {
position: relative;
display: inline-block;
color: white;
font-size: 20px;
line-height: 30px;
background: rgba(0, 0, 0, .6);
padding: 15px;
border-radius: var(--border-radius, 5px);
text-shadow: 0 1px 1px #000;
transform: translateY(-50%);
top: 50%;
}
}
}
html.rl-side-preview-pane {
#V-MailMessageView {
left: 50%;
}
}
#top-system-dropdown-id::after, #top-system-dropdown-id::after,
#button-add-prop-dropdown-id::after { #button-add-prop-dropdown-id::after {
content: '▼'; content: '▼';
@ -201,16 +149,6 @@ html.rl-side-preview-pane {
#rl-left { #rl-left {
width: @rlLeftWidth + 20; width: @rlLeftWidth + 20;
} }
#V-MailMessageList {
width: 40%;
}
html.rl-side-preview-pane {
#V-MailMessageView {
left: 40%;
}
}
} }
/* mobile and tablet */ /* mobile and tablet */
@ -253,17 +191,6 @@ html.rl-left-panel-disabled {
} }
} }
html.rl-no-preview-pane {
#V-MailMessageList {
position: absolute;
left: 0;
right: 0;
width: auto;
}
}
html.rl-mobile #rl-left > .resizer, html.rl-mobile #rl-left > .resizer,
html.rl-no-preview-pane #rl-right .resizer { html.rl-no-preview-pane #rl-right .resizer {
display: none !important; display: none !important;
@ -285,21 +212,6 @@ html.rl-mobile {
} }
} }
html.rl-bottom-preview-pane {
#V-MailMessageList {
height: 300px;
position: absolute;
left: 0;
right: 0;
width: auto;
}
#V-MailMessageView {
top: 300px;
}
}
html.rl-mobile .hide-mobile, html.rl-mobile .hide-mobile,
html:not(.rl-mobile) .show-mobile { html:not(.rl-mobile) .show-mobile {
display: none !important; display: none !important;

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

@ -5,6 +5,29 @@ html.rl-mobile, html.rl-no-preview-pane {
} }
} }
#V-MailMessageList {
position: relative;
}
.rl-side-preview-pane #V-MailMessageList {
height: 100%;
}
.rl-no-preview-pane #V-MailMessageList {
height: 100%;
width: 100%;
}
.rl-side-preview-pane #V-MailMessageList .messageList {
max-width: 50vw;
min-width: 320px;
overflow: auto;
resize: horizontal;
}
.rl-bottom-preview-pane #V-MailMessageList .messageList {
max-height: 50vh;
min-height: 200px;
overflow: auto;
resize: vertical;
}
#V-MailMessageList.focused .messageList { #V-MailMessageList.focused .messageList {
border-color: #9d9d9d; border-color: #9d9d9d;
box-shadow: var(--smMainShadow); box-shadow: var(--smMainShadow);

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

@ -1,4 +1,35 @@
#V-MailMessageView {
flex-grow: 1;
overflow: auto;
padding-bottom: @rlLowMargin;
.b-message-view-backdrop {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .4);
z-index: 10;
text-align: center;
.backdrop-message {
position: relative;
display: inline-block;
color: white;
font-size: 20px;
line-height: 30px;
background: rgba(0, 0, 0, .6);
padding: 15px;
border-radius: var(--border-radius, 5px);
text-shadow: 0 1px 1px #000;
transform: translateY(-50%);
top: 50%;
}
}
}
html.rl-no-preview-pane { html.rl-no-preview-pane {
#rl-right:not(.message-selected) #V-MailMessageView { #rl-right:not(.message-selected) #V-MailMessageView {
display: none; display: none;

20
dev/View/User/MailBox/MessageList.js
View file

@ -48,6 +48,9 @@ import { ComposePopupView } from 'View/Popup/Compose';
import { MessageModel } from 'Model/Message'; import { MessageModel } from 'Model/Message';
import { Layout, ClientSideKeyNameMessageListSize } from 'Common/EnumsUser';
import { setLayoutResizer } from 'Common/UtilsUser';
const const
canBeMovedHelper = () => MessagelistUserStore.hasCheckedOrSelected(), canBeMovedHelper = () => MessagelistUserStore.hasCheckedOrSelected(),
@ -564,6 +567,23 @@ export class MailMessageList extends AbstractViewRight {
const b_content = dom.querySelector('.b-content'), const b_content = dom.querySelector('.b-content'),
eqs = (ev, s) => ev.target.closestWithin(s, dom); eqs = (ev, s) => ev.target.closestWithin(s, dom);
setTimeout(() => {
// initMailboxLayoutResizer
const top = dom.querySelector('.messageList'),
fToggle = () => {
let layout = SettingsUserStore.layout();
setLayoutResizer(top, ClientSideKeyNameMessageListSize,
(ThemeStore.isMobile() || Layout.NoPreview === layout)
? 0
: (Layout.SidePreview === layout ? 'Width' : 'Height')
);
};
if (top) {
fToggle();
addEventListener('rl-layout', fToggle);
}
}, 1);
this.selector.init(b_content, Scope.MessageList); this.selector.init(b_content, Scope.MessageList);
addEventsListeners(dom, { addEventsListeners(dom, {