fixing buttons tues morn

4 files changed, 85 insertions, 77 deletions

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 50f451c0a..541b74722 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -810,7 +810,7 @@ export class MainView extends React.Component {
                         {this.dockingContent}
 
                         {this._hideUI ? null : (
-                            <div className="mainView-propertiesDragger" key="props" onPointerDown={this.onPropertiesPointerDown} style={{ right: this.propertiesWidth() - 1 }}>
+                            <div className="mainView-propertiesDragger" key="props" onPointerDown={this.onPropertiesPointerDown} style={{ right: this.propertiesWidth() - 1, background : 'linen' }}>
                                 <FontAwesomeIcon icon={this.propertiesWidth() < 10 ? 'chevron-left' : 'chevron-right'} color={this.colorScheme === ColorScheme.Dark ? Colors.WHITE : Colors.BLACK} size="sm" />
                             </div>
                         )}
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 749b33539..7527a0793 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -56,7 +56,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         const targetDoc = useUserDoc ? Doc.UserDoc() : this.selectedDoc;
         const onPropToggle = (dv: Opt<DocumentView>, doc: Doc, prop: string) => ((dv?.layoutDoc || doc)[prop] = (dv?.layoutDoc || doc)[prop] ? false : true);
 
-        console.log('current icon ' + icon(targetDoc?.[property]));
+     //   console.log('current icon ' + icon(targetDoc?.[property]));
 
         return !targetDoc ? null : (
             <Tooltip title={<div className={`dash-tooltip`}>{tooltip(targetDoc?.[property])} </div>} placement="top">
@@ -141,14 +141,14 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         );
     }
 
-    // @computed get forceActiveButton() { // WHAT HAPPENS HERE
-    //     return this.propertyToggleBtn(
-    //         on => 'Active',
-    //         '_forceActive',
-    //         on => `${on ? 'Select to activate' : 'Contents always active'} `,
-    //         on => 'eye'
-    //     );
-    // }
+    @computed get forceActiveButton() { //select text
+        return this.propertyToggleBtn(
+            on => 'Active',
+            '_forceActive',
+            on => `${on ? 'Select to activate' : 'Contents always active'} `,
+            on => 'eye'
+        );
+    }
 
     @computed get fitContentButton() {
         return this.propertyToggleBtn(
@@ -162,7 +162,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     // // this implments a container pattern by marking the targetDoc (collection) as a lightbox
     // // that always fits its contents to its container and that hides all other documents when
     // // a link is followed that targets a 'lightbox' destination
-    // @computed get isLightboxButton() { WHAT IS THIS
+    // @computed get isLightboxButton() { // developer
     //     return this.propertyToggleBtn(
     //         on => 'Lightbox',
     //         'isLightbox',
@@ -205,31 +205,31 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         );
     }
 
-    // @computed get chromeButton() { // WHAT
-    //     return this.propertyToggleBtn(
-    //         on => 'Controls',
-    //         '_chromeHidden',
-    //         on => `${on ? 'Show' : 'Hide'} editing UI`,
-    //         on => 'edit',
-    //         (dv, doc) => ((dv?.rootDoc || doc)._chromeHidden = !(dv?.rootDoc || doc)._chromeHidden)
-    //     );
-    // }
+    @computed get chromeButton() { // developer -- removing UI decoration
+        return this.propertyToggleBtn(
+            on => 'Controls',
+            '_chromeHidden',
+            on => `${on ? 'Show' : 'Hide'} editing UI`,
+            on => 'edit',
+            (dv, doc) => ((dv?.rootDoc || doc)._chromeHidden = !(dv?.rootDoc || doc)._chromeHidden)
+        );
+    }
 
-    // @computed get layout_autoHeightButton() { // shouldn't be here unless you can set it back to its original size
-    //     return this.propertyToggleBtn(
-    //         on => 'Auto\xA0Size',
-    //         '_layout_autoHeight',
-    //         on => `Automatical vertical sizing to show all content`,
-    //         on => 'arrows-alt-v'
-    //     );
-    // }
+    @computed get layout_autoHeightButton() { // shouldn't be here unless you can set it back to its original size
+        return this.propertyToggleBtn(
+            on => 'Auto\xA0Size',
+            '_layout_autoHeight',
+            on => `Automatical vertical sizing to show all content`,
+            on => 'arrows-alt-v'
+        );
+    }
 
     @computed get gridButton() {
         return this.propertyToggleBtn(
             on => (on ? 'HIDE GRID' : 'DISPLAY GRID'),
             '_freeform_backgroundGrid',
             on => `Display background grid in collection`,
-            on => (on ? <MdGridOn /> : <MdGridOff />) //'border-all'
+            on => (on ? <MdGridOff /> :<MdGridOn /> ) //'border-all'
         );
     }
 
