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(() => {
const left = elementById('rl-left'),
fToggle = () =>
setLayoutResizer(left, null, ClientSideKeyNameFolderListSize,
setLayoutResizer(left, ClientSideKeyNameFolderListSize,
(ThemeStore.isMobile() || leftPanelDisabled()) ? 0 : 'Width');
if (left) {
fToggle();

19
dev/Common/UtilsUser.js
View file

@ -196,37 +196,24 @@ showMessageComposer = (params = []) =>
rl.app.showMessageComposer(params);
},
setLayoutResizer = (source, target, sClientSideKeyName, mode) =>
setLayoutResizer = (source, sClientSideKeyName, mode) =>
{
if (source.layoutResizer && source.layoutResizer.mode != mode) {
target?.removeAttribute('style');
source.removeAttribute('style');
}
source.observer?.disconnect();
// source.classList.toggle('resizable', mode);
if (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;
};
const length = Local.get(sClientSideKeyName + mode) || SettingsGet('Resizer' + sClientSideKeyName + mode);
if (length) {
source.style[mode.toLowerCase()] = length + 'px';
setTargetPos(mode);
}
if (!source.layoutResizer) {
const resizer = createElement('div', {'class':'resizer'}),
save = (data => Remote.saveSettings(0, data)).debounce(500),
size = {},
store = () => {
const value = setTargetPos(resizer.mode),
const value = ('Width' == resizer.mode) ? source.offsetWidth : source.offsetHeight,
prop = resizer.key + resizer.mode;
(value == Local.get(prop)) || Local.set(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 { Layout, ClientSideKeyNameMessageListSize } from 'Common/EnumsUser';
import { doc, createElement, leftPanelDisabled, Settings, elementById } from 'Common/Globals';
import { doc, createElement, leftPanelDisabled, Settings } from 'Common/Globals';
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 { i18n, initOnStartOrLangChange } from 'Common/Translator';
import { SettingsUserStore } from 'Stores/User/Settings';
import { AppUserStore } from 'Stores/User/App';
import { AccountUserStore } from 'Stores/User/Account';
@ -113,24 +111,6 @@ export class MailBoxUserScreen extends AbstractScreen {
* @returns {void}
*/
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 =>
event.target.closest('#rl-right') && moveAction(false)
);

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

@ -15,10 +15,12 @@
}
#rl-right {
display: flex;
flex-grow: 1;
max-width: 100vw;
position: relative;
z-index: 1;
width: 20%;
}
.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-side-preview-pane #V-MailMessageList > .resizer {
.rl-side-preview-pane #V-MailMessageList .resizer {
cursor: ew-resize;
height: 100%;
cursor: col-resize;
right: 0;
top: 0;
bottom: 0;
width: 5px;
}
.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 {
.rl-bottom-preview-pane #V-MailMessageList .resizer {
cursor: ns-resize;
height: 5px;
left: 0;
cursor: row-resize;
bottom: 0;
width: 100%;
left: 0;
right: 0;
height: 5px;
}
html:not(.rl-left-panel-disabled) #rl-left > .resizer,
#V-MailMessageList > .resizer {
#V-MailMessageList .resizer {
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,
#button-add-prop-dropdown-id::after {
content: '▼';
@ -201,16 +149,6 @@ html.rl-side-preview-pane {
#rl-left {
width: @rlLeftWidth + 20;
}
#V-MailMessageList {
width: 40%;
}
html.rl-side-preview-pane {
#V-MailMessageView {
left: 40%;
}
}
}
/* 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-no-preview-pane #rl-right .resizer {
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:not(.rl-mobile) .show-mobile {
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 {
border-color: #9d9d9d;
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 {
#rl-right:not(.message-selected) #V-MailMessageView {
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 { Layout, ClientSideKeyNameMessageListSize } from 'Common/EnumsUser';
import { setLayoutResizer } from 'Common/UtilsUser';
const
canBeMovedHelper = () => MessagelistUserStore.hasCheckedOrSelected(),
@ -564,6 +567,23 @@ export class MailMessageList extends AbstractViewRight {
const b_content = dom.querySelector('.b-content'),
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);
addEventsListeners(dom, {