Merge pull request #162 from brown-dash/schema-mehek

new schema view

1 files changed, 163 insertions, 541 deletions

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
index 19401c7f0..287e2b01b 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
@@ -1,599 +1,221 @@
 @import '../../global/globalCssVariables.scss';
-@import '../../../../../node_modules/react-table/react-table.css';
-.collectionSchemaView-container {
-    border-width: $COLLECTION_BORDER_WIDTH;
-    border-color: $medium-gray;
-    border-style: solid;
-    border-radius: $border-radius;
-    box-sizing: border-box;
-    position: relative;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    margin-top: 0;
-    transition: top 0.5s;
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: nowrap;
-    touch-action: none;
-    div {
-        touch-action: none;
-    }
-    .collectionSchemaView-tableContainer {
-        width: 100%;
-        height: 100%;
-    }
-    .collectionSchemaView-dividerDragger {
-        position: relative;
-        height: 100%;
-        width: $SCHEMA_DIVIDER_WIDTH;
-        z-index: 20;
-        right: 0;
-        top: 0;
-        background: gray;
-        cursor: col-resize;
-    }
-    // .documentView-node:first-child {
-    //     background: $white;
-    // }
-}
 
-.collectionSchemaView-searchContainer {
-    border-width: $COLLECTION_BORDER_WIDTH;
-    border-color: $medium-gray;
-    border-style: solid;
-    border-radius: $border-radius;
-    box-sizing: border-box;
-    position: relative;
-    top: 0;
-    width: 100%;
+.collectionSchemaView {
+    cursor: default;
     height: 100%;
-    margin-top: 0;
-    transition: top 0.5s;
     display: flex;
-    justify-content: space-between;
-    flex-wrap: nowrap;
-    touch-action: none;
-    padding: 2px;
-    div {
-        touch-action: none;
-    }
-    .collectionSchemaView-tableContainer {
-        width: 100%;
-        height: 100%;
-    }
-    .collectionSchemaView-dividerDragger {
-        position: relative;
-        height: 100%;
-        width: 20px;
-        z-index: 20;
-        right: 0;
-        top: 0;
-        background: gray;
-        cursor: col-resize;
-    }
-    // .documentView-node:first-child {
-    //     background: $white;
-    // }
-}
-
-.ReactTable {
-    width: 100%;
-    background: white;
-    box-sizing: border-box;
-    border: none !important;
-    float: none !important;
-    .rt-table {
-        height: 100%;
-        display: -webkit-inline-box;
-        direction: ltr;
-        overflow: visible;
-    }
-    .rt-noData {
-        display: none;
-    }
-    .rt-thead {
-        width: 100%;
-        z-index: 100;
-        overflow-y: visible;
-        &.-header {
-            font-size: 12px;
-            height: 30px;
-            box-shadow: none;
-            z-index: 100;
-            overflow-y: visible;
-        }
-        .rt-resizable-header-content {
-            height: 100%;
-            overflow: visible;
-        }
-        .rt-th {
-            padding: 0;
-            border-left: solid 1px $light-gray;
-        }
-    }
-    .rt-th {
-        font-size: 13px;
-        text-align: center;
-        &:last-child {
-            overflow: visible;
-        }
-    }
-    .rt-tbody {
-        width: 100%;
-        direction: rtl;
-        overflow: visible;
-        .rt-td {
-            border-right: 1px solid rgba(0, 0, 0, 0.2);
-        }
-    }
-    .rt-tr-group {
-        direction: ltr;
-        flex: 0 1 auto;
-        min-height: 30px;
-        border: 0 !important;
-    }
-    .rt-tr-group:nth-of-type(even) {
-        direction: ltr;
-        flex: 0 1 auto;
-        min-height: 30px;
-        border: 0 !important;
-        background-color: red;
-    }
-    .rt-tr {
-        width: 100%;
-        min-height: 30px;
-    }
-    .rt-td {
-        padding: 0;
-        font-size: 13px;
-        text-align: center;
-        white-space: nowrap;
-        display: flex;
-        align-items: center;
-        .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%;
-        }
-    }
-    .rt-td.rt-expandable {
-        display: flex;
-        align-items: center;
-        height: inherit;
-    }
-    .rt-resizer {
-        width: 8px;
-        right: -4px;
-    }
-    .rt-resizable-header {
-        padding: 0;
-        height: 30px;
-    }
-    .rt-resizable-header:last-child {
-        overflow: visible;
-        .rt-resizer {
-            width: 5px !important;
-        }
-    }
-}
-
-.documentView-node-topmost {
-    text-align: left;
-    transform-origin: center top;
-    display: inline-block;
-}
+    flex-direction: row;
 
