aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/nodes/DataVizBox/DataVizBox.tsx5
-rw-r--r--src/client/views/nodes/DataVizBox/DocCreatorMenu.scss166
-rw-r--r--src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx72
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
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 23:09:34 +0000