From 4b68d25cc3718a6b9fffdd60d04707cbcc8fc2b2 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Thu, 25 Jun 2020 22:33:50 -0500
Subject: adjusting menu trigger

---
 .../views/collections/CollectionSchemaHeaders.tsx  |  2 +-
 .../views/collections/CollectionSchemaView.scss    |  3 +++
 .../views/collections/CollectionSchemaView.tsx     | 22 +++++++++++++---------
 src/client/views/collections/SchemaTable.tsx       |  7 ++++++-
 4 files changed, 23 insertions(+), 11 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx
index aaa2e6096..b84b75172 100644
--- a/src/client/views/collections/CollectionSchemaHeaders.tsx
+++ b/src/client/views/collections/CollectionSchemaHeaders.tsx
@@ -376,7 +376,7 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
                 <input className="keys-search" ref={this._inputRef} type="text" value={this._searchTerm} placeholder="Column key" onKeyDown={this.onKeyDown}
                     onChange={e => this.onChange(e.target.value)}
                     onClick={(e) => {
-                        this._inputRef.current!.select();
+                        //this._inputRef.current!.select();
                         e.stopPropagation();
                     }} onFocus={this.onFocus} onBlur={this.onBlur}></input>
                 <div className="keys-options-wrapper" onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerOut}>
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index a0bbae88f..a21249c58 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -182,6 +182,9 @@
     color: gray;
     z-index: 10000;
     overflow-y: visible;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
 
     .collectionSchema-header-menu {
         height: 100%;
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 9cd13058f..900949b94 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -299,20 +299,24 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     @action
     closeHeader = () => { this._headerOpen = false; }
 
+    renderKeysDropDown = (col: any) => {
+        return <KeysDropdown
+            keyValue={col.heading}
+            possibleKeys={this.possibleKeys}
+            existingKeys={this.columns.map(c => c.heading)}
+            canAddNew={true}
+            addNew={false}
+            onSelect={this.changeColumns}
+            setIsEditing={this.setHeaderIsEditing}
+        />;
+    }
+
     renderContent = (col: any) => {
         return (
             <div className="collectionSchema-header-menuOptions">
                 <div className="collectionSchema-headerMenu-group">
                     <label>Key:</label>
-                    <KeysDropdown
-                        keyValue={col.heading}
-                        possibleKeys={this.possibleKeys}
-                        existingKeys={this.columns.map(c => c.heading)}
-                        canAddNew={true}
-                        addNew={false}
-                        onSelect={this.changeColumns}
-                        setIsEditing={this.setHeaderIsEditing}
-                    />
+                    {this.renderKeysDropDown(col)}
                 </div>
                 {false ? <></> :
                     <>
diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx
index 97d4bb303..b9df2fe6b 100644
--- a/src/client/views/collections/SchemaTable.tsx
+++ b/src/client/views/collections/SchemaTable.tsx
@@ -163,15 +163,20 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
 
 
             const menuContent = <div><FontAwesomeIcon icon={icon} size="sm" />  {col.heading}</div>;
+
             const header =
                 <div className="collectionSchemaView-header"
-                    onClick={e => this.props.openHeader(col, menuContent, e.clientX, e.clientY)}
+                    //onClick={e => this.props.openHeader(col, menuContent, e.clientX, e.clientY)}
                     style={{
                         background: col.color, padding: "4px",
                         letterSpacing: "2px",
                         textTransform: "uppercase"
                     }}>
                     {menuContent}
+                    <div onClick={e => this.props.openHeader(col, menuContent, e.clientX, e.clientY)}
+                        style={{ float: "right" }}>
+                        <FontAwesomeIcon icon={"caret-down"} size="2x" />
+                    </div>
                 </div>;
 
             return {
-- 
cgit v1.2.3-70-g09d2