fixed FontIconBox scripts to set 'this' to fix tool bars buttons not working. enabled access to contextMenu in treeView and topBar even when hideContextMenu is set

2 files changed, 46 insertions, 54 deletions

diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 9eb716763..5135cfb57 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -33,7 +33,7 @@ import { LightboxView } from '../LightboxView';
 import { MainView } from '../MainView';
 import { DefaultStyleProvider } from '../StyleProvider';
 import { CollectionFreeFormDocumentView } from '../nodes/CollectionFreeFormDocumentView';
-import { DocumentView, OpenWhereMod } from '../nodes/DocumentView';
+import { DocumentView, DocumentViewInternal, OpenWhereMod } from '../nodes/DocumentView';
 import { RichTextMenu } from '../nodes/formattedText/RichTextMenu';
 import { CollectionDockingView } from './CollectionDockingView';
 import './CollectionMenu.scss';
@@ -129,7 +129,7 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> {
                     docViewPath={returnEmptyDoclist}
                     moveDocument={returnFalse}
                     addDocument={returnFalse}
-                    addDocTab={returnFalse}
+                    addDocTab={DocumentViewInternal.addDocTabFunc}
                     pinToPres={emptyFunction}
                     removeDocument={returnFalse}
                     ScreenToLocalTransform={this.buttonBarXf}
@@ -154,21 +154,21 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> {
 
         const hardCodedButtons = (
             <div className={`hardCodedButtons`}>
-                <Toggle 
-                    toggleType={ToggleType.BUTTON} 
-                    type={Type.PRIM} 
-                    color={StrCast(Doc.UserDoc().userColor)} 
-                    onClick={this.toggleTopBar} 
-                    toggleStatus={SettingsManager.headerBarHeight > 0} 
+                <Toggle
+                    toggleType={ToggleType.BUTTON}
+                    type={Type.PRIM}
+                    color={StrCast(Doc.UserDoc().userColor)}
+                    onClick={this.toggleTopBar}
+                    toggleStatus={SettingsManager.headerBarHeight > 0}
                     icon={<FontAwesomeIcon icon={headerIcon} size="lg" />}
                     tooltip={headerTitle}
                 />
-                <Toggle 
-                    toggleType={ToggleType.BUTTON} 
+                <Toggle
+                    toggleType={ToggleType.BUTTON}
                     type={Type.PRIM}
-                    color={StrCast(Doc.UserDoc().userColor)} 
-                    onClick={this.toggleProperties} 
-                    toggleStatus={SettingsManager.propertiesWidth > 0} 
+                    color={StrCast(Doc.UserDoc().userColor)}
+                    onClick={this.toggleProperties}
+                    toggleStatus={SettingsManager.propertiesWidth > 0}
                     icon={<FontAwesomeIcon icon={propIcon} size="lg" />}
                     tooltip={propTitle}
                 />
@@ -178,11 +178,12 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> {
         // NEW BUTTONS
         //dash col linear view buttons
         const contMenuButtons = (
-            <div className="collectionMenu-container" 
-            style={{
-                background: StrCast(Doc.UserDoc().userBackgroundColor),
-                // borderColor: StrCast(Doc.UserDoc().userColor)
-            }} >
+            <div
+                className="collectionMenu-container"
+                style={{
+                    background: StrCast(Doc.UserDoc().userBackgroundColor),
+                    // borderColor: StrCast(Doc.UserDoc().userColor)
+                }}>
                 {this.contMenuButtons}
                 {hardCodedButtons}
             </div>
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index d904749b1..51c70633c 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -222,10 +222,8 @@ export class TreeView extends React.Component<TreeViewProps> {
             this.treeViewOpen = !this.treeViewOpen;
         } else {
             // choose an appropriate embedding or make one. --- choose the first embedding that (1) user owns,  (2) has no context field ... otherwise make a new embedding
-            const bestEmbedding =  docView.rootDoc.author === Doc.CurrentUserEmail && !Doc.IsDataProto(docView.props.Document)
-                    ? docView.rootDoc
-                    : Doc.BestEmbedding(docView.rootDoc);
-              this.props.addDocTab(bestEmbedding, OpenWhere.lightbox);
+            const bestEmbedding = docView.rootDoc.author === Doc.CurrentUserEmail && !Doc.IsDataProto(docView.props.Document) ? docView.rootDoc : Doc.BestEmbedding(docView.rootDoc);
+            this.props.addDocTab(bestEmbedding, OpenWhere.lightbox);
         }
     };
 
@@ -540,8 +538,8 @@ export class TreeView extends React.Component<TreeViewProps> {
         TraceMobx();
         const expandKey = this.treeViewExpandedView;
         const sortings = (this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.TreeViewSortings) as { [key: string]: { color: string; icon: JSX.Element | string } }) ?? {};
-        const color = this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Color)
-        console.log("tree view", color, this.doc.title, Doc.IsSystem(this.doc))
+        const color = this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Color);
+        console.log('tree view', color, this.doc.title, Doc.IsSystem(this.doc));
         if (['links', 'annotations', 'embeddings', this.fieldKey].includes(expandKey)) {
             const sorting = StrCast(this.doc.treeViewSortCriterion, TreeSort.None);
             const sortKeys = Object.keys(sortings);
@@ -581,9 +579,10 @@ export class TreeView extends React.Component<TreeViewProps> {
                 );
             }
             return (
-                <div style={{ 
-                    color: color
-                 }}>
+                <div
+                    style={{
+                        color: color,
+                    }}>
                     {!docs?.length || this.props.AddToMap /* hack to identify pres box trees */ ? null : (
                         <div className={'treeView-sorting'}>
                             <IconButton
@@ -725,26 +724,19 @@ export class TreeView extends React.Component<TreeViewProps> {
                 }>
                 {this.props.treeView.outlineMode ? (
                     !(this.doc.text as RichTextField)?.Text ? null : (
-                        <IconButton
-                            color={color} 
-                            icon={<FontAwesomeIcon 
-                            icon={[this.childDocs?.length && !this.treeViewOpen ? 'fas' : 'far', 'circle']} />}
-                            size={Size.XSMALL}
-                        />
+                        <IconButton color={color} icon={<FontAwesomeIcon icon={[this.childDocs?.length && !this.treeViewOpen ? 'fas' : 'far', 'circle']} />} size={Size.XSMALL} />
                     )
                 ) : (
                     <div className="treeView-bulletIcons" style={{ color: Doc.IsSystem(DocCast(this.doc.proto)) ? 'red' : undefined }}>
-                        {this.onCheckedClick ? <IconButton
-                            color={color} 
-                            icon={<FontAwesomeIcon size="sm" icon={checked === 'check' ? 'check' : checked === 'x' ? 'times' : checked === 'unchecked' ? 'square' : !this.treeViewOpen ? 'caret-right' : 'caret-down'} />}
-                            size={Size.XSMALL}
-                        /> : 
+                        {this.onCheckedClick ? (
                             <IconButton
-                                color={color} 
-                                icon={<FontAwesomeIcon icon={iconType as IconProp} />}
+                                color={color}
+                                icon={<FontAwesomeIcon size="sm" icon={checked === 'check' ? 'check' : checked === 'x' ? 'times' : checked === 'unchecked' ? 'square' : !this.treeViewOpen ? 'caret-right' : 'caret-down'} />}
                                 size={Size.XSMALL}
                             />
-                        }
+                        ) : (
+                            <IconButton color={color} icon={<FontAwesomeIcon icon={iconType as IconProp} />} size={Size.XSMALL} />
+                        )}
                     </div>
                 )}
             </div>
@@ -776,17 +768,15 @@ export class TreeView extends React.Component<TreeViewProps> {
         return this.props.treeViewHideHeaderFields() || this.doc.treeViewHideHeaderFields ? null : (
             <>
                 {customHeaderButtons} {/* e.g.,. hide button is set by dashboardStyleProvider */}
-                {this.doc._layout_hideContextMenu ? null : (
-                    <IconButton
-                        color={color} 
-                        icon={<FontAwesomeIcon icon="bars" />}
-                        size={Size.XSMALL}
-                        onClick={e => {
-                            this.showContextMenu(e);
-                            e.stopPropagation();
-                        }}
-                    />
-                )}
+                <IconButton
+                    color={color}
+                    icon={<FontAwesomeIcon icon="bars" />}
+                    size={Size.XSMALL}
+                    onClick={e => {
+                        this.showContextMenu(e);
+                        e.stopPropagation();
+                    }}
+                />
                 {Doc.noviceMode ? null : this.doc.treeViewExpandedViewLock || Doc.IsSystem(this.doc) ? null : (
                     <span className="collectionTreeView-keyHeader" title="type of expanded data" key={this.treeViewExpandedView} onPointerDown={this.expandNextviewType}>
                         {this.treeViewExpandedView}
@@ -1015,9 +1005,10 @@ export class TreeView extends React.Component<TreeViewProps> {
                     onPointerEnter={this.onPointerEnter}
                     onPointerLeave={this.onPointerLeave}>
                     {contents}
-                    <div className={`treeView-background`}
+                    <div
+                        className={`treeView-background`}
                         style={{
-                            background: StrCast(Doc.UserDoc().userColor)
+                            background: StrCast(Doc.UserDoc().userColor),
                         }}
                     />
                 </div>