diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index 0a43c970b..78de0f8d9 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -1,3 +1,5 @@ +@import "./ios/_contextmenu"; +@import "icons-ios"; .device-ios { @blockTitleColor: #6d6d72; diff --git a/apps/common/mobile/resources/less/icons-ios.less b/apps/common/mobile/resources/less/icons-ios.less new file mode 100644 index 000000000..6b05d232e --- /dev/null +++ b/apps/common/mobile/resources/less/icons-ios.less @@ -0,0 +1,9 @@ +.device-ios { + i.icon { + &.icon-paste { + width: 24px; + height: 24px; + .encoded-svg-background(''); + } + } +} \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/controller/ContextMenu.jsx b/apps/documenteditor/mobile/src/controller/ContextMenu.jsx new file mode 100644 index 000000000..580c35a7a --- /dev/null +++ b/apps/documenteditor/mobile/src/controller/ContextMenu.jsx @@ -0,0 +1,74 @@ +import React, { Component } from 'react'; +import { f7 } from 'framework7-react'; + +import ContextMenuView from '../view/ContextMenu'; + +class ContextMenuController extends Component { + constructor(props) { + super(props); + + this.state = { + pos: [-10000,-10000], + show: false + }; + + this.onMenuClosed = this.onMenuClosed.bind(this); + + Common.Notifications.on({ + 'engineCreated': api => { + api.asc_registerCallback('asc_onShowPopMenu', this.onApiShowPopMenu.bind(this)); + api.asc_registerCallback('asc_onHidePopMenu', this.onApiHidePopMenu.bind(this)); + }, + 'document:ready': () => { + this.$targetEl = $$('
'); + this.$targetEl.css({left: '-10000px', top: '-10000px'}); + + $$('#editor_sdk').append(this.$targetEl); + } + }); + + console.log('context menu controller created'); + } + + onApiShowPopMenu(x, y) { + console.log('show context menu ' + [x,y]); + + this.$targetEl.css({left: `${x}px`, top: `${y}px`}); + this.setState({ + pos: [x,y], + show: true }); + } + + onApiHidePopMenu() { + // console.log('hide context menu'); + + if ( this.state.show ) { + f7.popover.close('#idx-context-menu-popover'); + } + } + + onMenuClosed() { + (async () => { + await 1 && this.setState(state => { + this.$targetEl.css({left: '-10000px', top: '-10000px'}); + return ({pos: [-10000, -10000], show: false}); + }); + })(); + } + + componentWillUnmount() { + console.log('context menu controller will be unmounted'); + } + + componentDidMount() { + console.log('context menu controller did mount'); + } + + render() { + return ( + !this.state.show ? null : + ) + } +} + +export { ContextMenuController as ContextMenu }; \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/page/main.jsx b/apps/documenteditor/mobile/src/page/main.jsx index 86b1996de..d57ce35a4 100644 --- a/apps/documenteditor/mobile/src/page/main.jsx +++ b/apps/documenteditor/mobile/src/page/main.jsx @@ -7,6 +7,7 @@ import Settings from '../view/settings/Settings'; import CollaborationView from '../../../../common/mobile/lib/view/Collaboration.jsx' import { Device } from '../../../../common/mobile/utils/device' import { Search, SearchSettings } from '../controller/Search'; +import { ContextMenu } from '../controller/ContextMenu'; export default class MainPage extends Component { constructor(props) { @@ -89,6 +90,7 @@ export default class MainPage extends Component { !this.state.collaborationVisible ? null : } + {/**/} ) } diff --git a/apps/documenteditor/mobile/src/view/ContextMenu.jsx b/apps/documenteditor/mobile/src/view/ContextMenu.jsx new file mode 100644 index 000000000..6f05e4965 --- /dev/null +++ b/apps/documenteditor/mobile/src/view/ContextMenu.jsx @@ -0,0 +1,50 @@ +import React, { Component } from 'react'; +import { Popover, List, ListItem, ListButton, Link, Icon } from 'framework7-react'; +import { f7 } from 'framework7-react'; + +const buttons = [ + { + text: 'Edit', + action: 'edit' + }, { + text: 'View', + action: 'view' + }, { + icon: 'icon-paste', + action: 'review' + } +]; + +class ContextMenuView extends Component { + constructor(props) { + super(props); + } + + componentDidMount() { + f7.popover.open('#idx-context-menu-popover', '#idx-context-menu-target'); + } + + render() { + return ( + this.props.onMenuClosed()} + > + + {buttons.map((b, index) => + !!b.text ? + : + + + + )} + + + ) + } +} + +export default ContextMenuView; \ No newline at end of file