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

[DE mobile] Corrected navigation view and fixed error

Browse source
This commit is contained in:
SergeyEzhin 2022-02-14 23:50:42 +04:00
parent 240c1bc05d
commit 51f7bb1617
5 changed files with 79 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
apps/documenteditor/mobile/src/controller/Error.jsx
View file

@ -4,6 +4,9 @@ import { f7 } from 'framework7-react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
const ErrorController = inject('storeAppOptions')(({storeAppOptions, LoadingDocument}) => { const ErrorController = inject('storeAppOptions')(({storeAppOptions, LoadingDocument}) => {
const { t } = useTranslation();
const _t = t("Error", { returnObjects: true });
useEffect(() => { useEffect(() => {
const on_engine_created = k => { k.asc_registerCallback('asc_onError', onError); }; const on_engine_created = k => { k.asc_registerCallback('asc_onError', onError); };
@ -20,9 +23,6 @@ const ErrorController = inject('storeAppOptions')(({storeAppOptions, LoadingDocu
}); });
const onError = (id, level, errData) => { const onError = (id, level, errData) => {
const {t} = useTranslation();
const _t = t("Error", { returnObjects: true });
if (id === Asc.c_oAscError.ID.LoadingScriptError) { if (id === Asc.c_oAscError.ID.LoadingScriptError) {
f7.notification.create({ f7.notification.create({
title: _t.criticalErrorTitle, title: _t.criticalErrorTitle,

14
apps/documenteditor/mobile/src/controller/settings/Navigation.jsx
View file

@ -1,5 +1,5 @@
import React, { Component } from "react"; import React, { Component } from "react";
import {Navigation, NavigationSheet} from "../../view/settings/Navigation"; import { NavigationPopover, NavigationSheet } from "../../view/settings/Navigation";
import { Device } from '../../../../../common/mobile/utils/device'; import { Device } from '../../../../../common/mobile/utils/device';
import { f7, Sheet, Page, Popup } from 'framework7-react'; import { f7, Sheet, Page, Popup } from 'framework7-react';
import { withTranslation } from 'react-i18next'; import { withTranslation } from 'react-i18next';
@ -10,14 +10,6 @@ class NavigationController extends Component {
this.updateNavigation = this.updateNavigation.bind(this); this.updateNavigation = this.updateNavigation.bind(this);
} }
closeModal() {
if (Device.phone) {
f7.popup.close('.settings-popup');
} else {
f7.popover.close('#settings-popover');
}
}
updateNavigation() { updateNavigation() {
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
const navigationObject = api.asc_ShowDocumentOutline(); const navigationObject = api.asc_ShowDocumentOutline();
@ -75,7 +67,7 @@ class NavigationController extends Component {
render() { render() {
return ( return (
!Device.phone ? !Device.phone ?
<Navigation <NavigationPopover
onSelectItem={this.onSelectItem} onSelectItem={this.onSelectItem}
updateNavigation={this.updateNavigation} updateNavigation={this.updateNavigation}
/> />
@ -83,7 +75,7 @@ class NavigationController extends Component {
<NavigationSheet <NavigationSheet
onSelectItem={this.onSelectItem} onSelectItem={this.onSelectItem}
updateNavigation={this.updateNavigation} updateNavigation={this.updateNavigation}
closeModal={this.closeModal} onclosed={this.props.onclosed}
/> />
); );
} }

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

@ -12,6 +12,7 @@ import { Device } from '../../../../common/mobile/utils/device'
import { Search, SearchSettings } from '../controller/Search'; import { Search, SearchSettings } from '../controller/Search';
import ContextMenu from '../controller/ContextMenu'; import ContextMenu from '../controller/ContextMenu';
import { Toolbar } from "../controller/Toolbar"; import { Toolbar } from "../controller/Toolbar";
import NavigationController from '../controller/settings/Navigation';
class MainPage extends Component { class MainPage extends Component {
constructor(props) { constructor(props) {
@ -21,7 +22,8 @@ class MainPage extends Component {
addOptionsVisible: false, addOptionsVisible: false,
addShowOptions: null, addShowOptions: null,
settingsVisible: false, settingsVisible: false,
collaborationVisible: false collaborationVisible: false,
navigationVisible: false
}; };
} }
@ -44,6 +46,9 @@ class MainPage extends Component {
} else if ( opts === 'coauth' ) { } else if ( opts === 'coauth' ) {
this.state.collaborationVisible && (opened = true); this.state.collaborationVisible && (opened = true);
newState.collaborationVisible = true; newState.collaborationVisible = true;
} else if( opts === 'navigation') {
this.state.navigationVisible && (opened = true);
newState.navigationVisible = true;
} }
for (let key in this.state) { for (let key in this.state) {
@ -75,6 +80,8 @@ class MainPage extends Component {
return {settingsVisible: false}; return {settingsVisible: false};
else if ( opts == 'coauth' ) else if ( opts == 'coauth' )
return {collaborationVisible: false}; return {collaborationVisible: false};
else if( opts == 'navigation')
return {navigationVisible: 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');
@ -142,24 +149,28 @@ 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')} />
} }
{ {
!this.state.addOptionsVisible ? null : !this.state.addOptionsVisible ? null :
<AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} /> <AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} />
} }
{ {
!this.state.settingsVisible ? null : !this.state.settingsVisible ? null :
<Settings openOptions={this.handleClickToOpenOptions.bind(this)} onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} /> <Settings openOptions={this.handleClickToOpenOptions.bind(this)} onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
} }
{ {
!this.state.collaborationVisible ? null : !this.state.collaborationVisible ? null :
<Collaboration onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} page={this.state.collaborationPage} /> <Collaboration onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} page={this.state.collaborationPage} />
} }
{appOptions.isDocReady && <ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)} /> } {
!this.state.navigationVisible ? null :
<NavigationController onclosed={this.handleOptionsViewClosed.bind(this, 'navigation')} />
}
{appOptions.isDocReady && <ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)} />}
</Page> </Page>
) )
} }

59
apps/documenteditor/mobile/src/view/settings/Navigation.jsx
View file

@ -3,7 +3,7 @@ import { Device } from '../../../../../common/mobile/utils/device';
import {f7, View, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link, ListButton, Toggle, Actions, ActionsButton, ActionsGroup, Sheet} from 'framework7-react'; import {f7, View, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link, ListButton, Toggle, Actions, ActionsButton, ActionsGroup, Sheet} from 'framework7-react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
const Navigation = props => { const NavigationPopover = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('Settings', {returnObjects: true}); const _t = t('Settings', {returnObjects: true});
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
@ -16,20 +16,20 @@ const Navigation = props => {
<Navbar title={t('Settings.textNavigation')} backLink={_t.textBack} /> <Navbar title={t('Settings.textNavigation')} backLink={_t.textBack} />
{!arrHeaders.length {!arrHeaders.length
? ?
<div className="empty-screens"> <div className="empty-screens">
<p className="empty-screens__text">{t('Settings.textEmptyScreens')}</p> <p className="empty-screens__text">{t('Settings.textEmptyScreens')}</p>
</div> </div>
: :
<List> <List>
{arrHeaders.map((header, index) => { {arrHeaders.map((header, index) => {
return ( return (
<ListItem radio key={index} title={header.name} checked={header.index === currentPosition} style={{paddingLeft: header.level * 16}} onClick={() => { <ListItem radio key={index} title={header.name} checked={header.index === currentPosition} style={{paddingLeft: header.level * 16}} onClick={() => {
setCurrentPosition(header.index); setCurrentPosition(header.index);
props.onSelectItem(header.index); props.onSelectItem(header.index);
}}></ListItem> }}></ListItem>
) )
})} })}
</List> </List>
} }
</Page> </Page>
) )
@ -84,37 +84,36 @@ const NavigationSheet = props => {
}; };
useEffect(() => { useEffect(() => {
props.closeModal();
f7.sheet.open('#view-navigation-sheet', true); f7.sheet.open('#view-navigation-sheet', true);
}, []); }, []);
return ( return (
<Sheet id="view-navigation-sheet" style={{height: `${stateHeight}`, opacity: `${stateOpacity}`}}> <Sheet id="view-navigation-sheet" closeByOutsideClick={true} onSheetClosed={() => props.onclosed()} style={{height: `${stateHeight}`, opacity: `${stateOpacity}`}}>
<div id='swipe-handler' className='swipe-container' onTouchStart={handleTouchStart} onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd}> <div id='swipe-handler' className='swipe-container' onTouchStart={handleTouchStart} onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd}>
<Icon icon='icon-swipe'/> <Icon icon='icon-swipe'/>
</div> </div>
{!arrHeaders.length {!arrHeaders.length
? ?
<div className="empty-screens"> <div className="empty-screens">
<p className="empty-screens__text">{t('Settings.textEmptyScreens')}</p> <p className="empty-screens__text">{t('Settings.textEmptyScreens')}</p>
</div> </div>
: :
<List> <List>
{arrHeaders.map((header, index) => { {arrHeaders.map((header, index) => {
return ( return (
<ListItem radio key={index} title={header.name} checked={header.index === currentPosition} style={{paddingLeft: header.level * 16}} onClick={() => { <ListItem radio key={index} title={header.name} checked={header.index === currentPosition} style={{paddingLeft: header.level * 16}} onClick={() => {
setCurrentPosition(header.index); setCurrentPosition(header.index);
props.onSelectItem(header.index); props.onSelectItem(header.index);
}}></ListItem> }}></ListItem>
) )
})} })}
</List> </List>
} }
</Sheet> </Sheet>
) )
} }
export { export {
Navigation, NavigationPopover,
NavigationSheet NavigationSheet
}; };

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

@ -13,7 +13,6 @@ import { DocumentFormats, DocumentMargins, DocumentColorSchemes } from "./Docume
import { MacrosSettings } from "./ApplicationSettings"; import { MacrosSettings } from "./ApplicationSettings";
import About from '../../../../../common/mobile/lib/view/About'; import About from '../../../../../common/mobile/lib/view/About';
import NavigationController from '../../controller/settings/Navigation'; import NavigationController from '../../controller/settings/Navigation';
// import { NavigationSheetView } from './Navigation';
const routes = [ const routes = [
{ {
@ -88,9 +87,14 @@ const SettingsList = inject("storeAppOptions", "storeReview")(observer(props =>
} }
}; };
const onOpenCollaboration = async () => { const onOpenCollaboration = () => {
await closeModal(); closeModal();
await props.openOptions('coauth'); props.openOptions('coauth');
}
const onOpenNavigation = () => {
closeModal();
props.openOptions('navigation');
} }
// set mode // set mode
@ -130,7 +134,12 @@ const SettingsList = inject("storeAppOptions", "storeReview")(observer(props =>
<Icon slot="media" icon="icon-search"></Icon> <Icon slot="media" icon="icon-search"></Icon>
</ListItem> </ListItem>
} }
<ListItem title={t('Settings.textNavigation')} link="#" onClick={onoptionclick.bind(this, "/navigation/")}> <ListItem title={t('Settings.textNavigation')} link='#' onClick={() => {
if(Device.phone) {
onOpenNavigation();
} else {
onoptionclick.bind(this, "/navigation/")();
}}}>
<Icon slot="media" icon="icon-navigation"></Icon> <Icon slot="media" icon="icon-navigation"></Icon>
</ListItem> </ListItem>
{window.matchMedia("(max-width: 359px)").matches ? {window.matchMedia("(max-width: 359px)").matches ?