[SE mobile] Added Image Settings
This commit is contained in:
SergeyEzhin
parent
40c34fc71d
commit
4bf9c5c6cd
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<EditImage
|
||||
onReorder={this.onReorder}
|
||||
onRemoveImage={this.onRemoveImage}
|
||||
onReplaceByFile={this.onReplaceByFile}
|
||||
onDefaultSize={this.onDefaultSize}
|
||||
onReplaceByUrl={this.onReplaceByUrl}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default EditImageController;
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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: <EditShapeController />
|
||||
})
|
||||
}
|
||||
if (settings.indexOf('image') > -1) {
|
||||
editors.push({
|
||||
caption: _t.textImage,
|
||||
id: 'edit-image',
|
||||
component: <EditImageController />
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
|
|||
124
apps/spreadsheeteditor/mobile/src/view/edit/EditImage.jsx
Normal file
124
apps/spreadsheeteditor/mobile/src/view/edit/EditImage.jsx
Normal file
|
|
@ -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 (
|
||||
<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>
|
||||
</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 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-image-library"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textPictureFromURL} link='/edit-image-link/' routeProps={{
|
||||
onReplaceByUrl: props.onReplaceByUrl
|
||||
}}>
|
||||
<Icon slot="media" icon="icon-link"></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 PageLinkSettingsContainer = inject("storeFocusObjects")(observer(PageLinkSettings));
|
||||
|
||||
export {
|
||||
EditImageContainer as EditImage,
|
||||
PageReplaceContainer as PageImageReplace,
|
||||
PageReorderContainer as PageImageReorder,
|
||||
PageLinkSettingsContainer as PageLinkSettings
|
||||
}
|
||||
Loading…
Reference in a new issue