col menu icon now shows only on hover

3 files changed, 18 insertions, 9 deletions

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 25a1b4819..affa70a62 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -209,7 +209,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         this._docs = this._docs.filter(d => d !== doc)
     }
 
-    rowIndex = (doc: Doc) => this.draggedSpliceDocs.docs.indexOf(doc);
+    rowIndex = (doc: Doc) => this.docsWithDrag.docs.indexOf(doc);
 
     @action
     onKeyDown = (e: KeyboardEvent) => {
@@ -581,7 +581,7 @@ export class CollectionSchemaView extends CollectionSubView() {
 
         const draggedDocs = de.complete.docDragData?.draggedDocuments;
         if (draggedDocs && super.onInternalDrop(e, de) && !this.sortField) {
-            const docs = this.draggedSpliceDocs.docs.slice();
+            const docs = this.docsWithDrag.docs.slice();
             this._docs = docs;
             this.clearSelection();
             draggedDocs.forEach(doc => {
@@ -1031,7 +1031,7 @@ export class CollectionSchemaView extends CollectionSubView() {
         return docs;
     }
     
-    @computed get draggedSpliceDocs() {
+    @computed get docsWithDrag() {
         const draggedDocs = this.isContentActive() ? DragManager.docsBeingDragged : [];
         let docs = [...this.docs];
         docs = docs.filter(d => !draggedDocs.includes(d));
@@ -1058,7 +1058,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     screenToLocal = () => this.ScreenToLocalBoxXf().translate(-this.tableWidth, 0);
     previewWidthFunc = () => this.previewWidth;
     onPassiveWheel = (e: WheelEvent) => e.stopPropagation();
-    displayedDocsFunc = () => this.draggedSpliceDocs.docs;
+    displayedDocsFunc = () => this.docsWithDrag.docs;
     _oldWheel: any;
     render() {
         return (
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index 0da186f81..0fe0033d4 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unused-prop-types */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, observable } from 'mobx';
+import { action, computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { returnEmptyDoclist, returnEmptyFilter, returnFalse, returnZero, setupMoveUpEvents } from '../../../../ClientUtils';
@@ -51,7 +51,7 @@ export interface SchemaColumnHeaderProps {
 export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHeaderProps> {
 
     @observable _altTitle: string | undefined = undefined;
-    @observable _displayKeysDropdown: boolean = false;
+    @observable _showMenuIcon: boolean = false;
 
     @computed get fieldKey() {
         return this._props.columnKeys[this._props.columnIndex];
@@ -59,6 +59,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
 
     constructor(props: SchemaColumnHeaderProps){
         super(props);
+        makeObservable(this);
         this._props.schemaView.openColumnMenu(0, false)
     }
     
@@ -196,6 +197,11 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
         return toRender;
     }
 
+    @action handlePointerEnter = () => this._showMenuIcon = true;
+    @action handlePointerLeave = () => this._showMenuIcon = false;
+
+    @computed get displayButton() {return this._showMenuIcon;}
+
     render() {
         return (
                 <div
@@ -203,6 +209,8 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
                     style={{
                         width: this._props.columnWidths[this._props.columnIndex],
                     }}
+                    onPointerEnter={() => {this.handlePointerEnter()}}
+                    onPointerLeave={() => {this.handlePointerLeave()}}
                     onPointerDown={this.setupDrag}
                     ref={col => {
                         if (col) {
@@ -215,7 +223,7 @@ export class SchemaColumnHeader extends ObservableReactComponent<SchemaColumnHea
 
                     <div className="schema-header-menu">
                         <div className="schema-header-button">
-                            {this.headerButton}
+                            {this.displayButton ? this.headerButton : null}
                         </div>
                     </div>  
                 </div>
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index a8affb0d9..107e29754 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -104,8 +104,9 @@ export class SchemaRowBox extends ViewBoxBaseComponent<SchemaRowBoxProps>() {
 
     @computed get isolatedSelection() {
         const toReturn: [boolean, boolean] = [true, true];
-        const selectedBelow: boolean = this.schemaView?._selectedDocs.includes(this.schemaView.draggedSpliceDocs.docs[this.rowIndex + 1]);
-        const selectedAbove: boolean = this.schemaView?._selectedDocs.includes(this.schemaView.draggedSpliceDocs.docs[this.rowIndex - 1]);
+        const docs = this.schemaView.docsWithDrag.docs;
+        const selectedBelow: boolean = this.schemaView?._selectedDocs.includes(docs[this.rowIndex + 1]);
+        const selectedAbove: boolean = this.schemaView?._selectedDocs.includes(docs[this.rowIndex - 1]);
         toReturn[0] = selectedAbove;
         toReturn[1] = selectedBelow;
         return toReturn;