diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less
index 468c575c3..0be9d159e 100644
--- a/apps/common/mobile/resources/less/common-material.less
+++ b/apps/common/mobile/resources/less/common-material.less
@@ -85,6 +85,7 @@
width: 100%;
justify-content: space-between;
.tab-link {
+ justify-content: center;
height: 100%;
box-sizing: border-box;
padding-left: 0;
@@ -94,8 +95,14 @@
text-transform: uppercase;
align-items: center;
color: @tabLinkColor;
+ i.icon {
+ opacity: 0.5;
+ }
&.tab-link-active {
color: @white;
+ i.icon {
+ opacity: 1;
+ }
}
}
.tab-link-highlight {
diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json
index f258d1ec6..d2e895ea6 100644
--- a/apps/documenteditor/mobile/locale/en.json
+++ b/apps/documenteditor/mobile/locale/en.json
@@ -158,5 +158,11 @@
"textLinkToPrevious": "Link to Previous",
"textContinueFromPreviousSection": "Continue from previous section",
"textStartAt": "Start at"
+ },
+ "Add": {
+ "textTable": "Table",
+ "textShape": "Shape",
+ "textImage": "Image",
+ "textOther": "Other"
}
}
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/src/controller/add/AddShape.jsx b/apps/documenteditor/mobile/src/controller/add/AddShape.jsx
new file mode 100644
index 000000000..bf649dc1d
--- /dev/null
+++ b/apps/documenteditor/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 (
+
+ )
+ }
+}
+
+export default AddShapeController;
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/src/controller/add/AddTable.jsx b/apps/documenteditor/mobile/src/controller/add/AddTable.jsx
new file mode 100644
index 000000000..93149252e
--- /dev/null
+++ b/apps/documenteditor/mobile/src/controller/add/AddTable.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 { AddTable } from '../../view/add/AddTable';
+
+class AddTableController extends Component {
+ constructor (props) {
+ super(props);
+ }
+ render () {
+ return (
+
+ )
+ }
+}
+
+export default AddTableController;
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/src/css/icons-ios.less b/apps/documenteditor/mobile/src/css/icons-ios.less
index b2c93d134..df97c4ad2 100644
--- a/apps/documenteditor/mobile/src/css/icons-ios.less
+++ b/apps/documenteditor/mobile/src/css/icons-ios.less
@@ -15,6 +15,11 @@
height: 22px;
.encoded-svg-background('');
}
+ &.icon-plus {
+ width: 22px;
+ height: 22px;
+ .encoded-svg-background('');
+ }
&.icon-collaboration {
width: 24px;
height: 24px;
@@ -311,5 +316,50 @@
height: 22px;
.encoded-svg-background('');
}
+ //Insert
+ &.icon-add-table {
+ width: 24px;
+ height: 24px;
+ .encoded-svg-background('');
+ }
+ &.icon-add-shape {
+ width: 24px;
+ height: 24px;
+ .encoded-svg-background('');
+ }
+ &.icon-add-image {
+ width: 24px;
+ height: 24px;
+ .encoded-svg-background('');
+ }
+ &.icon-add-other {
+ width: 24px;
+ height: 24px;
+ .encoded-svg-background('');
+ }
+ }
+ .tab-link-active {
+ i.icon {
+ &.icon-add-table {
+ width: 24px;
+ height: 24px;
+ .encoded-svg-background('');
+ }
+ &.icon-add-shape {
+ width: 24px;
+ height: 24px;
+ .encoded-svg-background('');
+ }
+ &.icon-add-image {
+ width: 24px;
+ height: 24px;
+ .encoded-svg-background('');
+ }
+ &.icon-add-other {
+ width: 24px;
+ height: 24px;
+ .encoded-svg-background('');
+ }
+ }
}
}
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/src/css/icons-material.less b/apps/documenteditor/mobile/src/css/icons-material.less
index b95725361..e58d655ef 100644
--- a/apps/documenteditor/mobile/src/css/icons-material.less
+++ b/apps/documenteditor/mobile/src/css/icons-material.less
@@ -16,6 +16,11 @@
height: 22px;
.encoded-svg-background('');
}
+ &.icon-plus {
+ width: 22px;
+ height: 22px;
+ .encoded-svg-background('');
+ }
&.icon-settings {
width: 22px;
height: 22px;
@@ -31,6 +36,27 @@
height: 22px;
.encoded-svg-background('');
}
+ // Insert
+ &.icon-add-table {
+ width: 24px;
+ height: 24px;
+ .encoded-svg-background('');
+ }
+ &.icon-add-shape {
+ width: 24px;
+ height: 24px;
+ .encoded-svg-background('');
+ }
+ &.icon-add-image {
+ width: 24px;
+ height: 24px;
+ .encoded-svg-background('');
+ }
+ &.icon-add-other {
+ width: 24px;
+ height: 24px;
+ .encoded-svg-background('');
+ }
}
}
i.icon {
diff --git a/apps/documenteditor/mobile/src/pages/home.jsx b/apps/documenteditor/mobile/src/pages/home.jsx
index a786f385a..9fd4a44d5 100644
--- a/apps/documenteditor/mobile/src/pages/home.jsx
+++ b/apps/documenteditor/mobile/src/pages/home.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 Home extends Component {
super(props);
this.state = {
editOptionsVisible: false,
+ addOptionsVisible: false,
settingsVisible: false,
collaborationVisible: false,
};
@@ -19,12 +21,12 @@ export default class Home 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};
});
};
@@ -33,49 +35,54 @@ export default class Home 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};
})
})();
};
render() {
- console.log(this.$f7router)
- return (
-
- {/* Top Navbar */}
-
-
-
-
-
-
-
- this.handleClickToOpenOptions('edit')}>
- this.handleClickToOpenOptions('coauth')}>
- this.handleClickToOpenOptions('settings')}>
-
-
- {/* Page content */}
-
-
- {
- !this.state.editOptionsVisible ? null :
-
- }
- {
- !this.state.settingsVisible ? null :
-
- }
- {
- !this.state.collaborationVisible ? null :
-
- }
-
- )
+ return (
+
+ {/* Top Navbar */}
+
+
+
+
+
+
+
+ this.handleClickToOpenOptions('edit')}>
+ this.handleClickToOpenOptions('add')}>
+ this.handleClickToOpenOptions('coauth')}>
+ this.handleClickToOpenOptions('settings')}>
+
+
+ {/* Page content */}
+
+
+
+ {
+ !this.state.editOptionsVisible ? null :
+
+ }
+ {
+ !this.state.addOptionsVisible ? null :
+
+ }
+ {
+ !this.state.settingsVisible ? null :
+
+ }
+ {
+ !this.state.collaborationVisible ? null :
+
+ }
+
+ )
}
};
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/src/view/add/Add.jsx b/apps/documenteditor/mobile/src/view/add/Add.jsx
new file mode 100644
index 000000000..c6ed5e6e4
--- /dev/null
+++ b/apps/documenteditor/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 AddTableController from "../../controller/add/AddTable";
+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 (
+
+
+ {tabs.map((item, index) =>
+
+
+ )}
+ {isAndroid && }
+
+ { !inPopover && }
+
+ )
+};
+
+const AddLayoutContent = ({ tabs }) => {
+ return (
+
+ {tabs.map((item, index) =>
+
+ {item.component}
+
+ )}
+
+ )
+};
+
+const AddTabs = props => {
+ const { t } = useTranslation();
+ const _t = t('Add', {returnObjects: true});
+ const tabs = [];
+ tabs.push({
+ caption: _t.textTable,
+ id: 'add-table',
+ icon: 'icon-add-table',
+ component:
+ });
+ tabs.push({
+ caption: _t.textShape,
+ id: 'add-shape',
+ icon: 'icon-add-shape',
+ component:
+ });
+ /*tabs.push({
+ caption: _t.textImage,
+ id: 'add-image',
+ icon: 'icon-add-image',
+ component:
+ });
+ tabs.push({
+ caption: _t.textOther,
+ id: 'add-other',
+ icon: 'icon-add-other',
+ component:
+ });*/
+ return (
+
+
+
+
+
+
+ )
+};
+
+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 ?
+ this.props.onclosed()}>
+
+ :
+ this.props.onclosed()}>
+
+
+ )
+ }
+}
+
+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
+};
+
+export default Add;
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/src/view/add/AddShape.jsx b/apps/documenteditor/mobile/src/view/add/AddShape.jsx
new file mode 100644
index 000000000..bf408d896
--- /dev/null
+++ b/apps/documenteditor/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 (
+
+
+
+ )
+};
+
+export {AddShape};
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/src/view/add/AddTable.jsx b/apps/documenteditor/mobile/src/view/add/AddTable.jsx
new file mode 100644
index 000000000..0a71acac5
--- /dev/null
+++ b/apps/documenteditor/mobile/src/view/add/AddTable.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 AddTable = props => {
+ return (
+
+
+
+ )
+};
+
+export {AddTable};
\ No newline at end of file