row menu rework, icons mostly good

1 files changed, 36 insertions, 40 deletions

diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index da272cd18..8e4161413 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -1,9 +1,9 @@
 import { IconButton, Size } from 'browndash-components';
-import { computed, makeObservable } from 'mobx';
+import { computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { computedFn } from 'mobx-utils';
 import * as React from 'react';
-import { CgClose, CgLock, CgLockUnlock } from 'react-icons/cg';
+import { CgClose, CgLock, CgLockUnlock, CgMenu } from 'react-icons/cg';
 import { FaExternalLinkAlt } from 'react-icons/fa';
 import { returnFalse, setupMoveUpEvents } from '../../../../ClientUtils';
 import { emptyFunction } from '../../../../Utils';
@@ -18,6 +18,8 @@ import { OpenWhere } from '../../nodes/OpenWhere';
 import { CollectionSchemaView } from './CollectionSchemaView';
 import './CollectionSchemaView.scss';
 import { SchemaTableCell } from './SchemaTableCell';
+import { ContextMenu } from '../../ContextMenu';
+import { CollectionFreeFormView } from '../collectionFreeForm';
 
 interface SchemaRowBoxProps extends FieldViewProps {
     rowIndex: number;
@@ -28,6 +30,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
         return FieldView.LayoutString(SchemaRowBox, fieldKey).replace('fieldKey', `rowIndex={${rowIndex}} fieldKey`);
     }
     private _ref: HTMLDivElement | null = null;
+    @observable _childrenAddedToSchema: boolean = false;
 
     constructor(props: SchemaRowBoxProps) {
         super(props);
@@ -52,6 +55,33 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
         this._props.setContentViewBox?.(this);
     }
 
+    openContextMenu = (x: number, y: number) => {
+        ContextMenu.Instance.clearItems();
+        ContextMenu.Instance.addItem({
+            description: `Close doc`,
+            event: () => this._props.removeDocument?.(this.Document),
+            icon: 'minus',
+        });
+        ContextMenu.Instance.addItem({
+            description: this.Document._lockedPosition ? 'Unlock doc interactions' : 'Lock doc interactions',
+            event: () => Doc.toggleLockedPosition(this.Document),
+            icon: this.Document._lockedPosition ? 'lock-open' : 'lock',
+        });
+        ContextMenu.Instance.addItem({
+            description: 'Open preview',
+            event: () => this._props.addDocTab(this.Document, OpenWhere.addRight),
+            icon: 'magnifying-glass',
+        });
+        if (this.Document['type'] === 'collection') {
+                ContextMenu.Instance.addItem({
+                description: 'Add children to schema',
+                event: () => this.schemaView.addDocsFromChildCollection(this.Document as unknown as CollectionSchemaView),
+                icon: 'plus',
+            });
+        }
+        ContextMenu.Instance.displayMenu(x, y, undefined, false);
+    }
+
     cleanupField = (field: string) => this.schemaView.cleanupComputedField(field)
     setCursorIndex = (mouseY: number) => this.schemaView?.setRelCursorIndex(mouseY);
     selectedCol = () => this.schemaView._selectedCol;
@@ -78,42 +108,8 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                         pointerEvents: !this._props.isContentActive() ? 'none' : undefined,
                     }}>
                     <IconButton
-                        tooltip="close"
-                        icon={<CgClose size="16px" />}
-                        size={Size.XSMALL}
-                        onPointerDown={e =>
-                            setupMoveUpEvents(
-                                this,
-                                e,
-                                returnFalse,
-                                emptyFunction,
-                                undoable(clickEv => {
-                                    clickEv.stopPropagation();
-                                    this._props.removeDocument?.(this.Document);
-                                }, 'Delete Row')
-                            )
-                        }
-                    />
-                    <IconButton
-                        tooltip="whether document interactions are enabled"
-                        icon={this.Document._lockedPosition ? <CgLockUnlock size="12px" /> : <CgLock size="12px" />}
-                        size={Size.XSMALL}
-                        onPointerDown={e =>
-                            setupMoveUpEvents(
-                                this,
-                                e,
-                                returnFalse,
-                                emptyFunction,
-                                undoable(clickEv => {
-                                    clickEv.stopPropagation();
-                                    Doc.toggleLockedPosition(this.Document);
-                                }, 'toggle document lock')
-                            )
-                        }
-                    />
-                    <IconButton
-                        tooltip="open preview"
-                        icon={<FaExternalLinkAlt />}
+                        tooltip="Open actions menu"
+                        icon={ <CgMenu size="12px" /> }
                         size={Size.XSMALL}
                         onPointerDown={e =>
                             setupMoveUpEvents(
@@ -123,8 +119,8 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
                                 emptyFunction,
                                 undoable(clickEv => {
                                     clickEv.stopPropagation();
-                                    this._props.addDocTab(this.Document, OpenWhere.addRight);
-                                }, 'Open schema Doc preview')
+                                    this.openContextMenu(e.clientX, e.clientY)
+                                }, 'open actions menu')
                             )
                         }
                     />