@@ -294,23 +294,23 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     //         </Tooltip>
     //     );
     // }
-    @computed
-    get perspectiveButton() {
-        return !this.selectedDoc ? null : (
-            <Tooltip title={<div className="dash-tooltip">Choose view perspective</div>} placement="top">
-                <div>
-                    <div className="propertiesButtons-linkFlyout">
-                        <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={this.onPerspectiveFlyout}>
-                            <div className={'propertiesButtons-linkButton-empty'} onPointerDown={e => e.stopPropagation()}>
-                                <FontAwesomeIcon className="documentdecorations-icon" icon="mouse-pointer" size="lg" />
-                            </div>
-                        </Flyout>
-                    </div>
-                    <div className="propertiesButtons-title"> Perspective </div>
-                </div>
-            </Tooltip>
-        );
-    }
+    // @computed
+    // get perspectiveButton() { //WHERE ARE YOU
+    //     return !this.selectedDoc ? null : (
+    //         <Tooltip title={<div className="dash-tooltip">Choose view perspective</div>} placement="top">
+    //             <div>
+    //                 <div className="propertiesButtons-linkFlyout">
+    //                     <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={this.onPerspectiveFlyout}>
+    //                         <div className={'propertiesButtons-linkButton-empty'} onPointerDown={e => e.stopPropagation()}>
+    //                             <FontAwesomeIcon className="documentdecorations-icon" icon="mouse-pointer" size="lg" />
+    //                         </div>
+    //                     </Flyout>
+    //                 </div>
+    //                 <div className="propertiesButtons-title"> Perspective </div>
+    //             </div>
+    //         </Tooltip>
+    //     );
+    // }
 
     @undoBatch
     handlePerspectiveChange = (e: any) => {
@@ -447,13 +447,13 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                 {/* {toggle(this.onClickButton)} */}
                 {toggle(this.layout_fitWidthButton)}
                 {/* {toggle(this.freezeThumb)} */}
-                {/* {toggle(this.forceActiveButton)} */}
+                {toggle(this.forceActiveButton)}
                 {toggle(this.fitContentButton, { display: !isFreeForm && !isMap ? 'none' : '' })}
                 {/* {toggle(this.isLightboxButton, { display: !isFreeForm && !isMap ? 'none' : '' })} */}
-                {/* {toggle(this.layout_autoHeightButton, { display: !isText && !isStacking && !isTree ? 'none' : '' })} */}
+                {toggle(this.layout_autoHeightButton, { display: !isText && !isStacking && !isTree ? 'none' : '' })}
                 {toggle(this.maskButton, { display: !isInk ? 'none' : '' })}
                 {toggle(this.hideImageButton, { display: !isImage ? 'none' : '' })}
-                {/* {toggle(this.chromeButton, { display: !isCollection || isNovice ? 'none' : '' })} */}
+                {toggle(this.chromeButton, { display: !isCollection || isNovice ? 'none' : '' })}
                 {toggle(this.gridButton, { display: !isCollection ? 'none' : '' })}
                 {/* {toggle(this.groupButton, { display: isTabView || !isCollection ? 'none' : '' })} */}
                 {/* {toggle(this.snapButton, { display: !isCollection ? 'none' : '' })} */}
diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss
index 49f2fc6fe..a9577b232 100644
--- a/src/client/views/PropertiesView.scss
+++ b/src/client/views/PropertiesView.scss
@@ -14,6 +14,10 @@
     overflow-x: hidden;
     overflow-y: auto;
 
+    .propertiesView-propAndInfoGrouping{
+        display: flex;
+    }
+
     .propertiesView-title {
         text-align: left;
         padding-top: 12px;
@@ -40,6 +44,13 @@
         }
     }
 
+    .propertiesView-info{
+        margin-top: 20;
+        margin-right: 10;
+        float: right;
+        font-size: 20;
+    }
+
     .propertiesView-name {
        // border-bottom: 1px solid black;
         padding: 8.5px;
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 9c327b3f1..6b208f25e 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -1,6 +1,6 @@
 import React = require('react');
 import { IconLookup } from '@fortawesome/fontawesome-svg-core';
-import { faAnchor, faArrowRight, faWindowMaximize } from '@fortawesome/free-solid-svg-icons';
+import { faAnchor, faArrowRight, faListNumeric, faWindowMaximize } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Checkbox, Icon, Tooltip } from '@material-ui/core';
 import { intersection } from 'lodash';