-.collectionSchema-col {
-    height: 100%;
-}
+    .schema-table {
+        background-color: $white;
+        cursor: default;
 
-.collectionSchema-header-menu {
-    height: auto;
-    z-index: 100;
-    position: absolute;
-    background: white;
-    padding: 5px;
-    position: fixed;
-    background: white;
-    border: black 1px solid;
-    .collectionSchema-header-toggler {
-        z-index: 100;
-        width: 100%;
-        height: 100%;
-        padding: 4px;
-        letter-spacing: 2px;
-        text-transform: uppercase;
-        svg {
-            margin-right: 4px;
-        }
-    }
-}
+        .schema-column-menu,
+        .schema-filter-menu {
+            background: $light-gray;
+            position: absolute;
+            min-width: 200px;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            z-index: 1;
 
-.collectionSchemaView-header {
-    height: 100%;
-    color: gray;
-    z-index: 100;
-    overflow-y: visible;
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-}
+            .schema-key-search-input {
+                width: calc(100% - 20px);
+                margin: 10px;
+            }
 
-button.add-column {
-    width: 28px;
-}
+            .schema-key-search-result {
+                cursor: pointer;
+                padding: 2px 10px;
+                width: 100%;
 
-.collectionSchemaView-menuOptions-wrapper {
-    background: rgb(241, 239, 235);
-    display: flex;
-    cursor: default;
-    height: 100%;
-    align-content: center;
-    align-items: center;
-}
+                &:hover {
+                    background-color: $medium-gray;
+                }
+            }
 
-.collectionSchema-header-menuOptions {
-    color: black;
-    width: 180px;
-    text-align: left;
-    .collectionSchema-headerMenu-group {
-        padding: 7px 0;
-        border-bottom: 1px solid lightgray;
-        cursor: pointer;
-        &:first-child {
-            padding-top: 0;
-        }
-        &:last-child {
-            border: none;
-            text-align: center;
-            padding: 12px 0 0 0;
-        }
-    }
-    label {
-        color: $medium-gray;
-        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 {
-            background-color: $light-gray;
-        }
-        &.active {
-            font-weight: bold;
-            border: 2px solid $light-gray;
-        }
-        svg {
-            color: gray;
-            margin-right: 5px;
-            width: 10px;
-        }
-    }
+            .schema-key-search,
+            .schema-new-key-options {
+                width: 100%;
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+            }
 
-    .keys-dropdown {
-        position: relative;
-        //width: 100%;
-        background-color: white;
-        input {
-            border: 2px solid $light-gray;
-            padding: 3px;
-            height: 28px;
-            font-weight: bold;
-            letter-spacing: '2px';
-            text-transform: 'uppercase';
-            &:focus {
-                font-weight: normal;
+            .schema-new-key-options {
+                margin: 10px;
+                .schema-key-warning {
+                    color: red;
+                    font-weight: normal;
+                    align-self: center;
+                }
             }
-        }
-    }
-    .columnMenu-colors {
-        display: flex;
-        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;
+
+            .schema-key-list {
+                width: 100%;
+                max-height: 300px;
+                overflow-y: auto;
             }
-        }
-    }
-}
 
-.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;
-}
+            .schema-key-type-option {
+                margin: 2px 0px;
 
-.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;
-        }
-    }
-}
+                input {
+                    margin-right: 5px;
+                }
+            }
 
