From c13c54f4ab45ab098efe991a403f8fc0a2467704 Mon Sep 17 00:00:00 2001
From: eperelm2 <emily_perelman@brown.edu>
Date: Tue, 18 Jul 2023 12:35:52 -0400
Subject: merged with master for component library

---
 src/client/views/PropertiesSection.tsx | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

(limited to 'src/client/views/PropertiesSection.tsx')

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"  />
-- 
cgit v1.2.3-70-g09d2