diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json
index 7f67e47549..d97c3edb41 100644
--- a/apps/documenteditor/mobile/locale/en.json
+++ b/apps/documenteditor/mobile/locale/en.json
@@ -51,6 +51,7 @@
"textPasteImageUrl": "Paste an image URL",
"textPictureFromLibrary": "Picture from Library",
"textPictureFromURL": "Picture from URL",
+ "textRemovePicture": "Remove picture",
"textPosition": "Position",
"textRecommended": "Recommended",
"textRequired": "Required",
diff --git a/apps/documenteditor/mobile/src/controller/Main.jsx b/apps/documenteditor/mobile/src/controller/Main.jsx
index a415e39cee..f3aec73246 100644
--- a/apps/documenteditor/mobile/src/controller/Main.jsx
+++ b/apps/documenteditor/mobile/src/controller/Main.jsx
@@ -18,6 +18,7 @@ import LongActionsController from "./LongActions";
import PluginsController from '../../../../common/mobile/lib/controller/Plugins.jsx';
import EncodingController from "./Encoding";
import DropdownListController from "./DropdownList";
+import AddFormImageController from './add/AddFormImage.jsx';
import { Device } from '../../../../common/mobile/utils/device';
import { processArrayScripts } from '../../../../common/mobile/utils/processArrayScripts.js';
import '../../../../common/main/lib/util/LanguageInfo.js'
@@ -869,15 +870,7 @@ class MainController extends Component {
break;
case Asc.c_oAscContentControlSpecificType.Picture:
case Asc.c_oAscContentControlSpecificType.Signature:
- if (obj.pr && obj.pr.get_Lock) {
- let lock = obj.pr.get_Lock();
- if (lock == Asc.c_oAscSdtLockType.SdtContentLocked || lock == Asc.c_oAscSdtLockType.ContentLocked)
- return;
- }
- this.api.asc_addImage(obj);
- setTimeout(() => {
- this.api.asc_UncheckContentControlButtons();
- }, 500);
+ this.onShowImageActions(obj, x, y);
break;
case Asc.c_oAscContentControlSpecificType.DropDownList:
case Asc.c_oAscContentControlSpecificType.ComboBox:
@@ -1202,6 +1195,29 @@ class MainController extends Component {
}, 100)
}
+ onShowImageActions(obj, x, y) {
+ if(!Device.isPhone) {
+ const boxSdk = $$('#editor_sdk');
+ let dropdownListTarget = boxSdk.find('#dropdown-image-list-target');
+
+ if (dropdownListTarget.length < 1) {
+ dropdownListTarget = $$('
');
+ boxSdk.append(dropdownListTarget);
+ }
+ if (y > boxSdk.height()) {
+ y = boxSdk.height();
+ }
+ dropdownListTarget.css({left: `${x}px`, top: `${y}px`});
+ Common.Notifications.trigger('openFormImageListTablet', obj, x, y, boxSdk.height(), 260);
+ } else {
+ Common.Notifications.trigger('openFormImageListPhone', obj)
+ }
+
+ setTimeout(() => {
+ this.api.asc_UncheckContentControlButtons();
+ }, 500);
+ }
+
onShowListActions(obj, x, y) {
if(!Device.isPhone) {
const boxSdk = $$('#editor_sdk');
@@ -1636,6 +1652,7 @@ class MainController extends Component {
+
)
}
diff --git a/apps/documenteditor/mobile/src/controller/add/AddFormImage.jsx b/apps/documenteditor/mobile/src/controller/add/AddFormImage.jsx
new file mode 100644
index 0000000000..f6291695ce
--- /dev/null
+++ b/apps/documenteditor/mobile/src/controller/add/AddFormImage.jsx
@@ -0,0 +1,110 @@
+import React, { Component } from 'react';
+import { Device } from '../../../../../common/mobile/utils/device';
+import { f7 } from "framework7-react";
+import { withTranslation } from "react-i18next";
+import FormImageList from "../../view/add/AddFormImage";
+
+class AddFormImageController extends Component {
+ constructor(props) {
+ super(props);
+ this.closeModal = this.closeModal.bind(this);
+ this.addPictureFromLibrary = this.addPictureFromLibrary.bind(this);
+ this.onInsertByUrl = this.onInsertByUrl.bind(this);
+ this.deletePicture = this.deletePicture.bind(this);
+
+ this.state = {
+ isOpen: false,
+ vertPos: null
+ };
+
+ Common.Notifications.on('openFormImageListPhone', obj => {
+ this.openModalPhone(obj);
+ });
+
+ Common.Notifications.on('openFormImageListTablet', (obj, x, y, boxHeight, popoverHeight) => {
+ this.openModalTablet(obj, x, y, boxHeight, popoverHeight);
+ });
+ }
+
+ openModalTablet(obj, x, y, boxHeight, popoverHeight) {
+ let vertPos = (boxHeight - y > 0) && (boxHeight - y >= popoverHeight) ? 'bottom' : 'top'
+
+ this.setState({
+ isOpen: true,
+ vertPos: vertPos
+ });
+ }
+
+ openModalPhone(obj) {
+ this.setState({
+ isOpen: true,
+ });
+ }
+
+ closeModal() {
+ if(Device.isPhone) {
+ f7.popup.close('#dropdown-image-list-popup', true);
+ } else {
+ f7.popover.close('#dropdown-image-list-popover', true);
+ }
+
+ f7.views.current.router.back();
+ this.setState({isOpen: false});
+ }
+
+ addPictureFromLibrary() {
+ const api = Common.EditorApi.get();
+ if (obj.pr && obj.pr.get_Lock) {
+ let lock = obj.pr.get_Lock();
+ if (lock == Asc.c_oAscSdtLockType.SdtContentLocked || lock == Asc.c_oAscSdtLockType.ContentLocked)
+ return;
+ }
+ api.asc_addImage(obj);
+ this.closeModal();
+ }
+
+ onInsertByUrl (value) {
+ const { t } = this.props;
+ const _t = t("Add", { returnObjects: true });
+
+ const _value = value.replace(/ /g, '');
+
+ if (_value) {
+ if ((/((^https?)|(^ftp)):\/\/.+/i.test(_value))) {
+ const api = Common.EditorApi.get();
+ api.AddImageUrl([_value]);
+ this.closeModal();
+ } else {
+ f7.dialog.alert(_t.txtNotUrl, _t.notcriticalErrorTitle);
+ }
+ } else {
+ f7.dialog.alert(_t.textEmptyImgUrl, _t.notcriticalErrorTitle);
+ }
+ }
+
+ deletePicture() {
+ const api = Common.EditorApi.get();
+ if (api) {
+ var props = api.asc_IsContentControl() ? api.asc_GetContentControlProperties() : null;
+ if (props) {
+ api.asc_ClearContentControl(props.get_InternalId());
+ this.closeModal();
+ }
+ }
+ }
+
+ render() {
+ return (
+ this.state.isOpen &&
+
+ );
+ }
+}
+
+export default withTranslation()(AddFormImageController);
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/src/view/add/AddFormImage.jsx b/apps/documenteditor/mobile/src/view/add/AddFormImage.jsx
new file mode 100644
index 0000000000..c306bb9af6
--- /dev/null
+++ b/apps/documenteditor/mobile/src/view/add/AddFormImage.jsx
@@ -0,0 +1,158 @@
+import React, { useState, useEffect, Component } from 'react';
+import { f7, Sheet, PageContent, Navbar, List, Page, View, ListItem, ListInput, ListButton, NavRight, Link, BlockTitle, Icon, Popup, Popover } from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+import { Device } from '../../../../../common/mobile/utils/device';
+import SvgIcon from '@common/lib/component/SvgIcon';
+import IconImageLibraryIos from '@common-ios-icons/icon-image-library.svg?ios';
+import IconImageLibraryAndroid from '@common-android-icons/icon-image-library.svg';
+import IconLinkIos from '@common-ios-icons/icon-link.svg?ios';
+import IconLinkAndroid from '@common-android-icons/icon-link.svg';
+import IconExpandDownIos from '@common-ios-icons/icon-expand-down.svg?ios';
+import IconExpandDownAndroid from '@common-android-icons/icon-expand-down.svg';
+
+
+const AddImageFromUrlPage = ({ f7router, onInsertByUrl }) => {
+ const { t } = useTranslation();
+ const _t = t('Add', { returnObjects: true });
+ const [stateValue, setValue] = useState('');
+
+ return (
+
+
+
+ setValue(e.target.value)}
+ />
+
+
+ {
+ if (stateValue.length > 0) {
+ onInsertByUrl(stateValue);
+ f7router.back();
+ }
+ }}
+ />
+
+
+ );
+};
+
+
+const PageSheetAddImage = ({ closeModal, onInsertByUrl, addPictureFromLibrary, deletePicture, style }) => {
+ const { t } = useTranslation();
+ const _t = t('Add', { returnObjects: true });
+ const routes = [
+ {
+ path: '/add-form-image-from-url/',
+ component: AddImageFromUrlPage,
+ },
+ ];
+
+ return (
+
+
+
+ {Device.phone &&
+
+
+ {Device.ios ?
+ :
+
+ }
+
+
+ }
+
+
+ addPictureFromLibrary()}
+ >
+ {Device.ios ? (
+
+ ) : (
+
+ )}
+
+
+ {Device.ios ? (
+
+ ) : (
+
+ )}
+
+
+ deletePicture()} className='button-red button-fill button-raised'>
+
+
+
+
+ );
+};
+
+class SheetAddImageListView extends Component {
+ constructor(props) {
+ super(props);
+ }
+
+ render() {
+ return (
+ Device.isPhone ?
+
+ :
+ this.props.closeModal()}>
+
+
+
+ );
+ }
+}
+
+const FormImageList = props => {
+ useEffect(() => {
+ if(Device.isPhone) {
+ f7.popup.open('#dropdown-image-list-popup', true);
+ } else {
+ f7.popover.open('#dropdown-image-list-popover', '#dropdown-image-list-target');
+ }
+
+ return () => {}
+ });
+
+ return (
+
+ );
+};
+
+export default FormImageList;