diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json index daaa12d5f..9459c92b2 100644 --- a/apps/spreadsheeteditor/mobile/locale/en.json +++ b/apps/spreadsheeteditor/mobile/locale/en.json @@ -22,7 +22,17 @@ "sCatLookupAndReference": "Lookup and Reference", "sCatMathematic": "Math and trigonometry", "sCatStatistical": "Statistical", - "sCatTextAndData": "Text and data" + "sCatTextAndData": "Text and data", + "textImage": "Image", + "textInsertImage": "Insert Image", + "textLinkSettings": "Link Settings", + "textAddress": "Address", + "textImageURL": "Image URL", + "textPictureFromLibrary": "Picture from library", + "textPictureFromURL": "Picture from URL", + "txtNotUrl": "This field should be a URL in the format \"http://www.example.com\"", + "textEmptyImgUrl": "You need to specify image URL.", + "notcriticalErrorTitle": "Warning" }, "Edit" : { "textSelectObjectToEdit": "Select object to edit", diff --git a/apps/spreadsheeteditor/mobile/src/controller/add/AddImage.jsx b/apps/spreadsheeteditor/mobile/src/controller/add/AddImage.jsx new file mode 100644 index 000000000..10815d5f4 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/controller/add/AddImage.jsx @@ -0,0 +1,60 @@ +import React, {Component} from 'react'; +import { f7 } from 'framework7-react'; +import {Device} from '../../../../../common/mobile/utils/device'; +import {withTranslation} from 'react-i18next'; + +import {AddImage} from '../../view/add/AddImage'; + +class AddImageController extends Component { + constructor (props) { + super(props); + this.onInsertByFile = this.onInsertByFile.bind(this); + this.onInsertByUrl = this.onInsertByUrl.bind(this); + } + + closeModal () { + if ( Device.phone ) { + f7.sheet.close('.add-popup', true); + } else { + f7.popover.close('#add-popover'); + } + } + + onInsertByFile () { + const api = Common.EditorApi.get(); + api.asc_addImage(); + this.closeModal(); + } + + onInsertByUrl (value) { + const { t } = this.props; + const _t = t("View.Add", { returnObjects: true }); + + const _value = value.replace(/ /g, ''); + + if (_value) { + if ((/((^https?)|(^ftp)):\/\/.+/i.test(_value))) { + this.closeModal(); + const api = Common.EditorApi.get(); + api.asc_addImageDrawingObject(_value); + } else { + f7.dialog.alert(_t.txtNotUrl, _t.notcriticalErrorTitle); + } + } else { + f7.dialog.alert(_t.textEmptyImgUrl, _t.notcriticalErrorTitle); + } + } + + render () { + return ( + + ) + } +} + +const AddImageWithTranslation = withTranslation()(AddImageController); + +export {AddImageWithTranslation as AddImageController}; \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/controller/add/AddOther.jsx b/apps/spreadsheeteditor/mobile/src/controller/add/AddOther.jsx new file mode 100644 index 000000000..4e09ae1a0 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/controller/add/AddOther.jsx @@ -0,0 +1,31 @@ +import React, {Component} from 'react'; +import { f7 } from 'framework7-react'; +import {Device} from '../../../../../common/mobile/utils/device'; +import { withTranslation} from 'react-i18next'; + +import {AddOther} from '../../view/add/AddOther'; + +class AddOtherController extends Component { + constructor (props) { + super(props); + } + + closeModal () { + if ( Device.phone ) { + f7.sheet.close('.add-popup', true); + } else { + f7.popover.close('#add-popover'); + } + } + + render () { + return ( + + ) + } +} + +const AddOtherWithTranslation = withTranslation()(AddOtherController); + +export {AddOtherWithTranslation as AddOtherController}; \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/view/add/Add.jsx b/apps/spreadsheeteditor/mobile/src/view/add/Add.jsx index b7d538e29..af4871a2d 100644 --- a/apps/spreadsheeteditor/mobile/src/view/add/Add.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/add/Add.jsx @@ -9,7 +9,9 @@ import AddChartController from "../../controller/add/AddChart"; import {AddFunctionController} from "../../controller/add/AddFunction"; import {PageFunctionGroup, PageFunctionInfo} from "./AddFunction"; import AddShapeController from "../../controller/add/AddShape"; -//import {AddOtherController} from "../../controller/add/AddOther"; +import {AddOtherController} from "../../controller/add/AddOther"; +import {AddImageController} from "../../controller/add/AddImage"; +import {PageImageLinkSettings} from "./AddImage"; const routes = [ // Functions @@ -20,6 +22,15 @@ const routes = [ { path: '/add-function-info/', component: PageFunctionInfo + }, + // Image + { + path: '/add-image/', + component: AddImageController + }, + { + path: '/add-image-from-url/', + component: PageImageLinkSettings } ]; @@ -83,12 +94,22 @@ const AddTabs = props => { component: }); } - /*tabs.push({ - caption: _t.textOther, - id: 'add-other', - icon: 'icon-add-other', - component: - });*/ + if (showPanels && showPanels.indexOf('image') !== -1) { + tabs.push({ + caption: _t.textImage, + id: 'add-image', + icon: 'icon-add-image', + component: + }); + } + if (!showPanels) { + tabs.push({ + caption: _t.textOther, + id: 'add-other', + icon: 'icon-add-other', + component: + }); + } return ( diff --git a/apps/spreadsheeteditor/mobile/src/view/add/AddImage.jsx b/apps/spreadsheeteditor/mobile/src/view/add/AddImage.jsx new file mode 100644 index 000000000..c71fbc56b --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/view/add/AddImage.jsx @@ -0,0 +1,61 @@ +import React, {Fragment, useState} from 'react'; +import {Page, Navbar, BlockTitle, List, ListItem, ListInput, ListButton, Icon} from 'framework7-react'; +import { useTranslation } from 'react-i18next'; + +const AddImageList = props => { + const { t } = useTranslation(); + const _t = t('View.Add', {returnObjects: true}); + return ( + + {props.onInsertByFile()}}> + + + + + + + ) +}; + +const PageLinkSettings = props => { + const { t } = useTranslation(); + const _t = t('View.Add', {returnObjects: true}); + const [stateValue, setValue] = useState(''); + return ( + + + {_t.textAddress} + + {setValue(event.target.value)}} + > + + + + {props.onInsertByUrl(stateValue)}}> + + + ) +}; + +const AddImage = props => { + const { t } = useTranslation(); + const _t = t('View.Add', {returnObjects: true}); + return ( + props.inTabs ? + : + + + + + ) +}; + +export {AddImage, PageLinkSettings as PageImageLinkSettings}; \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/view/add/AddOther.jsx b/apps/spreadsheeteditor/mobile/src/view/add/AddOther.jsx new file mode 100644 index 000000000..779f8489b --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/view/add/AddOther.jsx @@ -0,0 +1,17 @@ +import React from 'react'; +import {List, ListItem, Icon} from 'framework7-react'; +import { useTranslation } from 'react-i18next'; + +const AddOther = props => { + const { t } = useTranslation(); + const _t = t('View.Add', {returnObjects: true}); + return ( + + + + + + ) +}; + +export {AddOther}; \ No newline at end of file