[DE mobile] Fix Bug 58657

apps/documenteditor/mobile/src/less/app-ios.less

@@ -57,5 +57,36 @@
     .back-reader-mode {
         margin-left: 10px;
     }
+
+    // Snackbar
+    .snackbar {
+        max-width: 195px;
+        max-height: 48px;
+        position: absolute;
+        bottom: 24px;
+        left: calc(50% - 195px / 2);
+        background: rgba(0, 0, 0, .9);
+        border-radius: 4px;
+        z-index: 1000000;
+        &__content {
+            padding: 15px 16.5px;
+        }
+        &__text {
+            margin: 0;
+            font-style: normal;
+            font-weight: 400;
+            font-size: 13px;
+            line-height: 18px;
+            letter-spacing: -0.078px;
+            color: @fill-white;
+            text-align: center;
+        }
+    }
+
+    @media(max-width: 450px) {
+        .snackbar {
+            bottom: 50px;
+        }
+    }
 }
 

apps/documenteditor/mobile/src/less/app-material.less

@@ -110,9 +110,8 @@
     .snackbar {
         position: absolute;
         width: 344px;
-        max-width: 344px;
+        max-height: 48px;
-        height: 48px;
+        left: calc(50% - 344px / 2);
-        left: 8px;
         bottom: 16px;
         background: #333333;
         border-radius: 4px;
@@ -128,24 +127,20 @@
             font-size: 14px;
             line-height: 20px;
             letter-spacing: 0.25px;
+            text-align: center;
         }
     }
 
-    .snackbar-enter {
+    @media(max-width: 450px) {
-        opacity: 0;
+        .snackbar {
-    }
+            width: auto;
-
+            max-width: 100%;
-    .snackbar-enter-active {
+            left: 16px;
-        opacity: 1;
+            right: 16px;
-        transition: opacity 200ms;
+            bottom: 8px;
-    }
+            &__text {
-
+                text-align: left;
-    .snackbar-exit {
+            }
-        opacity: 1;
+        }
-    }
-
-    .snackbar-exit-active {
-        opacity: 0;
-        transition: opacity 200ms;
     }
 }

apps/documenteditor/mobile/src/less/app.less

@@ -328,3 +328,19 @@
     }
 }
 
+// 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;
+}
+

apps/documenteditor/mobile/src/page/main.jsx

@@ -189,11 +189,7 @@ class MainPage extends Component {
                 {
                     <CSSTransition
                         in={this.state.snackbarVisible}
-                        // timeout={300}
+                        timeout={500}
-                        timeout={{
-                            enter: 300,
-                            exit: 300
-                        }}
                         classNames="snackbar"
                         mountOnEnter
                         unmountOnExit