minor styling

4 files changed, 92 insertions, 67 deletions

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 5cbecf2c9..31e4557be 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -39,7 +39,7 @@ export interface EditableProps {
     oneLine?: boolean;
     editing?: boolean;
     onClick?: (e: React.MouseEvent) => boolean;
-    isEditingCallback?:  (isEditing: boolean) => void;
+    isEditingCallback?: (isEditing: boolean) => void;
 }
 
 /**
@@ -58,7 +58,12 @@ export class EditableView extends React.Component<EditableProps> {
 
     @action
     componentWillReceiveProps(nextProps: EditableProps) {
-        this._editing = nextProps.editing ? true : false;
+        // this is done because when autosuggest is turned on, the suggestions are passed in as a prop,
+        // so when the suggestions are passed in, and no editing prop is passed in, it used to set it
+        // to false. this will no longer do so -syip
+        if (nextProps.editing && nextProps.editing !== this._editing) {
+            this._editing = nextProps.editing;
+        }
     }
 
     @action
@@ -88,7 +93,7 @@ export class EditableView extends React.Component<EditableProps> {
         if (!this.props.onClick || !this.props.onClick(e)) {
             this._editing = true;
             this.props.isEditingCallback && this.props.isEditingCallback(true);
-        } 
+        }
         e.stopPropagation();
     }
 
@@ -119,7 +124,7 @@ export class EditableView extends React.Component<EditableProps> {
                     }}
                 />
                 : <input className="editableView-input" defaultValue={this.props.GetValue()} onKeyDown={this.onKeyDown} autoFocus
-                    onBlur={action(() => {this._editing = false; this.props.isEditingCallback && this.props.isEditingCallback(false);})} onPointerDown={this.stopPropagation} onClick={this.stopPropagation} onPointerUp={this.stopPropagation}
+                    onBlur={action(() => { this._editing = false; this.props.isEditingCallback && this.props.isEditingCallback(false); })} onPointerDown={this.stopPropagation} onClick={this.stopPropagation} onPointerUp={this.stopPropagation}
                     style={{ display: this.props.display, fontSize: this.props.fontSize }} />;
         } else {
             if (this.props.autosuggestProps) this.props.autosuggestProps.resetValue();
diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx
index 3a57cd306..d1d0674c4 100644
--- a/src/client/views/collections/CollectionSchemaHeaders.tsx
+++ b/src/client/views/collections/CollectionSchemaHeaders.tsx
@@ -30,7 +30,7 @@ export interface HeaderProps {
 export class CollectionSchemaHeader extends React.Component<HeaderProps> {
     render() {
         let icon: IconProp = this.props.keyType === ColumnType.Number ? "hashtag" : this.props.keyType === ColumnType.String ? "font" :
-            this.props.keyType === ColumnType.Boolean ? "check-square" : this.props.keyType ===  ColumnType.Doc ? "file" : "align-justify";
+            this.props.keyType === ColumnType.Boolean ? "check-square" : this.props.keyType === ColumnType.Doc ? "file" : "align-justify";
 
         return (
             <div className="collectionSchemaView-header" >
@@ -64,7 +64,7 @@ export interface AddColumnHeaderProps {
 export class CollectionSchemaAddColumnHeader extends React.Component<AddColumnHeaderProps> {
     render() {
         return (
-            <button onClick={() => this.props.createColumn()}><FontAwesomeIcon icon="plus" size="sm" /></button>
+            <button className="add-column" onClick={() => this.props.createColumn()}><FontAwesomeIcon icon="plus" size="sm" /></button>
         );
     }
 }
@@ -91,7 +91,7 @@ export interface ColumnMenuProps {
 @observer
 export class CollectionSchemaColumnMenu extends React.Component<ColumnMenuProps> {
     @observable private _isOpen: boolean = false;
-    @observable private _node : HTMLDivElement | null = null;
+    @observable private _node: HTMLDivElement | null = null;
 
     componentDidMount() {
         document.addEventListener("pointerdown", this.detectClick);
@@ -109,7 +109,7 @@ export class CollectionSchemaColumnMenu extends React.Component<ColumnMenuProps>
         }
     }
 
-    @action 
+    @action
     toggleIsOpen = (): void => {
         this._isOpen = !this._isOpen;
         this.props.setIsEditing(this._isOpen);
@@ -133,19 +133,19 @@ export class CollectionSchemaColumnMenu extends React.Component<ColumnMenuProps>
         return (
             <div className="collectionSchema-headerMenu-group">
                 <label>Column type:</label>
-                <div className="columnMenu-types"> 
+                <div className="columnMenu-types">
                     <button title="Any" className={this.props.keyType === ColumnType.Any ? "active" : ""} onClick={() => this.props.setColumnType(this.props.keyValue, ColumnType.Any)}>
                         <FontAwesomeIcon icon={"align-justify"} size="sm" />
-                        </button>
+                    </button>
                     <button title="Number" className={this.props.keyType === ColumnType.Number ? "active" : ""} onClick={() => this.props.setColumnType(this.props.keyValue, ColumnType.Number)}>
                         <FontAwesomeIcon icon={"hashtag"} size="sm" />
-                        </button>
+                    </button>
                     <button title="String" className={this.props.keyType === ColumnType.String ? "active" : ""} onClick={() => this.props.setColumnType(this.props.keyValue, ColumnType.String)}>
                         <FontAwesomeIcon icon={"font"} size="sm" />
-                        </button>
+                    </button>
                     <button title="Checkbox" className={this.props.keyType === ColumnType.Boolean ? "active" : ""} onClick={() => this.props.setColumnType(this.props.keyValue, ColumnType.Boolean)}>
                         <FontAwesomeIcon icon={"check-square"} size="sm" />
-                        </button>
+                    </button>
                     <button title="Document" className={this.props.keyType === ColumnType.Doc ? "active" : ""} onClick={() => this.props.setColumnType(this.props.keyValue, ColumnType.Doc)}>
                         <FontAwesomeIcon icon={"file"} size="sm" />
                     </button>
@@ -183,13 +183,13 @@ export class CollectionSchemaColumnMenu extends React.Component<ColumnMenuProps>
                     />
                 </div>
                 {this.props.onlyShowOptions ? <></> :
-                <>
-                    {this.renderTypes()}
-                    {this.renderSorting()}
-                    <div className="collectionSchema-headerMenu-group">
-                        <button onClick={() => this.props.deleteColumn(this.props.keyValue)}>Delete Column</button>
-                    </div>
-                </>
+                    <>
+                        {this.renderTypes()}
+                        {this.renderSorting()}
+                        <div className="collectionSchema-headerMenu-group">
+                            <button onClick={() => this.props.deleteColumn(this.props.keyValue)}>Delete Column</button>
+                        </div>
+                    </>
                 }
             </div>
         );
@@ -225,7 +225,7 @@ class KeysDropdown extends React.Component<KeysDropdownProps> {
 
     @action setSearchTerm = (value: string): void => { this._searchTerm = value; };
     @action setKey = (key: string): void => { this._key = key; };
-    @action setIsOpen = (isOpen: boolean): void => {this._isOpen = isOpen;};
+    @action setIsOpen = (isOpen: boolean): void => { this._isOpen = isOpen; };
 
     @action
     onSelect = (key: string): void => {
@@ -253,7 +253,7 @@ class KeysDropdown extends React.Component<KeysDropdownProps> {
         }
     }
 
-    @action 
+    @action
     onPointerEnter = (e: React.PointerEvent): void => {
         this._canClose = false;
     }
@@ -278,7 +278,7 @@ class KeysDropdown extends React.Component<KeysDropdownProps> {
         if (!exactFound && this._searchTerm !== "" && this.props.canAddNew) {
             options.push(<div key={""} className="key-option"
                 onClick={() => { this.onSelect(this._searchTerm); this.setSearchTerm(""); }}>
-                    Create "{this._searchTerm}" key</div>);
+                Create "{this._searchTerm}" key</div>);
         }
 
         return options;
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 4b20e8241..38d14c2de 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -57,7 +57,7 @@
 .ReactTable {
     width: 100%;
     height: 100%;
-    background: $light-color;
+    background: white;
     box-sizing: border-box;
     border: none !important;
 
@@ -76,6 +76,7 @@
             font-size: 12px;
             height: 30px;
             border: 1px solid $intermediate-color;
+            box-shadow: none;
         }
 
         .rt-resizable-header {
@@ -101,6 +102,7 @@
         // max-height: $MAX_ROW_HEIGHT;
         font-size: 13px;
         text-align: center;
+        background-color: $light-color-secondary;
         
         &:last-child {
             overflow: visible;
@@ -114,6 +116,7 @@
     .rt-tr-group {
         direction: ltr;
         flex: 0 1 auto;
+        min-height: 30px;
         // max-height: $MAX_ROW_HEIGHT;
         // for sub comp
 
@@ -134,6 +137,7 @@
 
     .rt-tr {
         width: 100%;
+        min-height: 30px;
         // height: $MAX_ROW_HEIGHT;
     }
 
@@ -144,6 +148,7 @@
         padding: 0;
         font-size: 13px;
         text-align: center;
+        white-space: normal;
 
         .imageBox-cont {
             position: relative;
@@ -190,7 +195,9 @@
 
 .collectionSchemaView-header {
     height: 100%;
-    color: $intermediate-color;
+    color: gray;
+    letter-spacing: 2px;
+    text-transform: uppercase;
 
     .collectionSchema-header-menu {
         height: 100%;
@@ -204,9 +211,18 @@
                 margin-right: 4px;
             }
         }
+
+        div[class*="css"] {
+            width: 100%;
+            height: 100%;
+        }
     }
 }
 
+button.add-column {
+    width: 28px;
+}
+
 .collectionSchema-header-menuOptions {
     color: black;
     width: 175px;
@@ -265,6 +281,7 @@
 
 .collectionSchema-row {
     // height: $MAX_ROW_HEIGHT;
+    height: 100%;
 
     &.row-focused {
         background-color: $light-color-secondary;
@@ -317,7 +334,7 @@
     p {
         width: 100%;
         height: 100%;
-        word-wrap: break-word;
+        // word-wrap: break-word;
     }
 }
 
@@ -337,5 +354,9 @@
 
 .sub {
     padding: 20px;
-    background-color: red;
+    background-color: $intermediate-color;
+}
+
+.collectionSchemaView-expander {
+    height: 100%;
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index febf95dc7..0e2d37a9e 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -1,6 +1,6 @@
 import React = require("react");
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { faCog, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { faCog, faPlus, faSortUp, faSortDown } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, observable, trace, untracked } from "mobx";
 import { observer } from "mobx-react";
@@ -40,8 +40,7 @@ import { ImageBox } from "../nodes/ImageBox";
 import { ComputedField } from "../../../new_fields/ScriptField";
 
 
-library.add(faCog);
-library.add(faPlus);
+library.add(faCog, faPlus, faSortUp, faSortDown);
 // bcz: need to add drag and drop of rows and columns.  This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657
 
 export enum ColumnType {
@@ -67,7 +66,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
 
     @observable previewScript: string = "";
     @observable previewDoc: Doc | undefined = this.childDocs.length ? this.childDocs[0] : undefined;
-    @observable private _node : HTMLDivElement | null = null;
+    @observable private _node: HTMLDivElement | null = null;
     @observable private _focusedTable: Doc = this.props.Document;
 
     @computed get previewWidth() { return () => NumCast(this.props.Document.schemaPreviewWidth); }
@@ -192,7 +191,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     @computed
     get schemaTable() {
         return (
-            <SchemaTable 
+            <SchemaTable
                 Document={this.props.Document} // child doc
                 PanelHeight={this.props.PanelHeight}
                 PanelWidth={this.props.PanelWidth}
@@ -253,7 +252,7 @@ export interface SchemaTableProps {
     ScreenToLocalTransform: () => Transform;
     // CreateDropTarget: (ele: HTMLDivElement)=> void; // super createdriotarget
     active: () => boolean;
-    onDrop: (e: React.DragEvent<Element>, options: DocumentOptions, completed?: (() => void) | undefined)=> void;
+    onDrop: (e: React.DragEvent<Element>, options: DocumentOptions, completed?: (() => void) | undefined) => void;
     addDocTab: (document: Doc, dataDoc: Doc | undefined, where: string) => void;
     isSelected: () => boolean;
     isFocused: (document: Doc) => boolean;
@@ -267,16 +266,16 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
 
     @observable _headerIsEditing: boolean = false;
     @observable _cellIsEditing: boolean = false;
-    @observable _focusedCell: {row: number, col: number} = {row: 0, col: 0};
-    @observable _sortedColumns: Map<string, {id: string, desc: boolean}> = new Map();
+    @observable _focusedCell: { row: number, col: number } = { row: 0, col: 0 };
+    @observable _sortedColumns: Map<string, { id: string, desc: boolean }> = new Map();
     @observable _openCollections: Array<Doc> = [];
-    @observable private _node : HTMLDivElement | null = null;
+    @observable private _node: HTMLDivElement | null = null;
 
     @computed get previewWidth() { return () => NumCast(this.props.Document.schemaPreviewWidth); }
     @computed get previewHeight() { return () => this.props.PanelHeight() - 2 * this.borderWidth; }
     @computed get tableWidth() { return this.props.PanelWidth() - 2 * this.borderWidth - this.DIVIDER_WIDTH - this.previewWidth(); }
     @computed get columns() { return Cast(this.props.Document.schemaColumns, listSpec("string"), []); }
-    set columns(columns: string[]) {this.props.Document.schemaColumns = new List<string>(columns); }
+    set columns(columns: string[]) { this.props.Document.schemaColumns = new List<string>(columns); }
     @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); }
     @computed get tableColumns(): Column<Doc>[] {
         let possibleKeys = this.documentKeys.filter(key => this.columns.findIndex(existingKey => existingKey.toUpperCase() === key.toUpperCase()) === -1);
@@ -294,8 +293,8 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
                     width: 45,
                     Expander: (rowInfo) => {
                         if (rowInfo.original.type === "collection") {
-                            if (rowInfo.isExpanded) return <div onClick={() => this.onCloseCollection(rowInfo.original)}>-</div>;
-                            if (!rowInfo.isExpanded) return <div onClick={() => this.onExpandCollection(rowInfo.original)}>+</div>;
+                            if (rowInfo.isExpanded) return <div className="collectionSchemaView-expander" onClick={() => this.onCloseCollection(rowInfo.original)}><FontAwesomeIcon icon={"sort-up"} size="sm" /></div>;
+                            if (!rowInfo.isExpanded) return <div className="collectionSchemaView-expander" onClick={() => this.onExpandCollection(rowInfo.original)}><FontAwesomeIcon icon={"sort-down"} size="sm" /></div>;
                         } else {
                             return null;
                         }
@@ -303,10 +302,10 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
                 }
             );
         }
-        
+
         let cols = this.columns.map(col => {
 
-            let header = <CollectionSchemaHeader 
+            let header = <CollectionSchemaHeader
                 keyValue={col}
                 possibleKeys={possibleKeys}
                 existingKeys={this.columns}
@@ -339,7 +338,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
                         ContainingCollection: this.props.ContainingCollectionView,
                         Document: this.props.Document,
                         fieldKey: this.props.fieldKey,
-                        renderDepth: this.props.renderDepth, 
+                        renderDepth: this.props.renderDepth,
                         addDocTab: this.props.addDocTab,
                         moveDocument: this.props.moveDocument,
                         setIsEditing: this.setCellIsEditing,
@@ -347,11 +346,11 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
                     };
 
                     let colType = this.getColumnType(col);
-                    if (colType === ColumnType.Number) return <CollectionSchemaNumberCell {...props}/>;
-                    if (colType === ColumnType.String) return <CollectionSchemaStringCell {...props}/>;
+                    if (colType === ColumnType.Number) return <CollectionSchemaNumberCell {...props} />;
+                    if (colType === ColumnType.String) return <CollectionSchemaStringCell {...props} />;
                     if (colType === ColumnType.Boolean) return <CollectionSchemaCheckboxCell {...props} />;
                     if (colType === ColumnType.Doc) return <CollectionSchemaDocCell {...props} />;
-                    return <CollectionSchemaCell {...props}/>;
+                    return <CollectionSchemaCell {...props} />;
                 },
                 minWidth: 200,
             };
@@ -363,7 +362,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
             accessor: (doc: Doc) => 0,
             id: "add",
             Cell: (rowProps: CellInfo) => <></>,
-            width: 45,
+            width: 28,
             resizable: false
         });
         return columns;
@@ -397,7 +396,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
     }
 
     tableMoveDoc = (d: Doc, target: Doc, addDoc: (doc: Doc) => boolean) => {
-        console.log("SCHEMA MOVE"); 
+        console.log("SCHEMA MOVE");
         this.props.moveDocument(d, target, addDoc);
     }
 
@@ -410,7 +409,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
             ScreenToLocalTransform: this.props.ScreenToLocalTransform,
             addDoc: this.tableAddDoc,
             moveDoc: this.tableMoveDoc,
-            rowInfo, 
+            rowInfo,
             rowFocused: !this._headerIsEditing && rowInfo.index === this._focusedCell.row && this.props.isFocused(this.props.Document)
         };
     }
@@ -505,7 +504,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
     }
 
     @action
-    createColumn = () => {  
+    createColumn = () => {
         let index = 0;
         let found = this.columns.findIndex(col => col.toUpperCase() === "New field".toUpperCase()) > -1;
         if (!found) {
@@ -513,7 +512,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
             return;
         }
         while (found) {
-            index ++;
+            index++;
             found = this.columns.findIndex(col => col.toUpperCase() === ("New field (" + index + ")").toUpperCase()) > -1;
         }
         this.columns.push("New field (" + index + ")");
@@ -562,7 +561,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
         if (!typesDoc) {
             let newTypesDoc = new Doc();
             newTypesDoc[key] = type;
-            this.props.Document.schemaColumnTypes  = newTypesDoc;
+            this.props.Document.schemaColumnTypes = newTypesDoc;
             return;
         } else {
             typesDoc[key] = type;
@@ -588,13 +587,13 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
 
     @action
     setColumnSort = (column: string, descending: boolean) => {
-        this._sortedColumns.set(column, {id: column, desc: descending});
+        this._sortedColumns.set(column, { id: column, desc: descending });
     }
 
     @action
     removeColumnSort = (column: string) => {
         this._sortedColumns.delete(column);
-    } 
+    }
 
     get documentKeys() {
         const docs = DocListCast(this.props.Document[this.props.fieldKey]);
@@ -619,27 +618,27 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
         let expanded = {};
         expandedRowsList.forEach(row => expanded[row] = true);
 
-        return <ReactTable 
-            style={{ position: "relative", float: "left", width: `calc(100% - ${previewWidth}px` }} 
-            data={this.props.childDocs} 
-            page={0} 
-            pageSize={this.props.childDocs.length} 
+        return <ReactTable
+            style={{ position: "relative", float: "left", width: `calc(100% - ${previewWidth}px` }}
+            data={this.props.childDocs}
+            page={0}
+            pageSize={this.props.childDocs.length}
             showPagination={false}
             columns={this.tableColumns}
             getTrProps={this.getTrProps}
             sortable={false}
             TrComponent={MovableRow}
-            sorted={Array.from(this._sortedColumns.values())}    
-            expanded={expanded}       
-            SubComponent={hasCollectionChild ? 
+            sorted={Array.from(this._sortedColumns.values())}
+            expanded={expanded}
+            SubComponent={hasCollectionChild ?
                 row => {
-                    if (row.original.type === "collection") { 
+                    if (row.original.type === "collection") {
                         let childDocs = DocListCast(row.original[this.props.fieldKey]);
-                        return <div className="sub"><SchemaTable {...this.props} Document={row.original} childDocs={childDocs}/></div>;
+                        return <div className="sub"><SchemaTable {...this.props} Document={row.original} childDocs={childDocs} /></div>;
                     }
                 }
-             : undefined}
-            
+                : undefined}
+
         />;
     }
 
@@ -685,7 +684,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
 
 interface CollectionSchemaPreviewProps {
     Document?: Doc;
-    DataDocument?: Doc; 
+    DataDocument?: Doc;
     childDocs?: Doc[];
     renderDepth: number;
     fitToBox?: boolean;
@@ -762,7 +761,7 @@ export class CollectionSchemaPreview extends React.Component<CollectionSchemaPre
         return undefined;
     }
 
-    
+
     render() {
         let input = this.props.previewScript === undefined ? (null) :
             <div ref={this.createTarget}><input className="collectionSchemaView-input" value={this.props.previewScript} onChange={this.onPreviewScriptChange}