[DE mobile] Correct updating state, fix styles

2022-12-13 18:13:22 +04:00 · 2022-12-13 18:13:22 +04:00 · f3dfa26818
parent 578385100c
commit f3dfa26818
4 changed files with 93 additions and 108 deletions
--- 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;
 }
--- 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 : <SearchSettings />
-              } */}
+                    Device.phone ? null : <SearchSettings />
+                } */}
+                <CSSTransition
+                    in={this.state.snackbarVisible}
+                    timeout={1500}
+                    classNames="snackbar"
+                    mountOnEnter
+                    unmountOnExit
+                    onEntered={(node, isAppearing) => {
+                        if(!isAppearing) {
+                            this.setState({
+                                snackbarVisible: false
+                            });
+                        }
+                    }}
+                >
+                    <Snackbar
+                        text={isMobileView ? t("Toolbar.textSwitchedMobileView") : t("Toolbar.textSwitchedStandardView")}/>
+                </CSSTransition>
                <SearchSettings useSuspense={false}/>
                {
                    !this.state.editOptionsVisible ? null :
@ -248,18 +251,6 @@ class MainPage extends Component {
                    !this.state.navigationVisible ? null :
                        <NavigationController onclosed={this.handleOptionsViewClosed.bind(this, 'navigation')}/>
                }
-                {
-                    <CSSTransition
-                        in={this.state.snackbarVisible}
-                        timeout={500}
-                        classNames="snackbar"
-                        mountOnEnter
-                        unmountOnExit
-                    >
-                        <Snackbar
-                            text={isMobileView ? t("Toolbar.textSwitchedMobileView") : t("Toolbar.textSwitchedStandardView")}/>
-                    </CSSTransition>
-                }
                {isFabShow &&
                    <CSSTransition
                        in={this.state.fabVisible}
--- a/apps/documenteditor/mobile/src/view/Toolbar.jsx
+++ b/apps/documenteditor/mobile/src/view/Toolbar.jsx
@ -62,12 +62,9 @@ const ToolbarView = props => {
                    onRedoClick: props.onRedo
                })}
                {/*isAvailableExt && !props.disabledControls &&*/}
-                {(isViewer || !Device.phone) && <Link className={(!isAvailableExt || props.disabledControls) && 'disabled'} icon={isMobileView ? 'icon-standard-view' : 'icon-mobile-view'} href={false} onClick={async e => {
-                    await props.changeMobileView();
-                    await props.openOptions('snackbar');
-                    setTimeout(() => {
-                        props.closeOptions('snackbar');
-                    },  1500);
+                {(isViewer || !Device.phone) && <Link className={(!isAvailableExt || props.disabledControls) && 'disabled'} icon={isMobileView ? 'icon-standard-view' : 'icon-mobile-view'} href={false} onClick={() => {
+                    props.changeMobileView();
+                    props.openOptions('snackbar');
                }}></Link>}
                {(props.showEditDocument && !isViewer) &&
                    <Link className={props.disabledControls ? 'disabled' : ''} icon='icon-edit' href={false} onClick={props.onEditDocument}></Link>
@ -79,8 +76,8 @@ const ToolbarView = props => {
                })}
                {/*props.displayCollaboration &&*/}
                {Device.phone ? null : <Link className={(props.disabledControls || props.readerMode) && 'disabled'} icon='icon-search' searchbarEnable='.searchbar' href={false}></Link>}
-                {window.matchMedia("(min-width: 360px)").matches ? <Link className={props.disabledControls && 'disabled'} id='btn-coauth' href={false} icon='icon-collaboration' onClick={e => props.openOptions('coauth')}></Link> : null}
-                <Link className={(props.disabledSettings || props.disabledControls || isDisconnected) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={e => props.openOptions('settings')}></Link>
+                {window.matchMedia("(min-width: 360px)").matches ? <Link className={props.disabledControls && 'disabled'} id='btn-coauth' href={false} icon='icon-collaboration' onClick={() => props.openOptions('coauth')}></Link> : null}
+                <Link className={(props.disabledSettings || props.disabledControls || isDisconnected) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={() => props.openOptions('settings')}></Link>
            </NavRight>
        </Fragment>
    )
--- 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 &&
                        <ListItem title={t('Settings.textMobileView')}>
                            <Icon slot="media" icon="icon-mobile-view"></Icon>
-                            <Toggle checked={isMobileView} onToggleChange={async () => {
-                                await props.onChangeMobileView();
-                                await closeModal();
-                                await props.openOptions('snackbar');
-                                setTimeout(() => {
-                                    props.closeOptions('snackbar');
-                                },  1500);
+                            <Toggle checked={isMobileView} onToggleChange={() => {
+                                closeModal();
+                                props.onChangeMobileView();
+                                props.openOptions('snackbar');
                            }} />
                        </ListItem>
                    }