merged

1 files changed, 166 insertions, 34 deletions

diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index d40e6d314..5e9d2ac67 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -1,54 +1,110 @@
+@import "../globalCssVariables";
+
 
 
 .collectionSchemaView-container {
+    border-width: $COLLECTION_BORDER_WIDTH;
+    border-color : $intermediate-color;
     border-style: solid;
+    border-radius: $border-radius;
     box-sizing: border-box;
     position: absolute;
     width: 100%;
     height: 100%;
+
+    .collectionSchemaView-cellContents {
+        height: $MAX_ROW_HEIGHT;
+        img {
+            width:auto;
+            max-height: $MAX_ROW_HEIGHT;
+        }
+    }
+    
     .collectionSchemaView-previewRegion {
-        position: relative; 
-        background: black; 
-        float: left; 
+        position: relative;
+        background: $light-color;
+        float: left;
         height: 100%;
+        .collectionSchemaView-previewDoc {
+            height: 100%;
+            width: 100%; 
+            position: absolute;
+        }
+        .collectionSchemaView-input {
+            position: absolute;
+            max-width: 150px;
+            width: 100%;
+            bottom: 0px;
+        }
+        .documentView-node:first-child {
+            position: relative;
+            background: $light-color;
+        }
     }
     .collectionSchemaView-previewHandle {
         position: absolute;
-        height: 37px;
-        width: 20px; 
+        height: 15px;
+        width: 15px; 
         z-index: 20; 
         right: 0; 
-        top: 0; 
+        top: 20px; 
         background: Black ;
     }
     .collectionSchemaView-dividerDragger{
         position: relative; 
         background: black; 
         float: left; 
+        height: 37px;
+        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;
+    }
+    .collectionSchemaView-colDividerDragger {
+        position: relative;
+        box-sizing: border-box;
+        border-top: 1px solid $intermediate-color;
+        border-bottom: 1px solid $intermediate-color;
+        float: top;
+        width: 100%;
+    }
+    .collectionSchemaView-dividerDragger {
+        position: relative;
+        box-sizing: border-box;
+        border-left: 1px solid $intermediate-color;
+        border-right: 1px solid $intermediate-color;
+        float: left;
         height: 100%;
     }
     .collectionSchemaView-tableContainer {
         position: relative;
         float: left;
-        height: 100%; 
+        height: 100%;
     }
-
     .ReactTable {
-        position: absolute;
-       // display: inline-block;
-       // overflow: auto;
+        // position: absolute; // display: inline-block;
+        // overflow: auto;
         width: 100%;
         height: 100%;
-        background: white;
+        background: $light-color;
         box-sizing: border-box;
+        border: none !important;
         .rt-table {
             overflow-y: auto;
             overflow-x: auto;
             height: 100%;
-
             display: -webkit-inline-box;
-            direction: ltr;
-            // direction:rtl;
+            direction: ltr; // direction:rtl;
             // display:block;
         }
         .rt-tbody {
@@ -57,45 +113,113 @@
         }
         .rt-tr-group {
             direction: ltr;
-            max-height: 44px;
+            max-height: $MAX_ROW_HEIGHT;
         }
         .rt-td {
-            border-width: 1;
-            border-right-color: #aaa;
+            border-width: 1px;
+            border-right-color: $intermediate-color;
             .imageBox-cont {
-                position:relative;
-                max-height:100%;
+                position: relative;
+                max-height: 100%;
             }
             .imageBox-cont img {
                 object-fit: contain;
                 max-width: 100%;
-                height: 100%
+                height: 100%;
+            }
+            .videoBox-cont {
+                object-fit: contain;
+                width: auto;
+                height: 100%;
             }
-        }
-        .rt-tr-group {
-            border-width: 1;
-            border-bottom-color: #aaa
         }
     }
     .ReactTable .rt-thead.-header {
-            background:grey;
-        }
-    .ReactTable .rt-th, .ReactTable .rt-td {
-        max-height: 44;
+        background: $intermediate-color;
+        color: $light-color;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 12px;
+        height: 30px;
+        padding-top: 4px;
+    }
+    .ReactTable .rt-th,
+    .ReactTable .rt-td {
+        max-height: $MAX_ROW_HEIGHT;
         padding: 3px 7px;
+        font-size: 13px;
+        text-align: center;
     }
     .ReactTable .rt-tbody .rt-tr-group:last-child {
-        border-bottom: grey;
+        border-bottom: $intermediate-color;
         border-bottom-style: solid;
         border-bottom-width: 1;
     }
+    .documentView-node-topmost {
+        text-align:left;
+        transform-origin: center top;
+        display: inline-block;
+    }
     .documentView-node:first-child {
-        background: grey;
-        .imageBox-cont img {
-            object-fit: contain;
-        }
+        background: $light-color;
     }
 }
+//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;
+    display:inline-block;
+    padding: 0px;
+    font-size: 100%;
+}
+
+ul {
+    list-style-type: disc;
+}
+
+#schema-options-header {
+    text-align: center;
+    padding: 0px;
+    margin: 0px;
+}
+.schema-options-subHeader {
+    color: $intermediate-color;
+    margin-bottom: 5px;
+}
+#schemaOptionsMenuBtn:hover {
+    transform: scale(1.15);
+}
+
+#preview-schema-checkbox-div {
+    margin-left: 20px;
+    font-size: 12px;
+}
+
+  #options-flyout-div {
+    text-align: left;
+    padding:0px;
+    z-index: 100;
+    font-family: $sans-serif;
+    padding-left: 5px;
+  }
+
+  #schema-col-checklist {
+    overflow: scroll;
+    text-align: left;
+    //background-color: $light-color-secondary;
+    line-height: 25px;
+    max-height: 175px;
+    font-family: $sans-serif;
+    font-size: 12px;
+  }
+  
 
 .Resizer {
     box-sizing: border-box;
@@ -204,4 +328,12 @@
     -webkit-flex: 1;
     -ms-flex: 1;
     flex: 1;
+}
+
+.-even {
+    background: $light-color !important;
+}
+
+.-odd {
+    background: $light-color-secondary !important;
 }
\ No newline at end of file