From 1e5a3ddc7504cf04613859432e989a158c4f7d08 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Mon, 25 Jan 2021 22:02:49 +0300 Subject: [PATCH] [PE mobile] Added Image Settings --- apps/presentationeditor/mobile/locale/en.json | 15 +- .../mobile/src/controller/edit/EditImage.jsx | 121 +++++++++++++ .../mobile/src/store/focusObjects.js | 15 ++ .../mobile/src/store/mainStore.js | 1 - .../mobile/src/view/edit/Edit.jsx | 44 ++++- .../mobile/src/view/edit/EditImage.jsx | 167 ++++++++++++++++++ 6 files changed, 354 insertions(+), 9 deletions(-) create mode 100644 apps/presentationeditor/mobile/src/controller/edit/EditImage.jsx create mode 100644 apps/presentationeditor/mobile/src/view/edit/EditImage.jsx diff --git a/apps/presentationeditor/mobile/locale/en.json b/apps/presentationeditor/mobile/locale/en.json index 2a639adb2..50f54901f 100644 --- a/apps/presentationeditor/mobile/locale/en.json +++ b/apps/presentationeditor/mobile/locale/en.json @@ -174,7 +174,20 @@ "textAlignMiddle": "Align Middle", "textAlignBottom": "Align Bottom", "textDistributeHorizontally": "Distribute Horizontally", - "textDistributeVertically": "Distribute Vertically" + "textDistributeVertically": "Distribute Vertically", + "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/presentationeditor/mobile/src/controller/edit/EditImage.jsx b/apps/presentationeditor/mobile/src/controller/edit/EditImage.jsx new file mode 100644 index 000000000..515cce11c --- /dev/null +++ b/apps/presentationeditor/mobile/src/controller/edit/EditImage.jsx @@ -0,0 +1,121 @@ +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(); + + switch(type) { + case 'all-up': + api.shapes_bringToFront(); + break; + case 'all-down': + api.shapes_bringToBack(); + break; + case 'move-up': + api.shapes_bringForward(); + break; + case 'move-down': + api.shapes_bringBackward(); + break; + + } + } + + onAlign(type) { + const api = Common.EditorApi.get(); + + switch(type) { + case 'align-left': + api.put_ShapesAlign(Asc.c_oAscAlignShapeType.ALIGN_LEFT); + break; + case 'align-center': + api.put_ShapesAlign(Asc.c_oAscAlignShapeType.ALIGN_CENTER); + break; + case 'align-right': + api.put_ShapesAlign(Asc.c_oAscAlignShapeType.ALIGN_RIGHT); + break; + case 'align-top': + api.put_ShapesAlign(Asc.c_oAscAlignShapeType.ALIGN_TOP); + break; + case 'align-middle': + api.put_ShapesAlign(Asc.c_oAscAlignShapeType.ALIGN_MIDDLE); + break; + case 'align-bottom': + api.put_ShapesAlign(Asc.c_oAscAlignShapeType.ALIGN_BOTTOM); + break; + case 'distrib-hor': + api.DistributeHorizontally(); + break; + case 'distrib-vert': + api.DistributeVertically(); + break; + } + } + + closeModal() { + if (Device.phone) { + f7.sheet.close('#edit-sheet', true); + } else { + f7.popover.close('#edit-popover'); + } + }; + + onDefaultSize() { + const api = Common.EditorApi.get(); + let imgsize = me.api.get_OriginalSizeImage(), + properties = new Asc.asc_CImgProperty(); + + properties.put_Width(imgsize.get_ImageWidth()); + properties.put_Height(imgsize.get_ImageHeight()); + properties.put_ResetCrop(true); + api.ImgApply(properties); + } + + onRemoveImage() { + const api = Common.EditorApi.get(); + api.asc_Remove(); + this.closeModal(); + } + + onReplaceByFile() { + const api = Common.EditorApi.get(); + api.ChangeImageFromFile(); + this.closeModal(); + } + + onReplaceByUrl(value) { + const api = Common.EditorApi.get(); + const image = new Asc.asc_CImgProperty(); + image.put_ImageUrl(value); + api.ImgApply(image); + this.closeModal(); + } + + + render () { + return ( + + ) + } +} + +export default inject("storeImageSettings")(observer(EditImageController)); \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/store/focusObjects.js b/apps/presentationeditor/mobile/src/store/focusObjects.js index 48f28d076..4fda23195 100644 --- a/apps/presentationeditor/mobile/src/store/focusObjects.js +++ b/apps/presentationeditor/mobile/src/store/focusObjects.js @@ -97,4 +97,19 @@ export class storeFocusObjects { return undefined; } } + + @computed get imageObject() { + const images = []; + for (let object of this._focusObjects) { + if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Image && object.get_ObjectValue()) { + 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/presentationeditor/mobile/src/store/mainStore.js b/apps/presentationeditor/mobile/src/store/mainStore.js index 15f597cd7..e379be939 100644 --- a/apps/presentationeditor/mobile/src/store/mainStore.js +++ b/apps/presentationeditor/mobile/src/store/mainStore.js @@ -33,7 +33,6 @@ export const stores = { // storeParagraphSettings: new storeParagraphSettings(), // storeShapeSettings: new storeShapeSettings(), // storeChartSettings: new storeChartSettings(), - // storeImageSettings: new storeImageSettings(), // storeTableSettings: new storeTableSettings() }; diff --git a/apps/presentationeditor/mobile/src/view/edit/Edit.jsx b/apps/presentationeditor/mobile/src/view/edit/Edit.jsx index 35933ce37..265332ebd 100644 --- a/apps/presentationeditor/mobile/src/view/edit/Edit.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/Edit.jsx @@ -8,9 +8,11 @@ import {Device} from '../../../../../common/mobile/utils/device'; import EditSlideController from "../../controller/edit/EditSlide"; import EditTextController from "../../controller/edit/EditText"; import EditShapeController from "../../controller/edit/EditShape"; +import EditImageController from "../../controller/edit/EditImage"; import { Theme, Layout, Transition, Type, Effect, StyleFillColor, CustomFillColor } from './EditSlide'; import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor, PageTextAddFormatting, PageTextBullets, PageTextNumbers, PageTextLineSpacing } from './EditText'; import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageAlignContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape'; +import { PageImageReplace, PageImageReorder, PageImageAlign, PageLinkSettings } from './EditImage'; //import EditShapeController from "../../controller/edit/EditShape"; //import EditImageController from "../../controller/edit/EditImage"; //import EditTableController from "../../controller/edit/EditTable"; @@ -18,6 +20,9 @@ import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorder //import EditLinkController from "../../controller/edit/EditLink"; const routes = [ + + // Slides + { path: '/layout/', component: Layout @@ -46,6 +51,9 @@ const routes = [ path: '/edit-custom-color/', component: CustomFillColor }, + + // Text + { path: '/edit-text-fonts/', component: PageTextFonts @@ -74,6 +82,9 @@ const routes = [ path: '/edit-text-line-spacing/', component: PageTextLineSpacing }, + + // Shape + { path: '/edit-style-shape/', component: PageShapeStyle @@ -105,6 +116,25 @@ 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-align-image', + component: PageImageAlign + }, + { + path: '/edit-image-link/', + component: PageLinkSettings } ]; @@ -194,13 +224,6 @@ const EditTabs = props => { component: }) } - /*if (settings.indexOf('table') > -1) { - editors.push({ - caption: _t.textTable, - id: 'edit-table', - component: - }) - } if (settings.indexOf('image') > -1) { editors.push({ caption: _t.textImage, @@ -208,6 +231,13 @@ const EditTabs = props => { component: }) } + /*if (settings.indexOf('table') > -1) { + editors.push({ + caption: _t.textTable, + id: 'edit-table', + component: + }) + } if (settings.indexOf('chart') > -1) { editors.push({ caption: _t.textChart, diff --git a/apps/presentationeditor/mobile/src/view/edit/EditImage.jsx b/apps/presentationeditor/mobile/src/view/edit/EditImage.jsx new file mode 100644 index 000000000..29c7c5633 --- /dev/null +++ b/apps/presentationeditor/mobile/src/view/edit/EditImage.jsx @@ -0,0 +1,167 @@ +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} 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 PageAlign = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + return ( + + + + {props.onAlign('align-left')}} className='no-indicator'> + + + {props.onAlign('align-center')}} className='no-indicator'> + + + {props.onAlign('align-right')}} className='no-indicator'> + + + {props.onAlign('align-top')}} className='no-indicator'> + + + {props.onAlign('align-middle')}} className='no-indicator'> + + + {props.onAlign('align-bottom')}} className='no-indicator'> + + + + + {props.onAlign('distrib-hor')}} className='no-indicator'> + + + {props.onAlign('distrib-vert')}} 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 PageAlignContainer = inject("storeFocusObjects")(observer(PageAlign)); +const PageLinkSettingsContainer = inject("storeFocusObjects")(observer(PageLinkSettings)); + +export { + EditImageContainer as EditImage, + PageReplaceContainer as PageImageReplace, + PageReorderContainer as PageImageReorder, + PageAlignContainer as PageImageAlign, + PageLinkSettingsContainer as PageLinkSettings +} \ No newline at end of file