Merge branch 'master' into toggle_claire

1 files changed, 131 insertions, 121 deletions

diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index b1e98b162..3c4279eea 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -9,26 +9,22 @@
     position: absolute;
     top: 0;
     width: 100%;
-    transition: height .5s;
     height: 100%;
-    // overflow: hidden;
-    // overflow-x: scroll;
-    // border: none;
-    overflow: hidden;
+    transition: top 0.5s;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: nowrap;
 
-    // .collectionSchemaView-cellContents {
-    //     height: $MAX_ROW_HEIGHT;
 
-    //     img {
-    //         width: auto;
-    //         max-height: $MAX_ROW_HEIGHT;
-    //     }
-    // }
+    .collectionSchemaView-tableContainer {
+        width: 100%;
+        height: 100%;
+        overflow: scroll;
+    }
 
     .collectionSchemaView-previewRegion {
         position: relative;
         background: $light-color;
-        float: left;
         height: 100%;
 
         .collectionSchemaView-previewDoc {
@@ -52,7 +48,6 @@
 
     .collectionSchemaView-dividerDragger {
         position: relative;
-        float: left;
         height: 100%;
         width: 20px;
         z-index: 20;
@@ -60,50 +55,31 @@
         top: 0;
         background: gray;
         cursor: col-resize;
-        // background: $main-accent;
-        // box-sizing: border-box;
-        // border-left: 1px solid $intermediate-color;
-        // border-right: 1px solid $intermediate-color;
     }
 }
 
 .ReactTable {
     width: 100%;
-    height: 100%;
     background: white;
     box-sizing: border-box;
     border: none !important;
+    float: none !important;
 
     .rt-table {
-        overflow-y: auto;
-        overflow-x: auto;
         height: 100%;
         display: -webkit-inline-box;
-        direction: ltr;
+        direction: ltr; 
+        overflow: visible;
     }
 
     .rt-thead {
-        width: calc(100% - 50px);
+        width: calc(100% - 52px);
         margin-left: 50px;
 
         &.-header {
-            // background: $intermediate-color;
-            // color: $light-color;
             font-size: 12px;
             height: 30px;
-            // border: 1px solid $intermediate-color;
             box-shadow: none;
-            // width: calc(100% - 30px);
-            // margin-right: -30px;
-        }
-
-        .rt-resizable-header {
-            padding: 0;
-            height: 30px;
-
-            &:last-child {
-                overflow: visible;
-            }
         }
 
         .rt-resizable-header-content {
@@ -115,14 +91,13 @@
             padding: 0;
             border: solid lightgray;
             border-width: 0 1px;
+            border-bottom: 2px solid lightgray;
         }
     }
 
     .rt-th {
-        // max-height: $MAX_ROW_HEIGHT;
         font-size: 13px;
         text-align: center;
-        background-color: $light-color-secondary;
 
         &:last-child {
             overflow: visible;
@@ -130,6 +105,7 @@
     }
 
     .rt-tbody {
+        width: calc(100% - 2px);
         direction: rtl;
         overflow: visible;
     }
@@ -139,45 +115,18 @@
         flex: 0 1 auto;
         min-height: 30px;
         border: 0 !important;
-        // border: solid lightgray;
-        // border-width: 1px 0;
-        // border-left: 1px solid lightgray;
-        // max-height: $MAX_ROW_HEIGHT;
-        // for sub comp
-
-        // &:nth-child(even) {
-        //     background-color: $light-color;
-        // }
-
-        // &:nth-child(odd) {
-        //     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;
-        // }
     }
 
     .rt-tr {
         width: 100%;
         min-height: 30px;
-        // height: $MAX_ROW_HEIGHT;
     }
 
     .rt-td {
-        // border: 1px solid $light-color-secondary !important;
-        // border-width: 0 1px;
-        // border-width: 1px;
-        // border-right-color: $intermediate-color;
-        // max-height: $MAX_ROW_HEIGHT;
         padding: 0;
         font-size: 13px;
         text-align: center;
-
-        // white-space: normal;
+        white-space: nowrap;
 
         .imageBox-cont {
             position: relative;
@@ -198,8 +147,21 @@
     }
 
     .rt-resizer {
-        width: 20px;
-        right: -10px;
+        width: 8px;
+        right: -4px;
+    }
+
+    .rt-resizable-header {
+        padding: 0;
+        height: 30px;
+    }
+
+    .rt-resizable-header:last-child {
+        overflow: visible;
+
+        .rt-resizer {
+            width: 5px !important;
+        }
     }
 }
 
@@ -246,11 +208,6 @@
                 margin-right: 4px;
             }
         }
-
-        // div[class*="css"] {
-        //     width: 100%;
-        //     height: 100%;
-        // }
     }
 }
 
