repeat option added to menu; css refactoring

3 files changed, 168 insertions, 75 deletions

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 86a9db79c..283288013 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -496,6 +496,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     @action
     createDocsFromTemplate = (templateInfo: DataVizTemplateInfo) => {
+        if (!templateInfo.doc) return;
         const mainCollection = this.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
         const fields: string[] = Array.from(Object.keys(this.records[0])); 
         const selectedRows = NumListCast(this.layoutDoc.dataViz_selectedRows);
@@ -508,8 +509,8 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             values.forEach((val, i) => {proto[fields[i]] = val as FieldType});
             
             const target = Doc.MakeDelegate(proto);
-            const targetKey = StrCast(templateInfo.doc.layout_fieldKey, 'layout');
-            const applied = this.ApplyTemplateTo(templateInfo.doc, target, targetKey, templateInfo.doc.title + `${row}`);
+            const targetKey = StrCast(templateInfo.doc!.layout_fieldKey, 'layout');
+            const applied = this.ApplyTemplateTo(templateInfo.doc!, target, targetKey, templateInfo.doc!.title + `${row}`);
             target.layout_fieldKey = targetKey;
             return applied;
         });
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 4944f3071..243954873 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -46,6 +46,11 @@
     margin-bottom: 0px;
 }
 
+//------------------------------------------------------------------------------------------------------------------------------------------
+//DocCreatorMenu templates preview CSS
+//--------------------------------------------------------------------------------------------------------------------------------------------
+
+
 .docCreatorMenu-preview-container {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
@@ -83,7 +88,66 @@
     }
 }
 
-.docCreatorMenu-options-container {
+//------------------------------------------------------------------------------------------------------------------------------------------
+//DocCreatorMenu options CSS
+//--------------------------------------------------------------------------------------------------------------------------------------------
+
+.docCreatorMenu-option-container{
+    display: flex;
+    width: 180px;
+    height: 30px;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    margin-top: 10px;
+
+    &.layout{
+        z-index: 5;
+    }
+}
+
+.docCreatorMenu-option-title{
+    display: flex;
+    width: 140px;
+    height: 30px;
+    background: whitesmoke; 
+    background-color: rgb(34, 34, 37);
+    border-radius: 5px;
+    border: 1px solid whitesmoke;
+    padding: 0px;
+    font-size: 12px;
+    align-items: center;
+    justify-content: center;
+    text-transform: uppercase;
+    cursor: pointer;
+
+    &.repeat {
+        border-top-right-radius: 0px;
+        border-bottom-right-radius: 0px;
+        width: 60px;
+        border-right: 0px;
+    }
+}
+
+.docCreatorMenu-input {
+    display: flex;
+    height: 30px;
+    background-color: rgb(34, 34, 37);
+    border-radius: 5px;
+    border: 1px solid whitesmoke;
+    align-items: center;
+    justify-content: center;
+
+    &.repeat {
+        margin: 0px;
+        border-top-left-radius: 0px;
+        border-bottom-left-radius: 0px;
+        border-left: 0px;
+        width: 40px;
+    }
+}
+
+.docCreatorMenu-menu-container {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
@@ -95,73 +159,63 @@
     border: 1px solid whitesmoke;
     border-radius: 5px;
 
-    .docCreatorMenu-dropdown-hoverable {
-        width: 140px;
-        height: 25px;
-        margin-bottom: 17px;
-        z-index: 5;
-
-        &:hover .docCreatorMenu-dropdown-content {
-            display: block;
-        }
+    .docCreatorMenu-option-container{
+        width: 180px;
+        height: 30px;
 
-        &:hover .docCreatorMenu-dropdown-title {
-            border-bottom-left-radius: 0px;
-            border-bottom-right-radius: 0px;
-        }
-
-        .docCreatorMenu-dropdown-title{
-            display: flex;
+        .docCreatorMenu-dropdown-hoverable {
             width: 140px;
-            height: 25px;
-            background: whitesmoke; 
-            background-color: rgb(34, 34, 37);
-            border-radius: 5px;
-            border: 1px solid whitesmoke;
-            padding: 0px;
-            font-size: 12px;
-            margin-top: 10px;
-            align-items: center;
-            justify-content: center;
-            text-transform: uppercase;
-            cursor: pointer;
-        }
+            height: 30px;
     
-        .docCreatorMenu-dropdown-content {
-            display: none;
-            min-width: 100px;
-            height: 75px;
-            overflow-y: scroll;
-            -ms-overflow-style: none; 
-            scrollbar-width: none;
-            border-bottom: solid 1px whitesmoke;
+            &:hover .docCreatorMenu-dropdown-content {
+                display: block;
+            }
     
-            .docCreatorMenu-dropdown-option{
-                display: flex;
-                background-color: rgb(42, 42, 46);
-                border-left: 1px solid whitesmoke;
-                border-right: 1px solid whitesmoke;
-                border-bottom: 1px solid whitesmoke;
-                width: 140px;
-                height: 25px;
-                justify-content: center;
-                justify-items: center;
-                padding-top: 3px;
-
-                &:hover {
-                    background-color: rgb(68, 68, 74);
-                    cursor: pointer;
-                }
+            &:hover .docCreatorMenu-option-title {
+                border-bottom-left-radius: 0px;
+                border-bottom-right-radius: 0px;
             }
-        }    
+        
+            .docCreatorMenu-dropdown-content {
+                display: none;
+                min-width: 100px;
+                height: 75px;
+                overflow-y: scroll;
+                -ms-overflow-style: none; 
+                scrollbar-width: none;
+                border-bottom: solid 1px whitesmoke;
+                border-bottom-left-radius: 5px;
+                border-bottom-right-radius: 5px;
+        
+                .docCreatorMenu-dropdown-option{
+                    display: flex;
+                    background-color: rgb(42, 42, 46);
+                    border-left: 1px solid whitesmoke;
+                    border-right: 1px solid whitesmoke;
+                    border-bottom: 1px solid whitesmoke;
+                    width: 140px;
+                    height: 25px;
+                    justify-content: center;
+                    justify-items: center;
+                    padding-top: 3px;
+    
+                    &:hover {
+                        background-color: rgb(68, 68, 74);
+                        cursor: pointer;
+                    }
+                }
+            }    
+        }
+
     }
 
     .docCreatorMenu-layout-preview-window {
+        aspect-ratio: 1 / 1;
         width: 85%;
-        height: 100px;
         border: 1px solid whitesmoke;
         border-radius: 5px;
         background-color: rgb(34, 34, 37);
+        margin-top: 10px;
     }
 }
 
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index 88308c226..1b4fe0879 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -31,12 +31,14 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     static Instance: DocCreatorMenu;
 
     private _ref: HTMLDivElement | null = null;
+    private _templateInfo: DataVizTemplateInfo = {};
 
     @observable _templateDocs: Doc[] = [];
     @observable _templateRefToDoc?: ObservableMap<HTMLDivElement, Doc>;
-    @observable _selectedTemplate?: Doc;
+    @observable _selectedTemplate: Doc | undefined = undefined;
 
-    @observable _selectedLayout?: LayoutType;
+    @observable _selectedLayout: LayoutType | undefined = undefined;
+    @observable _layoutPreview: boolean = false;
 
     @observable _pageX: number = 0;
     @observable _pageY: number = 0;
@@ -150,7 +152,6 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                                 MakeTemplate(info.doc);
                                 // ref.style.background = Colors.MEDIUM_BLUE;
                                 // ref.style.boxShadow = `0 0 15px rgba(68, 118, 247, .8)`;
-                                this.forceUpdate();
                             }, 'open actions menu')
                         )
                     }>
