fix drop down UI

2 files changed, 70 insertions, 47 deletions

diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx
index e27de4c96..adce4dcef 100644
--- a/src/client/views/collections/CollectionSchemaCells.tsx
+++ b/src/client/views/collections/CollectionSchemaCells.tsx
@@ -29,7 +29,7 @@ import { KeysDropdown } from "./CollectionSchemaHeaders";
 import { listSpec } from "../../../fields/Schema";
 import { ObjectField } from "../../../fields/ObjectField";
 import { List } from "../../../fields/List";
-import { Link } from "@react-pdf/renderer";
+import { LinkBox } from "../nodes/LinkBox";
 const path = require('path');
 
 library.add(faExpand);
@@ -421,10 +421,11 @@ export class CollectionSchemaListCell extends CollectionSchemaCell {
     // }
 
     @observable private _opened = false;
-    @observable private _text = "";
+    @observable private _text = "select an item";
 
     @action
     toggleOpened(open: boolean) {
+        console.log("open: " + open);
         this._opened = open;
     }
 
@@ -433,6 +434,11 @@ export class CollectionSchemaListCell extends CollectionSchemaCell {
         this._text = e.target.value;
     }
 
+    @action
+    onSelected = (element: string) => {
+        this._text = element;
+    }
+
     render() {
         const props: FieldViewProps = {
             Document: this.props.rowProps.original,
@@ -461,6 +467,7 @@ export class CollectionSchemaListCell extends CollectionSchemaCell {
         };
 
         let value = "";
+        let link = false;
         const reference = React.createRef<HTMLDivElement>();
 
         const field = props.Document[props.fieldKey];
@@ -469,41 +476,42 @@ export class CollectionSchemaListCell extends CollectionSchemaCell {
 
             const optionsList = field as List<any>;
 
-
-
-
-            const options = optionsList.map((element, index) => {
+            const options = optionsList.map((element) => {
                 if (element instanceof Doc) {
+                    if (props.fieldKey.toLowerCase() === "links") {
+                        link = true;
+                    }
                     const title = element.title;
-                    return <div>{title}</div>;
-                } else if (element instanceof Link) {
-                    return <div>link</div>;
+                    return <div
+                        className="collectionSchemaView-dropdownOption"
+                        onPointerDown={(e) => { this.onSelected(StrCast(element.title)); }}
+                        style={{ padding: "6px" }}>
+                        {title}
+                    </div>;
                 } else {
                     return <div>{element}</div>;
                 }
             });
 
 
+            const plainText = <div>{this._text}</div>;
+            const textarea = <textarea onChange={this.onChange} value={this._text} placeholder={"select an item"}></textarea>;
+            const dropdown = <div>
+                {options}
+            </div>;
 
             return (
                 <div className="collectionSchemaView-cellWrapper" ref={this._focusRef} tabIndex={-1} onPointerDown={this.onPointerDown}>
                     <div className="collectionSchemaView-cellContents" key={this._document[Id]} ref={reference}>
-
-                        {/* <Flyout content={options}>
-                            <div className="collectionSchema-toggler" onClick={() => this.toggleOpened(!this._opened)}>☰</div>
-                        </ Flyout > */}
-
-                        <button type="button" className="collectionSchemaView-button" onClick={(e) => { this.toggleOpened(!this._opened); }}
-                            style={{ right: "length", position: "relative" }}>
-                            ☰
+                        <div className="collectionSchemaView-dropDownWrapper">
+                            <button type="button" className="collectionSchemaView-dropdownButton" onClick={(e) => { this.toggleOpened(!this._opened); }}
+                                style={{ right: "length", position: "relative" }}>
+                                ☰
                             </button>
-                        <textarea className="collectionSchemaView-textarea" onChange={this.onChange} value={this._text} placeholder={"select an item"}></textarea>
+                            <div className="collectionSchemaView-dropdownText"> {link ? plainText : textarea} </div>
+                        </div>
 
-                        {this._opened ? <div className="collectionSchemaView-dropdown">
-                            <div>
-                                {options}
-                            </div>
-                        </div> : null}
+                        {this._opened ? dropdown : null}
                     </div >
                 </div>
             );
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 96e9aec5a..5a4e1aa58 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -412,6 +412,45 @@ button.add-column {
     &:hover .collectionSchemaView-cellContents-docExpander {
         display: block;
     }
+
+    .collectionSchemaView-dropdownWrapper {
+
+        border: grey;
+        border-style: solid;
+        border-width: 1px;
+        height: 100%;
+
+        .collectionSchemaView-dropdownButton {
+
+            //display: inline-block;
+            float: left;
+            height: 100%;
+
+
+        }
+
+        .collectionSchemaView-dropdownText {
+            display: inline-block;
+            //float: right;
+            height: 100%;
+            display: "flex";
+            font-size: 13;
+            justify-content: "center";
+            align-items: "center";
+        }
+
+    }
+
+    .collectionSchemaView-dropdownContainer {
+        position: absolute;
+        border: 1px solid rgba(0, 0, 0, 0.04);
+        box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14);
+
+        .collectionSchemaView-dropdownOption:hover {
+            background-color: rgba(0, 0, 0, 0.14);
+            cursor: pointer;
+        }
+    }
 }
 
 .collectionSchemaView-cellContents-docExpander {
@@ -423,30 +462,6 @@ button.add-column {
     right: 0;
     background-color: lightgray;
 
-    .dropdown {
-        position: absolute;
-        top: 100%;
-        left: 0;
-        width: 300px;
-        z-index: 2;
-        border: 1px solid rgba(0, 0, 0, 0.04);
-        box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14);
-    }
-
-    ul {
-        list-style: none;
-        padding: 0;
-        margin: 0;
-    }
-
-    li {
-        padding: 8px 12px;
-    }
-
-    li:hover {
-        background-color: rgba(0, 0, 0, 0.14);
-        cursor: pointer;
-    }
 }
 
 .doc-drag-over {