[DE mobile] start to implement context menu

This commit is contained in:
Maxim Kadushkin 2021-02-05 11:37:49 +03:00
parent 77d955f5ad
commit 368c773d16
5 changed files with 137 additions and 0 deletions

View file

@ -1,3 +1,5 @@
@import "./ios/_contextmenu";
@import "icons-ios";
.device-ios { .device-ios {
@blockTitleColor: #6d6d72; @blockTitleColor: #6d6d72;

View file

@ -0,0 +1,9 @@
.device-ios {
i.icon {
&.icon-paste {
width: 24px;
height: 24px;
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 2H0V20H9V24H24V7H19V2H14V3H18V7H9V19H1V3H5V2ZM10 8H23V23H10V8Z" fill="white"/><path d="M5 0H14V5H5V0Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M21 12H12V11H21V12Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M21 16H12V15H21V16Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M21 20H12V19H21V20Z" fill="white"/></svg>');
}
}
}

View file

@ -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 = $$('<div id="idx-context-menu-target" style="position:absolute;width:15px;height:15px;background-color:green;z-index:1;"></div>');
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 :
<ContextMenuView onMenuClosed={this.onMenuClosed} />)
}
}
export { ContextMenuController as ContextMenu };

View file

@ -7,6 +7,7 @@ import Settings from '../view/settings/Settings';
import CollaborationView from '../../../../common/mobile/lib/view/Collaboration.jsx' import CollaborationView from '../../../../common/mobile/lib/view/Collaboration.jsx'
import { Device } from '../../../../common/mobile/utils/device' import { Device } from '../../../../common/mobile/utils/device'
import { Search, SearchSettings } from '../controller/Search'; import { Search, SearchSettings } from '../controller/Search';
import { ContextMenu } from '../controller/ContextMenu';
export default class MainPage extends Component { export default class MainPage extends Component {
constructor(props) { constructor(props) {
@ -89,6 +90,7 @@ export default class MainPage extends Component {
!this.state.collaborationVisible ? null : !this.state.collaborationVisible ? null :
<CollaborationView onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} /> <CollaborationView onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />
} }
{/*<ContextMenu />*/}
</Page> </Page>
) )
} }

View file

@ -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 (
<Popover id="idx-context-menu-popover"
className="document-menu"
backdrop={false}
closeByBackdropClick={false}
closeByOutsideClick={false}
onPopoverClosed={e => this.props.onMenuClosed()}
>
<List className="list-block">
{buttons.map((b, index) =>
!!b.text ?
<ListButton className="asd" title={b.text} key={index} /> :
<ListButton className="asd" title={b.text} key={index}>
<Icon slot="media" icon={b.icon} />
</ListButton>
)}
</List>
</Popover>
)
}
}
export default ContextMenuView;