From c09ccb23ee490b5c1060f734665fd85668a62659 Mon Sep 17 00:00:00 2001 From: Nathan-SR <144961007+Nathan-SR@users.noreply.github.com> Date: Fri, 12 Jul 2024 18:25:26 -0400 Subject: repeat option added to menu; css refactoring --- src/client/views/nodes/DataVizBox/DataVizBox.tsx | 5 +- .../views/nodes/DataVizBox/DocCreatorMenu.scss | 166 ++++++++++++++------- .../views/nodes/DataVizBox/DocCreatorMenu.tsx | 72 ++++++--- 3 files changed, 168 insertions(+), 75 deletions(-) (limited to 'src') 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() { @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() { 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; - @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 ( +
+ +
+ ); + } + get optionsMenuContents(){ const layoutOption = (option: LayoutType, optStyle?: {}) => { return (
{ ); } + const repeatOption = (num: number) => { + return (); + } + + const repeatOptions = [0, 1, 2, 3, 4, 5]; + return ( -
-
-
Choose Layout
-
- {layoutOption(LayoutType.Stacked)} - {layoutOption(LayoutType.Grid)} - {layoutOption(LayoutType.Row)} - {layoutOption(LayoutType.Column)} - {layoutOption(LayoutType.Custom, {borderBottom: `0px`})} +
+
+
+
{this._selectedLayout ? this._selectedLayout.toUpperCase() : 'Choose Layout'}
+
+ {layoutOption(LayoutType.Stacked)} + {layoutOption(LayoutType.Grid)} + {layoutOption(LayoutType.Row)} + {layoutOption(LayoutType.Column)} + {layoutOption(LayoutType.Custom, {borderBottom: `0px`})} +
+
-
- + {this._layoutPreview ? this.layoutPreviewContents : null} +
+
Repeat
+
); @@ -253,7 +290,7 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> { ) } > - +