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

[PE mobile] Add insert popup

Browse source
This commit is contained in:
JuliaSvinareva 2020-12-15 16:26:53 +03:00
parent c42205ea7c
commit 5950c5adc1
8 changed files with 215 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -49,6 +49,12 @@
"textDisableAllMacrosWithNotification": "Disable all macros with notification",
"textEnableAll": "Enable All",
"textEnableAllMacrosWithoutNotification": "Enable all macros without notification"
},
"Add": {
"textSlide": "Slide",
"textShape": "Shape",
"textImage": "Image",
"textOther": "Other"
}
}
}

20
apps/presentationeditor/mobile/src/controller/add/AddShape.jsx Normal file
View file

@ -0,0 +1,20 @@
import React, {Component} from 'react';
import { f7 } from 'framework7-react';
import {Device} from '../../../../../common/mobile/utils/device';
import {observer, inject} from "mobx-react";
import { AddShape } from '../../view/add/AddShape';
class AddShapeController extends Component {
constructor (props) {
super(props);
}
render () {
return (
<AddShape
/>
)
}
}
export default AddShapeController;

20
apps/presentationeditor/mobile/src/controller/add/AddSlide.jsx Normal file
View file

@ -0,0 +1,20 @@
import React, {Component} from 'react';
import { f7 } from 'framework7-react';
import {Device} from '../../../../../common/mobile/utils/device';
import {observer, inject} from "mobx-react";
import { AddSlide } from '../../view/add/AddSlide';
class AddSlideController extends Component {
constructor (props) {
super(props);
}
render () {
return (
<AddSlide
/>
)
}
}
export default AddSlideController;

2
apps/presentationeditor/mobile/src/less/icons-ios.less
View file

