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

[DE mobile] Correct updating state, fix styles

Browse source
This commit is contained in:
SergeyEzhin 2022-12-13 18:13:22 +04:00
parent 578385100c
commit f3dfa26818
4 changed files with 93 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
apps/documenteditor/mobile/src/less/app.less
View file

@ -69,17 +69,17 @@
} }
} }
.navbar ~ *, .navbars ~ * {
--f7-page-navbar-offset: 0;
}
.page.page-with-subnavbar { .page.page-with-subnavbar {
.page-content, &.page-with-logo .page-content { .page-content, &.page-with-logo .page-content {
--f7-page-subnavbar-offset: 0px; --f7-page-subnavbar-offset: 0;
padding-top: 0; padding-top: 0;
} }
} }
.page.editor > .page-content {
--f7-page-navbar-offset: 0;
}
// Review // Review
.page-review { .page-review {
--f7-toolbar-link-color: @brandColor; --f7-toolbar-link-color: @brandColor;
@ -362,10 +362,10 @@
} }
// Snackbar and FAB animation // Snackbar and FAB animation
.snackbar-enter, fab-enter { .snackbar-enter, .fab-enter {
opacity: 0; opacity: 0;
} }
.snackbar-enter-active, fab-enter-active { .snackbar-enter-active, .fab-enter-active {
opacity: 1; opacity: 1;
transition: opacity 300ms; transition: opacity 300ms;
} }

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

