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

[DE] changed methods to show/hide for app options pages

Browse source
This commit is contained in:
Maxim Kadushkin 2020-10-06 21:51:32 +03:00
parent 38ac875426
commit 738e0bf2b5
5 changed files with 134 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
apps/common/mobile/lib/view/Collaboration.jsx
View file

@ -1,7 +1,8 @@
import React, { Component } from 'react';
import React, { Component, useEffect } from 'react';
import { observer, inject } from "mobx-react";
import { Popover, List, ListItem, Navbar, NavTitle, NavRight } from 'framework7-react';
import { Sheet, Toolbar, BlockTitle, Link, Page, View, Icon } from 'framework7-react';
import { f7 } from 'framework7-react';
import { withTranslation, useTranslation } from 'react-i18next';
@inject('users')
@ -77,7 +78,7 @@ class CollaborationSheet extends Component {
}
render() {
return (
<Sheet className="collab__sheet" push>
<Sheet className="coauth__sheet" push onSheetClosed={e => this.props.onclosed()}>
<View>
<PageCollaboration />
</View>
@ -86,6 +87,25 @@ class CollaborationSheet extends Component {
}
}
const CollaborationView = props => {
useEffect(() => {
f7.sheet.open('.coauth__sheet');
return () => {
// component will unmount
}
});
const onviewclosed = () => {
if ( props.onclosed ) props.onclosed();
};
return (
<CollaborationSheet onclosed={onviewclosed} />
)
};
const pageusers = withTranslation()(PageUsers);
// export withTranslation()(CollaborationPopover);
export {CollaborationPopover, CollaborationSheet, PageCollaboration, pageusers as PageUsers}
export {CollaborationPopover, CollaborationSheet, PageCollaboration, pageusers as PageUsers}
export default CollaborationView;

28
apps/documenteditor/mobile/src/components/edit/Edit.jsx
View file

@ -1,6 +1,7 @@
import React from 'react';
import React, {useState, useEffect} from 'react';
import {observer, inject} from "mobx-react";
import { Page, Navbar, NavRight, NavLeft, NavTitle, Link, Sheet, Tabs, Tab, View } from 'framework7-react';
import { f7 } from 'framework7-react';
import { useTranslation } from 'react-i18next';
import EditText from "./EditText";
import EditParagraph from "./EditParagraph";
@ -125,8 +126,9 @@ const EditSheet = props => {
})
}*/
}
return (
<Sheet className="edit__sheet" push>
<Sheet className="edit__sheet" push onSheetClosed={e => props.onclosed()}>
<View>
<Page pageContent={false}>
<EditLayoutNavbar editors={editors} />
@ -137,4 +139,24 @@ const EditSheet = props => {
)
};
export default inject("storeFocusObjects")(observer(EditSheet));
const HOC_EditSheet = inject("storeFocusObjects")(observer(EditSheet));
const EditOptions = props => {
useEffect(() => {
f7.sheet.open('.edit__sheet');
return () => {
// component will unmount
}
});
const onsheetclosed = () => {
if ( props.onclosed ) props.onclosed();
};
return (
<HOC_EditSheet onclosed={onsheetclosed} />
)
};
export default EditOptions;

45
apps/documenteditor/mobile/src/components/settings/Settings.jsx
View file

