merge with master

1 files changed, 385 insertions, 245 deletions

diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 186e006f3..01744fb34 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -1,7 +1,5 @@
 @import "../globalCssVariables";
 
-
-
 .collectionSchemaView-container {
     border-width: $COLLECTION_BORDER_WIDTH;
     border-color: $intermediate-color;
@@ -9,23 +7,24 @@
     border-radius: $border-radius;
     box-sizing: border-box;
     position: absolute;
+    top: 0;
     width: 100%;
     height: 100%;
-    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 {
@@ -47,329 +46,470 @@
         }
     }
 
-    .collectionSchemaView-previewHandle {
-        position: absolute;
-        height: 15px;
-        width: 15px;
-        z-index: 20;
-        right: 0;
-        top: 20px;
-        background: Black;
-    }
-
     .collectionSchemaView-dividerDragger {
         position: relative;
-        background: black;
-        float: left;
-        height: 37px;
+        height: 100%;
         width: 20px;
         z-index: 20;
         right: 0;
         top: 0;
-        background: $main-accent;
-    }
-
-    .collectionSchemaView-columnsHandle {
-        position: absolute;
-        height: 37px;
-        width: 20px;
-        z-index: 20;
-        left: 0;
-        bottom: 0;
-        background: $main-accent;
+        background: gray;
+        cursor: col-resize;
     }
 
-    .collectionSchemaView-colDividerDragger {
-        position: relative;
-        box-sizing: border-box;
-        border-top: 1px solid $intermediate-color;
-        border-bottom: 1px solid $intermediate-color;
-        float: top;
-        width: 100%;
+    .documentView-node:first-child {
+        background: $light-color;
     }
+}
 
