diff options
| -rw-r--r-- | src/client/util/GroupManager.tsx | 7 | ||||
| -rw-r--r-- | src/client/util/GroupMemberView.tsx | 7 | ||||
| -rw-r--r-- | src/client/views/MainViewModal.tsx | 33 |
3 files changed, 15 insertions, 32 deletions
diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx index 0e710457e..b14dcf55b 100644 --- a/src/client/util/GroupManager.tsx +++ b/src/client/util/GroupManager.tsx @@ -362,6 +362,13 @@ export default class GroupManager extends React.Component<{}> { placeholder={"Select users"} value={this.selectedUsers} closeMenuOnSelect={false} + styles={{ + dropdownIndicator: (base, state) => ({ + ...base, + transition: '0.5s all ease', + transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : undefined + }) + }} /> </div> <div className="group-content"> diff --git a/src/client/util/GroupMemberView.tsx b/src/client/util/GroupMemberView.tsx index 4377a1428..cc279b6b2 100644 --- a/src/client/util/GroupMemberView.tsx +++ b/src/client/util/GroupMemberView.tsx @@ -42,6 +42,13 @@ export default class GroupMemberView extends React.Component<GroupMemberViewProp placeholder={"Add members"} value={null} closeMenuOnSelect={true} + styles={{ + dropdownIndicator: (base, state) => ({ + ...base, + transition: '0.5s all ease', + transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : undefined + }) + }} /> </div> <button onClick={() => console.log(GroupManager.Instance.deleteGroup(this.props.group))}>Delete group</button> diff --git a/src/client/views/MainViewModal.tsx b/src/client/views/MainViewModal.tsx index 2bdd159c9..0b73a6ad7 100644 --- a/src/client/views/MainViewModal.tsx +++ b/src/client/views/MainViewModal.tsx @@ -1,7 +1,5 @@ import * as React from 'react'; import "./MainViewModal.scss"; -import { Opt } from '../../fields/Doc'; -import { Lambda, reaction } from 'mobx'; import { observer } from 'mobx-react'; export interface MainViewOverlayProps { @@ -18,35 +16,6 @@ export interface MainViewOverlayProps { @observer export default class MainViewModal extends React.Component<MainViewOverlayProps> { - private ref: React.RefObject<HTMLDivElement> = React.createRef(); - private displayedListenerDisposer: Opt<Lambda>; - - componentDidMount() { - - document.removeEventListener("pointerdown", this.close); - - this.displayedListenerDisposer = reaction(() => this.props.isDisplayed, (isDisplayed) => { - if (isDisplayed) document.addEventListener("pointerdown", this.close); - else document.removeEventListener("pointerdown", this.close); - }); - } - - componentWillUnmount() { - this.displayedListenerDisposer?.(); - document.removeEventListener("pointerdown", this.close); - } - - close = (e: PointerEvent) => { - - const { left, right, top, bottom } = this.ref.current!.getBoundingClientRect(); - - if (e.clientX === 0 && e.clientY === 0) return; // why does this happen? - if (e.clientX < left || e.clientX > right || e.clientY > bottom || e.clientY < top) { - this.props.closeOnExternalClick?.(); - } - - } - render() { const p = this.props; const dialogueOpacity = p.dialogueBoxDisplayedOpacity || 1; @@ -60,10 +29,10 @@ export default class MainViewModal extends React.Component<MainViewOverlayProps> ...(p.dialogueBoxStyle || {}), opacity: p.isDisplayed ? dialogueOpacity : 0 }} - ref={this.ref} >{p.contents}</div> <div className={"overlay"} + onClick={this.props?.closeOnExternalClick} style={{ backgroundColor: "gainsboro", ...(p.overlayStyle || {}), |