cleanup

1 files changed, 62 insertions, 45 deletions

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;
             }