From 8047a36b704f75da0c3d5be07c25df7275737335 Mon Sep 17 00:00:00 2001 From: the-djmaze <> Date: Thu, 26 Jan 2023 14:11:30 +0100 Subject: [PATCH] #rl-content to use `flex` for better layout control --- dev/App/User.js | 5 +- dev/Common/UtilsUser.js | 6 +- dev/Styles/Admin/Layout.less | 1 - dev/Styles/Main.less | 2 +- dev/Styles/User/FolderList.less | 5 +- dev/Styles/User/Layout.less | 71 ++++++++----------- dev/Styles/User/MessageView.less | 17 ++--- .../nextcloud/snappymail/css/embed.css | 5 -- 8 files changed, 42 insertions(+), 70 deletions(-) diff --git a/dev/App/User.js b/dev/App/User.js index 1adfdf142..cb504dff6 100644 --- a/dev/App/User.js +++ b/dev/App/User.js @@ -256,11 +256,10 @@ export class AppUser extends AbstractApp { // initLeftSideLayoutResizer setTimeout(() => { const left = elementById('rl-left'), - right = elementById('rl-right'), fToggle = () => - setLayoutResizer(left, right, ClientSideKeyNameFolderListSize, + setLayoutResizer(left, null, ClientSideKeyNameFolderListSize, (ThemeStore.isMobile() || leftPanelDisabled()) ? 0 : 'Width'); - if (left && right) { + if (left) { fToggle(); leftPanelDisabled.subscribe(fToggle); } diff --git a/dev/Common/UtilsUser.js b/dev/Common/UtilsUser.js index 41809b6c4..6588c4f59 100644 --- a/dev/Common/UtilsUser.js +++ b/dev/Common/UtilsUser.js @@ -199,7 +199,7 @@ showMessageComposer = (params = []) => setLayoutResizer = (source, target, sClientSideKeyName, mode) => { if (source.layoutResizer && source.layoutResizer.mode != mode) { - target.removeAttribute('style'); + target?.removeAttribute('style'); source.removeAttribute('style'); } source.observer?.disconnect(); @@ -210,10 +210,10 @@ setLayoutResizer = (source, target, sClientSideKeyName, mode) => let value; if ('Width' == mode) { value = source.offsetWidth; - target.style.left = value + 'px'; + target && (target.style.left = value + 'px'); } else { value = source.offsetHeight; - target.style.top = (4 + source.offsetTop + value) + 'px'; + target && (target.style.top = value + 'px'); } return value; }; diff --git a/dev/Styles/Admin/Layout.less b/dev/Styles/Admin/Layout.less index 351630c4d..03b321a12 100644 --- a/dev/Styles/Admin/Layout.less +++ b/dev/Styles/Admin/Layout.less @@ -7,7 +7,6 @@ #rl-left { flex-grow: 0; flex-shrink: 0; - overflow: auto; padding-top: 50px + @rlLowMargin + 10px; transition: width 0.3s ease-out; width: @rlLeftWidth; diff --git a/dev/Styles/Main.less b/dev/Styles/Main.less index 2c1322309..80416ef5a 100644 --- a/dev/Styles/Main.less +++ b/dev/Styles/Main.less @@ -106,7 +106,7 @@ dialog .modal-body { // Footer (for actions) dialog > footer { - padding: 14px 15px 15px; + padding: 9px 15px; margin-bottom: 0; text-align: right; // right align buttons border-top: 1px solid var(--border-color, #ddd); diff --git a/dev/Styles/User/FolderList.less b/dev/Styles/User/FolderList.less index 346cd8039..8369a880c 100644 --- a/dev/Styles/User/FolderList.less +++ b/dev/Styles/User/FolderList.less @@ -6,7 +6,7 @@ > * { position: absolute; - right: 0; + right: 2px; left: 0; } @@ -237,9 +237,6 @@ html.rl-left-panel-disabled { margin-top: 10px !important; margin-left: 0 !important; } - &.rl-mobile #rl-left { - visibility: hidden; - } } html.rl-mobile .b-folders .b-content { diff --git a/dev/Styles/User/Layout.less b/dev/Styles/User/Layout.less index 6f2028931..e6562e3c7 100644 --- a/dev/Styles/User/Layout.less +++ b/dev/Styles/User/Layout.less @@ -5,22 +5,25 @@ background-position: center; } -#rl-left, #rl-right { - position: fixed; - top: 0; - right: 0; - bottom: 10px; - left: 0; +#rl-content { + display:flex; + height: 100%; } #rl-left { - z-index: 0; + flex-grow: 0; + flex-shrink: 0; + position: relative; +/* transition: width 0.3s ease-out;*/ width: @rlLeftWidth; + z-index: 0; } #rl-right { + flex-grow: 1; + max-width: 100vw; + position: relative; z-index: 1; - left: @rlLeftWidth; } /* @@ -54,8 +57,7 @@ } html:not(.rl-left-panel-disabled) #rl-left { - resize: horizontal; - overflow: hidden; + resize: horizontal; overflow: auto; min-width: 155px; max-width: 350px; } @@ -70,12 +72,12 @@ html:not(.rl-left-panel-disabled) #rl-left { } .rl-side-preview-pane #V-MailMessageList { - resize: horizontal; + resize: horizontal; overflow: auto; min-width: 320px; max-width: 60%; } .rl-bottom-preview-pane #V-MailMessageList { - resize: vertical; + resize: vertical; overflow: auto; min-height: 200px; max-height: 60%; } @@ -205,10 +207,6 @@ html.rl-side-preview-pane { width: @rlLeftWidth + 20; } - #rl-right { - left: @rlLeftWidth + 20; - } - #V-MailMessageList { width: 40%; } @@ -226,10 +224,6 @@ html.rl-side-preview-pane { width: 155px; } - #rl-right { - left: 155px; - } - #rl-settings-subscreen { padding: 10px; } @@ -262,16 +256,15 @@ html.rl-left-panel-disabled { display: none; } } - - #rl-right { - left: 60px; - } } html.rl-no-preview-pane { #V-MailMessageList { - width: inherit; + position: absolute; + left: 0; + right: 0; + width: auto; } } @@ -281,18 +274,27 @@ html.rl-no-preview-pane #rl-right .resizer { display: none !important; } +html.rl-mobile { + &.rl-left-panel-disabled #rl-left { + display: none; + } + #rl-right { + min-width: 100vw; + } +} + html.rl-bottom-preview-pane { #V-MailMessageList { - bottom: inherit; - width: inherit; height: 300px; + position: absolute; + left: 0; right: 0; + width: auto; } #V-MailMessageView { - left: 0; - top: 356px; + top: 300px; } } @@ -321,14 +323,3 @@ html:not(.rl-mobile) .show-mobile { } } } - -html.rl-mobile { - - &:not(.rl-left-panel-disabled) #rl-right { - right: -150px; - } - - &.rl-left-panel-disabled #rl-right { - left: 0; - } -} diff --git a/dev/Styles/User/MessageView.less b/dev/Styles/User/MessageView.less index d9d6c454f..069513bb8 100644 --- a/dev/Styles/User/MessageView.less +++ b/dev/Styles/User/MessageView.less @@ -476,20 +476,11 @@ html.rl-fullscreen { display: none !important; } - #rl-right { - left: 0 !important; - - #V-MailMessageList, - #V-SettingsPane, - #V-SystemDropDown, - #V-MailMessageView .messageView .toolbar { - display: none !important; - } - } - + #V-MailMessageList, + #V-SettingsPane, #V-SystemDropDown, - .messageView .top-toolbar { - display: none; + #V-MailMessageView .messageView .toolbar { + display: none !important; } .messageView { diff --git a/integrations/nextcloud/snappymail/css/embed.css b/integrations/nextcloud/snappymail/css/embed.css index 96c135a00..4167e4f41 100644 --- a/integrations/nextcloud/snappymail/css/embed.css +++ b/integrations/nextcloud/snappymail/css/embed.css @@ -9,11 +9,6 @@ This stylesheet is used when SnappyMail runs in embed mode. min-height: 100%; } -#content #rl-app:not([data-admin="1"]) #rl-left, -#content #rl-app:not([data-admin="1"]) #rl-right { - position: absolute; -} - .squire-wysiwyg { min-width: 100%; min-height: 100%;