From edaa81b08630004a867567f30dacdcc2abe44239 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Fri, 28 Oct 2022 21:16:03 +0400 Subject: [PATCH] [DE mobile] For Bug 49836 --- apps/documenteditor/mobile/locale/en.json | 2 + .../src/components/Snackbar/Snackbar.jsx | 2 +- .../mobile/src/less/app-ios.less | 21 ++------- .../mobile/src/less/app-material.less | 27 ++--------- apps/documenteditor/mobile/src/less/app.less | 14 +++++- apps/documenteditor/mobile/src/page/main.jsx | 47 +++++++++++++++++-- 6 files changed, 66 insertions(+), 47 deletions(-) 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 &&