diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json
index cf8c3b35d..d0b89637d 100644
--- a/apps/spreadsheeteditor/mobile/locale/en.json
+++ b/apps/spreadsheeteditor/mobile/locale/en.json
@@ -35,7 +35,21 @@
"textBringToForeground": "Bring to Foreground",
"textSendToBackground": "Send to Background",
"textMoveForward": "Move Forward",
- "textMoveBackward": "Move Backward"
+ "textMoveBackward": "Move Backward",
+ "textImage": "Image",
+ "textFromLibrary": "Picture from Library",
+ "textFromURL": "Picture from URL",
+ "textLinkSettings": "Link Settings",
+ "textAddress": "Address",
+ "textImageURL": "Image URL",
+ "textReplaceImage": "Replace Image",
+ "textActualSize": "Actual Size",
+ "textRemoveImage": "Remove Image",
+ "textEmptyImgUrl": "You need to specify image URL.",
+ "textNotUrl": "This field should be a URL in the format \"http://www.example.com\"",
+ "notcriticalErrorTitle": "Warning",
+ "textPictureFromLibrary": "Picture from Library",
+ "textPictureFromURL": "Picture from URL"
}
},
"Common": {
diff --git a/apps/spreadsheeteditor/mobile/src/controller/edit/EditImage.jsx b/apps/spreadsheeteditor/mobile/src/controller/edit/EditImage.jsx
new file mode 100644
index 000000000..446dc647d
--- /dev/null
+++ b/apps/spreadsheeteditor/mobile/src/controller/edit/EditImage.jsx
@@ -0,0 +1,91 @@
+import React, {Component} from 'react';
+import { f7 } from 'framework7-react';
+import {Device} from '../../../../../common/mobile/utils/device';
+import {observer, inject} from "mobx-react";
+
+import { EditImage } from '../../view/edit/EditImage';
+
+class EditImageController extends Component {
+ constructor (props) {
+ super(props);
+ this.onRemoveImage = this.onRemoveImage.bind(this);
+ this.onReplaceByFile = this.onReplaceByFile.bind(this);
+ this.onReplaceByUrl = this.onReplaceByUrl.bind(this);
+ }
+
+ onReorder(type) {
+ const api = Common.EditorApi.get();
+ let ascType;
+
+ switch(type) {
+ case 'all-up':
+ ascType = Asc.c_oAscDrawingLayerType.BringToFront;
+ break;
+ case 'all-down':
+ ascType = Asc.c_oAscDrawingLayerType.SendToBack;
+ break;
+ case 'move-up':
+ ascType = Asc.c_oAscDrawingLayerType.BringForward;
+ break;
+ case 'move-down':
+ ascType = Asc.c_oAscDrawingLayerType.SendBackward;
+ break;
+ }
+
+ api.asc_setSelectedDrawingObjectLayer(ascType);
+ }
+
+ closeModal() {
+ if (Device.phone) {
+ f7.sheet.close('#edit-sheet', true);
+ } else {
+ f7.popover.close('#edit-popover');
+ }
+ };
+
+ onDefaultSize() {
+ const api = Common.EditorApi.get();
+ let imgsize = api.asc_getOriginalImageSize(),
+ properties = new Asc.asc_CImgProperty();
+
+ properties.put_Width(imgsize.get_ImageWidth());
+ properties.put_Height(imgsize.get_ImageHeight());
+ properties.put_ResetCrop(true);
+ api.asc_setGraphicObjectProps(properties);
+ }
+
+ onRemoveImage() {
+ const api = Common.EditorApi.get();
+ api.asc_Remove();
+ this.closeModal();
+ }
+
+ onReplaceByFile() {
+ const api = Common.EditorApi.get();
+ api.asc_changeImageFromFile();
+ this.closeModal();
+ }
+
+ onReplaceByUrl(value) {
+ const api = Common.EditorApi.get();
+ const image = new Asc.asc_CImgProperty();
+ image.asc_putImageUrl(value);
+ api.asc_setGraphicObjectProps(image);
+ this.closeModal();
+ }
+
+
+ render () {
+ return (
+
+ )
+ }
+}
+
+export default EditImageController;
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/mobile/src/store/focusObjects.js b/apps/spreadsheeteditor/mobile/src/store/focusObjects.js
index c6487aed5..0805e1468 100644
--- a/apps/spreadsheeteditor/mobile/src/store/focusObjects.js
+++ b/apps/spreadsheeteditor/mobile/src/store/focusObjects.js
@@ -152,4 +152,21 @@ export class storeFocusObjects {
return undefined;
}
}
+
+ @computed get imageObject() {
+ const images = [];
+ console.log(this._focusObjects);
+ for (let object of this._focusObjects) {
+ if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Image) {
+ console.log(object);
+ images.push(object);
+ }
+ }
+ if (images.length > 0) {
+ const object = images[images.length - 1]; // get top
+ return object.get_ObjectValue();
+ } else {
+ return undefined;
+ }
+ }
}
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx
index 75d0f5b51..ef26b37ab 100644
--- a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx
@@ -7,8 +7,10 @@ import {Device} from '../../../../../common/mobile/utils/device';
import EditCellController from "../../controller/edit/EditCell";
import EditShapeController from "../../controller/edit/EditShape";
+import EditImageController from "../../controller/edit/EditImage";
import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape';
+import { PageImageReplace, PageImageReorder, PageLinkSettings } from './EditImage';
const routes = [
@@ -41,7 +43,23 @@ const routes = [
{
path: '/edit-shape-custom-fill-color/',
component: PageShapeCustomFillColor
+ },
+
+ // Image
+
+ {
+ path: '/edit-replace-image/',
+ component: PageImageReplace
+ },
+ {
+ path: '/edit-reorder-image/',
+ component: PageImageReorder
+ },
+ {
+ path: '/edit-image-link/',
+ component: PageLinkSettings
}
+
];
const EmptyEditLayout = () => {
@@ -124,6 +142,13 @@ const EditTabs = props => {
component:
})
}
+ if (settings.indexOf('image') > -1) {
+ editors.push({
+ caption: _t.textImage,
+ id: 'edit-image',
+ component:
+ })
+ }
}
return (
diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditImage.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditImage.jsx
new file mode 100644
index 000000000..0eba7e656
--- /dev/null
+++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditImage.jsx
@@ -0,0 +1,124 @@
+import React, {Fragment, useState} from 'react';
+import {observer, inject} from "mobx-react";
+import {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, View, NavRight, ListItemCell, Range, Button, Segmented, Tab, Tabs, ListInput, ListButton} from 'framework7-react';
+import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
+import { useTranslation } from 'react-i18next';
+import {Device} from '../../../../../common/mobile/utils/device';
+
+const EditImage = props => {
+ const { t } = useTranslation();
+ const _t = t('View.Edit', {returnObjects: true});
+
+ return (
+
+
+
+
+
+
+ {_t.textActualSize}
+ {_t.textRemoveImage}
+
+
+ )
+};
+
+const PageReorder = props => {
+ const { t } = useTranslation();
+ const _t = t('View.Edit', {returnObjects: true});
+
+ return (
+
+
+
+ {props.onReorder('all-up')}} className='no-indicator'>
+
+
+ {props.onReorder('all-down')}} className='no-indicator'>
+
+
+ {props.onReorder('move-up')}} className='no-indicator'>
+
+
+ {props.onReorder('move-down')}} className='no-indicator'>
+
+
+
+
+ )
+};
+
+
+const PageReplace = props => {
+ const { t } = useTranslation();
+ const _t = t('View.Edit', {returnObjects: true});
+
+ return (
+
+
+
+ {props.onReplaceByFile()}}>
+
+
+
+
+
+
+
+ )
+};
+
+const PageLinkSettings = props => {
+ const { t } = useTranslation();
+ const _t = t('View.Edit', {returnObjects: true});
+ const [stateValue, setValue] = useState('');
+
+ const onReplace = () => {
+ if (stateValue.trim().length > 0) {
+ if ((/((^https?)|(^ftp)):\/\/.+/i.test(stateValue))) {
+ props.onReplaceByUrl(stateValue.trim());
+ } else {
+ f7.dialog.alert(_t.textNotUrl, _t.notcriticalErrorTitle);
+ }
+ } else {
+ f7.dialog.alert(_t.textEmptyImgUrl, _t.notcriticalErrorTitle);
+ }
+ };
+ return (
+
+
+ {_t.textAddress}
+
+ {setValue(event.target.value)}}
+ >
+
+
+
+ {onReplace()}}>
+
+
+ )
+};
+
+const EditImageContainer = inject("storeFocusObjects")(observer(EditImage));
+const PageReplaceContainer = inject("storeFocusObjects")(observer(PageReplace));
+const PageReorderContainer = inject("storeFocusObjects")(observer(PageReorder));
+const PageLinkSettingsContainer = inject("storeFocusObjects")(observer(PageLinkSettings));
+
+export {
+ EditImageContainer as EditImage,
+ PageReplaceContainer as PageImageReplace,
+ PageReorderContainer as PageImageReorder,
+ PageLinkSettingsContainer as PageLinkSettings
+}
\ No newline at end of file