diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json
index 5baa1d7fc..86afc2cf2 100644
--- a/apps/documenteditor/mobile/locale/en.json
+++ b/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",
diff --git a/apps/documenteditor/mobile/src/components/Snackbar/Snackbar.jsx b/apps/documenteditor/mobile/src/components/Snackbar/Snackbar.jsx
index ae94a2109..8609bd6e6 100644
--- a/apps/documenteditor/mobile/src/components/Snackbar/Snackbar.jsx
+++ b/apps/documenteditor/mobile/src/components/Snackbar/Snackbar.jsx
@@ -4,7 +4,7 @@ const Snackbar = props => {
return (
-
{props.text}
+
{props.text}
)
diff --git a/apps/documenteditor/mobile/src/less/app-ios.less b/apps/documenteditor/mobile/src/less/app-ios.less
index a30272e5a..f299543d1 100644
--- a/apps/documenteditor/mobile/src/less/app-ios.less
+++ b/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;
- }
- }
-
- @media(max-width: 450px) {
- .snackbar {
- bottom: 50px;
+ letter-spacing: -0.08px;
+ color: @fill-white;
}
}
}
diff --git a/apps/documenteditor/mobile/src/less/app-material.less b/apps/documenteditor/mobile/src/less/app-material.less
index da45b41bd..76d3b3384 100644
--- a/apps/documenteditor/mobile/src/less/app-material.less
+++ b/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;
- color: @fill-white;
+ display: block;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 20px;
letter-spacing: 0.25px;
text-align: center;
- }
- }
-
- @media(max-width: 450px) {
- .snackbar {
- width: auto;
- max-width: 100%;
- left: 16px;
- right: 16px;
- bottom: 8px;
- &__text {
- text-align: left;
- }
+ color: @fill-white;
}
}
}
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/src/less/app.less b/apps/documenteditor/mobile/src/less/app.less
index dbf4e46fe..7a28793b8 100644
--- a/apps/documenteditor/mobile/src/less/app.less
+++ b/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;
}
diff --git a/apps/documenteditor/mobile/src/page/main.jsx b/apps/documenteditor/mobile/src/page/main.jsx
index 3a48f88e1..d2b849bcc 100644
--- a/apps/documenteditor/mobile/src/page/main.jsx
+++ b/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;
@@ -235,7 +255,26 @@ class MainPage extends Component {
unmountOnExit
>
+ text={isMobileView ? t("Toolbar.textSwitchedMobileView") : t("Toolbar.textSwitchedStandardView")} />
+
+ }
+ {
+ {
+ if(!isAppearing) {
+ this.setState({
+ isCurrentPageChanged: false
+ });
+ }
+ }}
+ >
+
}
{isViewer && !disabledSettings && !disabledControls && !isDisconnected && isAvailableExt && isEdit &&