Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[DE mobile] fix context menu close

Browse source
This commit is contained in:
Maxim Kadushkin 2021-02-16 20:31:27 +03:00
parent 0b4deb6e01
commit d6c6bc389b
4 changed files with 17 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
apps/common/mobile/lib/controller/ContextMenu.jsx
View file

@ -2,7 +2,9 @@ import React, { Component } from 'react';
import { f7 } from 'framework7-react'; import { f7 } from 'framework7-react';
import { Device } from '../../../../common/mobile/utils/device' import { Device } from '../../../../common/mobile/utils/device'
import ContextMenuView from '../view/ContextMenu'; import ContextMenuView, { idContextMenuElement } from '../view/ContextMenu';
const idCntextMenuTargetElement = '#idx-context-menu-target';
class ContextMenuController extends Component { class ContextMenuController extends Component {
constructor(props) { constructor(props) {
@ -19,10 +21,10 @@ class ContextMenuController extends Component {
} }
onDocumentReady() { onDocumentReady() {
this.$targetEl = $$('#idx-context-menu-target'); this.$targetEl = $$(idCntextMenuTargetElement);
if ( !this.$targetEl.length ) { if ( !this.$targetEl.length ) {
// this.$targetEl = $$('<div id="idx-context-menu-target" style="position:absolute;width:15px;height:15px;background-color:green;z-index:1;"></div>'); // this.$targetEl = $$('<div id="idx-context-menu-target" style="position:absolute;width:15px;height:15px;background-color:green;z-index:1;"></div>');
this.$targetEl = $$('<div id="idx-context-menu-target" style="position:absolute;"></div>'); this.$targetEl = $$(`<div id="${idCntextMenuTargetElement} style="position:absolute;"></div>`);
this.$targetEl.css({left: '-10000px', top: '-10000px'}); this.$targetEl.css({left: '-10000px', top: '-10000px'});
$$('#editor_sdk').append(this.$targetEl); $$('#editor_sdk').append(this.$targetEl);
@ -93,7 +95,7 @@ class ContextMenuController extends Component {
onApiOpenContextMenu(x, y) { onApiOpenContextMenu(x, y) {
if ( !this.state.opened ) { if ( !this.state.opened ) {
this.$targetEl.css({left: `${x}px`, top: `${y}px`}); this.$targetEl.css({left: `${x}px`, top: `${y}px`});
const popover = f7.popover.open('#idx-context-menu-popover', '#idx-context-menu-target'); const popover = f7.popover.open(idContextMenuElement, idCntextMenuTargetElement);
if ( Device.android ) if ( Device.android )
this.offsetPopoverTop(popover); this.offsetPopoverTop(popover);
@ -106,7 +108,7 @@ class ContextMenuController extends Component {
onApiHideContextMenu() { onApiHideContextMenu() {
if ( this.state.opened ) { if ( this.state.opened ) {
f7.popover.close('#idx-context-menu-popover'); f7.popover.close(idContextMenuElement);
this.$targetEl.css({left: '-10000px', top: '-10000px'}); this.$targetEl.css({left: '-10000px', top: '-10000px'});
this.setState({opened: false}); this.setState({opened: false});

6
apps/common/mobile/lib/view/ContextMenu.jsx
View file

@ -2,6 +2,8 @@ import React, { Component } from 'react';
import { Popover, List, ListItem, ListButton, Link, Icon } from 'framework7-react'; import { Popover, List, ListItem, ListButton, Link, Icon } from 'framework7-react';
import { f7 } from 'framework7-react'; import { f7 } from 'framework7-react';
const idContextMenuElement = "idx-context-menu-popover";
class ContextMenuView extends Component { class ContextMenuView extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -15,7 +17,7 @@ class ContextMenuView extends Component {
const buttons = this.props.items || {}; const buttons = this.props.items || {};
return ( return (
<Popover id="idx-context-menu-popover" <Popover id={idContextMenuElement}
className="document-menu" className="document-menu"
backdrop={false} backdrop={false}
closeByBackdropClick={false} closeByBackdropClick={false}
@ -36,4 +38,4 @@ class ContextMenuView extends Component {
} }
} }
export default ContextMenuView; export {ContextMenuView as default, idContextMenuElement};

3
apps/documenteditor/mobile/src/controller/ContextMenu.jsx
View file

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import { f7 } from 'framework7-react'; import { f7 } from 'framework7-react';
import ContextMenuController from '../../../../common/mobile/lib/controller/ContextMenu'; import ContextMenuController from '../../../../common/mobile/lib/controller/ContextMenu';
import { idContextMenuElement } from '../../../../common/mobile/lib/view/ContextMenu';
class ContextMenu extends ContextMenuController { class ContextMenu extends ContextMenuController {
constructor(props) { constructor(props) {
@ -35,4 +36,4 @@ class ContextMenu extends ContextMenuController {
} }
} }
export { ContextMenu }; export { ContextMenu, idContextMenuElement };

5
apps/documenteditor/mobile/src/page/main.jsx
View file

@ -1,4 +1,5 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { f7 } from 'framework7-react';
import { Page, View, Navbar, NavLeft, NavRight, Link, Icon } from 'framework7-react'; import { Page, View, Navbar, NavLeft, NavRight, Link, Icon } from 'framework7-react';
import EditOptions from '../view/edit/Edit'; import EditOptions from '../view/edit/Edit';
@ -7,7 +8,7 @@ import Settings from '../view/settings/Settings';
import Collaboration from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx' import Collaboration from '../../../../common/mobile/lib/view/collaboration/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'; import { ContextMenu, idContextMenuElement } from '../controller/ContextMenu';
export default class MainPage extends Component { export default class MainPage extends Component {
constructor(props) { constructor(props) {
@ -21,6 +22,8 @@ export default class MainPage extends Component {
} }
handleClickToOpenOptions = opts => { handleClickToOpenOptions = opts => {
f7.popover.close(idContextMenuElement, false);
this.setState(state => { this.setState(state => {
if ( opts == 'edit' ) if ( opts == 'edit' )
return {editOptionsVisible: true}; return {editOptionsVisible: true};