@@ -37,6 +37,7 @@ import { DefaultStyleProvider } from './StyleProvider';
 import { RichTextField } from '../../fields/RichTextField';
 import { AiFillFileText } from "react-icons/ai" //* as Icons from "react-icons/ai" //
 import * as Icons from "react-icons/bs" //{BsCollectionFill, BsFillFileEarmarkImageFill} from "react-icons/bs"
+import { GrCircleInformation } from 'react-icons/gr'
 import { CgBrowser} from "react-icons/cg"
 import { ImageField, VideoField, WebField } from '../../fields/URLField';
 import { FaFileVideo } from 'react-icons/fa'; //* as Icons from "react-icons/fa"; //
@@ -114,6 +115,9 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     @observable inOptions: boolean = false;
     @observable _controlButton: boolean = false;
 
+
+    @observable allClose: boolean = false;
+
     componentDidMount() {
         this.selectedDocListenerDisposer?.();
         // this.selectedDocListenerDisposer = autorun(() => this.openFilters && this.selectedDoc && this.checkFilterDoc());
@@ -504,7 +508,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     }
 
     @computed get currentType() {
-        console.log("current type " + this.selectedDoc?.type)
+       // console.log("current type " + this.selectedDoc?.type)
 
         const documentType = StrCast(this.selectedDoc?.type)
         var currentType: string = documentType;
@@ -1201,37 +1205,23 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         );
     }
 
-    @computed get doubleClickClose() {
-        //action(() => (this.openContexts = false, this.openOptions = false, this.openTransform = !this.openTransform))
-        //console.log(this.openContexts + " hello " + this.openOptions + this.openTransform + this.openLinks + this.openFields)
-        if (this.openContexts || this.openOptions || this.openTransform || this.openLinks || this.openFields){
-            this.openContexts = false;
-            this.openOptions = false;
-            this.openTransform = false;
-            this.openLinks = false;
-            this.openFields = false;
-            
-        } else if (!this.openContexts && !this.openOptions && !this.openTransform && !this.openLinks && !this.openFields){
-            this.openContexts = true;
-            this.openOptions = true;
-            this.openTransform = true;
-            this.openLinks = true;
-            this.openFields = true;
 
-        }
-        
-        return (
-            console.log("made")
-        )
-    }
+// create observable with current property
+// if everyother one is closed, set allClsoe  = true
+// on double click close all except current
+// if everything is closed on double clikc then open everythigng 
+
+// if everythign is closed except current property ==> double click = open all
+// else ==> double click = close except current property
 
     @computed get linksSubMenu() {
     //     onPointerDown={action(() => (this.openLinks = !this.openLinks))}
-        
+    //(this.openContexts = false, this.openOptions = false, this.openTransform = false))} onClick={action(() => (this.openLinks = !this.openLinks))
+        //this.allClose == false ? (this.openContexts = false , this.allClose = true ): (this.openContexts = true, this.allClose = false)
         return (
             <div className="propertiesView-contexts">
             
-                <div className="propertiesView-contexts-title" onDoubleClick={action(() => ( this.doubleClickClose, this.openLinks = true))} onClick={action(() => (this.openLinks = !this.openLinks))} style={{ backgroundColor: this.openLinks ? 'black' : '' }}>
+                <div className="propertiesView-contexts-title" style={{ backgroundColor: this.openLinks ? 'black' : '' }}>
                     Linked To
                     <div className="propertiesView-contexts-title-icon">
                         <FontAwesomeIcon icon={this.openLinks ? 'caret-down' : 'caret-right'} size="lg" color="white" />
@@ -1492,9 +1482,16 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                             minWidth: this.props.width,
                             //overflowY: this.scrolling ? "scroll" : "visible"
                         }}>
-                        <div className="propertiesView-title" style={{ width: this.props.width }}>
-                            Properties
+                        <div className = "propertiesView-propAndInfoGrouping">
+                            <div className="propertiesView-title" style={{ width: this.props.width }}>
+                                Properties
+                            </div>
+                            <div className = "propertiesView-info" onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/')}>
+                                 <GrCircleInformation/> </div>
+
                         </div>
+
+                        
                         <div className="propertiesView-name">{this.editableTitle}</div>
 
                         <div className = "propertiesView-type"> {this.currentType} </div>