UI changes and added other collection types

2 files changed, 25 insertions, 44 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
index 7858adc4c..d4cde7aa3 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss
@@ -525,8 +525,6 @@
     background: whitesmoke; 
     background-color: rgb(34, 34, 37);
     border-radius: 5px;
-    border-top-right-radius: 0px;
-    border-bottom-right-radius: 0px;
     border: 1px solid rgb(180, 180, 180);
     padding: 0px;
     font-size: 12px;
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index f075dc737..e21f0a70c 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -35,12 +35,11 @@ import { Template } from './Template';
 import { Field, FieldContentType } from './FieldTypes/Field';
 
 export enum LayoutType {
-    STACKED = 'stacked',
-    GRID = 'grid',
-    Row = 'row',
-    Column = 'column',
-    Custom = 'custom',
-    CAROUSEL3D = 'carousel3d'
+    FREEFORM = 'Freeform',
+    CAROUSEL = 'Carousel',
+    CAROUSEL3D = '3D Carousel',
+    MASONRY = 'Masonry',
+    CARD = 'Card View',
 }
 
 @observer
@@ -62,8 +61,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
     @observable _userCreatedColumns: Col[] = [];
     @observable _selectedCols: { title: string; type: string; desc: string }[] | undefined = [];
 
-    @observable _layout: { type: LayoutType; yMargin: number; xMargin: number; columns?: number; repeat: number } = { type: LayoutType.GRID, yMargin: 0, xMargin: 0, repeat: 0 };
-    @observable _layoutPreview: boolean = true;
+    @observable _layout: { type: LayoutType; yMargin: number; xMargin: number; columns?: number; repeat: number } = { type: LayoutType.FREEFORM, yMargin: 0, xMargin: 0, repeat: 0 };
     @observable _layoutPreviewScale: number = 1;
     @observable _savedLayouts: DataVizTemplateLayout[] = [];
     @observable _expandedPreview: Doc | undefined = undefined;
@@ -131,15 +129,10 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
     @computed get rowsCount() {
         switch (this._layout.type) {
-            case LayoutType.Row:
-            case LayoutType.STACKED:
-                return 1;
-            case LayoutType.Column:
-                return this.docsToRender.length;
-            case LayoutType.GRID:
+            case LayoutType.FREEFORM:
                 return Math.ceil(this.docsToRender.length / (this._layout.columns ?? 1)) ?? 0;
             case LayoutType.CAROUSEL3D:
-                return 1.75;
+                return 1.6;
             default:
                 return 1;
         }
@@ -147,15 +140,10 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
 
     @computed get columnsCount() {
         switch (this._layout.type) {
-            case LayoutType.Row:
-                return this.docsToRender.length;
-            case LayoutType.Column:
-            case LayoutType.STACKED:
-                return 1;
-            case LayoutType.GRID:
+            case LayoutType.FREEFORM:
                 return this._layout.columns ?? 0;
             case LayoutType.CAROUSEL3D:
-                return 2.85;
+                return 2.7;
             default:
                 return 1;
         }
@@ -986,11 +974,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
         };
 
         switch (this._layout.type) {
-            case LayoutType.Row:
-                return <div className="docCreatorMenu-configuration-bar">{optionInput('arrows-left-right', this.updateXMargin, this._layout.xMargin, '0')}</div>;
-            case LayoutType.Column:
-                return <div className="docCreatorMenu-configuration-bar">{optionInput('arrows-up-down', this.updateYMargin, this._layout.yMargin, '1')}</div>;
-            case LayoutType.GRID:
+            case LayoutType.FREEFORM:
                 return (
                     <div className="docCreatorMenu-configuration-bar">
                         {optionInput('arrows-up-down', this.updateYMargin, this._layout.xMargin, '2')}
@@ -998,8 +982,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                         {optionInput('table-columns', this.updateColumns, this._layout.columns, '4', true)}
                     </div>
                 );
-            case LayoutType.STACKED:
-                return null;
             default:
                 break;
         }
@@ -1088,8 +1070,14 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
             switch (this._layout.type) {
                 case LayoutType.CAROUSEL3D:
                     return Docs.Create.Carousel3DDocument;
-                case LayoutType.GRID:
+                case LayoutType.FREEFORM:
                     return Docs.Create.FreeformDocument;
+                case LayoutType.CARD:
+                    return Docs.Create.CardDeckDocument;
+                case LayoutType.MASONRY:
+                    return Docs.Create.MasonryDocument;
+                case LayoutType.CAROUSEL:
+                    return Docs.Create.CarouselDocument;
                 default:
                     return Docs.Create.FreeformDocument;
             }
@@ -1126,7 +1114,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                     Document={this._renderedDocCollectionPreview ?? new Doc()}
                     docViewPath={returnEmptyDocViewList}
                     childLayoutTemplate={() => Cast(doc.childLayoutTemplate, Doc, null)}
-                    isContentActive={emptyFunction}
+                    isContentActive={returnFalse}
                     isAnyChildContentActive={() => true}
                     select={emptyFunction}
                     isSelected={returnFalse}
@@ -1202,22 +1190,17 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                     <div className="docCreatorMenu-dropdown-hoverable">
                         <div className="docCreatorMenu-option-title">{this._layout.type ? this._layout.type.toUpperCase() : 'Choose Layout'}</div>
                         <div className="docCreatorMenu-dropdown-content">
-                            {layoutOption(LayoutType.STACKED)}
-                            {layoutOption(LayoutType.GRID, undefined, () => {
+                            {layoutOption(LayoutType.FREEFORM, undefined, () => {
                                 if (!this._layout.columns) this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length));
                             })}
-                            {layoutOption(LayoutType.Row)}
-                            {layoutOption(LayoutType.Column)}
+                            {layoutOption(LayoutType.CAROUSEL)}
                             {layoutOption(LayoutType.CAROUSEL3D)}
-                            {layoutOption(LayoutType.Custom, { borderBottom: `0px` })}
+                            {layoutOption(LayoutType.MASONRY)}
                         </div>
                     </div>
-                    <button className="docCreatorMenu-menu-button preview-toggle" onPointerDown={e => this.setUpButtonClick(e, () => runInAction(() => (this._layoutPreview = !this._layoutPreview)))}>
-                        <FontAwesomeIcon icon={this._layoutPreview ? 'minus' : 'magnifying-glass'} />
-                    </button>
                 </div>
                 {this._layout.type ? this.layoutConfigOptions : null}
-                {this._layoutPreview ? this.layoutPreviewContents(this._menuDimensions.width * 0.75) : null}
+                {this.layoutPreviewContents(this._menuDimensions.width * 0.75)}
                 {selectionBox(
                     60,
                     20,
@@ -1469,8 +1452,8 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
                                 )
                             }>
                             <div className="docCreatorMenu-top-buttons-container">
-                                {topButton('table-cells', 'templates', onPreviewSelected, 'left')}
-                                {topButton('bars', 'options', onOptionsSelected, 'middle')}
+                                {topButton('lightbulb', 'templates', onPreviewSelected, 'left')}
+                                {topButton('magnifying-glass', 'options', onOptionsSelected, 'middle')}
                                 {topButton('floppy-disk', 'saved', onSavedSelected, 'right')}
                             </div>
                             <button className="docCreatorMenu-menu-button close-menu" onPointerDown={e => this.setUpButtonClick(e, this.closeMenu)}>