Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[DE mobile] Correct the display and hide of the notification window

Browse source
This commit is contained in:
SergeyEzhin 2022-10-31 18:37:09 +04:00
parent edaa81b086
commit d2bb8869ba
3 changed files with 35 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
apps/documenteditor/mobile/src/page/main.jsx
View file

@ -28,10 +28,10 @@ class MainPage extends Component {
navigationVisible: false, navigationVisible: false,
addLinkSettingsVisible: false, addLinkSettingsVisible: false,
editLinkSettingsVisible: false, editLinkSettingsVisible: false,
snackbarVisible: false, isModeChanged: false,
isCurrentPageChanged: false,
countPages: 0, countPages: 0,
currentPageNumber: 0, currentPageNumber: 0
isCurrentPageChanged: false
}; };
} }
@ -63,9 +63,9 @@ class MainPage extends Component {
} else if( opts === 'edit-link') { } else if( opts === 'edit-link') {
this.state.editLinkSettingsVisible && (opened = true); this.state.editLinkSettingsVisible && (opened = true);
newState.editLinkSettingsVisible = true; newState.editLinkSettingsVisible = true;
} else if( opts === 'snackbar') { } else if( opts === 'change-mode') {
this.state.snackbarVisible && (opened = true); this.state.isModeChanged && (opened = true);
newState.snackbarVisible = true; newState.isModeChanged = true;
} }
for (let key in this.state) { for (let key in this.state) {
@ -89,22 +89,24 @@ class MainPage extends Component {
handleOptionsViewClosed = opts => { handleOptionsViewClosed = opts => {
setTimeout(() => { setTimeout(() => {
this.setState(state => { this.setState(state => {
if ( opts == 'edit' ) if ( opts === 'edit' )
return {editOptionsVisible: false}; return {editOptionsVisible: false};
else if ( opts == 'add' ) else if ( opts === 'add' )
return {addOptionsVisible: false, addShowOptions: null}; return {addOptionsVisible: false, addShowOptions: null};
else if ( opts == 'settings' ) else if ( opts === 'settings' )
return {settingsVisible: false}; return {settingsVisible: false};
else if ( opts == 'coauth' ) else if ( opts === 'coauth' )
return {collaborationVisible: false}; return {collaborationVisible: false};
else if( opts == 'navigation') else if( opts === 'navigation')
return {navigationVisible: false}; return {navigationVisible: false};
else if ( opts === 'add-link') else if ( opts === 'add-link')
return {addLinkSettingsVisible: false}; return {addLinkSettingsVisible: false};
else if( opts === 'edit-link') else if( opts === 'edit-link')
return {editLinkSettingsVisible: false}; return {editLinkSettingsVisible: false};
else if( opts == 'snackbar') else if( opts === 'change-mode')
return {snackbarVisible: false} return {isModeChanged: false}
else if( opts === 'change-page')
return {isCurrentPageChanged: false}
}); });
if ((opts === 'edit' || opts === 'coauth') && Device.phone) { if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
f7.navbar.show('.main-navbar'); f7.navbar.show('.main-navbar');
@ -132,11 +134,11 @@ class MainPage extends Component {
}) })
} }
}); });
api.asc_registerCallback('asc_onCountPages', count => { // api.asc_registerCallback('asc_onCountPages', count => {
this.setState({ // this.setState({
countPages: count // countPages: count
}) // })
}); // });
}); });
} }
@ -215,7 +217,7 @@ class MainPage extends Component {
{/* { {/* {
Device.phone ? null : <SearchSettings /> Device.phone ? null : <SearchSettings />
} */} } */}
<SearchSettings useSuspense={false}/> <SearchSettings useSuspense={false} />
{ {
!this.state.editOptionsVisible ? null : !this.state.editOptionsVisible ? null :
<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')}/> <EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')}/>
@ -248,11 +250,18 @@ class MainPage extends Component {
} }
{ {
<CSSTransition <CSSTransition
in={this.state.snackbarVisible} in={this.state.isModeChanged}
timeout={500} timeout={1500}
classNames="snackbar" classNames="snackbar"
mountOnEnter mountOnEnter
unmountOnExit unmountOnExit
onEntered={(node, isAppearing) => {
if(!isAppearing) {
this.setState({
isModeChanged: false
});
}
}}
> >
<Snackbar <Snackbar
text={isMobileView ? t("Toolbar.textSwitchedMobileView") : t("Toolbar.textSwitchedStandardView")} /> text={isMobileView ? t("Toolbar.textSwitchedMobileView") : t("Toolbar.textSwitchedStandardView")} />
@ -261,7 +270,7 @@ class MainPage extends Component {
{ {
<CSSTransition <CSSTransition
in={this.state.isCurrentPageChanged} in={this.state.isCurrentPageChanged}
timeout={500} timeout={1500}
classNames="snackbar" classNames="snackbar"
mountOnEnter mountOnEnter
unmountOnExit unmountOnExit

6
apps/documenteditor/mobile/src/view/Toolbar.jsx
View file

@ -48,10 +48,8 @@ const ToolbarView = props => {
})} })}
{(isViewer || !Device.phone) && isAvailableExt && !props.disabledControls && <Link icon={isMobileView ? 'icon-standard-view' : 'icon-mobile-view'} href={false} onClick={async e => { {(isViewer || !Device.phone) && isAvailableExt && !props.disabledControls && <Link icon={isMobileView ? 'icon-standard-view' : 'icon-mobile-view'} href={false} onClick={async e => {
await props.changeMobileView(); await props.changeMobileView();
await props.openOptions('snackbar'); await props.closeOptions('change-page');
setTimeout(() => { await props.openOptions('change-mode');
props.closeOptions('snackbar');
}, 1500);
}}></Link>} }}></Link>}
{(props.showEditDocument && !isViewer) && {(props.showEditDocument && !isViewer) &&
<Link className={props.disabledControls ? 'disabled' : ''} icon='icon-edit' href={false} onClick={props.onEditDocument}></Link> <Link className={props.disabledControls ? 'disabled' : ''} icon='icon-edit' href={false} onClick={props.onEditDocument}></Link>

6
apps/documenteditor/mobile/src/view/settings/Settings.jsx
View file

@ -174,10 +174,8 @@ const SettingsList = inject("storeAppOptions", "storeReview")(observer(props =>
<Toggle checked={isMobileView} onToggleChange={async () => { <Toggle checked={isMobileView} onToggleChange={async () => {
await props.onChangeMobileView(); await props.onChangeMobileView();
await closeModal(); await closeModal();
await props.openOptions('snackbar'); await props.closeOptions('change-page');
setTimeout(() => { await props.openOptions('change-mode');
props.closeOptions('snackbar');
}, 1500);
}} /> }} />
</ListItem> </ListItem>
} }