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

[DE] 'Settings' depends on phone/tablet

Browse source
This commit is contained in:
Maxim Kadushkin 2020-10-13 17:00:59 +03:00
parent 2b770c5547
commit 8e88073ac4
3 changed files with 92 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,63 +1,97 @@
import React, {Component, useEffect} from 'react';
import {View,Page,Navbar,NavRight,Link,Popup,Icon,ListItem,List} from 'framework7-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 {f7} from 'framework7-react';
import {Device} from '../../../../../common/mobile/utils/device'
const SettingsView = props => {
const {t} = props;
const _t = t('ViewSettings', {returnObjects: true});
const navbar = <Navbar title={t('ViewSettings.textSettings')}>
{!props.isPopover && <NavRight><Link popupClose=".settings-popup">{t('ViewSettings.textDone')}</Link></NavRight>}
</Navbar>;
const onoptionclick = page => {
if ( props.onOptionClick )
props.onOptionClick(page)
};
return (
<View style={props.style}>
<Page>
{navbar}
<List>
<ListItem title={_t.textFindAndReplace}>
<Icon slot="media" icon="icon-search"></Icon>
</ListItem>
<ListItem title={_t.textDocumentSettings} link="/document-settings/" onClick={onoptionclick.bind(this, '/document-settings/')}>
<Icon slot="media" icon="icon-doc-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('ViewSettings.textPrint')}>
<Icon slot="media" icon="icon-print"></Icon>
</ListItem>
<ListItem title={t('ViewSettings.textDocumentInfo')} link="#">
<Icon slot="media" icon="icon-info"></Icon>
</ListItem>
<ListItem title={t('ViewSettings.textHelp')} link="#">
<Icon slot="media" icon="icon-help"></Icon>
</ListItem>
<ListItem title={t('ViewSettings.textAbout')} link="#">
<Icon slot="media" icon="icon-about"></Icon>
</ListItem>
</List>
</Page>
</View>
)
};
const TSettingsView = withTranslation()(SettingsView);
class SettingsPopup extends Component {
constructor(props) {
super(props);
}
render() {
const { t } = this.props;
const _trarr = t('ViewSettings', {returnObjects: true});
return (
<Popup className="settings-popup" onPopupClosed={() => this.props.onclosed()}>
<View>
<Page>
<Navbar title={t('ViewSettings.textSettings')}>
<NavRight>
<Link popupClose=".settings-popup">{t('ViewSettings.textDone')}</Link>
</NavRight>
</Navbar>
<List>
<ListItem title={_trarr.textFindAndReplace}>
<Icon slot="media" icon="icon-search"></Icon>
</ListItem>
<ListItem title={_trarr.textDocumentSettings} link="/document-settings/">
<Icon slot="media" icon="icon-doc-setup"></Icon>
</ListItem>
<ListItem title={_trarr.textApplicationSettings} link="#">
<Icon slot="media" icon="icon-app-settings"></Icon>
</ListItem>
<ListItem title={_trarr.textDownload} link="#">
<Icon slot="media" icon="icon-download"></Icon>
</ListItem>
<ListItem title={t('ViewSettings.textPrint')}>
<Icon slot="media" icon="icon-print"></Icon>
</ListItem>
<ListItem title={t('ViewSettings.textDocumentInfo')} link="#">
<Icon slot="media" icon="icon-info"></Icon>
</ListItem>
<ListItem title={t('ViewSettings.textHelp')} link="#">
<Icon slot="media" icon="icon-help"></Icon>
</ListItem>
<ListItem title={t('ViewSettings.textAbout')} link="#">
<Icon slot="media" icon="icon-about"></Icon>
</ListItem>
</List>
</Page>
</View>
<TSettingsView />
</Popup>
)
}
}
const HOCSettingsPopup = withTranslation()(SettingsPopup);
class SettingsPopover extends Component {
constructor(props) {
super(props)
this.onoptionclick = this.onoptionclick.bind(this);
}
onoptionclick(page){
this.$f7.views.current.router.navigate(page);
}
render() {
return (
<Popover className="settings__popover" onPopoverClosed={() => this.props.onclosed()}>
<TSettingsView isPopover={true} onOptionClick={this.onoptionclick} style={{height: '430px', width: '360px'}} />
</Popover>
)
}
}
const Settings = props => {
useEffect(() => {
f7.popup.open('.settings-popup');
if ( Device.phone )
f7.popup.open('.settings-popup');
else f7.popover.open('.settings__popover', '#btn-settings');
return () => {
// component will unmount
@ -70,7 +104,11 @@ const Settings = props => {
props.onclosed();
};
return <HOCSettingsPopup onclosed={onviewclosed} />
if ( Device.phone ) {
return <SettingsPopup onclosed={onviewclosed} />
}
return <SettingsPopover onclosed={onviewclosed} />
};
export default Settings;

10
apps/documenteditor/mobile/src/css/app.less
View file

@ -32,3 +32,13 @@
content: '';
z-index: 6000;
}
:root {
--f7-popover-width: 360px;
}
.ios {
.popover-inner {
//border-radius: var(--f7-popover-border-radius);
}
}

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

@ -57,7 +57,7 @@ export default class Home extends Component {
<NavRight>
<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>
<Link href={false} onClick={e => this.handleClickToOpenOptions('settings')} id='btn-settings'>Settings</Link>
</NavRight>
</Navbar>
{/* Page content */}