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

[SSE mobile] Added insert popover/popup

Browse source
This commit is contained in:
JuliaSvinareva 2021-01-27 19:24:29 +03:00
parent 962468fb83
commit f51607830a
8 changed files with 228 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
apps/spreadsheeteditor/mobile/locale/en.json
View file

@ -5,5 +5,13 @@
},
"textAnonymous": "Anonymous"
}
},
"View" : {
"Add" : {
"textChart": "Chart",
"textFormula": "Formula",
"textShape": "Shape",
"textOther": "Other"
}
}
}

28
apps/spreadsheeteditor/mobile/src/controller/add/AddChart.jsx Normal file
View file

@ -0,0 +1,28 @@
import React, {Component} from 'react';
import { f7 } from 'framework7-react';
import {Device} from '../../../../../common/mobile/utils/device';
import AddChart from '../../view/add/AddChart';
class AddChartController extends Component {
constructor (props) {
super(props);
}
closeModal () {
if ( Device.phone ) {
f7.sheet.close('.add-popup', true);
} else {
f7.popover.close('#add-popover');
}
}
render () {
return (
<AddChart
/>
)
}
}
export default AddChartController;

28
apps/spreadsheeteditor/mobile/src/controller/add/AddFormula.jsx Normal file
View file

@ -0,0 +1,28 @@
import React, {Component} from 'react';
import { f7 } from 'framework7-react';
import {Device} from '../../../../../common/mobile/utils/device';
import AddFormula from '../../view/add/AddFormula';
class AddFormulaController extends Component {
constructor (props) {
super(props);
}
closeModal () {
if ( Device.phone ) {
f7.sheet.close('.add-popup', true);
} else {
f7.popover.close('#add-popover');
}
}
render () {
return (
<AddFormula
/>
)
}
}
export default AddFormulaController;

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

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

27
apps/spreadsheeteditor/mobile/src/page/main.jsx
View file

@ -6,12 +6,14 @@ import Settings from '../view/settings/Settings';
import CollaborationView from '../../../../common/mobile/lib/view/Collaboration.jsx'
import CellEditor from '../controller/CellEditor';
import Statusbar from '../controller/StatusBar'
import AddOptions from "../view/add/Add";
export default class MainPage extends Component {
constructor(props) {
super(props);
this.state = {
editOptionsVisible: false,
addOptionsVisible: false,
settingsVisible: false,
collaborationVisible: false,
};
@ -21,12 +23,12 @@ 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' )
return {collaborationVisible: true}
else if ( opts == 'coauth' )
return {collaborationVisible: true};
});
};
@ -35,12 +37,12 @@ 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' )
return {collaborationVisible: false}
else if ( opts == 'coauth' )
return {collaborationVisible: false};
})
})();
};
@ -57,6 +59,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>
@ -68,6 +71,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')} />

122
apps/spreadsheeteditor/mobile/src/view/add/Add.jsx Normal file
View file

@ -0,0 +1,122 @@
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 AddChartController from "../../controller/add/AddChart";
import AddFormulaController from "../../controller/add/AddFormula";
//import AddShapeController from "../../controller/add/AddShape";
//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={"sse-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={"sse-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.textChart,
id: 'add-chart',
icon: 'icon-add-chart',
component: <AddChartController />
});
tabs.push({
caption: _t.textFormula,
id: 'add-formula',
icon: 'icon-add-formula',
component: <AddFormulaController />
});
/*tabs.push({
caption: _t.textShape,
id: 'add-shape',
icon: 'icon-add-shape',
component: <AddShapeController />
});
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){
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;

12
apps/spreadsheeteditor/mobile/src/view/add/AddChart.jsx Normal file
View file

@ -0,0 +1,12 @@
import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react";
const AddChart = props => {
return (
<Fragment>
</Fragment>
)
};
export default AddChart;

12
apps/spreadsheeteditor/mobile/src/view/add/AddFormula.jsx Normal file
View file

@ -0,0 +1,12 @@
import React, {Fragment, useState} from 'react';
import {observer, inject} from "mobx-react";
const AddFormula = props => {
return (
<Fragment>
</Fragment>
)
};
export default AddFormula;