From d6828dba3dc1fd809d0e1449e8230656bb7c5360 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Mon, 29 Jun 2020 10:28:31 -0500
Subject: UI fix and little restructure

---
 .../views/collections/CollectionSchemaHeaders.tsx  | 10 +--
 .../views/collections/CollectionSchemaView.scss    |  2 +-
 .../views/collections/CollectionSchemaView.tsx     | 99 ++++------------------
 .../views/collections/CollectionViewChromes.scss   |  1 +
 src/client/views/collections/SchemaTable.tsx       |  2 +-
 5 files changed, 26 insertions(+), 88 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx
index fc7c2400d..efff4db98 100644
--- a/src/client/views/collections/CollectionSchemaHeaders.tsx
+++ b/src/client/views/collections/CollectionSchemaHeaders.tsx
@@ -365,7 +365,7 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
         const options = keyOptions.map(key => {
             return <div key={key} className="key-option" style={{
                 border: "1px solid lightgray",
-                width: this.props.width, overflowX: "hidden"
+                width: this.props.width, maxWidth: this.props.width, overflowX: "hidden"
             }}
                 onPointerDown={e => e.stopPropagation()} onClick={() => { this.onSelect(key); this.setSearchTerm(""); }}>{key}</div>;
         });
@@ -374,7 +374,7 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
         if (!exactFound && this._searchTerm !== "" && this.props.canAddNew) {
             options.push(<div key={""} className="key-option" style={{
                 border: "1px solid lightgray",
-                width: this.props.width, overflowX: "hidden"
+                width: this.props.width, maxWidth: this.props.width, overflowX: "hidden"
             }}
                 onClick={() => { this.onSelect(this._searchTerm); this.setSearchTerm(""); }}>
                 Create "{this._searchTerm}" key</div>);
@@ -385,8 +385,8 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
 
     render() {
         return (
-            <div className="keys-dropdown" style={{ width: this.props.width }}>
-                <input className="keys-search" style={{ width: this.props.width, maxWidth: "1000" }}
+            <div className="keys-dropdown" style={{ width: this.props.width, maxWidth: this.props.width, overflowX: "hidden" }}>
+                <input className="keys-search" //style={{ width: this.props.width, maxWidth: "1000" }}
                     ref={this._inputRef} type="text" value={this._searchTerm} placeholder="Column key" onKeyDown={this.onKeyDown}
                     onChange={e => this.onChange(e.target.value)}
                     onClick={(e) => {
@@ -395,7 +395,7 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
                     }} onFocus={this.onFocus} onBlur={this.onBlur}></input>
                 <div className="keys-options-wrapper" style={{
                     backgroundColor: "white",
-                    width: this.props.width, overflowX: "hidden"
+                    width: this.props.width, maxWidth: this.props.width, overflowX: "hidden"
                 }}
                     onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerOut}>
                     {this.renderOptions()}
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 2330fcc8a..5226a60f1 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -500,7 +500,7 @@ button.add-column {
 }
 
 .collectionSchemaView-toolbar {
-    z-index: 1000;
+    z-index: 100;
 }
 
 .collectionSchemaView-toolbar {
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index dc4e75443..c75012595 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -24,7 +24,7 @@ import { setupMoveUpEvents, emptyFunction, returnZero, returnOne, returnFalse }
 import { SnappingManager } from "../../util/SnappingManager";
 import Measure from "react-measure";
 import { SchemaTable } from "./SchemaTable";
-import { civicinfo } from "googleapis/build/src/apis/civicinfo";
+import { TraceMobx } from "../../../fields/util";
 
 library.add(faCog, faPlus, faSortUp, faSortDown);
 library.add(faTable);
@@ -185,7 +185,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         this._openTypes = bool;
     }
 
-    @action
     renderTypes = (col: any) => {
         if (columnTypes.get(col.heading)) return (null);
 
@@ -353,29 +352,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         />;
     }
 
-    @action
-    renderContent = (col: any) => {
-        return (
-            <div className="collectionSchema-header-menuOptions">
-                <div className="collectionSchema-headerMenu-group">
-                    <label>Key:</label>
-                    {this.renderKeysDropDown(col)}
-                </div>
-                {false ? <></> :
-                    <>
-                        {this.renderTypes(col)}
-                        {this.renderSorting(col)}
-                        {this.renderColors(col)}
-                        <div className="collectionSchema-headerMenu-group">
-                            <button onClick={() => { this.deleteColumn(col.heading); }}
-                            >Delete Column</button>
-                        </div>
-                    </>
-                }
-            </div>
-        );
-    }
-
     @undoBatch
     @action
     deleteColumn = (key: string) => {
@@ -410,43 +386,21 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
         //this.menuCoordinates[1] -= e.screenY / scale;
     }
 
-    @action renderMenu() {
-        const scale = this.props.ScreenToLocalTransform().Scale;
-        return (
-            <div className="collectionSchema-header-menu" ref={this.setNode}
-                onWheel={e => this.props.active(true) && e.stopPropagation()}
-                onPointerDown={e => this.onHeaderClick(e)}
-                style={{
-                    position: "absolute", background: "white",
-                    transform: `translate(${this.menuCoordinates[0] * scale}px, ${this.menuCoordinates[1] / scale}px)`
-                }}>
-                <Measure offset onResize={action((r: any) => {
-                    const dim = this.props.ScreenToLocalTransform().inverse().transformDirection(r.offset.width, r.offset.height);
-                    this._menuWidth = dim[0]; this._menuHeight = dim[1];
-                })}>
-                    {({ measureRef }) => <div ref={measureRef}>
-                        <div className="collectionSchema-header-menuOptions">
-                            <div className="collectionSchema-headerMenu-group">
-                                <label>Key:</label>
-                                {this.renderKeysDropDown(this._col)}
-                            </div>
-                            {false ? <></> :
-                                <>
-                                    {this.renderTypes(this._col)}
-                                    {this.renderSorting(this._col)}
-                                    {this.renderColors(this._col)}
-                                    <div className="collectionSchema-headerMenu-group">
-                                        <button onClick={() => { this.deleteColumn(this._col.heading); }}
-                                        >Delete Column</button>
-                                    </div>
-                                </>
-                            }
-                        </div>
-
-                    </div>}
-                </Measure>
+    @computed get renderMenuContent() {
+        TraceMobx();
+        return <div className="collectionSchema-header-menuOptions">
+            <div className="collectionSchema-headerMenu-group">
+                <label>Key:</label>
+                {this.renderKeysDropDown(this._col)}
             </div>
-        );
+            {this.renderTypes(this._col)}
+            {this.renderSorting(this._col)}
+            {this.renderColors(this._col)}
+            <div className="collectionSchema-headerMenu-group">
+                <button onClick={() => { this.deleteColumn(this._col.heading); }}
+                >Delete Column</button>
+            </div>
+        </div>;
     }
 
     private createTarget = (ele: HTMLDivElement) => {
@@ -623,6 +577,8 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     }
 
     render() {
+        TraceMobx();
+        const menuContent = this.renderMenuContent;
         const scale = this.props.ScreenToLocalTransform().Scale;
         const menu = <div className="collectionSchema-header-menu" ref={this.setNode}
             onWheel={e => this.props.active(true) && e.stopPropagation()}
@@ -635,26 +591,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
                 const dim = this.props.ScreenToLocalTransform().inverse().transformDirection(r.offset.width, r.offset.height);
                 this._menuWidth = dim[0]; this._menuHeight = dim[1];
             })}>
-                {({ measureRef }) => <div ref={measureRef}>
-                    <div className="collectionSchema-header-menuOptions">
-                        <div className="collectionSchema-headerMenu-group">
-                            <label>Key:</label>
-                            {this.renderKeysDropDown(this._col)}
-                        </div>
-                        {false ? <></> :
-                            <>
-                                {this.renderTypes(this._col)}
-                                {this.renderSorting(this._col)}
-                                {this.renderColors(this._col)}
-                                <div className="collectionSchema-headerMenu-group">
-                                    <button onClick={() => { this.deleteColumn(this._col.heading); }}
-                                    >Delete Column</button>
-                                </div>
-                            </>
-                        }
-                    </div>
-
-                </div>}
+                {({ measureRef }) => <div ref={measureRef}> {menuContent} </div>}
             </Measure>
         </div>;
 
diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss
index 2885ac763..822e15aed 100644
--- a/src/client/views/collections/CollectionViewChromes.scss
+++ b/src/client/views/collections/CollectionViewChromes.scss
@@ -16,6 +16,7 @@
         height: 32px;
         border-bottom: .5px solid rgb(180, 180, 180);
         overflow: visible;
+        z-index: 9001;
 
         .collectionViewBaseChrome {
             display: flex;
diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx
index 5152b16b0..9e3b4d961 100644
--- a/src/client/views/collections/SchemaTable.tsx
+++ b/src/client/views/collections/SchemaTable.tsx
@@ -221,7 +221,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
                     }}>
                     <FontAwesomeIcon icon={icon} size="lg" style={{ display: "inline", paddingLeft: "7px" }} />
                     <div className="keys-dropdown"
-                        style={{ display: "inline", zIndex: 10000 }}>
+                        style={{ display: "inline", zIndex: 1000 }}>
                         {keysDropdown}
                     </div>
                     <div onClick={e => this.changeSorting(col)}
-- 
cgit v1.2.3-70-g09d2