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