column adding works, but render doesn't get called on add

1 files changed, 63 insertions, 28 deletions

diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index d40e6d314..38da3505e 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -1,5 +1,3 @@
-
-
 .collectionSchemaView-container {
     border-style: solid;
     box-sizing: border-box;
@@ -7,36 +5,74 @@
     width: 100%;
     height: 100%;
     .collectionSchemaView-previewRegion {
-        position: relative; 
-        background: black; 
-        float: left; 
+        position: relative;
+        background: black;
+        float: left;
         height: 100%;
     }
     .collectionSchemaView-previewHandle {
         position: absolute;
         height: 37px;
-        width: 20px; 
-        z-index: 20; 
-        right: 0; 
-        top: 0; 
-        background: Black ;
-    }
-    .collectionSchemaView-dividerDragger{
-        position: relative; 
-        background: black; 
-        float: left; 
+        width: 20px;
+        z-index: 20;
+        right: 0;
+        top: 0;
+        background: Black;
+    }
+    .collectionSchemaView-dividerDragger {
+        position: relative;
+        background: black;
+        float: left;
         height: 100%;
     }
     .collectionSchemaView-tableContainer {
         position: relative;
         float: left;
-        height: 100%; 
+        height: 100%;
     }
-
-    .ReactTable {
+    .collectionSchemaView-addColumn {
         position: absolute;
-       // display: inline-block;
-       // overflow: auto;
+        z-index: 20px;
+        right: 10px;
+        bottom: 10px;
+        input {
+            display: none;
+        }
+        label {
+            background: red;
+            display: inline-block;
+            border-radius: 18px;
+            font-size: 25px;
+            width: 36px;
+            height: 36px;
+            margin-right: 10px;
+            text-align: center;
+            cursor: pointer;
+        }
+        input:not(:checked)~.addColumn-options {
+            display: none;
+        }
+        .addColumn-options {
+            position: absolute;
+            right: 70px;
+            bottom: 0;
+            width: 150px;
+            background-color: white;
+            ul {
+                padding: 0;
+                margin: 0;
+            }
+            li {
+                padding: 6px;
+                border: 1px solid gray;
+                width: 100%;
+                margin: 0;
+            }
+        }
+    }
+    .ReactTable {
+        position: absolute; // display: inline-block;
+        // overflow: auto;
         width: 100%;
         height: 100%;
         background: white;
@@ -45,10 +81,8 @@
             overflow-y: auto;
             overflow-x: auto;
             height: 100%;
-
             display: -webkit-inline-box;
-            direction: ltr;
-            // direction:rtl;
+            direction: ltr; // direction:rtl;
             // display:block;
         }
         .rt-tbody {
@@ -63,8 +97,8 @@
             border-width: 1;
             border-right-color: #aaa;
             .imageBox-cont {
-                position:relative;
-                max-height:100%;
+                position: relative;
+                max-height: 100%;
             }
             .imageBox-cont img {
                 object-fit: contain;
@@ -78,9 +112,10 @@
         }
     }
     .ReactTable .rt-thead.-header {
-            background:grey;
-        }
-    .ReactTable .rt-th, .ReactTable .rt-td {
+        background: grey;
+    }
+    .ReactTable .rt-th,
+    .ReactTable .rt-td {
         max-height: 44;
         padding: 3px 7px;
     }