[DE mobile] For Bug 49836

apps/documenteditor/mobile/locale/en.json

@@ -632,6 +632,8 @@
     "textOrientation": "Orientation",
     "textOwner": "Owner",
     "textPages": "Pages",
+    "textPage": "Page",
+    "textOf": "of",
     "textPageSize": "Page Size",
     "textParagraphs": "Paragraphs",
     "textPdfProducer": "PDF Producer",

apps/documenteditor/mobile/src/components/Snackbar/Snackbar.jsx

@@ -4,7 +4,7 @@ const Snackbar = props => {
     return (
         <div className="snackbar">
             <div className="snackbar__content">
-                <p className="snackbar__text">{props.text}</p>
+                <span className="snackbar__text">{props.text}</span>
             </div>
         </div>
     )

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

@@ -60,31 +60,18 @@
 
     // Snackbar
     .snackbar {
-        max-width: 195px;
-        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;
+            padding: 9px 11.5px;
         }
         &__text {
-            margin: 0;
+            display: block;
             font-style: normal;
             font-weight: 400;
             font-size: 13px;
             line-height: 18px;
-            letter-spacing: -0.078px;
-            color: @fill-white;
             text-align: center;
-        }
+            letter-spacing: -0.08px;
-    }
+            color: @fill-white;
-
-    @media(max-width: 450px) {
-        .snackbar {
-            bottom: 50px;
         }
     }
 }

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

@@ -108,39 +108,18 @@
 
     // Snackbar
     .snackbar {
-        position: absolute;
-        width: 344px;
-        max-height: 48px;
-        left: calc(50% - 344px / 2);
-        bottom: 16px;
-        background: #333333;
-        border-radius: 4px;
-        z-index: 1000000;
         &__content {
-            padding: 14px 16px;
+            padding: 8px 9px;
         }
         &__text {
-            margin: 0;
+            display: block;
-            color: @fill-white;
             font-style: normal;
             font-weight: 400;
             font-size: 14px;
             line-height: 20px;
             letter-spacing: 0.25px;
             text-align: center;
-        }
+            color: @fill-white;
-    }
-
-    @media(max-width: 450px) {
-        .snackbar {
-            width: auto;
-            max-width: 100%;
-            left: 16px;
-            right: 16px;
-            bottom: 8px;
-            &__text {
-                text-align: left;
-            }
         }
     }
 }

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

@@ -347,7 +347,19 @@
     }
 }
 
-// Snackbar animation
+// Snackbar
+.snackbar {
+    position: absolute;
+    z-index: 1000000;
+    max-width: 100%;
+    width: fit-content;
+    bottom: 16px;
+    left: 8px;
+    right: 8px;
+    margin: auto;
+    background: rgba(85, 85, 85, .9);
+    border-radius: 4px;
+}
 .snackbar-enter {
     opacity: 0;
 }

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

@@ -1,7 +1,6 @@
-
 import React, { Component } from 'react';
 import { CSSTransition } from 'react-transition-group';
-import { f7, Link, Fab, Icon, FabButtons, FabButton, Page, View, Navbar, Subnavbar } from 'framework7-react';
+import { f7, Fab, Icon, Page, View, Navbar, Subnavbar } from 'framework7-react';
 import { observer, inject } from "mobx-react";
 import { withTranslation } from 'react-i18next';
 import EditOptions from '../view/edit/Edit';
@@ -29,7 +28,10 @@ class MainPage extends Component {
             navigationVisible: false,
             addLinkSettingsVisible: false,
             editLinkSettingsVisible: false,
-            snackbarVisible: false
+            snackbarVisible: false,
+            countPages: 0,
+            currentPageNumber: 0,
+            isCurrentPageChanged: false
         };
     }
 
@@ -120,6 +122,24 @@ class MainPage extends Component {
         api.asc_addRestriction(Asc.c_oAscRestrictionType.None);
     };
 
+    componentDidMount() {
+        Common.Notifications.on('engineCreated', api => {
+            api.asc_registerCallback('asc_onCurrentPage', number => {
+                if(number !== this.state.currentPageNumber) {
+                    this.setState({
+                        isCurrentPageChanged: true,
+                        currentPageNumber: number
+                    })
+                }
+            });
+            api.asc_registerCallback('asc_onCountPages', count => {
+                this.setState({
+                    countPages: count
+                })
+            });
+        });
+    }
+
     render() {
         const { t } = this.props;
         const appOptions = this.props.storeAppOptions;
@@ -238,6 +258,25 @@ class MainPage extends Component {
                             text={isMobileView ? t("Toolbar.textSwitchedMobileView") : t("Toolbar.textSwitchedStandardView")} />
                     </CSSTransition>
                 }
+                {
+                    <CSSTransition
+                        in={this.state.isCurrentPageChanged}
+                        timeout={500}
+                        classNames="snackbar"
+                        mountOnEnter
+                        unmountOnExit
+                        onEntered={(node, isAppearing) => {
+                            if(!isAppearing) {
+                               this.setState({
+                                   isCurrentPageChanged: false
+                               });
+                            }
+                        }}
+                    >
+                        <Snackbar
+                            text={`${t("Settings.textPage")} ${this.state.currentPageNumber + 1} ${t("Settings.textOf")} ${this.state.countPages}`} />
+                    </CSSTransition>
+                }
                 {isViewer && !disabledSettings && !disabledControls && !isDisconnected && isAvailableExt && isEdit &&
                     <Fab position="right-bottom" slot="fixed" onClick={() => this.turnOffViewerMode()}>
                         <Icon icon="icon-edit-mode"/>