[DE mobile] For Bug 49836
This commit is contained in:
SergeyEzhin
parent
1c66765645
commit
edaa81b086
|
|
@ -632,6 +632,8 @@
|
|||
"textOrientation": "Orientation",
|
||||
"textOwner": "Owner",
|
||||
"textPages": "Pages",
|
||||
"textPage": "Page",
|
||||
"textOf": "of",
|
||||
"textPageSize": "Page Size",
|
||||
"textParagraphs": "Paragraphs",
|
||||
"textPdfProducer": "PDF Producer",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
>
|
||||
<Snackbar
|
||||
text={isMobileView ? t("Toolbar.textSwitchedMobileView") : t("Toolbar.textSwitchedStandardView")}/>
|
||||
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 &&
|
||||
|
|
|
|||
Loading…
Reference in a new issue