basics double clicking, fixed customizable options for icons and text

2 files changed, 59 insertions, 48 deletions

diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 247368685..3d61ee273 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -22,8 +22,10 @@ import { pasteImageBitmap } from './nodes/WebBoxRenderer';
 import './PropertiesButtons.scss';
 import React = require('react');
 import { JsxElement } from 'typescript';
-import { FaBraille, FaThumbtack } from 'react-icons/fa';
-import { AiOutlineApple } from 'react-icons/ai';
+import { FaBraille, FaHighlighter, FaThumbtack } from 'react-icons/fa';
+import { AiOutlineApple, AiOutlinePicture } from 'react-icons/ai';
+import { MdSubtitles, MdSubtitlesOff } from 'react-icons/md';
+import {TbHighlight, TbHighlightOff} from 'react-icons/tb'
 const higflyout = require('@hig/flyout');
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -45,9 +47,12 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         return !SelectionManager.SelectedSchemaDoc() && SelectionManager.Views().lastElement()?.topMost;
     }
 
-    propertyToggleBtn = (label: string, property: string, tooltip: (on?: any) => string, icon: (on: boolean) => any, onClick?: (dv: Opt<DocumentView>, doc: Doc, property: string) => void, useUserDoc?: boolean) => {
+    propertyToggleBtn = (label: (on?: any) => string, property: string, tooltip: (on?: any) => string, icon: (on?: any) => any, onClick?: (dv: Opt<DocumentView>, doc: Doc, property: string) => void, useUserDoc?: boolean) => {
         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])))
+
         return !targetDoc ? null : (
             <Tooltip title={<div className={`dash-tooltip`}>{tooltip(targetDoc?.[property])} </div>} placement="top">
                 <div className = 'propertiesButtons-iconAndText' >
@@ -59,9 +64,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                                 SelectionManager.Views().forEach(dv => (onClick ?? onPropToggle)(dv, dv.rootDoc, property));
                             } else if (targetDoc) (onClick ?? onPropToggle)(undefined, targetDoc, property);
                         }, property)}>
-                            <div className = "propertiesButtons-icon">  {icon((BoolCast(targetDoc?.[property])) as any)} </div>
+                            <div className = "propertiesButtons-icon">  {icon((targetDoc?.[property]) as any)} </div>
                       
-                          <div className="propertiesButtons-label">  {label}</div>
+                          <div className="propertiesButtons-label">  {label(targetDoc?.[property])}</div>
                         {/* <FontAwesomeIcon className="documentdecorations-icon" size="lg" icon={icon(BoolCast(targetDoc?.[property])) as any} /> */}
                     </div>
                   
@@ -70,35 +75,54 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             </Tooltip>
         );
     };
