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

[PE mobile] Add settings popover/popup

Browse source
This commit is contained in:
JuliaSvinareva 2020-12-01 15:35:57 +03:00
parent a3c18a4447
commit 8404579e88
3 changed files with 136 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
apps/presentationeditor/mobile/locale/en.json
View file

@ -23,5 +23,19 @@
"Slide title": "Slide title"
}
}
},
"View": {
"Settings": {
"textDone": "Done",
"textSettings": "Settings",
"textFindAndReplace": "Find and replace",
"textPresentationSettings": "Presentation Settings",
"textApplicationSettings": "Application Settings",
"textDownload": "Download",
"textPrint": "Print",
"textPresentationInfo": "Presentation Info",
"textHelp": "Help",
"textAbout": "About"
}
}
}

13
apps/presentationeditor/mobile/src/page/main.jsx
View file

@ -2,7 +2,7 @@ import React, { Component } from 'react';
import { Page, View, Navbar, NavLeft, NavRight, Link, Icon } from 'framework7-react';
// import EditOptions from '../view/edit/Edit';
// import Settings from '../view/settings/Settings';
import Settings from '../view/settings/Settings';
import CollaborationView from '../../../../common/mobile/lib/view/Collaboration.jsx'
export default class MainPage extends Component {
@ -44,12 +44,11 @@ export default class MainPage extends Component {
};
render() {
console.log(this.$f7router)
return (
<Page name="home">
{/* Top Navbar */}
<Navbar id='editor-navbar'>
<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>
<Link icon='icon-undo'></Link>
<Link icon='icon-redo'></Link>
@ -66,10 +65,10 @@ export default class MainPage extends Component {
{/*!this.state.editOptionsVisible ? null :*/}
{/*<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />*/}
{/*}*/}
{/*{*/}
{/*!this.state.settingsVisible ? null :*/}
{/*<Settings onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />*/}
{/*}*/}
{
!this.state.settingsVisible ? null :
<Settings onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
}
{
!this.state.collaborationVisible ? null :
<CollaborationView onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />

116
apps/presentationeditor/mobile/src/view/settings/Settings.jsx Normal file
View file

@ -0,0 +1,116 @@
import React, {Component, useEffect} from 'react';
import {View,Page,Navbar,NavRight,Link,Popup,Popover,Icon,ListItem,List} from 'framework7-react';
import { withTranslation } from 'react-i18next';
import {f7} from 'framework7-react';
import {Device} from '../../../../../common/mobile/utils/device';
const routes = [
{
path: '/',
component: 'TSettingsView'
},
/*{
path: '/presentation-settings/',
component: PresentationSettingsController,
},
{
path: "/presentation-info/",
component: PresentationInfoController,
}*/
];
const SettingsList = withTranslation()(props => {
const {t} = props;
const _t = t('View.Settings', {returnObjects: true});
const navbar = <Navbar title={_t.textSettings}>
{!props.inPopover && <NavRight><Link popupClose=".settings-popup">{_t.textDone}</Link></NavRight>}
</Navbar>;
const onoptionclick = page => {
if ( props.onOptionClick )
props.onOptionClick(page)
};
return (
<View style={props.style} stackPages={true} routes={routes}>
<Page>
{navbar}
<List>
{!props.inPopover &&
<ListItem title={_t.textFindAndReplace}>
<Icon slot="media" icon="icon-search"></Icon>
</ListItem>
}
<ListItem link="#" title={_t.textPresentationSettings} onClick={onoptionclick.bind(this, '/presentation-settings/')}>
<Icon slot="media" icon="icon-setup"></Icon>
</ListItem>
<ListItem title={_t.textApplicationSettings} link="#">
<Icon slot="media" icon="icon-app-settings"></Icon>
</ListItem>
<ListItem title={_t.textDownload} link="#">
<Icon slot="media" icon="icon-download"></Icon>
</ListItem>
<ListItem title={_t.textPrint}>
<Icon slot="media" icon="icon-print"></Icon>
</ListItem>
<ListItem title={_t.textPresentationInfo} link="#" onClick={onoptionclick.bind(this, "/presentation-info/")}>
<Icon slot="media" icon="icon-info"></Icon>
</ListItem>
<ListItem title={_t.textHelp} link="#">
<Icon slot="media" icon="icon-help"></Icon>
</ListItem>
<ListItem title={_t.textAbout} link="#">
<Icon slot="media" icon="icon-about"></Icon>
</ListItem>
</List>
</Page>
</View>
)
});
class SettingsView extends Component {
constructor(props) {
super(props);
this.onoptionclick = this.onoptionclick.bind(this);
}
onoptionclick(page){
this.$f7.views.current.router.navigate(page);
}
render() {
const show_popover = this.props.usePopover;
return (
show_popover ?
<Popover id="settings-popover" className="popover__titled" onPopoverClosed={() => this.props.onclosed()}>
<SettingsList inPopover={true} onOptionClick={this.onoptionclick} style={{height: '410px'}} />
</Popover> :
<Popup className="settings-popup" onPopupClosed={() => this.props.onclosed()}>
<SettingsList onOptionClick={this.onoptionclick} />
</Popup>
)
}
}
const Settings = props => {
useEffect(() => {
if ( Device.phone )
f7.popup.open('.settings-popup');
else f7.popover.open('#settings-popover', '#btn-settings');
return () => {
}
});
const onviewclosed = () => {
if ( props.onclosed )
props.onclosed();
};
return <SettingsView usePopover={!Device.phone} onclosed={onviewclosed} />
};
export default Settings;