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

[DE mobile] Change navigation view

Browse source
This commit is contained in:
SergeyEzhin 2022-02-05 01:03:19 +04:00
parent 4ffd60ce86
commit b36d044620
3 changed files with 31 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,18 +1,19 @@
import React, { Component } from "react"; import React, { Component } from "react";
import NavigationView from "../../view/settings/Navigation"; import Navigation from "../../view/settings/Navigation";
import { Device } from '../../../../../common/mobile/utils/device'; import { Device } from '../../../../../common/mobile/utils/device';
import { f7, Sheet } from 'framework7-react'; import { f7, Sheet, Page, Popup } from 'framework7-react';
import { withTranslation } from 'react-i18next'; import { withTranslation } from 'react-i18next';
class NavigationController extends Component { class NavigationController extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.updateNavigation = this.updateNavigation.bind(this); this.updateNavigation = this.updateNavigation.bind(this);
this.closeModal = this.closeModal.bind(this);
} }
closeModal() { closeModal() {
if (Device.phone) { if (Device.phone) {
f7.sheet.close('.settings-popup', false); f7.popup.close('.settings-popup', true);
} else { } else {
f7.popover.close('#settings-popover'); f7.popover.close('#settings-popover');
} }
@ -72,13 +73,30 @@ class NavigationController extends Component {
} }
}; };
componentDidMount() {
if(Device.phone) {
f7.sheet.open('#view-navigation-sheet', true);
this.closeModal();
}
}
render() { render() {
return ( return (
<NavigationView !Device.phone ?
onSelectItem={this.onSelectItem} <Navigation
updateNavigation={this.updateNavigation} onSelectItem={this.onSelectItem}
closeModal={this.closeModal} updateNavigation={this.updateNavigation}
/> closeModal={this.closeModal}
/>
:
<Sheet id="view-navigation-sheet" push>
<Navigation
onSelectItem={this.onSelectItem}
updateNavigation={this.updateNavigation}
closeModal={this.closeModal}
/>
</Sheet>
); );
} }
} }

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

@ -1,4 +1,4 @@
import React, { useState, useEffect, Component } from "react"; import React, { useState, useEffect, Component, Fragment } from "react";
import { Device } from '../../../../../common/mobile/utils/device'; 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';
@ -7,6 +7,7 @@ const Navigation = props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('Settings', {returnObjects: true}); const _t = t('Settings', {returnObjects: true});
const android = Device.android; const android = Device.android;
const isPhone = Device.phone;
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
const navigationObject = api.asc_ShowDocumentOutline(); const navigationObject = api.asc_ShowDocumentOutline();
const [currentPosition, setCurrentPosition] = useState(navigationObject.get_CurrentPosition()); const [currentPosition, setCurrentPosition] = useState(navigationObject.get_CurrentPosition());
@ -14,7 +15,7 @@ const Navigation = props => {
return ( return (
<Page> <Page>
{!Device.phone && <Navbar title={t('Settings.textNavigation')} backLink={_t.textBack} />} {!isPhone && <Navbar title={t('Settings.textNavigation')} backLink={_t.textBack} />}
{!arrHeaders.length {!arrHeaders.length
? ?
<div className="empty-screens"> <div className="empty-screens">
@ -41,48 +42,4 @@ const Navigation = props => {
) )
} }
const NavigationSheetView = props => { export default Navigation;
useEffect(() => {
if(Device.phone) {
f7.sheet.open('#view-navigation-sheet', true);
}
return () => {}
});
return (
<Sheet id="view-navigation-sheet" swipeToClose>
{/* <div id='swipe-handler' className='swipe-container' onTouchStart={handleTouchStart} onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd}>
<Icon icon='icon-swipe' />
</div> */}
<Navigation
updateNavigation={props.updateNavigation}
onSelectItem={props.onSelectItem}
closeModal={props.closeModal}
/>
</Sheet>
)
}
const NavigationView = props => {
return (
!Device.phone
?
<Navigation
updateNavigation={props.updateNavigation}
onSelectItem={props.onSelectItem}
closeModal={props.closeModal}
/>
:
<NavigationSheetView
updateNavigation={props.updateNavigation}
onSelectItem={props.onSelectItem}
closeModal={props.closeModal}
/>
)
}
export default NavigationView;

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

@ -13,6 +13,7 @@ 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 = [
{ {