From b1c7bd2c508acb2cc624f9134cee6b70e8ba9d82 Mon Sep 17 00:00:00 2001 From: djmaze Date: Mon, 15 Feb 2021 16:05:38 +0100 Subject: [PATCH] Improve and cleanup isMobile --- dev/App/User.js | 4 ++-- dev/Common/Globals.js | 2 +- dev/Knoin/Knoin.js | 3 +-- dev/Screen/User/MailBox.js | 10 +++------- dev/Screen/User/Settings.js | 4 +--- dev/Stores/User/Settings.js | 6 +++--- dev/Styles/Layout.less | 5 +++-- dev/Styles/MessageList.less | 1 + dev/Styles/MessageView.less | 20 +++++++++----------- dev/View/Popup/Compose.js | 1 - dev/View/Popup/Filter.js | 4 +--- dev/View/Popup/FolderCreate.js | 1 - dev/View/Popup/Identity.js | 4 +--- dev/View/Popup/TwoFactorTest.js | 1 - dev/View/User/Settings/Menu.js | 4 +--- 15 files changed, 27 insertions(+), 43 deletions(-) diff --git a/dev/App/User.js b/dev/App/User.js index 1e2f1dfdc..016d0d0ea 100644 --- a/dev/App/User.js +++ b/dev/App/User.js @@ -858,11 +858,11 @@ class AppUser extends AbstractApp { } } - initHorizontalLayoutResizer(sClientSideKeyName) { + initHorizontalLayoutResizer() { const top = doc.querySelector('.b-message-list-wrapper'), bottom = doc.querySelector('.b-message-view-wrapper'), fDisable = bDisable => { - this.setLayoutResizer(top, bottom, sClientSideKeyName, + this.setLayoutResizer(top, bottom, ClientSideKeyName.MessageListSize, (bDisable || !$htmlCL.contains('rl-bottom-preview-pane')) ? null : 'height'); }; if (top && bottom) { diff --git a/dev/Common/Globals.js b/dev/Common/Globals.js index 39df313c0..0b6837213 100644 --- a/dev/Common/Globals.js +++ b/dev/Common/Globals.js @@ -8,7 +8,7 @@ export const $htmlCL = doc.documentElement.classList; export const Settings = rl.settings; /** @media screen and (max-width: 600px) { */ -export const isMobile = () => $htmlCL.contains('rl-mobile'); // || rl.settings.app('mobile') +export const isMobile = () => $htmlCL.contains('rl-mobile'); export const dropdownVisibility = ko.observable(false).extend({ rateLimit: 0 }); diff --git a/dev/Knoin/Knoin.js b/dev/Knoin/Knoin.js index 2948f32af..bb9c0cae3 100644 --- a/dev/Knoin/Knoin.js +++ b/dev/Knoin/Knoin.js @@ -1,6 +1,6 @@ import ko from 'ko'; -import { doc, $htmlCL/*, isMobile*/ } from 'Common/Globals'; +import { doc, $htmlCL } from 'Common/Globals'; import { isNonEmptyArray } from 'Common/Utils'; let currentScreen = null, @@ -9,7 +9,6 @@ let currentScreen = null, const SCREENS = {}, autofocus = dom => { -// if (!isMobile()) { const af = dom.querySelector('[autofocus]'); af && af.focus(); }; diff --git a/dev/Screen/User/MailBox.js b/dev/Screen/User/MailBox.js index 48500fff9..3da0d62ef 100644 --- a/dev/Screen/User/MailBox.js +++ b/dev/Screen/User/MailBox.js @@ -1,5 +1,5 @@ import { Capa } from 'Common/Enums'; -import { Focused, ClientSideKeyName } from 'Common/EnumsUser'; +import { Focused } from 'Common/EnumsUser'; import { doc, leftPanelDisabled, leftPanelType, moveAction, Settings, isMobile } from 'Common/Globals'; import { pString, pInt } from 'Common/Utils'; import { getFolderFromCacheList, getFolderFullNameRaw, getFolderInboxName } from 'Common/Cache'; @@ -56,9 +56,7 @@ export class MailBoxUserScreen extends AbstractScreen { AppStore.focusedState(Focused.None); AppStore.focusedState(Focused.MessageList); - if (isMobile()) { - leftPanelDisabled(true); - } + isMobile() && leftPanelDisabled(true); if (Settings.capa(Capa.Folders)) { leftPanelType(''); @@ -118,9 +116,7 @@ export class MailBoxUserScreen extends AbstractScreen { */ onBuild() { if (!isMobile()) { - setTimeout(() => - rl.app.initHorizontalLayoutResizer(ClientSideKeyName.MessageListSize) - , 1); + setTimeout(() => rl.app.initHorizontalLayoutResizer(), 1); } doc.addEventListener('click', event => diff --git a/dev/Screen/User/Settings.js b/dev/Screen/User/Settings.js index 7b0625edf..3dbab09d6 100644 --- a/dev/Screen/User/Settings.js +++ b/dev/Screen/User/Settings.js @@ -104,9 +104,7 @@ export class SettingsUserScreen extends AbstractSettingsScreen { keyScope(KeyState.Settings); leftPanelType(''); - if (isMobile()) { - leftPanelDisabled(true); - } + isMobile() && leftPanelDisabled(true); } setSettingsTitle() { diff --git a/dev/Stores/User/Settings.js b/dev/Stores/User/Settings.js index e0506d2d4..4cd147e5a 100644 --- a/dev/Stores/User/Settings.js +++ b/dev/Stores/User/Settings.js @@ -42,9 +42,9 @@ class SettingsUserStore { subscribers() { const htmlCL = doc.documentElement.classList; this.layout.subscribe(value => { - htmlCL.toggle('rl-no-preview-pane', isMobile() || Layout.NoPreview === value); - htmlCL.toggle('rl-side-preview-pane', !isMobile() && Layout.SidePreview === value); - htmlCL.toggle('rl-bottom-preview-pane', !isMobile() && Layout.BottomPreview === value); + htmlCL.toggle('rl-no-preview-pane', Layout.NoPreview === value); + htmlCL.toggle('rl-side-preview-pane', Layout.SidePreview === value); + htmlCL.toggle('rl-bottom-preview-pane', Layout.BottomPreview === value); dispatchEvent(new CustomEvent('rl-layout', {detail:value})); }); } diff --git a/dev/Styles/Layout.less b/dev/Styles/Layout.less index 2404fe8ea..60365dd72 100644 --- a/dev/Styles/Layout.less +++ b/dev/Styles/Layout.less @@ -333,6 +333,7 @@ html.rl-left-panel-none #rl-right { width: 10px !important; } +html.rl-mobile, html.rl-no-preview-pane { #rl-sub-left { @@ -349,11 +350,11 @@ html.rl-no-preview-pane { } } -html.rl-side-preview-pane #rl-right .resizer { +html.rl-side-preview-pane:not(.rl-mobile) #rl-right .resizer { display: none !important; } -html.rl-bottom-preview-pane { +html.rl-bottom-preview-pane:not(.rl-mobile) { #rl-sub-left { right: @rlBottomMargin !important; diff --git a/dev/Styles/MessageList.less b/dev/Styles/MessageList.less index 3b3de5053..d1e430591 100644 --- a/dev/Styles/MessageList.less +++ b/dev/Styles/MessageList.less @@ -1,4 +1,5 @@ +html.rl-mobile, html.rl-no-preview-pane { .messageList.message-selected { display: none; diff --git a/dev/Styles/MessageView.less b/dev/Styles/MessageView.less index 4312be1d1..897c85a09 100644 --- a/dev/Styles/MessageView.less +++ b/dev/Styles/MessageView.less @@ -1,13 +1,3 @@ -html.rl-no-preview-pane { - - .messageView { - display: none; - - &.message-selected { - display: block; - } - } -} .messageView { @@ -591,7 +581,15 @@ html.rl-resizer .b-message-view-iframe-backdrop { display: block !important; } +html.rl-mobile .messageView, html.rl-no-preview-pane .messageView { + + display: none; + + &.message-selected { + display: block; + } + .toolbar { padding-left: @rlMainBorderSize; } @@ -607,7 +605,7 @@ html.rl-no-preview-pane .messageView { } } -html.rl-bottom-preview-pane .messageView { +html.rl-bottom-preview-pane:not(.rl-mobile) .messageView { .b-content { bottom: @rlBottomMargin; } diff --git a/dev/View/Popup/Compose.js b/dev/View/Popup/Compose.js index 4c65a6da1..bd38d079a 100644 --- a/dev/View/Popup/Compose.js +++ b/dev/View/Popup/Compose.js @@ -1090,7 +1090,6 @@ class ComposePopupView extends AbstractViewPopup { } setFocusInPopup() { -// isMobile() || setTimeout(() => { if (!this.to()) { this.to.focused(true); diff --git a/dev/View/Popup/Filter.js b/dev/View/Popup/Filter.js index 55a44fac6..4ef7c69e4 100644 --- a/dev/View/Popup/Filter.js +++ b/dev/View/Popup/Filter.js @@ -160,9 +160,7 @@ class FilterPopupView extends AbstractViewPopup { } onShowWithDelay() { - if (this.isNew() && this.filter()/* && !isMobile()*/) { - this.filter().nameFocused(true); - } + this.isNew() && this.filter() && this.filter().nameFocused(true); } } diff --git a/dev/View/Popup/FolderCreate.js b/dev/View/Popup/FolderCreate.js index 71246a209..d472362cc 100644 --- a/dev/View/Popup/FolderCreate.js +++ b/dev/View/Popup/FolderCreate.js @@ -72,7 +72,6 @@ class FolderCreatePopupView extends AbstractViewPopup { } onShowWithDelay() { -// isMobile() || this.folderNameFocused(true); } } diff --git a/dev/View/Popup/Identity.js b/dev/View/Popup/Identity.js index ccaa41cfe..4f8b16b64 100644 --- a/dev/View/Popup/Identity.js +++ b/dev/View/Popup/Identity.js @@ -166,9 +166,7 @@ class IdentityPopupView extends AbstractViewPopup { } onShowWithDelay() { - if (!this.owner()/* && !isMobile()*/) { - this.emailFocused(true); - } + this.owner() || this.emailFocused(true); } onHideWithDelay() { diff --git a/dev/View/Popup/TwoFactorTest.js b/dev/View/Popup/TwoFactorTest.js index 895269c84..5b684f824 100644 --- a/dev/View/Popup/TwoFactorTest.js +++ b/dev/View/Popup/TwoFactorTest.js @@ -49,7 +49,6 @@ class TwoFactorTestPopupView extends AbstractViewPopup { } onShowWithDelay() { -// isMobile() || this.codeFocused(true); } } diff --git a/dev/View/User/Settings/Menu.js b/dev/View/User/Settings/Menu.js index c9279ea7f..fed671573 100644 --- a/dev/View/User/Settings/Menu.js +++ b/dev/View/User/Settings/Menu.js @@ -19,11 +19,9 @@ export class MenuSettingsUserView extends AbstractViewLeft { } onBuild(dom) { - if (isMobile()) { - dom.addEventListener('click', event => + isMobile() && dom.addEventListener('click', event => event.target.closestWithin('.b-settings-menu .e-item.selectable', dom) && leftPanelDisabled(true) ); - } shortcuts.add('arrowup,arrowdown', '', KeyState.Settings, settingsMenuKeysHandler(dom.querySelectorAll('.b-settings-menu .e-item')));