col menu icon now shows only on hover

1 files changed, 11 insertions, 3 deletions

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>