-    @computed get lockButton() {
+    
+
+
+    @computed get titleButton() {
         return this.propertyToggleBtn(
-            'No\xA0Drag',
-            '_lockedPosition',
-            on => `${on ? 'Unlock' : 'Lock'} position to prevent dragging`,
-            on => <AiOutlineApple/>
-           // on => 'thumbtack'
+            on => !on ?  'SHOW TITLE' : (this.selectedDoc?.['_layout_showTitle']) === 'title:hover' ? 'REMOVE TITLE' : 'HOVER TITLE' ,
+            '_layout_showTitle',
+            on => 'Switch between title styles',
+            on =>   on ?  <MdSubtitlesOff/> : <MdSubtitles/>, // {currentIcon}, //(on ?  <MdSubtitles/> :)  , //,'text-width', on ?  <MdSubtitles/> : <MdSubtitlesOff/>,
+            (dv, doc) => {
+                const tdoc = dv?.rootDoc || doc;
+                const newtitle = !tdoc._layout_showTitle ? 'title' : tdoc._layout_showTitle === 'title' ? 'title:hover' : '';
+                tdoc._layout_showTitle = newtitle;
+            }
         );
     }
-    // @computed get maskButton() {
-    //     return this.propertyToggleBtn(
-    //         'Mask',
-    //         'stroke_isInkMask',
-    //         on => (on ? 'Make plain ink' : 'Make highlight mask'),
-    //         on => 'paint-brush',
-    //         (dv, doc) => InkingStroke.toggleMask(dv?.layoutDoc || doc)
-    //     );
-    // }
-    // @computed get hideImageButton() {
+
+    // @computed get lockButton() {
     //     return this.propertyToggleBtn(
-    //         'Background',
-    //         '_hideImage',
-    //         on => (on ? 'Show Image' : 'Show Background'),
-    //         on => 'portrait'
+    //         'No\xA0Drag',
+    //         '_lockedPosition',
+    //         on => `${on ? 'Unlock' : 'Lock'} position to prevent dragging`,
+    //         on => <AiOutlineApple/>
+    //        // on => 'thumbtack'
     //     );
     // }
+    @computed get maskButton() { //highlight text while going down and reading through
+        return this.propertyToggleBtn(
+            on => on ? 'PLAIN INK':  'HIGHLIGHTER MASK',
+            'stroke_isInkMask',
+            on => (on ? 'Make plain ink' : 'Make highlight mask'),
+            on => on ? <TbHighlightOff/> : <TbHighlight/>, // <FaHighlighter/>,// 'paint-brush',
+            (dv, doc) => InkingStroke.toggleMask(dv?.layoutDoc || doc)
+        );
+    }
+ 
+    @computed get hideImageButton() { // put in developer -- can trace on top of object and drawing is still there
+        return this.propertyToggleBtn(
+            on => 'Background',
+            '_hideImage',
+            on => (on ? 'Show Image' : 'Show Background'),
+            on => <AiOutlinePicture/> //'portrait'
+        );
+    }
+
     @computed get clustersButton() {
         return this.propertyToggleBtn(
-            'Clusters',
+            on =>'Clusters',
             '_freeform_useClusters',
             on => `${on ? 'Hide' : 'Show'} clusters`,
             on => <FaBraille/>
@@ -180,19 +204,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     //         (dv, doc) => ((dv?.rootDoc || doc)._chromeHidden = !(dv?.rootDoc || doc)._chromeHidden)
     //     );
     // }
-    // @computed get titleButton() {
-    //     return this.propertyToggleBtn(
-    //         'Title',
-    //         '_layout_showTitle',
-    //         on => 'Switch between title styles',
-    //         on => 'text-width',
-    //         (dv, doc) => {
-    //             const tdoc = dv?.rootDoc || doc;
-    //             const newtitle = !tdoc._layout_showTitle ? 'title' : tdoc._layout_showTitle === 'title' ? 'title:hover' : '';
-    //             tdoc._layout_showTitle = newtitle;
-    //         }
-    //     );
-    // }
+
     // @computed get layout_autoHeightButton() {
     //     return this.propertyToggleBtn(
     //         'Auto\xA0Size',
@@ -416,19 +428,19 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         const isNovice = Doc.noviceMode;
         return !this.selectedDoc ? null : (
             <div className="propertiesButtons">
-                {/* {toggle(this.titleButton)}
-                {toggle(this.captionButton)} */}
-                 {toggle(this.lockButton)}
+                 {toggle(this.titleButton)}
+                   {/* {toggle(this.captionButton)} */}
+                 {/* {toggle(this.lockButton)} */}
                 {/*{toggle(this.onClickButton)}
                 {toggle(this.layout_fitWidthButton)}
                 {toggle(this.freezeThumb)}
                 {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.hideImageButton, { display: !isImage ? '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.tsx b/src/client/views/PropertiesView.tsx
index d956c874c..8d496e992 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -1201,13 +1201,12 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     }
 
     @computed get linksSubMenu() {
-    //     this.linkCount
-    //    this.links
+    //     onPointerDown={action(() => (this.openLinks = !this.openLinks))}
         
         return (
             <div className="propertiesView-contexts">
             
-                <div className="propertiesView-contexts-title" onPointerDown={action(() => (this.openLinks = !this.openLinks))} style={{ backgroundColor: this.openLinks ? 'black' : '' }}>
+                <div className="propertiesView-contexts-title" onDoubleClick={action(() => (this.openContexts = !this.openContexts, this.openOptions = !this.openOptions, this.openTransform = !this.openTransform))} onClick={action(() => (this.openLinks = !this.openLinks))} 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" />