repeat option added to menu; css refactoring

1 files changed, 55 insertions, 17 deletions

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