From 5da4de27c45e4f40c88b710be64f0129e9be7088 Mon Sep 17 00:00:00 2001
From: Sam Wilkins <abdullah_ahmed@brown.edu>
Date: Fri, 19 Jul 2019 16:21:19 -0400
Subject: focused cell styling + click editable view changes focuses on that
 cell

---
 src/client/views/EditableView.tsx                  |  2 +-
 .../views/collections/CollectionSchemaCells.tsx    |  1 +
 .../views/collections/CollectionSchemaHeaders.tsx  | 29 ----------------------
 .../views/collections/CollectionSchemaView.scss    |  7 +++++-
 4 files changed, 8 insertions(+), 31 deletions(-)

(limited to 'src')

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 42faedf9d..9471ae98a 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -79,7 +79,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();
     }
 
diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx
index 0307bb83e..31a9baa11 100644
--- a/src/client/views/collections/CollectionSchemaCells.tsx
+++ b/src/client/views/collections/CollectionSchemaCells.tsx
@@ -74,6 +74,7 @@ export class CollectionSchemaCell extends React.Component<CellProps> {
         document.addEventListener("keydown", this.onKeyDown);
         this._isEditing = isEditing;
         this.props.setIsEditing(isEditing);
+        this.props.changeFocusedCellByIndex(this.props.row, this.props.col);
     }
 
     @action
diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx
index 5f8037fbf..df078eca5 100644
--- a/src/client/views/collections/CollectionSchemaHeaders.tsx
+++ b/src/client/views/collections/CollectionSchemaHeaders.tsx
@@ -56,38 +56,14 @@ export class CollectionSchemaHeader extends React.Component<HeaderProps> {
 
 
 export interface AddColumnHeaderProps {
-    // possibleKeys: string[];
-    // existingKeys: string[];
-    // onSelect: (oldKey: string, newKey: string, addnew: boolean) => void;
-    // setIsEditing: (isEditing: boolean) => void;
     createColumn: () => void;
 }
 
 @observer
 export class CollectionSchemaAddColumnHeader extends React.Component<AddColumnHeaderProps> {
     render() {
-        let addButton = <button><FontAwesomeIcon icon="plus" size="sm" /></button>;
         return (
             <button onClick={() => this.props.createColumn()}><FontAwesomeIcon icon="plus" size="sm" /></button>
-            // <div className="collectionSchemaView-header-addColumn" >
-            //     <CollectionSchemaColumnMenu
-            //         keyValue=""
-            //         possibleKeys={this.props.possibleKeys}
-            //         existingKeys={this.props.existingKeys}
-            //         keyType={ColumnType.Any}
-            //         typeConst={true}
-            //         menuButtonContent={addButton}
-            //         addNew={true}
-            //         onSelect={this.props.onSelect}
-            //         setIsEditing={this.props.setIsEditing}
-            //         deleteColumn={action(emptyFunction)}
-            //         onlyShowOptions={true}
-            //         setColumnType={action(emptyFunction)}
-            //         setColumnSort={action(emptyFunction)}
-            //         removeColumnSort={action(emptyFunction)}
-            //         anchorPoint={anchorPoints.TOP_RIGHT}
-            //     />
-            // </div>
         );
     }
 }
@@ -115,8 +91,6 @@ export interface ColumnMenuProps {
 export class CollectionSchemaColumnMenu extends React.Component<ColumnMenuProps> {
     @observable private _isOpen: boolean = false;
     @observable private _node : HTMLDivElement | null = null;
-    // @observable private _node = React.createRef<HTMLDivElement>();
-    @observable private _test = "test";
 
     componentDidMount() {
         document.addEventListener("pointerdown", this.detectClick);
@@ -168,9 +142,6 @@ export class CollectionSchemaColumnMenu extends React.Component<ColumnMenuProps>
                     <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 title="Boolean" className={this.props.keyType === ColumnType.Boolean ? "active" : ""} onClick={() => this.props.setColumnType(this.props.keyValue, ColumnType.Boolean)}>
-                        <FontAwesomeIcon icon={"toggle-on"} size="sm" />
-                        </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>
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 47947829e..045994751 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -126,13 +126,14 @@
 
     .rt-tr {
         width: 100%;
+        height: $MAX_ROW_HEIGHT;
     }
 
     .rt-td {
         border-width: 1px;
         border-right-color: $intermediate-color;
         max-height: $MAX_ROW_HEIGHT;
-        padding: 3px 7px;
+        padding: 0;
         font-size: 13px;
         text-align: center;
 
@@ -289,6 +290,10 @@
     height: 100%;
     padding: 4px;
 
+    &:focus {
+        outline: none;
+    }
+
     &.focused {
         // background-color: yellowgreen;
         border: 2px solid yellowgreen;
-- 
cgit v1.2.3-70-g09d2