-.collectionSchema-row {
-    height: 100%;
-    background-color: white;
-    &.row-focused .rt-td {
-        background-color: $light-blue; //$light-gray;
-        overflow: visible;
-    }
-    &.row-wrapped {
-        .rt-td {
-            white-space: normal;
-        }
-    }
-    .row-dragger {
-        display: flex;
-        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 {
-            color: black;
-            cursor: pointer;
-            position: relative;
-            transition: color 0.1s ease;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            z-index: 2;
-            border-radius: 3px;
-            padding: 3px;
-            &:hover {
-                background-color: $light-gray;
+            .schema-key-default-val {
+                margin: 5px 0;
+            }
+
+            .schema-column-menu-button {
+                cursor: pointer;
+                padding: 2px 5px;
+                background: $medium-blue;
+                border-radius: 9999px;
+                color: $white;
+                width: fit-content;
+                margin: 5px;
+                align-self: center;
             }
         }
     }
-    .collectionSchema-row-wrapper {
-        &.row-above {
-            border-top: 1px solid $medium-blue;
-        }
-        &.row-below {
-            border-bottom: 1px solid $medium-blue;
-        }
-        &.row-inside {
-            border: 2px dashed $medium-blue;
-        }
-        .row-dragging {
-            background-color: blue;
-        }
+
+    .schema-preview-divider {
+        height: 100%;
+        background: black;
+        cursor: ew-resize;
     }
 }
 
-.collectionSchemaView-cellContainer {
-    width: 100%;
-    height: unset;
-}
+.schema-header-row {
+    cursor: grab;
+    justify-content: flex-end;
 
-.collectionSchemaView-cellContents {
-    width: 100%;
+    .row-menu {
+        display: flex;
+        justify-content: flex-end;
+    }
 }
 
-.collectionSchemaView-cellWrapper {
+.schema-column-header {
+    background-color: $light-gray;
+    font-weight: bold;
     display: flex;
-    height: 100%;
-    text-align: left;
-    padding-left: 19px;
-    position: relative;
+    flex-direction: row;
+    justify-content: space-between;
     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: $white;
-            width: 100%;
-            height: fit-content;
-            min-height: 26px;
-        }
+    padding: 0;
+    z-index: 1;
+    border: 1px solid $medium-gray;
+    overflow: hidden;
+
+    .schema-column-title {
+        flex-grow: 2;
+        margin: 5px;
     }
-    &.focused {
-        overflow: hidden;
-        &.inactive {
-            border: none;
-        }
+
+    .schema-header-menu {
+        margin: 5px;
     }
-    p {
-        width: 100%;
+
+    .schema-column-resizer {
         height: 100%;
-    }
-    &:hover .collectionSchemaView-cellContents-docExpander {
-        display: block;
-    }
-    .collectionSchemaView-cellContents-document {
-        display: inline-block;
-    }
-    .collectionSchemaView-cellContents-docButton {
-        float: right;
-        width: '15px';
-        height: '15px';
-    }
-    .collectionSchemaView-dropdownWrapper {
-        border: grey;
-        border-style: solid;
-        border-width: 1px;
-        height: 30px;
-        .collectionSchemaView-dropdownButton {
-            //display: inline-block;
-            float: left;
-            height: 100%;
-        }
-        .collectionSchemaView-dropdownText {
-            display: inline-block;
-            //float: right;
-            height: 100%;
-            display: 'flex';
-            font-size: 13;
-            justify-content: 'center';
-            align-items: 'center';
-        }
-    }
-    .collectionSchemaView-dropdownContainer {
-        position: absolute;
-        border: 1px solid rgba(0, 0, 0, 0.04);
-        box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14);
-        .collectionSchemaView-dropdownOption:hover {
-            background-color: rgba(0, 0, 0, 0.14);
-            cursor: pointer;
+        width: 3px;
+        cursor: ew-resize;
+
+        &:hover {
+            background-color: $light-blue;
         }
     }
-}
 
-.collectionSchemaView-cellContents-docExpander {
-    height: 30px;
-    width: 30px;
-    display: none;
-    position: absolute;
-    top: 0;
-    right: 0;
-    background-color: lightgray;
-}
+    .schema-column-resizer.right {
+        margin-left: 5px;
+        align-self: flex-end;
+    }
 
-.doc-drag-over {
-    background-color: red;
+    .schema-column-resizer.left {
+        margin-right: 5px;
+        align-self: flex-start;
+    }
 }
 
-.collectionSchemaView-toolbar {
-    z-index: 100;
+.schema-header-menu {
+    display: flex;
+    flex-direction: row;
 }
 
-.collectionSchemaView-toolbar {
-    height: 30px;
-    display: flex;
-    justify-content: flex-end;
-    padding: 0 10px;
-    border-bottom: 2px solid gray;
-    .collectionSchemaView-toolbar-item {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-    }
+.schema-row-wrapper {
+    overflow: hidden;
 }
 
-#preview-schema-checkbox-div {
-    margin-left: 20px;
-    font-size: 12px;
+.schema-header-row {
+    background-color: $light-gray;
 }
 
-.collectionSchemaView-table {
-    width: 100%;
+.schema-header-row,
+.schema-row {
+    display: flex;
+    flex-direction: row;
     height: 100%;
     overflow: auto;
-    padding: 3px;
 }
 
-.rt-td.rt-expandable {
-    overflow: visible;
-    position: relative;
-    height: 100%;
-    z-index: 1;
+.schema-table-cell,
+.row-menu {
+    border: 1px solid $medium-gray;
+    overflow: hidden;
+    padding: 5px;
 }
 
-.reactTable-sub {
-    background-color: rgb(252, 252, 252);
-    width: 100%;
-    .rt-thead {
-        display: none;
-    }
-    .row-dragger {
-        background-color: rgb(252, 252, 252);
-    }
-    .rt-table {
-        background-color: rgb(252, 252, 252);
+.schema-row {
+    cursor: default;
+    justify-content: flex-end;
+    background: white;
+
+    .row-menu {
+        display: flex;
+        flex-direction: row;
+        min-width: 50px;
+        justify-content: flex-end;
     }
-    .collectionSchemaView-table {
-        width: 100%;
-        border: solid 1px;
-        overflow: visible;
-        padding: 0px;
+
+    .row-cells {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
     }
 }
 
-.collectionSchemaView-expander {
-    height: 100%;
-    min-height: 30px;
-    position: absolute;
-    color: gray;
-    width: 20;
-    height: auto;
-    left: 55;
+.schema-row-button,
+.schema-header-button {
+    color: $dark-gray;
+    margin: 3px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
     svg {
-        position: absolute;
-        top: 50%;
-        left: 10;
-        transform: translate(-50%, -50%);
+        width: 15px;
     }
 }
 
-.collectionSchemaView-addRow {
-    color: gray;
-    letter-spacing: 2px;
-    text-transform: uppercase;
+.schema-sort-button {
+    width: 17px;
+    height: 17px;
+    border-radius: 30%;
+    background-color: $dark-gray;
+    color: white;
+    margin: 3px;
     cursor: pointer;
-    font-size: 10.5px;
-    margin-left: 50px;
-    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+        width: 12px;
+    }
 }