Merge branch 'master' into schema-view-En-Hua

1 files changed, 84 insertions, 39 deletions

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
index c17b79638..b64e9dac1 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 {
@@ -220,6 +218,8 @@
     }
 }
 
+
+
 .collectionSchemaView-header {
     height: 100%;
     color: gray;
@@ -234,6 +234,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;
@@ -279,6 +288,9 @@ button.add-column {
             width: 10px;
         }
     }
+
+    
+
     .keys-dropdown {
         position: relative;
         //width: 100%;
@@ -294,26 +306,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;
@@ -332,11 +325,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 {
@@ -345,39 +380,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;
@@ -390,28 +426,37 @@ 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;
+            height: fit-content;
             min-height: 26px;
         }
     }
     &.focused {
+        overflow: hidden;
         &.inactive {
             border: none;
         }