From b448b8661de11bf7b0a6d1c870a507b8b9f9f90c Mon Sep 17 00:00:00 2001 From: the-djmaze <> Date: Wed, 8 Feb 2023 17:39:30 +0100 Subject: [PATCH] Properly fix #928 by redesign using `display: flex` --- dev/App/User.js | 2 +- dev/Common/UtilsUser.js | 19 +---- dev/Screen/User/MailBox.js | 24 +----- dev/Styles/User/Layout.less | 116 ++++----------------------- dev/Styles/User/MessageList.less | 23 ++++++ dev/Styles/User/MessageView.less | 31 +++++++ dev/View/User/MailBox/MessageList.js | 20 +++++ 7 files changed, 94 insertions(+), 141 deletions(-) diff --git a/dev/App/User.js b/dev/App/User.js index 10bb3cb9e..da75c23eb 100644 --- a/dev/App/User.js +++ b/dev/App/User.js @@ -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(); diff --git a/dev/Common/UtilsUser.js b/dev/Common/UtilsUser.js index 6588c4f59..e8fb0991a 100644 --- a/dev/Common/UtilsUser.js +++ b/dev/Common/UtilsUser.js @@ -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}); diff --git a/dev/Screen/User/MailBox.js b/dev/Screen/User/MailBox.js index f3e47823d..3ab6e80ee 100644 --- a/dev/Screen/User/MailBox.js +++ b/dev/Screen/User/MailBox.js @@ -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) ); diff --git a/dev/Styles/User/Layout.less b/dev/Styles/User/Layout.less index 87a38d301..3516bac25 100644 --- a/dev/Styles/User/Layout.less +++ b/dev/Styles/User/Layout.less @@ -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; diff --git a/dev/Styles/User/MessageList.less b/dev/Styles/User/MessageList.less index 3b7d9363e..0772e3ed7 100644 --- a/dev/Styles/User/MessageList.less +++ b/dev/Styles/User/MessageList.less @@ -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); diff --git a/dev/Styles/User/MessageView.less b/dev/Styles/User/MessageView.less index b7e27b2c7..6cc702c24 100644 --- a/dev/Styles/User/MessageView.less +++ b/dev/Styles/User/MessageView.less @@ -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; diff --git a/dev/View/User/MailBox/MessageList.js b/dev/View/User/MailBox/MessageList.js index fd89f66a5..b2af392ea 100644 --- a/dev/View/User/MailBox/MessageList.js +++ b/dev/View/User/MailBox/MessageList.js @@ -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, {