From 13f270f4264e1dba79a7571425e436ba163748d3 Mon Sep 17 00:00:00 2001 From: the-djmaze <> Date: Tue, 22 Mar 2022 11:47:17 +0100 Subject: [PATCH] Resolve #298 --- dev/Common/Globals.js | 22 +++++++++++++++-- dev/Common/UtilsUser.js | 13 ----------- dev/Stores/User/Message.js | 10 ++------ dev/Styles/User/Layout.less | 24 +++++++++---------- dev/Styles/User/MessageView.less | 30 +++++++++++++++--------- dev/View/Popup/Compose.js | 23 +++++++----------- dev/View/User/MailBox/MessageList.js | 5 ++-- dev/View/User/MailBox/MessageView.js | 35 ++++++++-------------------- dev/View/User/SystemDropDown.js | 3 +-- 9 files changed, 75 insertions(+), 90 deletions(-) diff --git a/dev/Common/Globals.js b/dev/Common/Globals.js index db6c82324..0e1baae0f 100644 --- a/dev/Common/Globals.js +++ b/dev/Common/Globals.js @@ -11,8 +11,12 @@ export const elementById = id => doc.getElementById(id), - exitFullscreen = () => getFullscreenElement() && (doc.exitFullscreen || doc.webkitExitFullscreen).call(doc), - getFullscreenElement = () => doc.fullscreenElement || doc.webkitFullscreenElement, + // Fullscreen must be on app, else other popups fail + app = doc.getElementById('rl-app'), + appFullscreen = () => (doc.fullscreenElement || doc.webkitFullscreenElement) === app, + exitFullscreen = () => appFullscreen() && (doc.exitFullscreen || doc.webkitExitFullscreen).call(doc), + isFullscreen = ko.observable(false), + toggleFullscreen = () => isFullscreen() ? exitFullscreen() : app.requestFullscreen(), Settings = rl.settings, SettingsGet = Settings.get, @@ -61,6 +65,20 @@ export const shortcuts.setScope(value); }; +if (app) { + let event = 'fullscreenchange'; + if (!app.requestFullscreen && app.webkitRequestFullscreen) { + app.requestFullscreen = app.webkitRequestFullscreen; + event = 'webkit'+event; + } + if (app.requestFullscreen) { + doc.addEventListener(event, () => { + isFullscreen(appFullscreen()); + $htmlCL.toggle('rl-fullscreen', appFullscreen()); + }); + } +} + dropdownVisibility.subscribe(value => { if (value) { keyScope(ScopeMenu); diff --git a/dev/Common/UtilsUser.js b/dev/Common/UtilsUser.js index a8d4ca7ee..19a433375 100644 --- a/dev/Common/UtilsUser.js +++ b/dev/Common/UtilsUser.js @@ -172,19 +172,6 @@ showMessageComposer = (params = []) => rl.app.showMessageComposer(params); }, -initFullscreen = (el, fn) => -{ - let event = 'fullscreenchange'; - if (!el.requestFullscreen && el.webkitRequestFullscreen) { - el.requestFullscreen = el.webkitRequestFullscreen; - event = 'webkit'+event; - } - if (el.requestFullscreen) { - el.addEventListener(event, fn); - return el; - } -}, - setLayoutResizer = (source, target, sClientSideKeyName, mode) => { if (source.layoutResizer && source.layoutResizer.mode != mode) { diff --git a/dev/Stores/User/Message.js b/dev/Stores/User/Message.js index 9a491c2bd..ce2ef1a4b 100644 --- a/dev/Stores/User/Message.js +++ b/dev/Stores/User/Message.js @@ -1,5 +1,5 @@ import { Scope } from 'Common/Enums'; -import { elementById } from 'Common/Globals'; +import { elementById, exitFullscreen } from 'Common/Globals'; import { addObservablesTo, addSubscribablesTo } from 'External/ko'; import { AppUserStore } from 'Stores/User/App'; @@ -12,7 +12,6 @@ export const MessageUserStore = new class { message: null, error: '', loading: false, - fullScreen: false, // Cache mail bodies bodiesDom: null, @@ -31,8 +30,7 @@ export const MessageUserStore = new class { } } else { AppUserStore.focusedState(Scope.MessageList); - - this.fullScreen(false); + exitFullscreen(); this.hideMessageBodies(); } }, @@ -41,10 +39,6 @@ export const MessageUserStore = new class { this.purgeMessageBodyCache = this.purgeMessageBodyCache.throttle(30000); } - toggleFullScreen() { - MessageUserStore.fullScreen(!MessageUserStore.fullScreen()); - } - purgeMessageBodyCache() { const messagesDom = this.bodiesDom(), children = messagesDom && messagesDom.children; diff --git a/dev/Styles/User/Layout.less b/dev/Styles/User/Layout.less index 5563a3a00..03730c135 100644 --- a/dev/Styles/User/Layout.less +++ b/dev/Styles/User/Layout.less @@ -26,17 +26,6 @@ left: @rlLeftWidth; } -html.rl-mobile { - - &:not(.rl-left-panel-disabled) #rl-right { - right: -150px; - } - - &.rl-left-panel-disabled #rl-right { - left: 5px !important; - } -} - /* .resizable::after { background-color: #aaa; @@ -255,7 +244,7 @@ html.rl-left-panel-disabled { } #rl-right { - left: 60px !important; + left: 60px; } } @@ -313,3 +302,14 @@ 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: 5px; + } +} diff --git a/dev/Styles/User/MessageView.less b/dev/Styles/User/MessageView.less index 4b016cb80..208abf4b8 100644 --- a/dev/Styles/User/MessageView.less +++ b/dev/Styles/User/MessageView.less @@ -234,8 +234,8 @@ html.rl-no-preview-pane { .buttonFull { display: inline-block; position: fixed; - right: 25px; - bottom: 25px; + right: 8px; + bottom: 8px; height: 30px; width: 30px; text-align: center; @@ -483,13 +483,15 @@ html.rl-bottom-preview-pane .messageView { } } -html.rl-message-fullscreen { +html.rl-fullscreen { #rl-left { display: none !important; } #rl-right { + left: 0 !important; + #V-MailMessageList, #V-SettingsPane, #V-SystemDropDown, @@ -498,15 +500,21 @@ html.rl-message-fullscreen { } } + #V-SystemDropDown, + .messageView .top-toolbar { + display: none; + } + + .messageView { + border: 0; + } + .messageView .b-content { - position: fixed !important; - margin: 5px !important; - top: 0 !important; - left: 0 !important; - right: 0 !important; - bottom: 0 !important; - z-index: 10000 !important; - border: 1px solid @rlMainDarkColor !important; + position: fixed; + top: 0; + right: 0; + bottom: 0; + border: 0; } } diff --git a/dev/View/Popup/Compose.js b/dev/View/Popup/Compose.js index 530b4df81..4eadb6460 100644 --- a/dev/View/Popup/Compose.js +++ b/dev/View/Popup/Compose.js @@ -12,7 +12,6 @@ import { } from 'Common/EnumsUser'; import { pInt, isArray, arrayLength, forEachObjectEntry } from 'Common/Utils'; -import { initFullscreen } from 'Common/UtilsUser'; import { encodeHtml, HtmlEditor, htmlToPlain } from 'Common/Html'; import { koArrayWithDestroy } from 'External/ko'; @@ -21,7 +20,7 @@ import { messagesDeleteHelper } from 'Common/Folders'; import { serverRequest } from 'Common/Links'; import { i18n, getNotification, getUploadErrorDescByCode, timestampToString } from 'Common/Translator'; import { MessageFlagsCache, setFolderHash } from 'Common/Cache'; -import { doc, Settings, SettingsGet, getFullscreenElement, exitFullscreen, elementById, addShortcut } from 'Common/Globals'; +import { Settings, SettingsGet, elementById, addShortcut/*, exitFullscreen, isFullscreen, toggleFullscreen*/ } from 'Common/Globals'; import { AppUserStore } from 'Stores/User/App'; import { SettingsUserStore } from 'Stores/User/Settings'; @@ -45,9 +44,11 @@ import { AbstractViewPopup } from 'Knoin/AbstractViews'; import { FolderSystemPopupView } from 'View/Popup/FolderSystem'; import { AskPopupView } from 'View/Popup/Ask'; import { ContactsPopupView } from 'View/Popup/Contacts'; - +/* import { ThemeStore } from 'Stores/Theme'; +let alreadyFullscreen; +*/ const ScopeCompose = 'Compose', @@ -766,7 +767,7 @@ export class ComposePopupView extends AbstractViewPopup { this.to.focused(false); - (getFullscreenElement() === this.oContent) && exitFullscreen(); +// alreadyFullscreen || exitFullscreen(); } dropMailvelope() { @@ -856,8 +857,9 @@ export class ComposePopupView extends AbstractViewPopup { this.initOnShow(type, oMessageOrArray, aToEmails, aCcEmails, aBccEmails, sCustomSubject, sCustomPlainText); } -// (navigator.standalone || matchMedia('(display-mode: standalone)').matches || matchMedia('(display-mode: fullscreen)').matches) && - ThemeStore.isMobile() && this.oContent.requestFullscreen && this.oContent.requestFullscreen(); + // Chrome bug #298 +// alreadyFullscreen = isFullscreen(); +// alreadyFullscreen || (ThemeStore.isMobile() && toggleFullscreen()); } /** @@ -1350,15 +1352,6 @@ export class ComposePopupView extends AbstractViewPopup { }); this.editor(editor => editor[this.isPlainEditor()?'modePlain':'modeWysiwyg']()); - - // Fullscreen must be on app, else other popups fail - const el = doc.getElementById('rl-app'); - this.oContent = initFullscreen(el, () => - ThemeStore.isMobile() - && this.modalVisible() - && (getFullscreenElement() !== el) - && this.skipCommand() - ); } /** diff --git a/dev/View/User/MailBox/MessageList.js b/dev/View/User/MailBox/MessageList.js index 650731d5b..4cbc26425 100644 --- a/dev/View/User/MailBox/MessageList.js +++ b/dev/View/User/MailBox/MessageList.js @@ -9,7 +9,8 @@ import { UNUSED_OPTION_VALUE } from 'Common/Consts'; import { doc, leftPanelDisabled, moveAction, Settings, SettingsCapa, SettingsGet, addEventsListeners, - addShortcut, registerShortcut, formFieldFocused + addShortcut, registerShortcut, formFieldFocused, + isFullscreen, toggleFullscreen } from 'Common/Globals'; import { computedPaginatorHelper, showMessageComposer, populateMessageBody } from 'Common/UtilsUser'; @@ -699,7 +700,7 @@ export class MailMessageList extends AbstractViewRight { return false; } if (MessageUserStore.message() && this.useAutoSelect()) { - MessageUserStore.toggleFullScreen(); + isFullscreen() || toggleFullscreen(); return false; } }); diff --git a/dev/View/User/MailBox/MessageView.js b/dev/View/User/MailBox/MessageView.js index 2c1e122f0..a55f9af43 100644 --- a/dev/View/User/MailBox/MessageView.js +++ b/dev/View/User/MailBox/MessageView.js @@ -16,21 +16,19 @@ import { import { elementById, - $htmlCL, leftPanelDisabled, keyScopeReal, moveAction, Settings, SettingsCapa, - getFullscreenElement, - exitFullscreen, fireEvent, addShortcut, - registerShortcut + registerShortcut, + isFullscreen, exitFullscreen, toggleFullscreen } from 'Common/Globals'; import { arrayLength } from 'Common/Utils'; -import { download, mailToHelper, showMessageComposer, initFullscreen } from 'Common/UtilsUser'; +import { download, mailToHelper, showMessageComposer } from 'Common/UtilsUser'; import { SMAudio } from 'Common/Audio'; @@ -120,8 +118,8 @@ export class MailMessageView extends AbstractViewRight { this.messagesBodiesDom = MessageUserStore.bodiesDom; this.messageError = MessageUserStore.error; - this.fullScreenMode = MessageUserStore.fullScreen; - this.toggleFullScreen = MessageUserStore.toggleFullScreen; + this.fullScreenMode = isFullscreen; + this.toggleFullScreen = toggleFullscreen; this.messageListOfThreadsLoading = ko.observable(false).extend({ rateLimit: 1 }); this.highlightUnselectedAttachments = ko.observable(false).extend({ falseTimeout: 2000 }); @@ -215,15 +213,6 @@ export class MailMessageView extends AbstractViewRight { } }, - fullScreenMode: value => { - value && currentMessage() && AppUserStore.focusedState(Scope.MessageView); - if (this.oContent) { - value ? this.oContent.requestFullscreen() : exitFullscreen(); - } else { - $htmlCL.toggle('rl-message-fullscreen', value); - } - }, - showFullInfo: value => Local.set(ClientSideKeyNameMessageHeaderFullInfo, value ? '1' : '0') }); @@ -281,9 +270,6 @@ export class MailMessageView extends AbstractViewRight { } onBuild(dom) { - const el = dom.querySelector('.b-content'); - this.oContent = initFullscreen(el, () => MessageUserStore.fullScreen(getFullscreenElement() === el)); - const eqs = (ev, s) => ev.target.closestWithin(s, dom); dom.addEventListener('click', event => { ThemeStore.isMobile() && leftPanelDisabled(true); @@ -351,9 +337,8 @@ export class MailMessageView extends AbstractViewRight { addShortcut('escape', '', Scope.MessageView, () => { if (!this.viewModelDom.hidden && currentMessage()) { const preview = SettingsUserStore.usePreviewPane(); - if (MessageUserStore.fullScreen()) { - MessageUserStore.fullScreen(false); - + if (isFullscreen()) { + exitFullscreen(); if (preview) { AppUserStore.focusedState(Scope.MessageList); } @@ -369,7 +354,7 @@ export class MailMessageView extends AbstractViewRight { // fullscreen addShortcut('enter,open', '', Scope.MessageView, () => { - MessageUserStore.toggleFullScreen(); + isFullscreen() || toggleFullscreen(); return false; }); @@ -449,14 +434,14 @@ export class MailMessageView extends AbstractViewRight { // change focused state addShortcut('arrowleft', '', Scope.MessageView, () => { - if (!MessageUserStore.fullScreen() && currentMessage() && SettingsUserStore.usePreviewPane() + if (!isFullscreen() && currentMessage() && SettingsUserStore.usePreviewPane() && !oMessageScrollerDom().scrollLeft) { AppUserStore.focusedState(Scope.MessageList); return false; } }); addShortcut('tab', 'shift', Scope.MessageView, () => { - if (!MessageUserStore.fullScreen() && currentMessage() && SettingsUserStore.usePreviewPane()) { + if (!isFullscreen() && currentMessage() && SettingsUserStore.usePreviewPane()) { AppUserStore.focusedState(Scope.MessageList); } return false; diff --git a/dev/View/User/SystemDropDown.js b/dev/View/User/SystemDropDown.js index 51830e983..b56eefc53 100644 --- a/dev/View/User/SystemDropDown.js +++ b/dev/View/User/SystemDropDown.js @@ -1,6 +1,5 @@ import { AppUserStore } from 'Stores/User/App'; import { AccountUserStore } from 'Stores/User/Account'; -import { MessageUserStore } from 'Stores/User/Message'; //import { FolderUserStore } from 'Stores/User/Folder'; import { Scope } from 'Common/Enums'; @@ -126,7 +125,7 @@ export class SystemDropDownUserView extends AbstractViewRight { onBuild() { registerShortcut('m', '', [Scope.MessageList, Scope.MessageView, Scope.Settings], () => { if (!this.viewModelDom.hidden) { - MessageUserStore.fullScreen(false); +// exitFullscreen(); this.accountMenuDropdownTrigger(true); return false; }