diff options
Diffstat (limited to 'src/client/views/PropertiesSection.tsx')
-rw-r--r-- | src/client/views/PropertiesSection.tsx | 27 |
1 files changed, 21 insertions, 6 deletions
diff --git a/src/client/views/PropertiesSection.tsx b/src/client/views/PropertiesSection.tsx index b900d17ca..ec8043ffe 100644 --- a/src/client/views/PropertiesSection.tsx +++ b/src/client/views/PropertiesSection.tsx @@ -1,6 +1,6 @@ import React = require('react'); import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" -import { action, computed } from "mobx" +import { action, computed, observable } from "mobx" import { observer } from "mobx-react" import './PropertiesSection.scss' import { Doc } from '../../fields/Doc'; @@ -12,7 +12,8 @@ export interface PropertiesSectionProps { isOpen: boolean, setIsOpen: (bool: boolean) => any inSection?: boolean, - setInSection?: (bool: boolean) => any + setInSection?: (bool: boolean) => any + onDoubleClick?: () => void } @observer @@ -28,14 +29,28 @@ export class PropertiesSection extends React.Component<PropertiesSectionProps> { @computed get variantColor() { return StrCast(Doc.UserDoc().userVariantColor); } + + @observable isDouble: boolean = false; + render() { console.log(this.props.title, this.props.content) if (this.props.content === undefined || this.props.content === null) return null else return <div className="propertiesView-section" onPointerEnter={action(() => (this.props.setInSection && this.props.setInSection(true)))} onPointerLeave={action(() => (this.props.setInSection && this.props.setInSection(false)))}> - <div className="propertiesView-sectionTitle" onPointerDown={action(() => (this.props.setIsOpen(!this.props.isOpen)))} style={{ - background: this.props.isOpen ? this.variantColor : this.backgroundColor, - color: this.color - }}> + <div className="propertiesView-sectionTitle" + onDoubleClick={action((e) => { + this.isDouble = true; + this.props.onDoubleClick && this.props.onDoubleClick() + console.log("open options") + this.props.setIsOpen(true) + setTimeout(() => this.isDouble = false, 300) + })} + onClick={action((e) => { + this.props.setIsOpen(!this.props.isOpen) + })} + style={{ + background: this.props.isOpen ? this.variantColor : this.backgroundColor, + color: this.color + }}> {this.props.title} <div className="propertiesView-sectionTitle-icon"> <FontAwesomeIcon icon={this.props.isOpen ? 'caret-down' : 'caret-right'} size="lg" /> |