@@ -161,8 +162,15 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
         );
     }
 
-    get optionsMenuContents(){
+    get layoutPreviewContents() {
+        return (
+            <div className='docCreatorMenu-layout-preview-window'>
+
+            </div>
+        );
+    }
 
+    get optionsMenuContents(){
         const layoutOption = (option: LayoutType, optStyle?: {}) => {
             return (
                 <div 
@@ -181,20 +189,49 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
             );
         }
 
+        const repeatOption = (num: number) => {
+            return (<option 
+            value="Option 1"
+            onPointerDown={e => this._templateInfo.repeat = num}
+            >
+                {`${num}x`}
+            </option>);
+        }
+
+        const repeatOptions = [0, 1, 2, 3, 4, 5];
+
         return (
-            <div className='docCreatorMenu-options-container'>
-                <div className='docCreatorMenu-dropdown-hoverable'>
-                    <div className="docCreatorMenu-dropdown-title">Choose Layout</div>
-                    <div className="docCreatorMenu-dropdown-content">
-                        {layoutOption(LayoutType.Stacked)}
-                        {layoutOption(LayoutType.Grid)}
-                        {layoutOption(LayoutType.Row)}
-                        {layoutOption(LayoutType.Column)}
-                        {layoutOption(LayoutType.Custom, {borderBottom: `0px`})}
+            <div className='docCreatorMenu-menu-container'>
+                <div className='docCreatorMenu-option-container layout'>
+                    <div className='docCreatorMenu-dropdown-hoverable'>
+                        <div className="docCreatorMenu-option-title">{this._selectedLayout ? this._selectedLayout.toUpperCase() : 'Choose Layout'}</div>
+                        <div className="docCreatorMenu-dropdown-content">
+                            {layoutOption(LayoutType.Stacked)}
+                            {layoutOption(LayoutType.Grid)}
+                            {layoutOption(LayoutType.Row)}
+                            {layoutOption(LayoutType.Column)}
+                            {layoutOption(LayoutType.Custom, {borderBottom: `0px`})}
+                        </div>
                     </div>
+                    <button 
+                        className='docCreatorMenu-menu-button'
+                        onPointerDown={e =>
+                            setupMoveUpEvents(this, e, returnFalse, emptyFunction,
+                                undoable(clickEv => {
+                                    clickEv.stopPropagation();
+                                    runInAction(() => this._layoutPreview = !this._layoutPreview);
+                                }, 'open actions menu')
+                            )
+                        }>
+                        <FontAwesomeIcon icon={this._layoutPreview ? 'minus' : 'magnifying-glass'}/>
+                    </button>
                 </div>
-                <div className='docCreatorMenu-layout-preview-window'>
-
+                {this._layoutPreview ? this.layoutPreviewContents : null}
+                <div className='docCreatorMenu-option-container'>
+                    <div className="docCreatorMenu-option-title repeat">Repeat</div>
+                    <select className='docCreatorMenu-input repeat'>
+                        {repeatOptions.map(num => repeatOption(num))}
+                    </select>
                 </div>
             </div>
         );
@@ -253,7 +290,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
                                 )
                             }
                         >
-                            <FontAwesomeIcon icon={this._menuContent === 'templates' ? 'bars' : 'magnifying-glass'}/>
+                            <FontAwesomeIcon icon={this._menuContent === 'templates' ? 'bars' : 'table-cells'}/>
                         </button>
                         <button 
                         className='docCreatorMenu-menu-button right'
@@ -300,6 +337,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
 }
 
 export interface DataVizTemplateInfo {
-    doc: Doc;
+    doc?: Doc;
     layout?: LayoutType;
+    repeat?: number;
 }
\ No newline at end of file