From 2d62ca0060c9ef7d3932e8681deb09cc3acf6d48 Mon Sep 17 00:00:00 2001
From: Fawn <fangrui_tong@brown.edu>
Date: Thu, 25 Jul 2019 11:47:23 -0400
Subject: schema stylign

---
 .../CollectionSchemaMovableTableHOC.tsx            | 10 +--
 .../views/collections/CollectionSchemaView.scss    | 82 +++++++++++++++++-----
 .../views/collections/CollectionSchemaView.tsx     |  2 +-
 src/client/views/collections/CollectionView.tsx    |  2 +-
 4 files changed, 73 insertions(+), 23 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx b/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx
index 290958cd0..70d6fbc7b 100644
--- a/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx
+++ b/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx
@@ -9,10 +9,10 @@ import { Cast, FieldValue, StrCast } from "../../../new_fields/Types";
 import { ContextMenu } from "../ContextMenu";
 import { action } from "mobx";
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { faGripVertical } from '@fortawesome/free-solid-svg-icons';
+import { faGripVertical, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-library.add(faGripVertical);
+library.add(faGripVertical, faTrash);
 
 export interface MovableColumnProps {
     columnRenderer: TableCellRenderer;
@@ -198,13 +198,15 @@ export class MovableRow extends React.Component<MovableRowProps> {
         let className = "collectionSchema-row";
         if (this.props.rowFocused) className += " row-focused";
         if (this.props.rowWrapped) className += " row-wrapped";
+        // if (!this.props.rowWrapped) className += " row-unwrapped";
 
         return (
             <div className={className} ref={this.createRowDropTarget} onContextMenu={this.onRowContextMenu}>
                 <div className="collectionSchema-row-wrapper" ref={this._header} onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}>
                     <ReactTableDefaults.TrComponent>
-                        <div className="row-dragger" ref={reference} onPointerDown={onItemDown}>
-                            <FontAwesomeIcon icon={"grip-vertical"} size="sm" />
+                        <div className="row-dragger">
+                            <div className="row-option" onClick={() => this.props.removeDoc(this.props.rowInfo.original)}><FontAwesomeIcon icon="trash" size="sm" /></div>
+                            <div className="row-option" style={{ cursor: "grab" }} ref={reference} onPointerDown={onItemDown}><FontAwesomeIcon icon="grip-vertical" size="sm" /></div>
                         </div>
                         {children}
                     </ReactTableDefaults.TrComponent>
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 22d8a5cb6..9ad52db4c 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -8,7 +8,7 @@
     box-sizing: border-box;
     // position: absolute;
     width: 100%;
-    // height: calc(100% - 25px);
+    height: calc(100% - 50px);
     // overflow: hidden;
     overflow-x: scroll;
     border: none;
@@ -55,7 +55,7 @@
 }
 
 .ReactTable {
-    width: 100%;
+    width: 100% !important;
     height: 100%;
     background: white;
     box-sizing: border-box;
@@ -70,8 +70,8 @@
     }
 
     .rt-thead {
-        width: calc(100% - 30px);
-        margin-left: 30px;
+        width: calc(100% - 50px);
+        margin-left: 50px;
 
         &.-header {
             // background: $intermediate-color;
@@ -118,6 +118,7 @@
 
     .rt-tbody {
         direction: rtl;
+        overflow: visible;
     }
 
     .rt-tr-group {
@@ -139,12 +140,12 @@
         //     background-color: $light-color-secondary;
         // }
 
-        &:first-child {
-            border-top: 1px solid $light-color-secondary !important;
-        }
-        &:last-child {
-            border-bottom: 1px solid $light-color-secondary !important;
-        }
+        // &:first-child {
+        //     border-top: 1px solid $light-color-secondary !important;
+        // }
+        // &:last-child {
+        //     border-bottom: 1px solid $light-color-secondary !important;
+        // }
     }
 
     .rt-tr {
@@ -162,7 +163,8 @@
         padding: 0;
         font-size: 13px;
         text-align: center;
-        white-space: normal;
+        
+        // white-space: normal;
 
         .imageBox-cont {
             position: relative;
@@ -296,17 +298,46 @@ button.add-column {
 .collectionSchema-row {
     // height: $MAX_ROW_HEIGHT;
     height: 100%;
+    background-color: white;
 
     &.row-focused {
-        background-color: rgb(253, 191, 191);//$light-color-secondary;
+        background-color: rgb(255, 246, 246);//$light-color-secondary;
+    }
+
+    &.row-wrapped {
+        white-space: normal;
     }
 
     .row-dragger {
+        display: flex;
+        justify-content: space-evenly;
         // height: $MAX_ROW_HEIGHT;
-        width: 30px;
+        flex: 50 0 auto;
+        width: 50px;
+        max-width: 50px;
         height: 100%;
-        padding: 10px;
-        color: gray;
+        min-height: 30px;
+        // padding: 5px 5px 5px 0;
+        color: lightgray;
+        background-color: white;
+        transition: color 0.1s ease;
+
+        // &:hover {
+        //     color: lightgray;
+        // }
+
+        .row-option {
+            // padding: 5px;
+            cursor: pointer;
+            transition: color 0.1s ease;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+
+            &:hover {
+                color: gray;
+            }
+        }
     }
 
     .collectionSchema-row-wrapper {
@@ -369,6 +400,7 @@ button.add-column {
 }
 
 .collectionSchemaView-toolbar {
+    height: 50px;
     display: flex;
     justify-content: flex-end;
 }
@@ -379,8 +411,24 @@ button.add-column {
 }
 
 .sub {
-    padding: 20px;
-    background-color: $intermediate-color;
+    padding: 10px 30px;
+    // padding-left: 80px;
+    background-color: rgb(252, 252, 252);
+    width: calc(100% - 50px);
+    margin-left: 50px;
+
+    .rt-table {
+        overflow-x: hidden; // todo; this shouldnt be like this :((
+        overflow-y: visible;
+    } // TODO fix
+
+    .row-dragger {
+        background-color: rgb(252, 252, 252);
+    }
+
+    .rt-table {
+        background-color: rgb(252, 252, 252);
+    }
 }
 
 .collectionSchemaView-expander {
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 87a4a0c6a..a8692ee95 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -435,7 +435,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
 
         return {
             style: {
-                border: !this._headerIsEditing && isFocused ? "2px solid black" : "1px solid #f1efeb"
+                border: !this._headerIsEditing && isFocused ? "2px solid rgb(255, 160, 160)" : "1px solid #f1efeb"
             }
         };
     }
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 62d721868..df8a1ebc1 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -62,7 +62,7 @@ export class CollectionView extends React.Component<FieldViewProps> {
         }
         else {
             return [
-                (<CollectionViewBaseChrome CollectionView={this} type={type} collapse={this.collapse} />),
+                // (<CollectionViewBaseChrome CollectionView={this} type={type} collapse={this.collapse} />),
                 this.SubViewHelper(type, renderProps)
             ];
         }
-- 
cgit v1.2.3-70-g09d2