diff options
author | eperelm2 <emily_perelman@brown.edu> | 2023-06-22 11:26:24 -0400 |
---|---|---|
committer | eperelm2 <emily_perelman@brown.edu> | 2023-06-22 11:26:24 -0400 |
commit | e0757ecfe8666a13a38b1c396d4a9e5138b4a3bd (patch) | |
tree | ef2234841644542d6fbb615ce9ef4f97a1d0c8eb /src | |
parent | ddf20606684cd8755571a82eed1c4ffdc27f9274 (diff) |
double clicking works
Diffstat (limited to 'src')
-rw-r--r-- | src/client/views/PropertiesView.tsx | 196 |
1 files changed, 176 insertions, 20 deletions
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index a0c45bc70..60e93cdfd 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -1050,11 +1050,34 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { } @computed get optionsSubMenu() { + let isDouble = false; + return ( <div className="propertiesView-settings" onPointerEnter={action(() => (this.inOptions = true))} onPointerLeave={action(() => (this.inOptions = false))}> - <div className="propertiesView-settings-title" onDoubleClick={action(() => (this.openContexts = false, this.openLinks = false, this.openTransform = false, - this.openFields = false, this.openSharing = false, this.openFilters = false, this.openLayout = false))} - onClick={action(() => (this.openOptions = !this.openOptions))} style={{ backgroundColor: this.openOptions ? 'black' : '' }}> + <div className="propertiesView-settings-title" onClick ={action(() => { + if (!isDouble){ + this.openOptions = !this.openOptions + } } )} + onDoubleClick={action(() => { + isDouble = true; + + this.openContexts = false; + this.openLinks = false; + this.openOptions = true; + this.openTransform = false; + this.openFields = false; + this.openSharing = false; + this.openLayout = false; + this.openFilters = false; + + + setTimeout(() => { + isDouble = false; + }, 300) + } + + )} + style={{ backgroundColor: this.openOptions ? 'black' : '' }}> Options <div className="propertiesView-settings-title-icon"> <FontAwesomeIcon icon={this.openOptions ? 'caret-down' : 'caret-right'} size="lg" color="white" /> @@ -1070,11 +1093,32 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { } @computed get sharingSubMenu() { + let isDouble:boolean = false; + return ( <div className="propertiesView-sharing"> - <div className="propertiesView-sharing-title" onDoubleClick={action(() => (this.openContexts = false, this.openLinks = false, this.openTransform = false, - this.openOptions = false, this.openFields = false, this.openFilters = false, this.openLayout))} - onClick={action(() => (this.openSharing = !this.openSharing))} style={{ backgroundColor: this.openSharing ? 'black' : '' }}> + <div className="propertiesView-sharing-title" onClick ={action(() => { + if (!isDouble){ + this.openSharing = !this.openSharing + } } )} + onDoubleClick={action(() => { + isDouble = true; + + this.openContexts = false; + this.openLinks = false; + this.openOptions = false; + this.openTransform = false; + this.openFields = false; + this.openSharing = true; + this.openLayout = false; + this.openFilters = false; + + + setTimeout(() => { + isDouble = false; + }, 300) + })} + style={{ backgroundColor: this.openSharing ? 'black' : '' }}> Sharing {'&'} Permissions <div className="propertiesView-sharing-title-icon"> <FontAwesomeIcon icon={this.openSharing ? 'caret-down' : 'caret-right'} size="lg" color="white" /> @@ -1127,11 +1171,34 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { }; @computed get filtersSubMenu() { + let isDouble: boolean = false; + return ( <div className="propertiesView-filters"> - <div className="propertiesView-filters-title" onDoubleClick={action(() => (this.openContexts = false, this.openLinks = false, this.openTransform = false, - this.openOptions = false, this.openFields = false, this.openSharing = false, this.openLayout = false))} - onClick={action(() => (this.openFilters = !this.openFilters))} style={{ backgroundColor: this.openFilters ? 'black' : '' }}> + <div className="propertiesView-filters-title" onClick ={action(() => { + if (!isDouble){ + this.openFilters = !this.openFilters + } } )} + onDoubleClick={action(() => { + isDouble = true; + + this.openContexts = false; + this.openLinks = false; + this.openOptions = false; + this.openTransform = false; + this.openFields = false; + this.openSharing = false; + this.openLayout = false; + this.openFilters = true; + + + setTimeout(() => { + isDouble = false; + }, 300) + } + + )} + style={{ backgroundColor: this.openFilters ? 'black' : '' }}> Filters <div className="propertiesView-filters-title-icon"> <FontAwesomeIcon icon={this.openFilters ? 'caret-down' : 'caret-right'} size="lg" color="white" /> @@ -1147,6 +1214,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { } @computed get inkSubMenu() { + let isDouble = false; + return ( <> {!this.isInk ? null : ( @@ -1162,8 +1231,27 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { )} <div className="propertiesView-transform"> - <div className="propertiesView-transform-title" onClick={action(() => (this.openTransform = !this.openTransform))} onDoubleClick={action(() => (this.openContexts = false, this.openLinks = false, this.openOptions = false, - this.openFields = false, this.openSharing = false, this.openFilters = false, this.openLayout = false, this.openTransform = true))} + <div className="propertiesView-transform-title" onClick ={action(() => { + if (!isDouble){ + this.openTransform = !this.openTransform + } } )} + onDoubleClick={action(() => { + isDouble = true; + + this.openContexts = false; + this.openLinks = false; + this.openOptions = false; + this.openTransform = true; + this.openFields = false; + this.openSharing = false; + this.openLayout = false; + this.openFilters = false; + + + setTimeout(() => { + isDouble = false; + }, 300) + })} style={{ backgroundColor: this.openTransform ? 'black' : '' }}> Transform <div className="propertiesView-transform-title-icon"> @@ -1177,11 +1265,34 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { } @computed get fieldsSubMenu() { + let isDouble: boolean = false; + return ( <div className="propertiesView-fields"> - <div className="propertiesView-fields-title" onDoubleClick={action(() => (this.openContexts = false, this.openLinks = false, this.openTransform = false, - this.openOptions = false, this.openSharing = false, this.openFilters = false, this.openLayout = false))} - onClick={action(() => (this.openFields = !this.openFields))} style={{ backgroundColor: this.openFields ? 'black' : '' }}> + <div className="propertiesView-fields-title" onClick ={action(() => { + if (!isDouble){ + this.openFields = !this.openFields + } } )} + onDoubleClick={action(() => { + isDouble = true; + + this.openContexts = false; + this.openLinks = false; + this.openOptions = false; + this.openTransform = false; + this.openFields = true; + this.openSharing = false; + this.openLayout = false; + this.openFilters = false; + + + setTimeout(() => { + isDouble = false; + }, 300) + } + + )} + style={{ backgroundColor: this.openFields ? 'black' : '' }}> Fields {'&'} Tags <div className="propertiesView-fields-title-icon"> <FontAwesomeIcon icon={this.openFields ? 'caret-down' : 'caret-right'} size="lg" color="white" /> @@ -1199,11 +1310,33 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { } @computed get contextsSubMenu() { + let isDouble = false; return ( <div className="propertiesView-contexts"> - <div className="propertiesView-contexts-title" onDoubleClick={action(() => (this.openLinks = false, this.openTransform = false, this.openOptions = false, this.openFields = false, - this.openSharing = false, this.openFilters = false, this.openLayout = false ))} - onClick ={action(() => (this.openContexts = !this.openContexts))} style={{ backgroundColor: this.openContexts ? 'black' : '' }}> + <div className="propertiesView-contexts-title" onClick ={action(() => { + if (!isDouble){ + this.openContexts = !this.openContexts + } } )} + onDoubleClick={action(() => { + isDouble = true; + + this.openContexts = true; + this.openLinks = false; + this.openOptions = false; + this.openTransform = false; + this.openFields = false; + this.openSharing = false; + this.openLayout = false; + this.openFilters = false; + + + setTimeout(() => { + isDouble = false; + }, 300) + } + + )} + style={{ backgroundColor: this.openContexts ? 'black' : '' }}> Other Contexts <div className="propertiesView-contexts-title-icon"> <FontAwesomeIcon icon={this.openContexts ? 'caret-down' : 'caret-right'} size="lg" color="white" /> @@ -1260,11 +1393,34 @@ export class PropertiesView extends React.Component<PropertiesViewProps> { } @computed get layoutSubMenu() { + let isDouble: boolean = false; + return ( <div className="propertiesView-layout"> - <div className="propertiesView-layout-title" onDoubleClick={action(() => (this.openContexts = false, this.openLinks = false, this.openTransform = false, - this.openOptions = false, this.openFields = false, this.openSharing = false, this.openFilters = false ))} - onClick={action(() => (this.openLayout = !this.openLayout))} style={{ backgroundColor: this.openLayout ? 'black' : '' }}> + <div className="propertiesView-layout-title" onClick ={action(() => { + if (!isDouble){ + this.openLayout = !this.openLayout + } } )} + onDoubleClick={action(() => { + isDouble = true; + + this.openContexts = false; + this.openLinks = false; + this.openOptions = false; + this.openTransform = false; + this.openFields = false; + this.openSharing = false; + this.openLayout = true; + this.openFilters = false; + + + setTimeout(() => { + isDouble = false; + }, 300) + } + + )} + style={{ backgroundColor: this.openLayout ? 'black' : '' }}> Layout <div className="propertiesView-layout-title-icon"> <FontAwesomeIcon icon={this.openLayout ? 'caret-down' : 'caret-right'} size="lg" color="white" /> |