From 73df55f383bb67457afc48e65f104c0fdfa3fd14 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Fri, 11 Nov 2022 19:25:47 +0400 Subject: [PATCH 1/9] [DE mobile] Fix Bug 58655 --- .../mobile/src/controller/Toolbar.jsx | 68 +++++++++---------- apps/documenteditor/mobile/src/page/main.jsx | 2 + 2 files changed, 34 insertions(+), 36 deletions(-) diff --git a/apps/documenteditor/mobile/src/controller/Toolbar.jsx b/apps/documenteditor/mobile/src/controller/Toolbar.jsx index e896757d84..98565f426d 100644 --- a/apps/documenteditor/mobile/src/controller/Toolbar.jsx +++ b/apps/documenteditor/mobile/src/controller/Toolbar.jsx @@ -16,39 +16,24 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview', 'sto const stateDisplayMode = displayMode == "final" || displayMode == "original" ? true : false; const displayCollaboration = props.users.hasEditUsers || appOptions.canViewComments || appOptions.canReview || appOptions.canViewReview; const readerMode = appOptions.readerMode; - const objectLocked = props.storeFocusObjects.objectLocked; - const storeToolbarSettings = props.storeToolbarSettings; const isCanUndo = storeToolbarSettings.isCanUndo; const isCanRedo = storeToolbarSettings.isCanRedo; const disabledControls = storeToolbarSettings.disabledControls; const disabledEditControls = storeToolbarSettings.disabledEditControls; const disabledSettings = storeToolbarSettings.disabledSettings; - const showEditDocument = !appOptions.isEdit && appOptions.canEdit && appOptions.canRequestEditRights; - const docInfo = props.storeDocumentInfo; const docExt = docInfo.dataDoc ? docInfo.dataDoc.fileType : ''; const docTitle = docInfo.dataDoc ? docInfo.dataDoc.title : ''; - const sensitivity = 20; - let touchStartY = 0; - let touchEndY = 0; - useEffect(() => { - const sdk = document.querySelector('#editor_sdk'); - Common.Gateway.on('init', loadConfig); Common.Notifications.on('toolbar:activatecontrols', activateControls); Common.Notifications.on('toolbar:deactivateeditcontrols', deactivateEditControls); Common.Notifications.on('goback', goBack); - if(isViewer) { - sdk.addEventListener('touchstart', handleTouchStart); - sdk.addEventListener('touchend', handleTouchEnd); - } - if (isDisconnected) { f7.popover.close(); f7.sheet.close(); @@ -59,36 +44,47 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview', 'sto Common.Notifications.off('toolbar:activatecontrols', activateControls); Common.Notifications.off('toolbar:deactivateeditcontrols', deactivateEditControls); Common.Notifications.off('goback', goBack); + } + }, []); + useEffect(() => { + const api = Common.EditorApi.get(); + const onEngineCreated = api => { if(isViewer) { - sdk.removeEventListener('touchstart', handleTouchStart); - sdk.removeEventListener('touchend', handleTouchEnd); + api.asc_registerCallback('onMobileScrollDelta', scrollHandler); } + }; + + if (!api) { + Common.Notifications.on('engineCreated', onEngineCreated); + } else { + onEngineCreated(api); } - }); - // Touch handlers + return () => { + const api = Common.EditorApi.get(); - const checkDirection = () => { - const diff = touchStartY - touchEndY; - - if(Math.abs(diff) > sensitivity) { - if(diff > 0) { - // f7.navbar.show('.main-navbar'); - } else { - // f7.navbar.hide('.main-navbar'); - } + if (api) api.asc_unregisterCallback('onMobileScrollDelta', scrollHandler); + Common.Notifications.off('engineCreated', onEngineCreated); } - }; + }, [isViewer]); - const handleTouchStart = e => { - touchStartY = e.changedTouches[0].screenY; - }; + // Scroll handler - const handleTouchEnd = e => { - touchEndY = e.changedTouches[0].screenY; - checkDirection(); - }; + const scrollHandler = offset => { + const api = Common.EditorApi.get(); + const navbarBgHeight = document.querySelector('.navbar-bg').clientHeight; + const subnavbarHeight = document.querySelector('.subnavbar').clientHeight; + const navbarHeight = navbarBgHeight + subnavbarHeight; + + if(offset > navbarHeight) { + f7.navbar.hide('.main-navbar'); + api.SetMobileTopOffset(undefined, 0); + } else { + f7.navbar.show('.main-navbar'); + api.SetMobileTopOffset(undefined, navbarHeight); + } + } // Back button const [isShowBack, setShowBack] = useState(appOptions.canBackToFolder); diff --git a/apps/documenteditor/mobile/src/page/main.jsx b/apps/documenteditor/mobile/src/page/main.jsx index 3a48f88e13..b9f28198d7 100644 --- a/apps/documenteditor/mobile/src/page/main.jsx +++ b/apps/documenteditor/mobile/src/page/main.jsx @@ -118,6 +118,8 @@ class MainPage extends Component { appOptions.changeViewerMode(); api.asc_removeRestriction(Asc.c_oAscRestrictionType.View) api.asc_addRestriction(Asc.c_oAscRestrictionType.None); + + f7.navbar.show('.main-navbar'); }; render() { From 9d08c6bfcbb1892aed848b223590842c461bff25 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Tue, 29 Nov 2022 18:11:36 +0400 Subject: [PATCH 2/9] [DE mobile] For Bug 58655 --- .../mobile/src/controller/Toolbar.jsx | 4 +- apps/documenteditor/mobile/src/less/app.less | 42 ++++++++++--------- apps/documenteditor/mobile/src/page/main.jsx | 25 ++++++++--- 3 files changed, 46 insertions(+), 25 deletions(-) diff --git a/apps/documenteditor/mobile/src/controller/Toolbar.jsx b/apps/documenteditor/mobile/src/controller/Toolbar.jsx index 98565f426d..bb1cf0cb54 100644 --- a/apps/documenteditor/mobile/src/controller/Toolbar.jsx +++ b/apps/documenteditor/mobile/src/controller/Toolbar.jsx @@ -79,9 +79,11 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview', 'sto if(offset > navbarHeight) { f7.navbar.hide('.main-navbar'); + props.closeOptions('fab'); api.SetMobileTopOffset(undefined, 0); - } else { + } else if(offset < -navbarHeight) { f7.navbar.show('.main-navbar'); + props.openOptions('fab'); api.SetMobileTopOffset(undefined, navbarHeight); } } diff --git a/apps/documenteditor/mobile/src/less/app.less b/apps/documenteditor/mobile/src/less/app.less index dbf4e46fe3..c7bf299fc3 100644 --- a/apps/documenteditor/mobile/src/less/app.less +++ b/apps/documenteditor/mobile/src/less/app.less @@ -347,28 +347,32 @@ } } -// Snackbar animation -.snackbar-enter { - opacity: 0; -} -.snackbar-enter-active { - opacity: 1; - transition: opacity 300ms; -} -.snackbar-exit { - opacity: 1; -} -.snackbar-exit-active { - opacity: 0; - transition: opacity 300ms; -} - // FAB -.fab a { - background-color: @background-primary; - &:focus, &:focus-within, &:active, &.active-state { +.fab { + z-index: 10000; + a { background-color: @background-primary; + + &:focus, &:focus-within, &:active, &.active-state { + background-color: @background-primary; + } } } +// Snackbar and FAB animation +.snackbar-enter, fab-enter { + opacity: 0; +} +.snackbar-enter-active, fab-enter-active { + opacity: 1; + transition: opacity 300ms; +} +.snackbar-exit, .fab-exit { + opacity: 1; +} +.snackbar-exit-active, .fab-exit-active { + opacity: 0; + transition: opacity 300ms; +} + diff --git a/apps/documenteditor/mobile/src/page/main.jsx b/apps/documenteditor/mobile/src/page/main.jsx index b9f28198d7..cdefe693bd 100644 --- a/apps/documenteditor/mobile/src/page/main.jsx +++ b/apps/documenteditor/mobile/src/page/main.jsx @@ -29,7 +29,8 @@ class MainPage extends Component { navigationVisible: false, addLinkSettingsVisible: false, editLinkSettingsVisible: false, - snackbarVisible: false + snackbarVisible: false, + fabVisible: true }; } @@ -64,6 +65,9 @@ class MainPage extends Component { } else if( opts === 'snackbar') { this.state.snackbarVisible && (opened = true); newState.snackbarVisible = true; + } else if( opts === 'fab') { + this.state.fabVisible && (opened = true); + newState.fabVisible = true; } for (let key in this.state) { @@ -103,6 +107,8 @@ class MainPage extends Component { return {editLinkSettingsVisible: false}; else if( opts == 'snackbar') return {snackbarVisible: false} + else if( opts == 'fab') + return {fabVisible: false} }); if ((opts === 'edit' || opts === 'coauth') && Device.phone) { f7.navbar.show('.main-navbar'); @@ -135,6 +141,7 @@ class MainPage extends Component { const isMobileView = appOptions.isMobileView; const disabledControls = storeToolbarSettings.disabledControls; const disabledSettings = storeToolbarSettings.disabledSettings; + const isFabShow = isViewer && !disabledSettings && !disabledControls && !isDisconnected && isAvailableExt && isEdit; const config = appOptions.config; let showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo))); @@ -240,10 +247,18 @@ class MainPage extends Component { text={isMobileView ? t("Toolbar.textSwitchedMobileView") : t("Toolbar.textSwitchedStandardView")}/> } - {isViewer && !disabledSettings && !disabledControls && !isDisconnected && isAvailableExt && isEdit && - this.turnOffViewerMode()}> - - + {isFabShow && + + this.turnOffViewerMode()}> + + + } {appOptions.isDocReady && } From ef7a42ec324c49802d8504279c27182a03daf33e Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Thu, 8 Dec 2022 18:49:35 +0400 Subject: [PATCH 3/9] [DE mobile] Correct offset --- apps/common/mobile/resources/less/common.less | 7 ++++--- .../mobile/src/controller/Toolbar.jsx | 19 +++++++++++++------ 2 files changed, 17 insertions(+), 9 deletions(-) diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index 39292d4b3f..a2e9733762 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -61,10 +61,11 @@ .page.page-with-subnavbar { .page-content { --f7-page-subnavbar-offset: 0px; + padding-top: 0; } - &.page-with-logo .page-content { - --f7-page-subnavbar-offset: 26px; - } + // &.page-with-logo .page-content { + // --f7-page-subnavbar-offset: 26px; + // } } .popup, .popover, .sheet-modal { diff --git a/apps/documenteditor/mobile/src/controller/Toolbar.jsx b/apps/documenteditor/mobile/src/controller/Toolbar.jsx index bb1cf0cb54..209ad8580f 100644 --- a/apps/documenteditor/mobile/src/controller/Toolbar.jsx +++ b/apps/documenteditor/mobile/src/controller/Toolbar.jsx @@ -49,8 +49,11 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview', 'sto useEffect(() => { const api = Common.EditorApi.get(); + const subnavbarHeight = document.querySelector('.subnavbar').clientHeight; + const onEngineCreated = api => { if(isViewer) { + api.SetMobileTopOffset(subnavbarHeight, subnavbarHeight); api.asc_registerCallback('onMobileScrollDelta', scrollHandler); } }; @@ -64,7 +67,11 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview', 'sto return () => { const api = Common.EditorApi.get(); - if (api) api.asc_unregisterCallback('onMobileScrollDelta', scrollHandler); + if (api) { + api.SetMobileTopOffset(subnavbarHeight, subnavbarHeight); + api.asc_unregisterCallback('onMobileScrollDelta', scrollHandler); + } + Common.Notifications.off('engineCreated', onEngineCreated); } }, [isViewer]); @@ -73,18 +80,18 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview', 'sto const scrollHandler = offset => { const api = Common.EditorApi.get(); - const navbarBgHeight = document.querySelector('.navbar-bg').clientHeight; + // const navbarBgHeight = document.querySelector('.navbar-bg').clientHeight; const subnavbarHeight = document.querySelector('.subnavbar').clientHeight; - const navbarHeight = navbarBgHeight + subnavbarHeight; + // const navbarHeight = navbarBgHeight + subnavbarHeight; - if(offset > navbarHeight) { + if(offset > subnavbarHeight) { f7.navbar.hide('.main-navbar'); props.closeOptions('fab'); api.SetMobileTopOffset(undefined, 0); - } else if(offset < -navbarHeight) { + } else if(offset < -subnavbarHeight) { f7.navbar.show('.main-navbar'); props.openOptions('fab'); - api.SetMobileTopOffset(undefined, navbarHeight); + api.SetMobileTopOffset(undefined, subnavbarHeight); } } From 8c4440d3e73a37d1418e2997c881e1ab01332f23 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Fri, 9 Dec 2022 12:18:14 +0400 Subject: [PATCH 4/9] [common] Removed navbar offset --- apps/common/mobile/resources/less/common.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index 204629fde4..cd9ef29894 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -25,6 +25,10 @@ } } +.navbar ~ *, .navbars ~ * { + --f7-page-navbar-offset: 0; +} + //.navbar { // .title { // text-overflow: initial; From 623c0dd0a25361600421696f1b806410b8be9137 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Fri, 9 Dec 2022 15:04:59 +0400 Subject: [PATCH 5/9] [DE mobile] Change top offset --- .../mobile/src/controller/Toolbar.jsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/apps/documenteditor/mobile/src/controller/Toolbar.jsx b/apps/documenteditor/mobile/src/controller/Toolbar.jsx index 209ad8580f..534d362f8c 100644 --- a/apps/documenteditor/mobile/src/controller/Toolbar.jsx +++ b/apps/documenteditor/mobile/src/controller/Toolbar.jsx @@ -49,11 +49,13 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview', 'sto useEffect(() => { const api = Common.EditorApi.get(); + const navbarBgHeight = document.querySelector('.navbar-bg').clientHeight; const subnavbarHeight = document.querySelector('.subnavbar').clientHeight; + const navbarHeight = navbarBgHeight + subnavbarHeight; const onEngineCreated = api => { if(isViewer) { - api.SetMobileTopOffset(subnavbarHeight, subnavbarHeight); + api.SetMobileTopOffset(navbarHeight, navbarHeight); api.asc_registerCallback('onMobileScrollDelta', scrollHandler); } }; @@ -68,7 +70,7 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview', 'sto const api = Common.EditorApi.get(); if (api) { - api.SetMobileTopOffset(subnavbarHeight, subnavbarHeight); + api.SetMobileTopOffset(navbarHeight, navbarHeight); api.asc_unregisterCallback('onMobileScrollDelta', scrollHandler); } @@ -80,18 +82,18 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview', 'sto const scrollHandler = offset => { const api = Common.EditorApi.get(); - // const navbarBgHeight = document.querySelector('.navbar-bg').clientHeight; + const navbarBgHeight = document.querySelector('.navbar-bg').clientHeight; const subnavbarHeight = document.querySelector('.subnavbar').clientHeight; - // const navbarHeight = navbarBgHeight + subnavbarHeight; + const navbarHeight = navbarBgHeight + subnavbarHeight; - if(offset > subnavbarHeight) { + if(offset > navbarHeight) { f7.navbar.hide('.main-navbar'); props.closeOptions('fab'); api.SetMobileTopOffset(undefined, 0); - } else if(offset < -subnavbarHeight) { + } else if(offset < -navbarHeight) { f7.navbar.show('.main-navbar'); props.openOptions('fab'); - api.SetMobileTopOffset(undefined, subnavbarHeight); + api.SetMobileTopOffset(undefined, navbarHeight); } } From 578385100ce8b617c7f23b2eaef4452dc6fb5a4c Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Fri, 9 Dec 2022 16:29:33 +0400 Subject: [PATCH 6/9] [DE mobile] Correct styles --- apps/common/mobile/resources/less/common.less | 11 +++-------- apps/documenteditor/mobile/src/less/app.less | 11 +++++++++++ 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index cd9ef29894..0b4931c60e 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -25,10 +25,6 @@ } } -.navbar ~ *, .navbars ~ * { - --f7-page-navbar-offset: 0; -} - //.navbar { // .title { // text-overflow: initial; @@ -68,11 +64,10 @@ .page.page-with-subnavbar { .page-content { --f7-page-subnavbar-offset: 0px; - padding-top: 0; } - // &.page-with-logo .page-content { - // --f7-page-subnavbar-offset: 26px; - // } + &.page-with-logo .page-content { + --f7-page-subnavbar-offset: 26px; + } } .popup, .popover, .sheet-modal { diff --git a/apps/documenteditor/mobile/src/less/app.less b/apps/documenteditor/mobile/src/less/app.less index 7142625f72..5dfe0f2e64 100644 --- a/apps/documenteditor/mobile/src/less/app.less +++ b/apps/documenteditor/mobile/src/less/app.less @@ -69,6 +69,17 @@ } } +.navbar ~ *, .navbars ~ * { + --f7-page-navbar-offset: 0; +} + +.page.page-with-subnavbar { + .page-content, &.page-with-logo .page-content { + --f7-page-subnavbar-offset: 0px; + padding-top: 0; + } +} + // Review .page-review { --f7-toolbar-link-color: @brandColor; From f3dfa2681861abcb91a0c8bf2c6e6c01f926387c Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Tue, 13 Dec 2022 18:13:22 +0400 Subject: [PATCH 7/9] [DE mobile] Correct updating state, fix styles --- apps/documenteditor/mobile/src/less/app.less | 14 +- apps/documenteditor/mobile/src/page/main.jsx | 163 +++++++++--------- .../mobile/src/view/Toolbar.jsx | 13 +- .../mobile/src/view/settings/Settings.jsx | 11 +- 4 files changed, 93 insertions(+), 108 deletions(-) diff --git a/apps/documenteditor/mobile/src/less/app.less b/apps/documenteditor/mobile/src/less/app.less index 5dfe0f2e64..b5f1bc2ff6 100644 --- a/apps/documenteditor/mobile/src/less/app.less +++ b/apps/documenteditor/mobile/src/less/app.less @@ -69,17 +69,17 @@ } } -.navbar ~ *, .navbars ~ * { - --f7-page-navbar-offset: 0; -} - .page.page-with-subnavbar { .page-content, &.page-with-logo .page-content { - --f7-page-subnavbar-offset: 0px; + --f7-page-subnavbar-offset: 0; padding-top: 0; } } +.page.editor > .page-content { + --f7-page-navbar-offset: 0; +} + // Review .page-review { --f7-toolbar-link-color: @brandColor; @@ -362,10 +362,10 @@ } // Snackbar and FAB animation -.snackbar-enter, fab-enter { +.snackbar-enter, .fab-enter { opacity: 0; } -.snackbar-enter-active, fab-enter-active { +.snackbar-enter-active, .fab-enter-active { opacity: 1; transition: opacity 300ms; } diff --git a/apps/documenteditor/mobile/src/page/main.jsx b/apps/documenteditor/mobile/src/page/main.jsx index 2bff8e148f..63fc78a2b1 100644 --- a/apps/documenteditor/mobile/src/page/main.jsx +++ b/apps/documenteditor/mobile/src/page/main.jsx @@ -42,85 +42,71 @@ class MainPage extends Component { handleClickToOpenOptions = (opts, showOpts) => { f7.popover.close('.document-menu.modal-in', false); + + let opened = false; + const newState = {}; - setTimeout(() => { - let opened = false; - const newState = {}; - if ( opts === 'edit' ) { - this.state.editOptionsVisible && (opened = true); - newState.editOptionsVisible = true; - } else if ( opts === 'add' ) { - this.state.addOptionsVisible && (opened = true); - newState.addOptionsVisible = true; - newState.addShowOptions = showOpts; - } else if ( opts === 'settings' ) { - this.state.settingsVisible && (opened = true); - newState.settingsVisible = true; - } else if ( opts === 'coauth' ) { - this.state.collaborationVisible && (opened = true); - newState.collaborationVisible = true; - } else if( opts === 'navigation') { - this.state.navigationVisible && (opened = true); - newState.navigationVisible = true; - } else if ( opts === 'add-link') { - this.state.addLinkSettingsVisible && (opened = true); - newState.addLinkSettingsVisible = true; - } else if( opts === 'edit-link') { - this.state.editLinkSettingsVisible && (opened = true); - newState.editLinkSettingsVisible = true; - } else if( opts === 'snackbar') { - this.state.snackbarVisible && (opened = true); - newState.snackbarVisible = true; - } else if( opts === 'fab') { - this.state.fabVisible && (opened = true); - newState.fabVisible = true; - } + if (opts === 'edit') { + this.state.editOptionsVisible && (opened = true); + newState.editOptionsVisible = true; + } else if (opts === 'add') { + this.state.addOptionsVisible && (opened = true); + newState.addOptionsVisible = true; + newState.addShowOptions = showOpts; + } else if (opts === 'settings') { + this.state.settingsVisible && (opened = true); + newState.settingsVisible = true; + } else if (opts === 'coauth') { + this.state.collaborationVisible && (opened = true); + newState.collaborationVisible = true; + } else if (opts === 'navigation') { + this.state.navigationVisible && (opened = true); + newState.navigationVisible = true; + } else if (opts === 'add-link') { + this.state.addLinkSettingsVisible && (opened = true); + newState.addLinkSettingsVisible = true; + } else if (opts === 'edit-link') { + this.state.editLinkSettingsVisible && (opened = true); + newState.editLinkSettingsVisible = true; + } else if (opts === 'snackbar') { + newState.snackbarVisible = true; + } else if (opts === 'fab') { + newState.fabVisible = true; + } - for (let key in this.state) { - if (this.state[key] && !opened) { - setTimeout(() => { - this.handleClickToOpenOptions(opts, showOpts); - }, 10); - return; - } + if (!opened) { + this.setState(newState); + if ((opts === 'edit' || opts === 'coauth') && Device.phone) { + f7.navbar.hide('.main-navbar'); } - - if (!opened) { - this.setState(newState); - if ((opts === 'edit' || opts === 'coauth') && Device.phone) { - f7.navbar.hide('.main-navbar'); - } - } - }, 10); + } }; handleOptionsViewClosed = opts => { - setTimeout(() => { - this.setState(state => { - if ( opts == 'edit' ) - return {editOptionsVisible: false}; - else if ( opts == 'add' ) - return {addOptionsVisible: false, addShowOptions: null}; - else if ( opts == 'settings' ) - return {settingsVisible: false}; - else if ( opts == 'coauth' ) - return {collaborationVisible: false}; - else if( opts == 'navigation') - return {navigationVisible: false}; - else if ( opts === 'add-link') - return {addLinkSettingsVisible: false}; - else if( opts === 'edit-link') - return {editLinkSettingsVisible: false}; - else if( opts == 'snackbar') - return {snackbarVisible: false} - else if( opts == 'fab') - return {fabVisible: false} - }); - if ((opts === 'edit' || opts === 'coauth') && Device.phone) { - f7.navbar.show('.main-navbar'); - } - }, 1); + this.setState(state => { + if (opts == 'edit') + return {editOptionsVisible: false}; + else if (opts == 'add') + return {addOptionsVisible: false, addShowOptions: null}; + else if (opts == 'settings') + return {settingsVisible: false}; + else if (opts == 'coauth') + return {collaborationVisible: false}; + else if (opts == 'navigation') + return {navigationVisible: false}; + else if (opts === 'add-link') + return {addLinkSettingsVisible: false}; + else if (opts === 'edit-link') + return {editLinkSettingsVisible: false}; + else if (opts == 'snackbar') + return {snackbarVisible: false} + else if (opts == 'fab') + return {fabVisible: false} + }); + if ((opts === 'edit' || opts === 'coauth') && Device.phone) { + f7.navbar.show('.main-navbar'); + } }; turnOffViewerMode() { @@ -215,8 +201,25 @@ class MainPage extends Component { } {/* { - Device.phone ? null : - } */} + Device.phone ? null : + } */} + { + if(!isAppearing) { + this.setState({ + snackbarVisible: false + }); + } + }} + > + + { !this.state.editOptionsVisible ? null : @@ -248,18 +251,6 @@ class MainPage extends Component { !this.state.navigationVisible ? null : } - { - - - - } {isFabShow && { onRedoClick: props.onRedo })} {/*isAvailableExt && !props.disabledControls &&*/} - {(isViewer || !Device.phone) && { - await props.changeMobileView(); - await props.openOptions('snackbar'); - setTimeout(() => { - props.closeOptions('snackbar'); - }, 1500); + {(isViewer || !Device.phone) && { + props.changeMobileView(); + props.openOptions('snackbar'); }}>} {(props.showEditDocument && !isViewer) && @@ -79,8 +76,8 @@ const ToolbarView = props => { })} {/*props.displayCollaboration &&*/} {Device.phone ? null : } - {window.matchMedia("(min-width: 360px)").matches ? props.openOptions('coauth')}> : null} - props.openOptions('settings')}> + {window.matchMedia("(min-width: 360px)").matches ? props.openOptions('coauth')}> : null} + props.openOptions('settings')}> ) diff --git a/apps/documenteditor/mobile/src/view/settings/Settings.jsx b/apps/documenteditor/mobile/src/view/settings/Settings.jsx index 2533eace15..9ffb8d90a8 100644 --- a/apps/documenteditor/mobile/src/view/settings/Settings.jsx +++ b/apps/documenteditor/mobile/src/view/settings/Settings.jsx @@ -171,13 +171,10 @@ const SettingsList = inject("storeAppOptions", "storeReview")(observer(props => {!isViewer && Device.phone && - { - await props.onChangeMobileView(); - await closeModal(); - await props.openOptions('snackbar'); - setTimeout(() => { - props.closeOptions('snackbar'); - }, 1500); + { + closeModal(); + props.onChangeMobileView(); + props.openOptions('snackbar'); }} /> } From 15ac68d6819428ea31af07f70ac6dad739a4adc1 Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Tue, 20 Dec 2022 17:20:38 +0300 Subject: [PATCH 8/9] [DE] refactoring --- apps/documenteditor/mobile/src/page/main.jsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/apps/documenteditor/mobile/src/page/main.jsx b/apps/documenteditor/mobile/src/page/main.jsx index 63fc78a2b1..b3fe0c434c 100644 --- a/apps/documenteditor/mobile/src/page/main.jsx +++ b/apps/documenteditor/mobile/src/page/main.jsx @@ -145,9 +145,6 @@ class MainPage extends Component { const showPlaceholder = !appOptions.isDocReady && (!config.customization || !(config.customization.loaderName || config.customization.loaderLogo)); const isBranding = appOptions.canBranding || appOptions.canBrandingExt; - if ($$('.skl-container').length) { - $$('.skl-container').remove(); - } return ( From 0174c8f6f3f43990c961ef2e49406e930976a8bf Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Tue, 20 Dec 2022 17:23:56 +0300 Subject: [PATCH 9/9] [mobile] corrected skeleton's colors --- apps/common/mobile/resources/css/skeleton.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/common/mobile/resources/css/skeleton.css b/apps/common/mobile/resources/css/skeleton.css index 85c8c2031f..f5a0aa1a7f 100644 --- a/apps/common/mobile/resources/css/skeleton.css +++ b/apps/common/mobile/resources/css/skeleton.css @@ -127,7 +127,9 @@ body.theme-type-dark { :root .theme-type-dark { --f7-navbar-bg-color: #232323; + --f7-bars-bg-color-rgb: 35,35,35; --f7-subnavbar-bg-color: #232323; + --f7-bars-translucent-opacity: 1; } .md .word-editor {