From 707a1a4cba9f0af9ee07b487eddf0f4ca85c8a78 Mon Sep 17 00:00:00 2001
From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com>
Date: Wed, 12 Jun 2024 03:28:07 -0400
Subject: col menu icon now shows only on hover

---
 .../collections/collectionSchema/SchemaColumnHeader.tsx    | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

(limited to 'src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx')

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>
-- 
cgit v1.2.3-70-g09d2