Merge branch 'feature/mobile-apps-on-reactjs-pe-edit-settings' into feature/mobile-apps-on-reactjs
This commit is contained in:
JuliaSvinareva
commit
ec50d2ba61
|
|
@ -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": {
|
||||
|
|
|
|||
121
apps/presentationeditor/mobile/src/controller/edit/EditImage.jsx
Normal file
121
apps/presentationeditor/mobile/src/controller/edit/EditImage.jsx
Normal file
|
|
@ -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 = 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 (
|
||||
<EditImage
|
||||
onReorder={this.onReorder}
|
||||
onAlign={this.onAlign}
|
||||
onRemoveImage={this.onRemoveImage}
|
||||
onReplaceByFile={this.onReplaceByFile}
|
||||
onDefaultSize={this.onDefaultSize}
|
||||
onReplaceByUrl={this.onReplaceByUrl}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default EditImageController;
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -33,7 +33,6 @@ export const stores = {
|
|||
// storeParagraphSettings: new storeParagraphSettings(),
|
||||
// storeShapeSettings: new storeShapeSettings(),
|
||||
// storeChartSettings: new storeChartSettings(),
|
||||
// storeImageSettings: new storeImageSettings(),
|
||||
// storeTableSettings: new storeTableSettings()
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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: <EditShapeController />
|
||||
})
|
||||
}
|
||||
/*if (settings.indexOf('table') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textTable,
|
||||
id: 'edit-table',
|
||||
component: <EditTableController />
|
||||
})
|
||||
}
|
||||
if (settings.indexOf('image') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textImage,
|
||||
|
|
@ -208,6 +231,13 @@ const EditTabs = props => {
|
|||
component: <EditImageController />
|
||||
})
|
||||
}
|
||||
/*if (settings.indexOf('table') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textTable,
|
||||
id: 'edit-table',
|
||||
component: <EditTableController />
|
||||
})
|
||||
}
|
||||
if (settings.indexOf('chart') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textChart,
|
||||
|
|
|
|||
167
apps/presentationeditor/mobile/src/view/edit/EditImage.jsx
Normal file
167
apps/presentationeditor/mobile/src/view/edit/EditImage.jsx
Normal file
|
|
@ -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, 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 (
|
||||
<Fragment>
|
||||
<List>
|
||||
<ListItem title={_t.textReplace} link="/edit-replace-image/" routeProps={{
|
||||
onReplaceByFile: props.onReplaceByFile,
|
||||
onReplaceByUrl: props.onReplaceByUrl
|
||||
}}></ListItem>
|
||||
<ListItem title={_t.textReorder} link="/edit-reorder-image/" routeProps={{
|
||||
onReorder: props.onReorder
|
||||
}}></ListItem>
|
||||
<ListItem title={_t.textAlign} link="/edit-align-image/" routeProps={{
|
||||
onAlign: props.onAlign
|
||||
}}></ListItem>
|
||||
</List>
|
||||
<List className="buttons-list">
|
||||
<ListItem href="#" className="button button-raised button-fill" onClick={props.onDefaultSize}>{_t.textActualSize}</ListItem>
|
||||
<ListItem href="#" className="button button-raised button-red" onClick={props.onRemoveImage}>{_t.textRemoveImage}</ListItem>
|
||||
</List>
|
||||
</Fragment>
|
||||
)
|
||||
};
|
||||
|
||||
const PageReorder = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<Navbar title={_t.textReorder} backLink={_t.textBack} />
|
||||
<List>
|
||||
<ListItem title={_t.textBringToForeground} link='#' onClick={() => {props.onReorder('all-up')}} className='no-indicator'>
|
||||
<Icon slot="media" icon="icon-move-foreground"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textSendToBackground} link='#' onClick={() => {props.onReorder('all-down')}} className='no-indicator'>
|
||||
<Icon slot="media" icon="icon-move-background"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textMoveForward} link='#' onClick={() => {props.onReorder('move-up')}} className='no-indicator'>
|
||||
<Icon slot="media" icon="icon-move-forward"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textMoveBackward} link='#' onClick={() => {props.onReorder('move-down')}} className='no-indicator'>
|
||||
<Icon slot="media" icon="icon-move-backward"></Icon>
|
||||
</ListItem>
|
||||
</List>
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
||||
const PageAlign = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<Navbar title={_t.textAlign} backLink={_t.textBack} />
|
||||
<List>
|
||||
<ListItem title={_t.textAlignLeft} link='#' onClick={() => {props.onAlign('align-left')}} className='no-indicator'>
|
||||
<Icon slot="media" icon="icon-align-left"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textAlignCenter} link='#' onClick={() => {props.onAlign('align-center')}} className='no-indicator'>
|
||||
<Icon slot="media" icon="icon-align-center"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textAlignRight} link='#' onClick={() => {props.onAlign('align-right')}} className='no-indicator'>
|
||||
<Icon slot="media" icon="icon-align-right"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textAlignTop} link='#' onClick={() => {props.onAlign('align-top')}} className='no-indicator'>
|
||||
<Icon slot="media" icon="icon-align-top"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textAlignMiddle} link='#' onClick={() => {props.onAlign('align-middle')}} className='no-indicator'>
|
||||
<Icon slot="media" icon="icon-align-middle"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textAlignBottom} link='#' onClick={() => {props.onAlign('align-bottom')}} className='no-indicator'>
|
||||
<Icon slot="media" icon="icon-align-bottom"></Icon>
|
||||
</ListItem>
|
||||
</List>
|
||||
<List>
|
||||
<ListItem title={_t.textDistributeHorizontally} link='#' onClick={() => {props.onAlign('distrib-hor')}} className='no-indicator'>
|
||||
<Icon slot="media" icon="icon-align-horizontal"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textDistributeVertically} link='#' onClick={() => {props.onAlign('distrib-vert')}} className='no-indicator'>
|
||||
<Icon slot="media" icon="icon-align-vertical"></Icon>
|
||||
</ListItem>
|
||||
</List>
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
||||
const PageReplace = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('View.Edit', {returnObjects: true});
|
||||
|
||||
return (
|
||||
<Page className="images">
|
||||
<Navbar title={_t.textReplace} backLink={_t.textBack} />
|
||||
<List>
|
||||
<ListItem title={_t.textPictureFromLibrary} onClick={() => {props.onReplaceByFile()}}>
|
||||
<Icon slot="media" icon="icon-link"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textPictureFromURL} link='/edit-image-link/' routeProps={{
|
||||
onReplaceByUrl: props.onReplaceByUrl
|
||||
}}>
|
||||
<Icon slot="media" icon="icon-image-library"></Icon>
|
||||
</ListItem>
|
||||
</List>
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
||||
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 (
|
||||
<Page>
|
||||
<Navbar title={_t.textLinkSettings} backLink={_t.textBack} />
|
||||
<BlockTitle>{_t.textAddress}</BlockTitle>
|
||||
<List>
|
||||
<ListInput
|
||||
type='text'
|
||||
placeholder={_t.textImageURL}
|
||||
value={stateValue}
|
||||
onChange={(event) => {setValue(event.target.value)}}
|
||||
>
|
||||
</ListInput>
|
||||
</List>
|
||||
<List>
|
||||
<ListButton className={'button-fill button-raised' + (stateValue.length < 1 ? ' disabled' : '')} title={_t.textReplaceImage} onClick={() => {onReplace()}}></ListButton>
|
||||
</List>
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
||||
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
|
||||
}
|
||||
Loading…
Reference in a new issue