[PE mobile] Add insert popup

apps/presentationeditor/mobile/locale/en.json

@@ -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"
     }
   }
 }

apps/presentationeditor/mobile/src/controller/add/AddShape.jsx

@@ -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;

apps/presentationeditor/mobile/src/controller/add/AddSlide.jsx

@@ -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;

apps/presentationeditor/mobile/src/less/icons-ios.less

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

apps/presentationeditor/mobile/src/page/main.jsx

@@ -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
+            else if ( opts == 'add' )
-            if ( opts == 'settings' )
+                return {addOptionsVisible: true};
+            else if ( opts == 'settings' )
                 return {settingsVisible: true};
-            else
+            else if ( opts == 'coauth' )
-            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
+                else if ( opts == 'add' )
-                if ( opts == 'settings' )
+                    return {addOptionsVisible: false};
+                else if ( opts == 'settings' )
                     return {settingsVisible: false};
-                else
+                else if ( opts == 'coauth' )
-                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')} />

apps/presentationeditor/mobile/src/view/add/Add.jsx

@@ -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;

apps/presentationeditor/mobile/src/view/add/AddShape.jsx

@@ -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};

apps/presentationeditor/mobile/src/view/add/AddSlide.jsx

@@ -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};