cleanup

3 files changed, 118 insertions, 47 deletions

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
index 696bfd67c..99f49eb0e 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
@@ -51,7 +51,61 @@
                     position: absolute;
                     top: 35px;
                     min-width: 200px;
-                    padding: 10px;
+                    display: flex;
+                    flex-direction: column;
+                    align-items: flex-start;
+
+                    .schema-key-search-input {
+                        width: calc(100% - 20px);
+                        margin: 10px;
+                    }
+
+                    .schema-key-search-result {
+                        cursor: pointer;
+                        padding: 2px 10px;
+                        width: 100%;
+
+                        &:hover {
+                            background-color: $medium-gray;
+                        }
+                    }
+
+                    .schema-key-search,
+                    .schema-new-key-options {
+                        width: 100%;
+                        display: flex;
+                        flex-direction: column;
+                        align-items: flex-start;
+                    }
+
+                    .schema-key-list {
+                        width: 100%;
+                        max-height: 300px;
+                        overflow-y: auto;
+                    }
+
+                    .schema-key-type-option {
+                        margin: 2px 10px;
+
+                        input {
+                            margin-right: 5px;
+                        }
+                    }
+
+                    .schema-key-default-val {
+                        margin: 5px 10px;
+                    }
+
+                    .schema-column-menu-button {
+                        cursor: pointer;
+                        padding: 2px 5px;
+                        background: $medium-blue;
+                        border-radius: 9999px;
+                        color: $white;
+                        width: fit-content;
+                        margin: 5px;
+                        align-self: center;
+                    }
                 }
             }
         }
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 0466ce343..24008a21d 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -38,7 +38,7 @@ export class CollectionSchemaView extends CollectionSubView() {
     private _lastSelectedRow: number | undefined;
     private _selectedDocSortedArray: Doc[] = [];
     private _closestDropIndex: number = 0;
-    private _minColWidth: number = 120;
+    private _minColWidth: number = 150;
 
     @observable _rowMenuWidth: number = 100;
     @observable _selectedDocs: ObservableSet = new ObservableSet<Doc>();
diff --git a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
index cdae79d0c..b9e25a473 100644
--- a/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaColumnHeader.tsx
@@ -37,7 +37,12 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps>
             case ColumnType.Number:
                 return <input type="number" name="" id="" value={this._newFieldDefault ?? 0} onPointerDown={e => e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.value))} />;
             case ColumnType.Boolean:
-                return <input type="checkbox" name="" id="" value={this._newFieldDefault ?? false} onPointerDown={e => e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.value))} />;
+                return (
+                    <>
+                        <input type="checkbox" name="" id="" value={this._newFieldDefault ?? false} onPointerDown={e => e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.value))} />
+                        {this._newFieldDefault ? 'true' : 'false'}
+                    </>
+                );
             case ColumnType.String:
                 return <input type="text" name="" id="" value={this._newFieldDefault ?? ''} onPointerDown={e => e.stopPropagation()} onChange={action(e => (this._newFieldDefault = e.target.value))} />;
         }
@@ -46,44 +51,51 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps>
     @computed get renderColumnMenu() {
         return (
             <div className="schema-column-menu">
-                <input type="text" value={this._menuValue} onKeyDown={this.onSearchKeyDown} onChange={this.updateKeySearch} onPointerDown={e => e.stopPropagation()} />
+                <input className="schema-key-search-input" type="text" value={this._menuValue} onKeyDown={this.onSearchKeyDown} onChange={this.updateKeySearch} onPointerDown={e => e.stopPropagation()} />
                 {this._makeNewField ? (
                     <div className="schema-new-key-options">
-                        <input
-                            type="radio"
-                            name="newFieldType"
-                            id=""
-                            checked={this._newFieldType == ColumnType.Number}
-                            onChange={action(() => {
-                                this._newFieldType = ColumnType.Number;
-                                this._newFieldDefault = 0;
-                            })}
-                        />{' '}
-                        math
-                        <input
-                            type="radio"
-                            name="newFieldType"
-                            id=""
-                            checked={this._newFieldType == ColumnType.Boolean}
-                            onChange={action(() => {
-                                this._newFieldType = ColumnType.Boolean;
-                                this._newFieldDefault = false;
-                            })}
-                        />{' '}
-                        boolean
-                        <input
-                            type="radio"
-                            name="newFieldType"
-                            id=""
-                            checked={this._newFieldType == ColumnType.String}
-                            onChange={action(() => {
-                                this._newFieldType = ColumnType.String;
-                                this._newFieldDefault = '';
-                            })}
-                        />{' '}
-                        string
-                        {this.fieldDefaultInput}
+                        <div className="schema-key-type-option">
+                            <input
+                                type="radio"
+                                name="newFieldType"
+                                id=""
+                                checked={this._newFieldType == ColumnType.Number}
+                                onChange={action(() => {
+                                    this._newFieldType = ColumnType.Number;
+                                    this._newFieldDefault = 0;
+                                })}
+                            />
+                            number
+                        </div>
+                        <div className="schema-key-type-option">
+                            <input
+                                type="radio"
+                                name="newFieldType"
+                                id=""
+                                checked={this._newFieldType == ColumnType.Boolean}
+                                onChange={action(() => {
+                                    this._newFieldType = ColumnType.Boolean;
+                                    this._newFieldDefault = false;
+                                })}
+                            />
+                            boolean
+                        </div>
+                        <div className="schema-key-type-option">
+                            <input
+                                type="radio"
+                                name="newFieldType"
+                                id=""
+                                checked={this._newFieldType == ColumnType.String}
+                                onChange={action(() => {
+                                    this._newFieldType = ColumnType.String;
+                                    this._newFieldDefault = '';
+                                })}
+                            />
+                            string
+                        </div>
+                        <div className="schema-key-default-val">value: {this.fieldDefaultInput}</div>
                         <div
+                            className="schema-column-menu-button"
                             onPointerDown={action(e => {
                                 this.setKey(this._menuValue, this._newFieldDefault);
                                 this._makeNewField = false;
@@ -94,21 +106,25 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps>
                 ) : (
                     <div className="schema-key-search">
                         <div
+                            className="schema-column-menu-button"
                             onPointerDown={action(e => {
                                 e.stopPropagation();
                                 this._makeNewField = true;
                             })}>
                             + new field
                         </div>
-                        {this._menuOptions.map(key => (
-                            <div
-                                onPointerDown={e => {
-                                    e.stopPropagation();
-                                    this.setKey(key);
-                                }}>
-                                {key}
-                            </div>
-                        ))}
+                        <div className="schema-key-list">
+                            {this._menuOptions.map(key => (
+                                <div
+                                    className="schema-key-search-result"
+                                    onPointerDown={e => {
+                                        e.stopPropagation();
+                                        this.setKey(key);
+                                    }}>
+                                    {key}
+                                </div>
+                            ))}
+                        </div>
                     </div>
                 )}
             </div>
@@ -158,6 +174,7 @@ export class SchemaColumnHeader extends React.Component<SchemaColumnHeaderProps>
             this._menuVisible = true;
             this._menuValue = this.fieldKey;
             this._menuOptions = this.props.possibleKeys;
+            this._makeNewField = false;
             if (newCol) {
                 this._makeNewColumn = true;
             }