From 9ea2fdf4c127ba2715159209327e2a51f0482dee Mon Sep 17 00:00:00 2001
From: geireann <geireann.lindfield@gmail.com>
Date: Wed, 25 Aug 2021 06:54:48 -0400
Subject: ui updates

---
 .../collectionSchema/CollectionSchemaHeaders.tsx   |   8 +-
 .../CollectionSchemaMovableRow.tsx                 |   6 +-
 .../collectionSchema/CollectionSchemaView.scss     | 120 ++++++++++++++-------
 .../collections/collectionSchema/SchemaTable.tsx   |   4 +-
 4 files changed, 92 insertions(+), 46 deletions(-)

(limited to 'src')

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaHeaders.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaHeaders.tsx
index aaa50ba67..b28c32e0e 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaHeaders.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaHeaders.tsx
@@ -413,7 +413,7 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
                 bool = fields ? fields[1] === "check" : false;
             }
             return <div key={key} className="key-option" style={{
-                border: "1px solid lightgray", paddingLeft: 5, textAlign: "left",
+                paddingLeft: 5, textAlign: "left",
                 width: this.props.width, maxWidth: this.props.width, overflowX: "hidden", background: "white", backgroundColor: "white",
             }}
             >
@@ -489,8 +489,10 @@ export class KeysDropdown extends React.Component<KeysDropdownProps> {
     }
     render() {
         return (
-            <div style={{ display: "flex" }} ref={this.setNode}>
-                <FontAwesomeIcon onClick={e => { this.props.openHeader(this.props.col, e.clientX, e.clientY); e.stopPropagation(); }} icon={this.props.icon} size="lg" style={{ display: "inline", paddingBottom: "1px", paddingTop: "4px", cursor: "hand" }} />
+            <div style={{ display: "flex", width: '100%', alignContent: 'center', alignItems: 'center' }} ref={this.setNode}>
+                <div className="schema-icon" onClick={e => { this.props.openHeader(this.props.col, e.clientX, e.clientY); e.stopPropagation(); }}>
+                    <FontAwesomeIcon icon={this.props.icon} size="lg" style={{ display: "inline" }} />
+                </div>
 
                 {/* <FontAwesomeIcon icon={fa.faSearchMinus} size="lg" style={{ display: "inline", paddingBottom: "1px", paddingTop: "4px", cursor: "hand" }} onClick={e => {
                     runInAction(() => { this._isOpen === undefined ? this._isOpen = true : this._isOpen = !this._isOpen })
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaMovableRow.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaMovableRow.tsx
index f48906ba5..0e19ef3d9 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaMovableRow.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaMovableRow.tsx
@@ -134,9 +134,9 @@ export class MovableRow extends React.Component<MovableRowProps> {
                 <div className="collectionSchema-row-wrapper" onKeyPress={this.onKeyDown} ref={this._header} onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}>
                     <ReactTableDefaults.TrComponent onKeyPress={this.onKeyDown} >
                         <div className="row-dragger">
-                            <div className="row-option" style={{ left: 5 }} onClick={undoBatch(() => this.props.removeDoc(this.props.rowInfo.original))}><FontAwesomeIcon icon="trash" size="sm" /></div>
-                            <div className="row-option" style={{ cursor: "grab", left: 25 }} ref={reference} onPointerDown={onItemDown}><FontAwesomeIcon icon="grip-vertical" size="sm" /></div>
-                            <div className="row-option" style={{ left: 40 }} onClick={() => this.props.addDocTab(this.props.rowInfo.original, "add:right")}><FontAwesomeIcon icon="external-link-alt" size="sm" /></div>
+                            <div className="row-option" onClick={undoBatch(() => 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 className="row-option" onClick={() => this.props.addDocTab(this.props.rowInfo.original, "add:right")}><FontAwesomeIcon icon="external-link-alt" size="sm" /></div>
                         </div>
                         {children}
                     </ReactTableDefaults.TrComponent>
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
index 40cdcd14b..3074ce66e 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
@@ -108,9 +108,7 @@
         }
         .rt-th {
             padding: 0;
-            border: solid lightgray;
-            border-width: 0 1px;
-            border-bottom: 2px solid lightgray;
+            border-left: solid 1px $light-gray;
         }
     }
     .rt-th {
@@ -213,6 +211,8 @@
     }
 }
 
+
+
 .collectionSchemaView-header {
     height: 100%;
     color: gray;
@@ -227,6 +227,15 @@ button.add-column {
     width: 28px;
 }
 
+.collectionSchemaView-menuOptions-wrapper {
+    background: rgb(241, 239, 235);
+    display: flex;
+    cursor: default;
+    height: 100%;
+    align-content: center;
+    align-items: center;
+}
+
 .collectionSchema-header-menuOptions {
     color: black;
     width: 180px;
@@ -272,6 +281,9 @@ button.add-column {
             width: 10px;
         }
     }
+
+    
+
     .keys-dropdown {
         position: relative;
         //width: 100%;
@@ -287,26 +299,7 @@ button.add-column {
                 font-weight: normal;
             }
         }
-        .keys-options-wrapper {
-            width: 100%;
-            max-height: 150px;
-            overflow-y: scroll;
-            position: absolute;
-            top: 28px;
-            box-shadow: 0 10px 16px rgba(0, 0, 0, 0.1);
-            background-color: white;
-            .key-option {
-                background-color: white;
-                border: 1px solid lightgray;
-                padding: 2px 3px;
-                &:not(:first-child) {
-                    border-top: 0;
-                }
-                &:hover {
-                    background-color: $light-gray;
-                }
-            }
-        }
+        
     }
     .columnMenu-colors {
         display: flex;
@@ -325,11 +318,53 @@ button.add-column {
     }
 }
 
+.schema-icon {
+    cursor: pointer;
+    width: 25px;
+    height: 25px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-content: center;
+    background-color: $medium-blue;
+    color: white;
+    margin-right: 5px;
+    font-size: 10px;
+    border-radius: 3px;
+
+}
+
+.keys-options-wrapper {
+    position: absolute;
+    text-align: left;
+    height: fit-content;
+    top: 100%;
+    z-index: 21;
+    background-color: #ffffff;
+    box-shadow: 0px 3px 4px rgba(0,0,0,30%);
+    padding: 1px;
+    .key-option {
+        cursor: pointer;
+        color: #000000;
+        width: 100%;
+        height: 25px;
+        font-weight: 400;
+        display: flex;
+        justify-content: left;
+        align-items: center;
+        padding-left: 5px;
+        &:hover {
+            background-color: $light-gray;
+        }
+    }
+}
+
 .collectionSchema-row {
     height: 100%;
     background-color: white;
     &.row-focused .rt-td {
-        background-color: #bfffc0; //$light-gray;
+        background-color: $light-blue; //$light-gray;
+        overflow: visible;
     }
     &.row-wrapped {
         .rt-td {
@@ -338,39 +373,40 @@ button.add-column {
     }
     .row-dragger {
         display: flex;
-        justify-content: space-around;
-        //flex: 50 0 auto;
-        width: 0;
-        max-width: 50px;
-        //height: 100%;
+        justify-content: space-evenly;
+        width: 58px;
+        position: absolute;
+        /* max-width: 50px; */
         min-height: 30px;
         align-items: center;
         color: lightgray;
         background-color: white;
         transition: color 0.1s ease;
         .row-option {
-            // padding: 5px;
+            color: black;
             cursor: pointer;
-            position: absolute;
+            position: relative;
             transition: color 0.1s ease;
             display: flex;
             flex-direction: column;
             justify-content: center;
             z-index: 2;
+            border-radius: 3px;
+            padding: 3px;
             &:hover {
-                color: gray;
+                background-color: $light-gray;
             }
         }
     }
     .collectionSchema-row-wrapper {
         &.row-above {
-            border-top: 1px solid red;
+            border-top: 1px solid $medium-blue;
         }
         &.row-below {
-            border-bottom: 1px solid red;
+            border-bottom: 1px solid $medium-blue;
         }
         &.row-inside {
-            border: 1px solid red;
+            border: 2px dashed $medium-blue;
         }
         .row-dragging {
             background-color: blue;
@@ -383,24 +419,32 @@ button.add-column {
     height: unset;
 }
 
+.collectionSchemaView-cellContents {
+    width: 100%;
+}
+
 .collectionSchemaView-cellWrapper {
+    display: flex;
     height: 100%;
-    padding: 4px;
     text-align: left;
     padding-left: 19px;
     position: relative;
+    align-items: center;
+    align-content: center;
     &:focus {
         outline: none;
     }
     &.editing {
         padding: 0;
+        box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3);
+        transform: scale(1.1);
+        z-index: 40;
         input {
             outline: 0;
             border: none;
-            background-color: rgb(255, 217, 217);
+            background-color: $white;
             width: 100%;
             height: 100%;
-            padding: 2px 3px;
             min-height: 26px;
         }
     }
diff --git a/src/client/views/collections/collectionSchema/SchemaTable.tsx b/src/client/views/collections/collectionSchema/SchemaTable.tsx
index abe549072..1cf466cba 100644
--- a/src/client/views/collections/collectionSchema/SchemaTable.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTable.tsx
@@ -194,10 +194,10 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
             const sortIcon = col.desc === undefined ? "caret-right" : col.desc === true ? "caret-down" : "caret-up";
             const header = <div className="collectionSchemaView-menuOptions-wrapper" style={{ background: col.color, padding: "2px", display: "flex", cursor: "default", height: "100%", }}>
                 {keysDropdown}
-                <div onClick={e => this.changeSorting(col)} style={{ width: 21, padding: 1, display: "inline", zIndex: 1, background: "inherit", cursor: "hand" }}>
+                <div  onClick={e => this.changeSorting(col)} style={{ width: 21, padding: 1, display: "inline", zIndex: 1, background: "inherit", cursor: "pointer" }}>
                     <FontAwesomeIcon icon={sortIcon} size="lg" />
                 </div>
-                {this.props.Document._chromeHidden || this.props.addDocument == returnFalse ? undefined : <div className="collectionSchemaView-addRow" onClick={this.createRow}>+ new</div>}
+                {/* {this.props.Document._chromeHidden || this.props.addDocument == returnFalse ? undefined : <div className="collectionSchemaView-addRow" onClick={this.createRow}>+ new</div>} */}
             </div>;
 
             return {
-- 
cgit v1.2.3-70-g09d2