diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json
index daaa12d5f..9459c92b2 100644
--- a/apps/spreadsheeteditor/mobile/locale/en.json
+++ b/apps/spreadsheeteditor/mobile/locale/en.json
@@ -22,7 +22,17 @@
"sCatLookupAndReference": "Lookup and Reference",
"sCatMathematic": "Math and trigonometry",
"sCatStatistical": "Statistical",
- "sCatTextAndData": "Text and data"
+ "sCatTextAndData": "Text and data",
+ "textImage": "Image",
+ "textInsertImage": "Insert Image",
+ "textLinkSettings": "Link Settings",
+ "textAddress": "Address",
+ "textImageURL": "Image URL",
+ "textPictureFromLibrary": "Picture from library",
+ "textPictureFromURL": "Picture from URL",
+ "txtNotUrl": "This field should be a URL in the format \"http://www.example.com\"",
+ "textEmptyImgUrl": "You need to specify image URL.",
+ "notcriticalErrorTitle": "Warning"
},
"Edit" : {
"textSelectObjectToEdit": "Select object to edit",
diff --git a/apps/spreadsheeteditor/mobile/src/controller/add/AddImage.jsx b/apps/spreadsheeteditor/mobile/src/controller/add/AddImage.jsx
new file mode 100644
index 000000000..10815d5f4
--- /dev/null
+++ b/apps/spreadsheeteditor/mobile/src/controller/add/AddImage.jsx
@@ -0,0 +1,60 @@
+import React, {Component} from 'react';
+import { f7 } from 'framework7-react';
+import {Device} from '../../../../../common/mobile/utils/device';
+import {withTranslation} from 'react-i18next';
+
+import {AddImage} from '../../view/add/AddImage';
+
+class AddImageController extends Component {
+ constructor (props) {
+ super(props);
+ this.onInsertByFile = this.onInsertByFile.bind(this);
+ this.onInsertByUrl = this.onInsertByUrl.bind(this);
+ }
+
+ closeModal () {
+ if ( Device.phone ) {
+ f7.sheet.close('.add-popup', true);
+ } else {
+ f7.popover.close('#add-popover');
+ }
+ }
+
+ onInsertByFile () {
+ const api = Common.EditorApi.get();
+ api.asc_addImage();
+ this.closeModal();
+ }
+
+ onInsertByUrl (value) {
+ const { t } = this.props;
+ const _t = t("View.Add", { returnObjects: true });
+
+ const _value = value.replace(/ /g, '');
+
+ if (_value) {
+ if ((/((^https?)|(^ftp)):\/\/.+/i.test(_value))) {
+ this.closeModal();
+ const api = Common.EditorApi.get();
+ api.asc_addImageDrawingObject(_value);
+ } else {
+ f7.dialog.alert(_t.txtNotUrl, _t.notcriticalErrorTitle);
+ }
+ } else {
+ f7.dialog.alert(_t.textEmptyImgUrl, _t.notcriticalErrorTitle);
+ }
+ }
+
+ render () {
+ return (
+
+ )
+ }
+}
+
+const AddImageWithTranslation = withTranslation()(AddImageController);
+
+export {AddImageWithTranslation as AddImageController};
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/mobile/src/controller/add/AddOther.jsx b/apps/spreadsheeteditor/mobile/src/controller/add/AddOther.jsx
new file mode 100644
index 000000000..4e09ae1a0
--- /dev/null
+++ b/apps/spreadsheeteditor/mobile/src/controller/add/AddOther.jsx
@@ -0,0 +1,31 @@
+import React, {Component} from 'react';
+import { f7 } from 'framework7-react';
+import {Device} from '../../../../../common/mobile/utils/device';
+import { withTranslation} from 'react-i18next';
+
+import {AddOther} from '../../view/add/AddOther';
+
+class AddOtherController extends Component {
+ constructor (props) {
+ super(props);
+ }
+
+ closeModal () {
+ if ( Device.phone ) {
+ f7.sheet.close('.add-popup', true);
+ } else {
+ f7.popover.close('#add-popover');
+ }
+ }
+
+ render () {
+ return (
+
+ )
+ }
+}
+
+const AddOtherWithTranslation = withTranslation()(AddOtherController);
+
+export {AddOtherWithTranslation as AddOtherController};
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/mobile/src/view/add/Add.jsx b/apps/spreadsheeteditor/mobile/src/view/add/Add.jsx
index b7d538e29..af4871a2d 100644
--- a/apps/spreadsheeteditor/mobile/src/view/add/Add.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/add/Add.jsx
@@ -9,7 +9,9 @@ import AddChartController from "../../controller/add/AddChart";
import {AddFunctionController} from "../../controller/add/AddFunction";
import {PageFunctionGroup, PageFunctionInfo} from "./AddFunction";
import AddShapeController from "../../controller/add/AddShape";
-//import {AddOtherController} from "../../controller/add/AddOther";
+import {AddOtherController} from "../../controller/add/AddOther";
+import {AddImageController} from "../../controller/add/AddImage";
+import {PageImageLinkSettings} from "./AddImage";
const routes = [
// Functions
@@ -20,6 +22,15 @@ const routes = [
{
path: '/add-function-info/',
component: PageFunctionInfo
+ },
+ // Image
+ {
+ path: '/add-image/',
+ component: AddImageController
+ },
+ {
+ path: '/add-image-from-url/',
+ component: PageImageLinkSettings
}
];
@@ -83,12 +94,22 @@ const AddTabs = props => {
component:
});
}
- /*tabs.push({
- caption: _t.textOther,
- id: 'add-other',
- icon: 'icon-add-other',
- component:
- });*/
+ if (showPanels && showPanels.indexOf('image') !== -1) {
+ tabs.push({
+ caption: _t.textImage,
+ id: 'add-image',
+ icon: 'icon-add-image',
+ component:
+ });
+ }
+ if (!showPanels) {
+ tabs.push({
+ caption: _t.textOther,
+ id: 'add-other',
+ icon: 'icon-add-other',
+ component:
+ });
+ }
return (
diff --git a/apps/spreadsheeteditor/mobile/src/view/add/AddImage.jsx b/apps/spreadsheeteditor/mobile/src/view/add/AddImage.jsx
new file mode 100644
index 000000000..c71fbc56b
--- /dev/null
+++ b/apps/spreadsheeteditor/mobile/src/view/add/AddImage.jsx
@@ -0,0 +1,61 @@
+import React, {Fragment, useState} from 'react';
+import {Page, Navbar, BlockTitle, List, ListItem, ListInput, ListButton, Icon} from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+
+const AddImageList = props => {
+ const { t } = useTranslation();
+ const _t = t('View.Add', {returnObjects: true});
+ return (
+
+ {props.onInsertByFile()}}>
+
+
+
+
+
+
+ )
+};
+
+const PageLinkSettings = props => {
+ const { t } = useTranslation();
+ const _t = t('View.Add', {returnObjects: true});
+ const [stateValue, setValue] = useState('');
+ return (
+
+
+ {_t.textAddress}
+
+ {setValue(event.target.value)}}
+ >
+
+
+
+ {props.onInsertByUrl(stateValue)}}>
+
+
+ )
+};
+
+const AddImage = props => {
+ const { t } = useTranslation();
+ const _t = t('View.Add', {returnObjects: true});
+ return (
+ props.inTabs ?
+ :
+
+
+
+
+ )
+};
+
+export {AddImage, PageLinkSettings as PageImageLinkSettings};
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/mobile/src/view/add/AddOther.jsx b/apps/spreadsheeteditor/mobile/src/view/add/AddOther.jsx
new file mode 100644
index 000000000..779f8489b
--- /dev/null
+++ b/apps/spreadsheeteditor/mobile/src/view/add/AddOther.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import {List, ListItem, Icon} from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+
+const AddOther = props => {
+ const { t } = useTranslation();
+ const _t = t('View.Add', {returnObjects: true});
+ return (
+
+
+
+
+
+ )
+};
+
+export {AddOther};
\ No newline at end of file