committing to mess around with styles

4 files changed, 583 insertions, 95 deletions

diff --git a/src/client/views/collections/CollectionNoteTakingFieldViewColumn.scss b/src/client/views/collections/CollectionNoteTakingFieldViewColumn.scss
deleted file mode 100644
index 177b5f4d5..000000000
--- a/src/client/views/collections/CollectionNoteTakingFieldViewColumn.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-@import "../global/globalCssVariables";
-
-.collectionNoteTakingView-DocumentButtons {
-  display: flex;
-  justify-content: space-between;
-  margin: auto;
-}
-
-.collectionNoteTakingView-addDocumentButton {
-  display: flex;
-  overflow: hidden;
-  margin: auto;
-  width: 100%;
-  overflow: ellipses;
-
-  .editableView-container-editing-oneLine,
-  .editableView-container-editing {
-      color: grey;
-      padding: 10px;
-      width: 100%;
-  }
-
-  .editableView-input:hover,
-  .editableView-container-editing:hover,
-  .editableView-container-editing-oneLine:hover {
-      cursor: text
-  }
-
-  .editableView-input {
-      outline-color: black;
-      letter-spacing: 2px;
-      color: grey;
-      border: 0px;
-      padding: 12px 10px 11px 10px;
-  }
-
-  font-size: 75%;
-  letter-spacing: 2px;
-  cursor: pointer;
-
-  .editableView-input {
-      outline-color: black;
-      letter-spacing: 2px;
-      color: grey;
-      border: 0px;
-      padding: 12px 10px 11px 10px;
-  }
-}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionNoteTakingView.scss b/src/client/views/collections/CollectionNoteTakingView.scss
new file mode 100644
index 000000000..b6bb8ce2b
--- /dev/null
+++ b/src/client/views/collections/CollectionNoteTakingView.scss
@@ -0,0 +1,541 @@
+@import "../global/globalCssVariables";
+
+.collectionNoteTakingView-DocumentButtons {
+  display: flex;
+  justify-content: space-between;
+  margin: auto;
+}
+
+.collectionNoteTakingView-addDocumentButton {
+  display: flex;
+  overflow: hidden;
+  margin: auto;
+  width: 100%;
+  overflow: ellipses;
+
+  .editableView-container-editing-oneLine,
+  .editableView-container-editing {
+      color: grey;
+      padding: 10px;
+      width: 100%;
+  }
+
+  .editableView-input:hover,
+  .editableView-container-editing:hover,
+  .editableView-container-editing-oneLine:hover {
+      cursor: text
+  }
+
+  .editableView-input {
+      outline-color: black;
+      letter-spacing: 2px;
+      color: grey;
+      border: 0px;
+      padding: 12px 10px 11px 10px;
+  }
+
+  font-size: 75%;
+  letter-spacing: 2px;
+  cursor: pointer;
+
+  .editableView-input {
+      outline-color: black;
+      letter-spacing: 2px;
+      color: grey;
+      border: 0px;
+      padding: 12px 10px 11px 10px;
+  }
+}
+
+.collectionMasonryView {
+    display: inline;
+}
+
+.collectionStackingView {
+    display: flex;
+}
+
+.collectionStackingMasonry-cont {
+    position: relative;
+    height: 100%;
+    width: 100%;
+}
+
+// TODO:glr Turn this into a seperate class
+.documentButtonMenu {
+    position: relative;
+    height: fit-content;
+    border-bottom: $standard-border;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    align-content: center;
+    padding: 5px 0 5px 0;
+
+    .documentExplanation {
+        width: 90%;
+        margin: 5px;
+        font-size: 11px;
+        background-color: $light-blue;
+        color: $medium-blue;
+        padding: 10px;
+        border-radius: 10px;
+        border: solid 2px $medium-blue;
+    }
+}
+
+.collectionStackingView,
+.collectionMasonryView {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    flex-wrap: wrap;
+    transition: top .5s;
+
+    >div {
+        position: relative;
+        display: block;
+    }
+
+    .collectionStackingViewFieldColumn {
+        height: max-content;
+    }
+
+    .collectionStackingViewFieldColumnDragging {
+        height: 100%;
+    }
+
+    .collectionSchemaView-previewDoc {
+        height: 100%;
+        position: absolute;
+    }
+
+    .collectionStackingView-docView-container {
+        width: 45%;
+        margin: 5% 2.5%;
+        padding-left: 2.5%;
+        height: auto;
+    }
+
+    .collectionStackingView-flexCont {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: center;
+    }
+
+    .collectionStackingView-masonrySingle,
+    .collectionStackingView-masonryGrid {
+        width: 100%;
+        display: grid;
+        top: 0;
+        left: 0;
+    }
+
+    .collectionStackingView-masonrySingle {
+        height: 100%;
+        position: absolute;
+    }
+
+    .collectionStackingView-masonryGrid {
+        margin: auto;
+        height: max-content;
+        position: relative;
+        grid-auto-rows: 0px;
+    }
+
+    .collectionStackingView-masonrySingle {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+        top: 0;
+        left: 0;
+        width: 100%;
+        position: absolute;
+    }
+
+    .collectionStackingView-description {
+        font-size: 100%;
+        margin-bottom: 1vw;
+        padding: 10px;
+        height: 2vw;
+        width: 100%;
+        font-family: $sans-serif;
+        background: $dark-gray;
+        color: $white;
+    }
+
+    .collectionStackingView-columnDragger {
+        width: 15;
+        height: 15;
+        position: absolute;
+        margin-left: -5;
+    }
+
+    // Documents in stacking view
+    .collectionStackingView-columnDoc {
+        display: flex;
+        // margin: auto; // Removed auto so that it is no longer center aligned - this could be something we change 
+        position: relative;
+
+        &:hover {
+          .hoverButtons{
+            opacity: 1;
+          }
+        }
+
+        .hoverButtons {
+          display: flex;
+          opacity: 0;
+          position: absolute;
+          height: 100%;
+          left: -35px;
+          justify-content: center;
+          align-items: center;
+          padding: 0px 10px;
+
+          .buttonWrapper {
+            padding: 3px;
+            border-radius: 3px;
+            
+            &:hover {
+              background: rgba(0, 0, 0, 0.26);
+            }
+          }
+        }
+    }
+
+    .collectionStackingView-masonryDoc {
+        transform-origin: top left;
+        grid-column-end: span 1;
+        height: 100%;
+        margin: auto;
+        display: inline-grid;
+    }
+
+    .collectionStackingView-masonrySection {
+        margin: auto;
+    }
+
+    .collectionStackingView-collapseBar {
+        margin-left: 2px;
+        margin-right: 2px;
+        margin-top: 2px;
+        background: $medium-gray;
+        height: 5px;
+
+        &.active {
+            margin-left: 0;
+            margin-right: 0;
+            background: red;
+        }
+    }
+
+    .collectionStackingView-miniHeader {
+        width: 100%;
+
+        .editableView-container-editing-oneLine {
+            min-height: 20px;
+            display: flex;
+            align-items: center;
+            flex-direction: row;
+        }
+
+        span::before,
+        span::after {
+            content: "";
+            width: 50%;
+            border-top: dashed gray 1px;
+            position: relative;
+            display: inline-block;
+        }
+
+        span::before {
+            margin-right: 10px;
+        }
+
+        span::after {
+            margin-left: 10px;
+        }
+
+        span {
+            position: relative;
+            text-align: center;
+            white-space: nowrap;
+            overflow: visible;
+            width: 100%;
+            display: flex;
+            color: gray;
+            align-items: center;
+        }
+    }
+
+    .collectionStackingView-sectionHeader {
+        text-align: center;
+        margin: auto;
+        margin-bottom: 10px;
+        background: $medium-gray;
+        // overflow: hidden; overflow is visible so the color menu isn't hidden -ftong
+
+        .editableView-input {
+            color: $dark-gray;
+        }
+
+        .editableView-input:hover,
+        .editableView-container-editing:hover,
+        .editableView-container-editing-oneLine:hover {
+            cursor: text
+        }
+
+        .collectionStackingView-sectionHeader-subCont {
+            outline: none;
+            border: 0px;
+            width: 100%;
+            letter-spacing: 2px;
+            font-size: 75%;
+            transition: transform 0.2s;
+            position: relative;
+            height: 30px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: $dark-gray;
+
+            .editableView-container-editing-oneLine,
+            .editableView-container-editing {
+                color: grey;
+                padding: 10px;
+            }
+
+            .editableView-input:hover,
+            .editableView-container-editing:hover,
+            .editableView-container-editing-oneLine:hover {
+                cursor: text;
+            }
+
+            .editableView-input {
+                padding: 12px 10px 11px 10px;
+                border: 0px;
+                color: grey;
+                text-align: center;
+                letter-spacing: 2px;
+                outline-color: black;
+            }
+        }
+
+        .collectionStackingView-sectionColor {
+            position: absolute;
+            left: 0;
+            top: 0;
+            height: 100%;
+            display: none;
+
+            [class*="css"] {
+                max-width: 102px;
+            }
+
+            .collectionStackingView-sectionColorButton {
+                height: 30px;
+                display: inherit;
+            }
+
+            .collectionStackingView-colorPicker {
+                width: 78px;
+                z-index: 10;
+                position: relative;
+                background: white;
+
+                .colorOptions {
+                    display: flex;
+                    flex-wrap: wrap;
+                }
+
+                .colorPicker {
+                    cursor: pointer;
+                    width: 20px;
+                    height: 20px;
+                    border-radius: 10px;
+                    margin: 3px;
+
+                    &.active {
+                        border: 2px solid white;
+                        box-shadow: 0 0 0 2px lightgray;
+                    }
+                }
+            }
+        }
+
+        .collectionStackingView-sectionOptions {
+            position: absolute;
+            right: 0;
+            top: 0;
+            height: 100%;
+            display: none;
+
+            [class*="css"] {
+                max-width: 102px;
+            }
+
+            .collectionStackingView-sectionOptionButton {
+                height: 30px;
+            }
+
+            .collectionStackingView-optionPicker {
+
+                .optionOptions {
+                    display: inline;
+                }
+
+                .optionPicker {
+                    cursor: pointer;
+                    height: 20px;
+                    border-radius: 10px;
+                    margin: 3px;
+                    width: max-content;
+
+                    &.active {
+                        color: red;
+                    }
+                }
+            }
+        }
+
+        .collectionStackingView-sectionDelete {
+            position: absolute;
+            right: 25px;
+            top: 0;
+            height: 100%;
+            display: none;
+        }
+    }
+
+    .collectionStackingView-sectionHeader:hover {
+        .collectionStackingView-sectionColor {
+            display: unset;
+        }
+
+        .collectionStackingView-sectionOptions {
+            display: unset;
+        }
+
+        .collectionStackingView-sectionDelete {
+            display: unset;
+        }
+    }
+
+    .collectionStackingView-addDocumentButton,
+    .collectionStackingView-addGroupButton {
+        display: flex;
+        overflow: hidden;
+        margin: auto;
+        width: 90%;
+        overflow: ellipses;
+
+        .editableView-container-editing-oneLine,
+        .editableView-container-editing {
+            color: grey;
+            padding: 10px;
+            width: 100%;
+        }
+
+        .editableView-input:hover,
+        .editableView-container-editing:hover,
+        .editableView-container-editing-oneLine:hover {
+            cursor: text
+        }
+
+        .editableView-input {
+            outline-color: black;
+            letter-spacing: 2px;
+            color: grey;
+            border: 0px;
+            padding: 12px 10px 11px 10px;
+        }
+    }
+
+    .collectionStackingView-addDocumentButton {
+        font-size: 75%;
+        letter-spacing: 2px;
+        cursor: pointer;
+
+        .editableView-input {
+            outline-color: black;
+            letter-spacing: 2px;
+            color: grey;
+            border: 0px;
+            padding: 12px 10px 11px 10px;
+        }
+    }
+
+    .collectionStackingView-addGroupButton {
+        background: rgb(238, 238, 238);
+        font-size: 75%;
+        text-align: center;
+        letter-spacing: 2px;
+        height: fit-content;
+    }
+
+    .rc-switch {
+        position: absolute;
+        display: inline-block;
+        bottom: 4px;
+        right: 4px;
+        width: 70px;
+        height: 30px;
+        border-radius: 40px 40px;
+        background-color: lightslategrey;
+    }
+
+    .rc-switch:after {
+        position: absolute;
+        width: 22px;
+        height: 22px;
+        left: 3px;
+        top: 4px;
+        border-radius: 50% 50%;
+        background-color: #fff;
+        content: " ";
+        cursor: pointer;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
+        -webkit-transform: scale(1);
+        transform: scale(1);
+        transition: left 0.3s cubic-bezier(0.35, 0, 0.25, 1);
+        -webkit-animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
+        animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
+        -webkit-animation-duration: 0.3s;
+        animation-duration: 0.3s;
+    }
+
+    .rc-switch-checked:after {
+        left: 44px;
+    }
+
+    .rc-switch-inner {
+        color: #fff;
+        font-size: 12px;
+        position: absolute;
+        left: 28px;
+        top: 8px;
+    }
+
+    .rc-switch-checked .rc-switch-inner {
+        left: 8px;
+    }
+}
+
+@media only screen and (max-device-width: 480px) {
+
+    .collectionStackingView .collectionStackingView-columnDragger,
+    .collectionMasonryView .collectionStackingView-columnDragger {
+        width: 0.1;
+        height: 0.1;
+        opacity: 0;
+        font-size: 0;
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx
index a441354d2..35f27a862 100644
--- a/src/client/views/collections/CollectionNoteTakingView.tsx
+++ b/src/client/views/collections/CollectionNoteTakingView.tsx
@@ -23,7 +23,7 @@ import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocum
 import { DocFocusOptions, DocumentView, DocumentViewProps, ViewAdjustment } from "../nodes/DocumentView";
 import { StyleProp } from "../StyleProvider";
 import { CollectionNoteTakingViewFieldColumn } from "./CollectionNoteTakingViewFieldColumn";
-import "./CollectionStackingView.scss";
+import "./CollectionNoteTakingView.scss";
 import { CollectionSubView } from "./CollectionSubView";
 import { CollectionViewType } from "./CollectionView";
 const _global = (window /* browser */ || global /* node */) as any;
@@ -31,7 +31,6 @@ const _global = (window /* browser */ || global /* node */) as any;
 
 export type collectionNoteTakingViewProps = {
     chromeHidden?: boolean;
-    // view type is stacking
     viewType?: CollectionViewType;
     NativeWidth?: () => number;
     NativeHeight?: () => number;
@@ -135,23 +134,30 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         // appears that pivot field IS actually for sorting
         if (!this.pivotField || this.columnHeaders instanceof Promise) return new Map<SchemaHeaderField, Doc[]>();
 
+        // Shouldn't need, since we instantiate them in the constructor
+        // if (this.columnHeaders === undefined) {
+        //     setTimeout(() => this.layoutDoc._columnHeaders = new List<SchemaHeaderField>(), 0);
+        //     return new Map<SchemaHeaderField, Doc[]>();
+        // }
         const columnHeaders = Array.from(this.columnHeaders);
         const fields = new Map<SchemaHeaderField, Doc[]>(columnHeaders.map(sh => [sh, []] as [SchemaHeaderField, []]));
         let changed = false;
         this.filteredChildren.map(d => {
             if (!d[this.pivotField]) {
-              d[this.pivotField] = `First Column`
+              d[this.pivotField] = `New Column`
             };
             const sectionValue = d[this.pivotField] as object;
-            const castedSectionValue = sectionValue.toString()
+            // the next five lines ensures that floating point rounding errors don't create more than one section -syip
+            const parsed = parseInt(sectionValue.toString());
+            const castedSectionValue = !isNaN(parsed) ? parsed : sectionValue;
 
             // look for if header exists already
-            const existingHeader = columnHeaders.find(sh => sh.heading === (castedSectionValue));
+            const existingHeader = columnHeaders.find(sh => sh.heading === (castedSectionValue ? castedSectionValue.toString() : `0`));
             if (existingHeader) {
                 fields.get(existingHeader)!.push(d);
             }
             else {
-                const newSchemaHeader = new SchemaHeaderField(castedSectionValue.toString());
+                const newSchemaHeader = new SchemaHeaderField(castedSectionValue ? castedSectionValue.toString() : `0`);
                 fields.set(newSchemaHeader, [d]);
                 columnHeaders.push(newSchemaHeader);
                 changed = true;
@@ -212,9 +218,9 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         return this.props.addDocTab(doc, where);
     }
 
-    // scrollToBottom = () => {
-    //     smoothScroll(500, this._mainCont!, this._mainCont!.scrollHeight);
-    // }
+    scrollToBottom = () => {
+        smoothScroll(500, this._mainCont!, this._mainCont!.scrollHeight);
+    }
 
     // let's dive in and get the actual document we want to drag/move around
     focusDocument = (doc: Doc, options?: DocFocusOptions) => {
@@ -256,7 +262,7 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         const height = () => this.getDocHeight(doc);
 
         let dref: Opt<DocumentView>;
-        const stackedDocTransform = () => this.getDocTransform(doc);
+        const stackedDocTransform = () => this.getDocTransform(doc, dref);
         this._docXfs.push({ stackedDocTransform, width, height });
         //DocumentView is how the node will be rendered
         return <DocumentView ref={r => dref = r || undefined}
@@ -310,10 +316,11 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
     }
 
     //TODO update this to 
-    getDocTransform(doc: Doc) {
-        const {translateX, translateY } = Utils.GetScreenTransform(undefined);
+    getDocTransform(doc: Doc, dref?: DocumentView) {
+        const y = this._scroll; // required for document decorations to update when the text box container is scrolled
+        const { scale, translateX, translateY } = Utils.GetScreenTransform(dref?.ContentDiv || undefined);
         // the document view may center its contents and if so, will prepend that onto the screenToLocalTansform.  so we have to subtract that off 
-        return new Transform(- translateX, - translateY, 1).scale(this.props.ScreenToLocalTransform().Scale);
+        return new Transform(- translateX + (dref?.centeringX || 0), - translateY + (dref?.centeringY || 0), 1).scale(this.props.ScreenToLocalTransform().Scale);
     }
 
     //TODO do we actually want to update the doc width on this?
@@ -323,9 +330,8 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
       const existingHeader = this.columnHeaders.find(sh => sh.heading === (castedSectionValue));
       if (existingHeader) {
         const index = this.columnHeaders.indexOf(existingHeader)
-        if (index == this.columnHeaders.length) {
-          // The -25 is arbitray and just looked nice
-          return this.props.PanelWidth() - this.columnStartXCoords[index] - 2 * this.gridGap
+        if (this.columnHeaders.length == 1) {
+          return this.props.PanelWidth() - this.columnStartXCoords[index] - 4 * this.gridGap
         } 
         return this.columnStartXCoords[index + 1] - this.columnStartXCoords[index] - 2 * this.gridGap
       }
@@ -576,9 +582,9 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
             addDocument={this.addDocument}
             chromeHidden={this.chromeHidden}
             columnHeaders={this.columnHeaders}
-            // resizeColumns={this.resizeColumns}
             Document={this.props.Document}
             DataDoc={this.props.DataDoc}
+            resizeColumns={this.resizeColumns.bind(this)}
             renderChildren={this.children}
             columnWidth={this.columnWidth}
             numGroupColumns={this.numGroupColumns}
@@ -597,7 +603,6 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
             editableViewProps={{
               GetValue: () => "",
               SetValue: this.addGroup,
-              // I don't recall ever seeing this add a group button
               contents: "+ New Column"
           }}
         />;
@@ -643,8 +648,22 @@ export class CollectionNoteTakingView extends CollectionSubView<Partial<collecti
         }
         // a section will have a header and a list of docs. Ok cool.
         // return sections.map((section, i) => this.isStackingView ? this.sectionStacking(section[0], section[1]) : this.sectionMasonry(section[0], section[1], i === 0));
-        return sections.map((section) => this.sectionStacking(section[0], section[1]));
-
+        //TODO need to add the divs in
+        const eles: JSX.Element[] = []
+        for (let i = 0; i < sections.length; i++) {
+            const col = this.sectionStacking(sections[i][0], sections[i][1])
+            eles.push(col)
+            //TODO make this look pretty
+            // if (i < sections.length - 1) {
+            //   eles.push(
+            //     <div className={"collectionStackingViewFieldColumn"}>
+            //       new div
+            //     </div>
+            //     )
+            // }
+        }
+        return eles
+        // return sections.map((section) => this.sectionStacking(section[0], section[1]));
     }
 
     @computed get buttonMenu() {
diff --git a/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx
index adfeab3b0..605ee4b41 100644
--- a/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx
@@ -19,8 +19,7 @@ import { undoBatch } from "../../util/UndoManager";
 import { ContextMenu } from "../ContextMenu";
 import { ContextMenuProps } from "../ContextMenuItem";
 import { EditableView } from "../EditableView";
-import "./CollectionStackingView.scss";
-import "./CollectionNoteTakingFieldViewColumn.scss";
+import "./CollectionNoteTakingView.scss";
 import { FormattedTextBox } from "../nodes/formattedText/FormattedTextBox";
 import { Id } from "../../../fields/FieldSymbols";
 const higflyout = require("@hig/flyout");
@@ -51,7 +50,7 @@ interface CSVFieldColumnProps {
     observeHeight: (myref: any) => void;
     unobserveHeight: (myref: any) => void;
     editableViewProps: any;
-    // resizeColumns: (n: number) => void
+    resizeColumns: (n: number) => void
 }
 
 @observer
@@ -151,7 +150,7 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel
           const newHeader = this.props.columnHeaders[newIndex];
           this.props.docList.forEach(d => d[this.props.pivotField] = newHeader.heading.toString())
           this.props.columnHeaders.splice(index, 1);
-          // this.props.resizeColumns(this.props.columnHeaders.length)
+          this.props.resizeColumns(this.props.columnHeaders.length)
         }
     }
 
@@ -182,29 +181,6 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component<CSVFiel
         return false;
     }
 
-    // renderColorPicker = () => {
-    //     const gray = "#f1efeb";
-    //     const selected = this.props.headingObject ? this.props.headingObject.color : gray;
-    //     const colors = ["pink2", "purple4", "bluegreen1", "yellow4", "gray", "red2", "bluegreen7", "bluegreen5", "orange1"];
-    //     return <div className="collectionStackingView-colorPicker">
-    //         <div className="colorOptions">
-    //             {colors.map(col => {
-    //                 const palette = PastelSchemaPalette.get(col);
-    //                 return <div className={"colorPicker" + (selected === palette ? " active" : "")}
-    //                     style={{ backgroundColor: palette }} onClick={() => this.changeColumnColor(palette!)} />;
-    //             })}
-    //         </div>
-    //     </div>;
-    // }
-
-    // renderMenu = () => {
-    //     return <div className="collectionStackingView-optionPicker">
-    //         <div className="optionOptions">
-    //             <div className={"optionPicker" + (true ? " active" : "")} onClick={action(() => { })}>Add options here</div>
-    //         </div>
-    //     </div >;
-    // }
-
     @observable private collapsed: boolean = false;
 
     private toggleVisibility = action(() => this.collapsed = !this.collapsed);