@@ -260,16 +217,29 @@ button.add-column {
 
 .collectionSchema-header-menuOptions {
     color: black;
-    width: 175px;
+    width: 200px;
     text-align: left;
 
     .collectionSchema-headerMenu-group {
-        margin-bottom: 10px;
+        padding: 7px 0;
+        border-bottom: 1px solid lightgray;
+
+        &:first-child {
+            padding-top : 0;
+        }
+
+        &:last-child {
+            border: none;
+            text-align: center;
+            padding: 12px 0 0 0;
+        }
     }
 
     label {
         color: $main-accent;
         font-weight: normal;
+        letter-spacing: 2px;
+        text-transform: uppercase;
     }
 
     input {
@@ -277,23 +247,57 @@ button.add-column {
         width: 100%;
     }
 
+    .columnMenu-option {
+        cursor: pointer;
+        padding: 3px;
+        background-color: white;
+        transition: background-color 0.2s;
+
+        &:hover {
+            background-color: $light-color-secondary; 
+        }
+
+        &.active {
+            font-weight: bold;
+            border: 2px solid $light-color-secondary;
+        }
+
+        svg {
+            color: gray;
+            margin-right: 5px;
+            width: 10px;
+        }
+    }
+
     .keys-dropdown {
         position: relative;
-        max-width: 175px;
+        width: 100%;
+
+        input {
+            border: 2px solid $light-color-secondary;
+            padding: 3px;
+            height: 28px;
+            font-weight: bold;
+
+            &:focus {
+                font-weight: normal;
+            }
+        }
 
         .keys-options-wrapper {
             width: 100%;
             max-height: 150px;
             overflow-y: scroll;
             position: absolute;
-            top: 20px;
+            top: 28px;
+            box-shadow: 0 10px 16px rgba(0,0,0,0.1);
 
             .key-option {
                 background-color: $light-color;
-                border: 1px solid $light-color-secondary;
+                border: 1px solid lightgray;
                 padding: 2px 3px;
 
-                &:not(:last-child) {
+                &:not(:first-child) {
                     border-top: 0;
                 }
 
@@ -304,60 +308,51 @@ button.add-column {
         }
     }
 
-    .columnMenu-types {
+    .columnMenu-colors {
         display: flex;
         justify-content: space-between;
-
-        button {
-            border-radius: 20px;
-        }
-    }
-
-    .columnMenu-colors {
-
-
-        input[type="radio"] {
-            display: none;
-        }
+        flex-wrap: wrap;
 
         .columnMenu-colorPicker {
+            cursor: pointer;
             width: 20px;
             height: 20px;
+            border-radius: 10px;
+
+            &.active {
+                border: 2px solid white;
+                box-shadow: 0 0 0 2px lightgray;
+            }
         }
     }
 }
 
 .collectionSchema-row {
-    // height: $MAX_ROW_HEIGHT;
     height: 100%;
     background-color: white;
 
-    &.row-focused .rt-tr {
+    &.row-focused .rt-td {
         background-color: rgb(255, 246, 246); //$light-color-secondary;
     }
 
     &.row-wrapped {
-        white-space: normal;
+        .rt-td {
+            white-space: normal;
+        }
     }
 
     .row-dragger {
         display: flex;
         justify-content: space-around;
-        // height: $MAX_ROW_HEIGHT;
         flex: 50 0 auto;
         width: 50px;
         max-width: 50px;
         height: 100%;
         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;
@@ -373,7 +368,6 @@ button.add-column {
     }
 
     .collectionSchema-row-wrapper {
-        // max-height: $MAX_ROW_HEIGHT;
 
         &.row-above {
             border-top: 1px solid red;
@@ -407,18 +401,22 @@ button.add-column {
         outline: none;
     }
 
-    &.focused {
-        // background-color: yellowgreen;
-        // border: 2px solid yellowgreen;
-
+    &.editing {
+        padding: 0;
         input {
             outline: 0;
             border: none;
-            background-color: yellow;
+            background-color: rgb(255, 217, 217);
+            width: 100%;
+            height: 100%;
+            padding: 2px 3px;
+            min-height: 26px;
         }
+    }
+
+    &.focused {
 
         &.inactive {
-            // border: 2px solid rgba(255, 255, 0, 0.4);
             border: none;
         }
     }
@@ -426,7 +424,6 @@ button.add-column {
     p {
         width: 100%;
         height: 100%;
-        // word-wrap: break-word;
     }
 
     &:hover .collectionSchemaView-cellContents-docExpander {
@@ -453,9 +450,7 @@ button.add-column {
     display: flex;
     justify-content: flex-end;
     padding: 0 10px;
-
     border-bottom: 2px solid gray;
-    // margin-bottom: 10px;
 
     .collectionSchemaView-toolbar-item {
         display: flex;
@@ -470,23 +465,17 @@ button.add-column {
 }
 
 .collectionSchemaView-table {
-    width: calc(100% - 7px);
+    width: 100%;
+    height: 100%;
+    overflow: visible;
 }
 
 .sub {
     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);
     }
@@ -502,4 +491,25 @@ button.add-column {
 
 .collectionSchemaView-expander {
     height: 100%;
+    min-height: 30px;
+    position: relative;
+    color: gray;
+
+    svg {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+}
+
+.collectionSchemaView-addRow {
+    color: gray;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    cursor: pointer;
+    font-size: 10.5px;
+    padding: 10px;
+    margin-left: 50px;
+    margin-top: 10px;
 }
\ No newline at end of file