@ -1,31 +1,18 @@
import React, {Component} from 'react';
import {
View,
Page,
Navbar,
NavRight,
Link,
Popup,
Icon,
ListItem,
List
} from 'framework7-react';
import React, {Component, useEffect} from 'react';
import {View,Page,Navbar,NavRight,Link,Popup,Icon,ListItem,List} from 'framework7-react';
import { withTranslation } from 'react-i18next';
import { f7 } from 'framework7-react';
class Settings extends Component {
class SettingsPopup extends Component {
constructor(props) {
super(props);
this.state = {
popupOpened: false,
};
}
render() {
const { t } = this.props;
const _trarr = t('ViewSettings', {returnObjects: true});
return (
<Popup className="settings-popup" opened={this.state.popupOpened} onPopupClosed={() => this.setState({popupOpened : false})}>
<Popup className="settings-popup" onPopupClosed={() => this.props.onclosed()}>
<View>
<Page>
<Navbar title={t('ViewSettings.textSettings')}>
@ -64,6 +51,26 @@ class Settings extends Component {
</Popup>
)
}
}
const HOCSettingsPopup = withTranslation()(SettingsPopup);
const Settings = props => {
useEffect(() => {
f7.popup.open('.settings-popup');
return () => {
// component will unmount
}
});
const onviewclosed = () => {
if ( props.onclosed )
props.onclosed();
};
return <HOCSettingsPopup onclosed={onviewclosed} />
};
export default withTranslation()(Settings);
export default Settings;

8
apps/documenteditor/mobile/src/js/routes.js
View file

@ -25,10 +25,10 @@ var routes = [
path: '/users/',
component: PageUsers
},
{
path: '/collab-main/',
component: PageCollaboration
},
// {
// path: '/collab-main/',
// component: PageCollaboration
// },
{
path: '/margins/',
component: Margins,

71
apps/documenteditor/mobile/src/pages/home.jsx
View file

@ -1,14 +1,48 @@
import React, { Component } from 'react';
import { Page, View, Navbar, NavLeft, NavRight, Link, Icon } from 'framework7-react';
import EditSheet from '../components/edit/Edit.jsx';
import SettingsPopup from '../components/settings/Settings.jsx';
import { CollaborationPopover, CollaborationSheet } from '../../../../common/mobile/lib/view/Collaboration.jsx'
import EditOptions from '../components/edit/Edit.jsx';
import Settings from '../components/settings/Settings.jsx';
import CollaborationView from '../../../../common/mobile/lib/view/Collaboration.jsx'
export default class Home extends Component {
constructor(props) {
super(props);
}
constructor(props) {
super(props);
this.state = {
editOptionsVisible: false,
settingsVisible: false,
collaborationVisible: false,
};
}
handleClickToOpenOptions = opts => {
this.setState(state => {
if ( opts == 'edit' )
return {editOptionsVisible: true};
else
if ( opts == 'settings' )
return {settingsVisible: true};
else
if ( opts == 'coauth' )
return {collaborationVisible: true}
});
};
handleOptionsViewClosed = opts => {
(async () => {
await 1 && this.setState(state => {
if ( opts == 'edit' )
return {editOptionsVisible: false};
else
if ( opts == 'settings' )
return {settingsVisible: false};
else
if ( opts == 'coauth' )
return {collaborationVisible: false}
})
})();
};
render() {
console.log(this.$f7router)
return (
@ -18,22 +52,29 @@ export default class Home extends Component {
<div slot="before-inner" className="main-logo"><Icon icon="icon-logo"></Icon></div>
<NavLeft>
<Link>Undo</Link>
<Link>Redu</Link>
<Link>Redo</Link>
</NavLeft>
<NavRight>
<Link href={false} sheetOpen=".edit__sheet">Edit</Link>
{/*<Link href={false} popoverOpen=".collab__popover">Users</Link>*/}
<Link href={false} sheetOpen=".collab__sheet">Users</Link>
<Link href={false} popupOpen=".settings-popup">Settings</Link>
<Link href={false} onClick={e => this.handleClickToOpenOptions('edit')}>Edit</Link>
<Link href={false} onClick={e => this.handleClickToOpenOptions('coauth')}>Users</Link>
<Link href={false} onClick={e => this.handleClickToOpenOptions('settings')}>Settings</Link>
</NavRight>
</Navbar>
{/* Page content */}
<View id="editor_sdk">
</View>
<EditSheet />
<SettingsPopup />
<CollaborationPopover />
<CollaborationSheet />
{
!this.state.editOptionsVisible ? null :
<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />
}
{
!this.state.settingsVisible ? null :
<Settings onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
}
{
!this.state.collaborationVisible ? null :
<CollaborationView onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />
}
</Page>
)
}