@ -43,84 +43,70 @@ class MainPage extends Component {
handleClickToOpenOptions = (opts, showOpts) => { handleClickToOpenOptions = (opts, showOpts) => {
f7.popover.close('.document-menu.modal-in', false); f7.popover.close('.document-menu.modal-in', false);
setTimeout(() => { let opened = false;
let opened = false; const newState = {};
const newState = {};
if ( opts === 'edit' ) {
this.state.editOptionsVisible && (opened = true);
newState.editOptionsVisible = true;
} else if ( opts === 'add' ) {
this.state.addOptionsVisible && (opened = true);
newState.addOptionsVisible = true;
newState.addShowOptions = showOpts;
} else if ( opts === 'settings' ) {
this.state.settingsVisible && (opened = true);
newState.settingsVisible = true;
} else if ( opts === 'coauth' ) {
this.state.collaborationVisible && (opened = true);
newState.collaborationVisible = true;
} else if( opts === 'navigation') {
this.state.navigationVisible && (opened = true);
newState.navigationVisible = true;
} else if ( opts === 'add-link') {
this.state.addLinkSettingsVisible && (opened = true);
newState.addLinkSettingsVisible = true;
} else if( opts === 'edit-link') {
this.state.editLinkSettingsVisible && (opened = true);
newState.editLinkSettingsVisible = true;
} else if( opts === 'snackbar') {
this.state.snackbarVisible && (opened = true);
newState.snackbarVisible = true;
} else if( opts === 'fab') {
this.state.fabVisible && (opened = true);
newState.fabVisible = true;
}
for (let key in this.state) { if (opts === 'edit') {
if (this.state[key] && !opened) { this.state.editOptionsVisible && (opened = true);
setTimeout(() => { newState.editOptionsVisible = true;
this.handleClickToOpenOptions(opts, showOpts); } else if (opts === 'add') {
}, 10); this.state.addOptionsVisible && (opened = true);
return; newState.addOptionsVisible = true;
} newState.addShowOptions = showOpts;
} } else if (opts === 'settings') {
this.state.settingsVisible && (opened = true);
newState.settingsVisible = true;
} else if (opts === 'coauth') {
this.state.collaborationVisible && (opened = true);
newState.collaborationVisible = true;
} else if (opts === 'navigation') {
this.state.navigationVisible && (opened = true);
newState.navigationVisible = true;
} else if (opts === 'add-link') {
this.state.addLinkSettingsVisible && (opened = true);
newState.addLinkSettingsVisible = true;
} else if (opts === 'edit-link') {
this.state.editLinkSettingsVisible && (opened = true);
newState.editLinkSettingsVisible = true;
} else if (opts === 'snackbar') {
newState.snackbarVisible = true;
} else if (opts === 'fab') {
newState.fabVisible = true;
}
if (!opened) { if (!opened) {
this.setState(newState); this.setState(newState);
if ((opts === 'edit' || opts === 'coauth') && Device.phone) { if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
f7.navbar.hide('.main-navbar'); f7.navbar.hide('.main-navbar');
}
} }
}, 10); }
}; };
handleOptionsViewClosed = opts => { handleOptionsViewClosed = opts => {
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 == 'snackbar') return {snackbarVisible: false}
return {snackbarVisible: false} else if (opts == 'fab')
else if( opts == 'fab') return {fabVisible: false}
return {fabVisible: false} });
});
if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
f7.navbar.show('.main-navbar');
}
}, 1);
if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
f7.navbar.show('.main-navbar');
}
}; };
turnOffViewerMode() { turnOffViewerMode() {
@ -215,8 +201,25 @@ class MainPage extends Component {
} }
{/* { {/* {
Device.phone ? null : <SearchSettings /> Device.phone ? null : <SearchSettings />
} */} } */}
<CSSTransition
in={this.state.snackbarVisible}
timeout={1500}
classNames="snackbar"
mountOnEnter
unmountOnExit
onEntered={(node, isAppearing) => {
if(!isAppearing) {
this.setState({
snackbarVisible: false
});
}
}}
>
<Snackbar
text={isMobileView ? t("Toolbar.textSwitchedMobileView") : t("Toolbar.textSwitchedStandardView")}/>
</CSSTransition>
<SearchSettings useSuspense={false}/> <SearchSettings useSuspense={false}/>
{ {
!this.state.editOptionsVisible ? null : !this.state.editOptionsVisible ? null :
@ -248,18 +251,6 @@ class MainPage extends Component {
!this.state.navigationVisible ? null : !this.state.navigationVisible ? null :
<NavigationController onclosed={this.handleOptionsViewClosed.bind(this, 'navigation')}/> <NavigationController onclosed={this.handleOptionsViewClosed.bind(this, 'navigation')}/>
} }
{
<CSSTransition
in={this.state.snackbarVisible}
timeout={500}
classNames="snackbar"
mountOnEnter
unmountOnExit
>
<Snackbar
text={isMobileView ? t("Toolbar.textSwitchedMobileView") : t("Toolbar.textSwitchedStandardView")}/>
</CSSTransition>
}
{isFabShow && {isFabShow &&
<CSSTransition <CSSTransition
in={this.state.fabVisible} in={this.state.fabVisible}

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

@ -62,12 +62,9 @@ const ToolbarView = props => {
onRedoClick: props.onRedo onRedoClick: props.onRedo
})} })}
{/*isAvailableExt && !props.disabledControls &&*/} {/*isAvailableExt && !props.disabledControls &&*/}
{(isViewer || !Device.phone) && <Link className={(!isAvailableExt || props.disabledControls) && 'disabled'} icon={isMobileView ? 'icon-standard-view' : 'icon-mobile-view'} href={false} onClick={async e => { {(isViewer || !Device.phone) && <Link className={(!isAvailableExt || props.disabledControls) && 'disabled'} icon={isMobileView ? 'icon-standard-view' : 'icon-mobile-view'} href={false} onClick={() => {
await props.changeMobileView(); props.changeMobileView();
await props.openOptions('snackbar'); props.openOptions('snackbar');
setTimeout(() => {
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>
@ -79,8 +76,8 @@ const ToolbarView = props => {
})} })}
{/*props.displayCollaboration &&*/} {/*props.displayCollaboration &&*/}
{Device.phone ? null : <Link className={(props.disabledControls || props.readerMode) && 'disabled'} icon='icon-search' searchbarEnable='.searchbar' href={false}></Link>} {Device.phone ? null : <Link className={(props.disabledControls || props.readerMode) && 'disabled'} icon='icon-search' searchbarEnable='.searchbar' href={false}></Link>}
{window.matchMedia("(min-width: 360px)").matches ? <Link className={props.disabledControls && 'disabled'} id='btn-coauth' href={false} icon='icon-collaboration' onClick={e => props.openOptions('coauth')}></Link> : null} {window.matchMedia("(min-width: 360px)").matches ? <Link className={props.disabledControls && 'disabled'} id='btn-coauth' href={false} icon='icon-collaboration' onClick={() => props.openOptions('coauth')}></Link> : null}
<Link className={(props.disabledSettings || props.disabledControls || isDisconnected) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={e => props.openOptions('settings')}></Link> <Link className={(props.disabledSettings || props.disabledControls || isDisconnected) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={() => props.openOptions('settings')}></Link>
</NavRight> </NavRight>
</Fragment> </Fragment>
) )

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

@ -171,13 +171,10 @@ const SettingsList = inject("storeAppOptions", "storeReview")(observer(props =>
{!isViewer && Device.phone && {!isViewer && Device.phone &&
<ListItem title={t('Settings.textMobileView')}> <ListItem title={t('Settings.textMobileView')}>
<Icon slot="media" icon="icon-mobile-view"></Icon> <Icon slot="media" icon="icon-mobile-view"></Icon>
<Toggle checked={isMobileView} onToggleChange={async () => { <Toggle checked={isMobileView} onToggleChange={() => {
await props.onChangeMobileView(); closeModal();
await closeModal(); props.onChangeMobileView();
await props.openOptions('snackbar'); props.openOptions('snackbar');
setTimeout(() => {
props.closeOptions('snackbar');
}, 1500);
}} /> }} />
</ListItem> </ListItem>
} }