[DE] changed methods to show/hide for app options pages
This commit is contained in:
parent
38ac875426
commit
738e0bf2b5
|
@ -1,7 +1,8 @@
|
||||||
import React, { Component } from 'react';
|
import React, { Component, useEffect } from 'react';
|
||||||
import { observer, inject } from "mobx-react";
|
import { observer, inject } from "mobx-react";
|
||||||
import { Popover, List, ListItem, Navbar, NavTitle, NavRight } from 'framework7-react';
|
import { Popover, List, ListItem, Navbar, NavTitle, NavRight } from 'framework7-react';
|
||||||
import { Sheet, Toolbar, BlockTitle, Link, Page, View, Icon } 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';
|
import { withTranslation, useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
@inject('users')
|
@inject('users')
|
||||||
|
@ -77,7 +78,7 @@ class CollaborationSheet extends Component {
|
||||||
}
|
}
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Sheet className="collab__sheet" push>
|
<Sheet className="coauth__sheet" push onSheetClosed={e => this.props.onclosed()}>
|
||||||
<View>
|
<View>
|
||||||
<PageCollaboration />
|
<PageCollaboration />
|
||||||
</View>
|
</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);
|
const pageusers = withTranslation()(PageUsers);
|
||||||
// export withTranslation()(CollaborationPopover);
|
// export withTranslation()(CollaborationPopover);
|
||||||
export {CollaborationPopover, CollaborationSheet, PageCollaboration, pageusers as PageUsers}
|
export {CollaborationPopover, CollaborationSheet, PageCollaboration, pageusers as PageUsers}
|
||||||
|
export default CollaborationView;
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import React from 'react';
|
import React, {useState, useEffect} from 'react';
|
||||||
import {observer, inject} from "mobx-react";
|
import {observer, inject} from "mobx-react";
|
||||||
import { Page, Navbar, NavRight, NavLeft, NavTitle, Link, Sheet, Tabs, Tab, View } from 'framework7-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 { useTranslation } from 'react-i18next';
|
||||||
import EditText from "./EditText";
|
import EditText from "./EditText";
|
||||||
import EditParagraph from "./EditParagraph";
|
import EditParagraph from "./EditParagraph";
|
||||||
|
@ -125,8 +126,9 @@ const EditSheet = props => {
|
||||||
})
|
})
|
||||||
}*/
|
}*/
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Sheet className="edit__sheet" push>
|
<Sheet className="edit__sheet" push onSheetClosed={e => props.onclosed()}>
|
||||||
<View>
|
<View>
|
||||||
<Page pageContent={false}>
|
<Page pageContent={false}>
|
||||||
<EditLayoutNavbar editors={editors} />
|
<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;
|
||||||
|
|
|
@ -1,31 +1,18 @@
|
||||||
import React, {Component} from 'react';
|
import React, {Component, useEffect} from 'react';
|
||||||
import {
|
import {View,Page,Navbar,NavRight,Link,Popup,Icon,ListItem,List} from 'framework7-react';
|
||||||
View,
|
|
||||||
Page,
|
|
||||||
Navbar,
|
|
||||||
NavRight,
|
|
||||||
Link,
|
|
||||||
Popup,
|
|
||||||
Icon,
|
|
||||||
ListItem,
|
|
||||||
List
|
|
||||||
} from 'framework7-react';
|
|
||||||
|
|
||||||
import { withTranslation } from 'react-i18next';
|
import { withTranslation } from 'react-i18next';
|
||||||
|
import { f7 } from 'framework7-react';
|
||||||
|
|
||||||
class Settings extends Component {
|
class SettingsPopup extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
|
||||||
popupOpened: false,
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
render() {
|
render() {
|
||||||
const { t } = this.props;
|
const { t } = this.props;
|
||||||
const _trarr = t('ViewSettings', {returnObjects: true});
|
const _trarr = t('ViewSettings', {returnObjects: true});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Popup className="settings-popup" opened={this.state.popupOpened} onPopupClosed={() => this.setState({popupOpened : false})}>
|
<Popup className="settings-popup" onPopupClosed={() => this.props.onclosed()}>
|
||||||
<View>
|
<View>
|
||||||
<Page>
|
<Page>
|
||||||
<Navbar title={t('ViewSettings.textSettings')}>
|
<Navbar title={t('ViewSettings.textSettings')}>
|
||||||
|
@ -64,6 +51,26 @@ class Settings extends Component {
|
||||||
</Popup>
|
</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;
|
||||||
|
|
|
@ -25,10 +25,10 @@ var routes = [
|
||||||
path: '/users/',
|
path: '/users/',
|
||||||
component: PageUsers
|
component: PageUsers
|
||||||
},
|
},
|
||||||
{
|
// {
|
||||||
path: '/collab-main/',
|
// path: '/collab-main/',
|
||||||
component: PageCollaboration
|
// component: PageCollaboration
|
||||||
},
|
// },
|
||||||
{
|
{
|
||||||
path: '/margins/',
|
path: '/margins/',
|
||||||
component: Margins,
|
component: Margins,
|
||||||
|
|
|
@ -1,14 +1,48 @@
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import { Page, View, Navbar, NavLeft, NavRight, Link, Icon } from 'framework7-react';
|
import { Page, View, Navbar, NavLeft, NavRight, Link, Icon } from 'framework7-react';
|
||||||
|
|
||||||
import EditSheet from '../components/edit/Edit.jsx';
|
import EditOptions from '../components/edit/Edit.jsx';
|
||||||
import SettingsPopup from '../components/settings/Settings.jsx';
|
import Settings from '../components/settings/Settings.jsx';
|
||||||
import { CollaborationPopover, CollaborationSheet } from '../../../../common/mobile/lib/view/Collaboration.jsx'
|
import CollaborationView from '../../../../common/mobile/lib/view/Collaboration.jsx'
|
||||||
|
|
||||||
export default class Home extends Component {
|
export default class Home extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(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() {
|
render() {
|
||||||
console.log(this.$f7router)
|
console.log(this.$f7router)
|
||||||
return (
|
return (
|
||||||
|
@ -18,22 +52,29 @@ export default class Home extends Component {
|
||||||
<div slot="before-inner" className="main-logo"><Icon icon="icon-logo"></Icon></div>
|
<div slot="before-inner" className="main-logo"><Icon icon="icon-logo"></Icon></div>
|
||||||
<NavLeft>
|
<NavLeft>
|
||||||
<Link>Undo</Link>
|
<Link>Undo</Link>
|
||||||
<Link>Redu</Link>
|
<Link>Redo</Link>
|
||||||
</NavLeft>
|
</NavLeft>
|
||||||
<NavRight>
|
<NavRight>
|
||||||
<Link href={false} sheetOpen=".edit__sheet">Edit</Link>
|
<Link href={false} onClick={e => this.handleClickToOpenOptions('edit')}>Edit</Link>
|
||||||
{/*<Link href={false} popoverOpen=".collab__popover">Users</Link>*/}
|
<Link href={false} onClick={e => this.handleClickToOpenOptions('coauth')}>Users</Link>
|
||||||
<Link href={false} sheetOpen=".collab__sheet">Users</Link>
|
<Link href={false} onClick={e => this.handleClickToOpenOptions('settings')}>Settings</Link>
|
||||||
<Link href={false} popupOpen=".settings-popup">Settings</Link>
|
|
||||||
</NavRight>
|
</NavRight>
|
||||||
</Navbar>
|
</Navbar>
|
||||||
{/* Page content */}
|
{/* Page content */}
|
||||||
<View id="editor_sdk">
|
<View id="editor_sdk">
|
||||||
</View>
|
</View>
|
||||||
<EditSheet />
|
{
|
||||||
<SettingsPopup />
|
!this.state.editOptionsVisible ? null :
|
||||||
<CollaborationPopover />
|
<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />
|
||||||
<CollaborationSheet />
|
}
|
||||||
|
{
|
||||||
|
!this.state.settingsVisible ? null :
|
||||||
|
<Settings onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
|
||||||
|
}
|
||||||
|
{
|
||||||
|
!this.state.collaborationVisible ? null :
|
||||||
|
<CollaborationView onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />
|
||||||
|
}
|
||||||
</Page>
|
</Page>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue