[DE mobile] For Bug 58655

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);
         }
     }

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 {
+.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;
+}
 
 

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")}/>
                     </CSSTransition>
                 }
-                {isViewer && !disabledSettings && !disabledControls && !isDisconnected && isAvailableExt && isEdit &&
+                {isFabShow &&
+                    <CSSTransition
+                        in={this.state.fabVisible}
+                        timeout={500}
+                        classNames="fab"
+                        mountOnEnter
+                        unmountOnExit
+                    >
                         <Fab position="right-bottom" slot="fixed" onClick={() => this.turnOffViewerMode()}>
                             <Icon icon="icon-edit-mode"/>
                         </Fab>
+                    </CSSTransition>
 
                 }
                 {appOptions.isDocReady && <ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)}/>}