-    .collectionSchemaView-dividerDragger {
-        position: relative;
-        box-sizing: border-box;
-        border-left: 1px solid $intermediate-color;
-        border-right: 1px solid $intermediate-color;
-        float: left;
-        height: 100%;
-    }
+.ReactTable {
+    width: 100%;
+    background: white;
+    box-sizing: border-box;
+    border: none !important;
+    float: none !important;
 
-    .collectionSchemaView-tableContainer {
-        position: relative;
-        float: left;
+    .rt-table {
         height: 100%;
+        display: -webkit-inline-box;
+        direction: ltr; 
+        overflow: visible;
     }
 
-    .ReactTable {
-        // position: absolute; // display: inline-block;
-        // overflow: auto;
-        width: 100%;
-        height: 100%;
-        background: $light-color;
-        box-sizing: border-box;
-        border: none !important;
+    .rt-thead {
+        width: calc(100% - 52px);
+        margin-left: 50px;
 
-        .rt-table {
-            overflow-y: auto;
-            overflow-x: auto;
-            height: 100%;
-            display: -webkit-inline-box;
-            direction: ltr; // direction:rtl;
-            // display:block;
+        &.-header {
+            font-size: 12px;
+            height: 30px;
+            box-shadow: none;
         }
 
-        .rt-tbody {
-            //direction: ltr;
-            direction: rtl;
+        .rt-resizable-header-content {
+            height: 100%;
+            overflow: visible;
         }
 
-        .rt-tr-group {
-            direction: ltr;
-            max-height: $MAX_ROW_HEIGHT;
+        .rt-th {
+            padding: 0;
+            border: solid lightgray;
+            border-width: 0 1px;
+            border-bottom: 2px solid lightgray;
         }
+    }
 
-        .rt-td {
-            border-width: 1px;
-            border-right-color: $intermediate-color;
+    .rt-th {
+        font-size: 13px;
+        text-align: center;
 
-            .imageBox-cont {
-                position: relative;
-                max-height: 100%;
-            }
+        &:last-child {
+            overflow: visible;
+        }
+    }
 
-            .imageBox-cont img {
-                object-fit: contain;
-                max-width: 100%;
-                height: 100%;
-            }
+    .rt-tbody {
+        width: calc(100% - 2px);
+        direction: rtl;
+        overflow: visible;
+    }
 
-            .videoBox-cont {
-                object-fit: contain;
-                width: auto;
-                height: 100%;
-            }
-        }
+    .rt-tr-group {
+        direction: ltr;
+        flex: 0 1 auto;
+        min-height: 30px;
+        border: 0 !important;
     }
 
-    .ReactTable .rt-thead.-header {
-        background: $intermediate-color;
-        color: $light-color;
-        // text-transform: uppercase;
-        letter-spacing: 2px;
-        font-size: 12px;
-        height: 30px;
-        padding-top: 4px;
+    .rt-tr {
+        width: 100%;
+        min-height: 30px;
     }
 
-    .ReactTable .rt-th,
-    .ReactTable .rt-td {
-        max-height: $MAX_ROW_HEIGHT;
-        padding: 3px 7px;
+    .rt-td {
+        padding: 0;
         font-size: 13px;
         text-align: center;
+        white-space: nowrap;
+
+        .imageBox-cont {
+            position: relative;
+            max-height: 100%;
+        }
+
+        .imageBox-cont img {
+            object-fit: contain;
+            max-width: 100%;
+            height: 100%;
+        }
+
+        .videoBox-cont {
+            object-fit: contain;
+            width: auto;
+            height: 100%;
+        }
     }
 
-    .ReactTable .rt-tbody .rt-tr-group:last-child {
-        border-bottom: $intermediate-color;
-        border-bottom-style: solid;
-        border-bottom-width: 1;
+    .rt-resizer {
+        width: 8px;
+        right: -4px;
     }
 
-    .documentView-node-topmost {
-        text-align: left;
-        transform-origin: center top;
-        display: inline-block;
+    .rt-resizable-header {
+        padding: 0;
+        height: 30px;
     }
 
-    .documentView-node:first-child {
-        background: $light-color;
+    .rt-resizable-header:last-child {
+        overflow: visible;
+
+        .rt-resizer {
+            width: 5px !important;
+        }
     }
 }
 
-//options menu styling
-#schemaOptionsMenuBtn {
-    position: absolute;
-    height: 20px;
-    width: 20px;
-    border-radius: 50%;
-    z-index: 21;
-    right: 4px;
-    top: 4px;
-    pointer-events: auto;
-    background-color: black;
+.documentView-node-topmost {
+    text-align: left;
+    transform-origin: center top;
     display: inline-block;
-    padding: 0px;
-    font-size: 100%;
 }
 
-ul {
-    list-style-type: disc;
-}
+.collectionSchema-col {
+    height: 100%;
 
-#schema-options-header {
-    text-align: center;
-    padding: 0px;
-    margin: 0px;
-}
+    .collectionSchema-col-wrapper {
+        &.col-before {
+            border-left: 2px solid red;
+        }
 
-.schema-options-subHeader {
-    color: $intermediate-color;
-    margin-bottom: 5px;
+        &.col-after {
+            border-right: 2px solid red;
+        }
+    }
 }
 
-#schemaOptionsMenuBtn:hover {
-    transform: scale(1.15);
-}
 
-#preview-schema-checkbox-div {
-    margin-left: 20px;
-    font-size: 12px;
+.collectionSchemaView-header {
+    height: 100%;
+    color: gray;
+
+    .collectionSchema-header-menu {
+        height: 100%;
+
+        .collectionSchema-header-toggler {
+            width: 100%;
+            height: 100%;
+            padding: 4px;
+            letter-spacing: 2px;
+            text-transform: uppercase;
+
+            svg {
+                margin-right: 4px;
+            }
+        }
+    }
 }
 
-#options-flyout-div {
-    text-align: left;
-    padding: 0px;
-    z-index: 100;
-    font-family: $sans-serif;
-    padding-left: 5px;
+button.add-column {
+    width: 28px;
 }
 
-#schema-col-checklist {
-    overflow: scroll;
+.collectionSchema-header-menuOptions {
+    color: black;
+    width: 200px;
     text-align: left;
-    //background-color: $light-color-secondary;
-    line-height: 25px;
-    max-height: 175px;
-    font-family: $sans-serif;
-    font-size: 12px;
-}
 
+    .collectionSchema-headerMenu-group {
+        padding: 7px 0;
+        border-bottom: 1px solid lightgray;
 
-.Resizer {
-    box-sizing: border-box;
-    background: #000;
-    opacity: 0.5;
-    z-index: 1;
-    background-clip: padding-box;
-
-    &.horizontal {
-        height: 11px;
-        margin: -5px 0;
-        border-top: 5px solid rgba(255, 255, 255, 0);
-        border-bottom: 5px solid rgba(255, 255, 255, 0);
-        cursor: row-resize;
-        width: 100%;
+        &:first-child {
+            padding-top : 0;
+        }
 
-        &:hover {
-            border-top: 5px solid rgba(0, 0, 0, 0.5);
-            border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+        &:last-child {
+            border: none;
+            text-align: center;
+            padding: 12px 0 0 0;
         }
     }
 
-    &.vertical {
-        width: 11px;
-        margin: 0 -5px;
-        border-left: 5px solid rgba(255, 255, 255, 0);
-        border-right: 5px solid rgba(255, 255, 255, 0);
-        cursor: col-resize;
+    label {
+        color: $main-accent;
+        font-weight: normal;
+        letter-spacing: 2px;
+        text-transform: uppercase;
+    }
+
+    input {
+        color: black;
+        width: 100%;
+    }
+
+    .columnMenu-option {
+        cursor: pointer;
+        padding: 3px;
+        background-color: white;
+        transition: background-color 0.2s;
 
         &:hover {
-            border-left: 5px solid rgba(0, 0, 0, 0.5);
-            border-right: 5px solid rgba(0, 0, 0, 0.5);
+            background-color: $light-color-secondary; 
+        }
+
+        &.active {
+            font-weight: bold;
+            border: 2px solid $light-color-secondary;
+        }
+
+        svg {
+            color: gray;
+            margin-right: 5px;
+            width: 10px;
         }
     }
 
-    &:hover {
-        -webkit-transition: all 2s ease;
-        transition: all 2s ease;
+    .keys-dropdown {
+        position: relative;
+        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: 28px;
+            box-shadow: 0 10px 16px rgba(0,0,0,0.1);
+
+            .key-option {
+                background-color: $light-color;
+                border: 1px solid lightgray;
+                padding: 2px 3px;
+
+                &:not(:first-child) {
+                    border-top: 0;
+                }
+
+                &:hover {
+                    background-color: $light-color-secondary;
+                }
+            }
+        }
     }
-}
 
-.vertical {
-    section {
-        width: 100vh;
-        height: 100vh;
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
+    .columnMenu-colors {
         display: flex;
-        -webkit-box-orient: vertical;
-        -webkit-box-direction: normal;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
+        justify-content: space-between;
+        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;
+            }
+        }
     }
+}
 
-    header {
-        padding: 1rem;
-        background: #eee;
+.collectionSchema-row {
+    height: 100%;
+    background-color: white;
+
+    &.row-focused .rt-td {
+        background-color: rgb(255, 246, 246); //$light-color-secondary;
     }
 
-    footer {
-        padding: 1rem;
-        background: #eee;
+    &.row-wrapped {
+        .rt-td {
+            white-space: normal;
+        }
     }
-}
 
-.horizontal {
-    section {
-        width: 100vh;
-        height: 100vh;
+    .row-dragger {
         display: flex;
-        flex-direction: column;
+        justify-content: space-around;
+        flex: 50 0 auto;
+        width: 50px;
+        max-width: 50px;
+        height: 100%;
+        min-height: 30px;
+        color: lightgray;
+        background-color: white;
+        transition: color 0.1s ease;
+
+        .row-option {
+            // padding: 5px;
+            cursor: pointer;
+            transition: color 0.1s ease;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+
+            &:hover {
+                color: gray;
+            }
+        }
     }
 
-    header {
-        padding: 1rem;
-        background: #eee;
-    }
+    .collectionSchema-row-wrapper {
+
+        &.row-above {
+            border-top: 1px solid red;
+        }
 
-    footer {
-        padding: 1rem;
-        background: #eee;
+        &.row-below {
+            border-bottom: 1px solid red;
+        }
+
+        &.row-inside {
+            border: 1px solid red;
+        }
+
+        .row-dragging {
+            background-color: blue;
+        }
     }
 }
 
-.parent {
+.collectionSchemaView-cellContainer {
     width: 100%;
     height: 100%;
-    -webkit-box-flex: 1;
-    -webkit-flex: 1;
-    -ms-flex: 1;
-    flex: 1;
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
+}
+
+.collectionSchemaView-cellWrapper {
+    height: 100%;
+    padding: 4px;
+    position: relative;
+
+    &:focus {
+        outline: none;
+    }
+
+    &.editing {
+        padding: 0;
+        input {
+            outline: 0;
+            border: none;
+            background-color: rgb(255, 217, 217);
+            width: 100%;
+            height: 100%;
+            padding: 2px 3px;
+            min-height: 26px;
+        }
+    }
+
+    &.focused {
+
+        &.inactive {
+            border: none;
+        }
+    }
+
+    p {
+        width: 100%;
+        height: 100%;
+    }
+
+    &:hover .collectionSchemaView-cellContents-docExpander {
+        display: block;
+    }
+}
+
+.collectionSchemaView-cellContents-docExpander {
+    height: 30px;
+    width: 30px;
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    background-color: lightgray;
+}
+
+.doc-drag-over {
+    background-color: red;
+}
+
+.collectionSchemaView-toolbar {
+    height: 30px;
     display: flex;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-    -webkit-flex-direction: column;
-    -ms-flex-direction: column;
-    flex-direction: column;
+    justify-content: flex-end;
+    padding: 0 10px;
+    border-bottom: 2px solid gray;
+
+    .collectionSchemaView-toolbar-item {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
 }
 
-.header {
-    background: #aaa;
-    height: 3rem;
-    line-height: 3rem;
+#preview-schema-checkbox-div {
+    margin-left: 20px;
+    font-size: 12px;
+}
+
+.collectionSchemaView-table {
+    width: 100%;
+    height: 100%;
+    overflow: visible;
 }
 
-.wrapper {
-    background: #ffa;
-    margin: 5rem;
-    -webkit-box-flex: 1;
-    -webkit-flex: 1;
-    -ms-flex: 1;
-    flex: 1;
+.sub {
+    padding: 10px 30px;
+    background-color: rgb(252, 252, 252);
+    width: calc(100% - 50px);
+    margin-left: 50px;
+
+    .row-dragger {
+        background-color: rgb(252, 252, 252);
+    }
+
+    .rt-table {
+        background-color: rgb(252, 252, 252);
+    }
+
+    .collectionSchemaView-table {
+        width: 100%;
+    }
 }
 
-.-even {
-    background: $light-color !important;
+.collectionSchemaView-expander {
+    height: 100%;
+    min-height: 30px;
+    position: relative;
+    color: gray;
+
+    svg {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
 }
 
-.-odd {
-    background: $light-color-secondary !important;
+.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