From 9d08c6bfcbb1892aed848b223590842c461bff25 Mon Sep 17 00:00:00 2001
From: SergeyEzhin <ezhin@mail.ru>
Date: Tue, 29 Nov 2022 18:11:36 +0400
Subject: [PATCH] [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 98565f426..bb1cf0cb5 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 dbf4e46fe..c7bf299fc 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 b9f28198d..cdefe693b 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")}/>
                     </CSSTransition>
                 }
-                {isViewer && !disabledSettings && !disabledControls && !isDisconnected && isAvailableExt && isEdit &&
-                    <Fab position="right-bottom" slot="fixed" onClick={() => this.turnOffViewerMode()}>
-                        <Icon icon="icon-edit-mode"/>
-                    </Fab>
+                {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)}/>}