@ -563,7 +563,7 @@
}
}
.active {
.tab-link-active {
i.icon {
&.icon-add-slide {
width: 24px;

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

@ -2,6 +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 AddOptions from '../view/add/Add';
import Settings from '../view/settings/Settings';
import CollaborationView from '../../../../common/mobile/lib/view/Collaboration.jsx'
@ -10,6 +11,7 @@ export default class MainPage extends Component {
super(props);
this.state = {
editOptionsVisible: false,
addOptionsVisible: false,
settingsVisible: false,
collaborationVisible: false,
};
@ -19,11 +21,11 @@ export default class MainPage extends Component {
this.setState(state => {
if ( opts == 'edit' )
return {editOptionsVisible: true};
else
if ( opts == 'settings' )
else if ( opts == 'add' )
return {addOptionsVisible: true};
else if ( opts == 'settings' )
return {settingsVisible: true};
else
if ( opts == 'coauth' )
else if ( opts == 'coauth' )
return {collaborationVisible: true}
});
};
@ -33,11 +35,11 @@ export default class MainPage extends Component {
await 1 && this.setState(state => {
if ( opts == 'edit' )
return {editOptionsVisible: false};
else
if ( opts == 'settings' )
else if ( opts == 'add' )
return {addOptionsVisible: false};
else if ( opts == 'settings' )
return {settingsVisible: false};
else
if ( opts == 'coauth' )
else if ( opts == 'coauth' )
return {collaborationVisible: false}
})
})();
@ -55,6 +57,7 @@ export default class MainPage extends Component {
</NavLeft>
<NavRight>
<Link id='btn-edit' icon='icon-edit-settings' href={false} onClick={e => this.handleClickToOpenOptions('edit')}></Link>
<Link id='btn-add' icon='icon-plus' href={false} onClick={e => this.handleClickToOpenOptions('add')}></Link>
<Link href={false} icon='icon-collaboration' onClick={e => this.handleClickToOpenOptions('coauth')}></Link>
<Link id='btn-settings' icon='icon-settings' href={false} onClick={e => this.handleClickToOpenOptions('settings')}></Link>
</NavRight>
@ -65,6 +68,10 @@ export default class MainPage extends Component {
{/*!this.state.editOptionsVisible ? null :*/}
{/*<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />*/}
{/*}*/}
{
!this.state.addOptionsVisible ? null :
<AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} />
}
{
!this.state.settingsVisible ? null :
<Settings onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />

123
apps/presentationeditor/mobile/src/view/add/Add.jsx Normal file
View file

@ -0,0 +1,123 @@
import React, {Component, useEffect} from 'react';
import {View,Page,Navbar,NavRight,Link,Popup,Popover,Icon,Tabs,Tab} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {f7} from 'framework7-react';
import { observer, inject } from "mobx-react";
import {Device} from '../../../../../common/mobile/utils/device';
import AddSlideController from "../../controller/add/AddSlide";
import AddShapeController from "../../controller/add/AddShape";
//import AddImageController from "../../controller/add/AddImage";
//import AddOtherController from "../../controller/add/AddOther";
const routes = [
];
const AddLayoutNavbar = ({ tabs, inPopover }) => {
const isAndroid = Device.android;
return (
<Navbar>
<div className='tab-buttons tabbar'>
{tabs.map((item, index) =>
<Link key={"pe-link-" + item.id} tabLink={"#" + item.id} tabLinkActive={index === 0}>
<Icon slot="media" icon={item.icon}></Icon>
</Link>)}
{isAndroid && <span className='tab-link-highlight' style={{width: 100 / tabs.lenght + '%'}}></span>}
</div>
{ !inPopover && <NavRight><Link icon='icon-expand-down' popupClose=".add-popup"></Link></NavRight> }
</Navbar>
)
};
const AddLayoutContent = ({ tabs }) => {
return (
<Tabs animated>
{tabs.map((item, index) =>
<Tab key={"pe-tab-" + item.id} id={item.id} className="page-content" tabActive={index === 0}>
{item.component}
</Tab>
)}
</Tabs>
)
};
const AddTabs = props => {
const { t } = useTranslation();
const _t = t('Add', {returnObjects: true});
const tabs = [];
tabs.push({
caption: _t.textSlide,
id: 'add-slide',
icon: 'icon-add-slide',
component: <AddSlideController />
});
tabs.push({
caption: _t.textShape,
id: 'add-shape',
icon: 'icon-add-shape',
component: <AddShapeController />
});
/*tabs.push({
caption: _t.textImage,
id: 'add-image',
icon: 'icon-add-image',
component: <AddImageController />
});
tabs.push({
caption: _t.textOther,
id: 'add-other',
icon: 'icon-add-other',
component: <AddOtherController />
});*/
return (
<View style={props.style} stackPages={true} routes={routes}>
<Page pageContent={false}>
<AddLayoutNavbar tabs={tabs} inPopover={props.inPopover}/>
<AddLayoutContent tabs={tabs} />
</Page>
</View>
)
};
class AddView 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="add-popover" className="popover__titled" onPopoverClosed={() => this.props.onclosed()}>
<AddTabs inPopover={true} onOptionClick={this.onoptionclick} style={{height: '410px'}} />
</Popover> :
<Popup className="add-popup" onPopupClosed={() => this.props.onclosed()}>
<AddTabs onOptionClick={this.onoptionclick} />
</Popup>
)
}
}
const Add = props => {
useEffect(() => {
if ( Device.phone )
f7.popup.open('.add-popup');
else f7.popover.open('#add-popover', '#btn-add');
return () => {
// component will unmount
}
});
const onviewclosed = () => {
if ( props.onclosed )
props.onclosed();
};
return <AddView usePopover={!Device.phone} onclosed={onviewclosed} />
};
export default Add;

15
apps/presentationeditor/mobile/src/view/add/AddShape.jsx Normal file
View file

@ -0,0 +1,15 @@
import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react";
import {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
const AddShape = props => {
return (
<Fragment>
</Fragment>
)
};
export {AddShape};

15
apps/presentationeditor/mobile/src/view/add/AddSlide.jsx Normal file
View file

@ -0,0 +1,15 @@
import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react";
import {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
const AddSlide = props => {
return (
<Fragment>
</Fragment>
)
};
export {AddSlide};