aboutsummaryrefslogtreecommitdiff
path: root/src/client/views
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views')
-rw-r--r--src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx18
-rw-r--r--src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx2
-rw-r--r--src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx127
3 files changed, 112 insertions, 35 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index 257c7fc00..1889344fd 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -108,9 +108,13 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
@action setDataViz = (dataViz: DataVizBox) => {
this._dataViz = dataViz;
+ this._selectedTemplate = undefined;
+ this._renderedDocCollection = undefined;
+ this._renderedDocCollectionPreview = undefined;
+ this._fullyRenderedDocs = [];
};
@action addUserTemplate = (template: Template) => {
- this._userTemplates.push({template: template, doc: template.getRenderedDoc()});
+ this._userTemplates.push({template: template.cloneBase(), doc: template.getRenderedDoc()});
};
@action removeUserTemplate = (template: Template) => {
this._userTemplates = this._userTemplates.filter(info => info.template !== template);
@@ -394,6 +398,13 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
//console.log(this.templateManager.templates)
+ const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView;
+
+ this.templateManager.templates.forEach(template => {
+ const doc = template.mainField.renderedDoc();
+ mainCollection.addDocument(doc);
+ })
+
this.forceUpdate();
// try {
@@ -691,6 +702,7 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
createDocsFromTemplate = async (template: Template) => {
const dv = this._dataViz;
+ console.log('dataviz: ', dv);
if (!dv) return;
this._docsRendering = true;
@@ -798,7 +810,6 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
/>
</div>
-
return (
<div className="docCreatorMenu-expanded-template-preview">
<div className="top-panel"/>
@@ -811,11 +822,10 @@ export class DocCreatorMenu extends ObservableReactComponent<FieldViewProps> {
<FontAwesomeIcon icon="minimize" />
</button>
<button className="docCreatorMenu-menu-button section-reveal-options top-right-lower" onPointerDown={e => this.setUpButtonClick(e, () => {this._currEditingTemplate?.resetToBase(); this.setExpandedView(this._currEditingTemplate);})}>
- <FontAwesomeIcon icon="plus" color="white" />
+ <FontAwesomeIcon icon="arrows-rotate" color="white" />
</button>
</div>
</div>
-
);
}
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx
index bb8489c21..4a8bfa03f 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/FieldTypes/FieldUtils.tsx
@@ -51,7 +51,7 @@ export class FieldUtils {
while (wordIndex < words.length) {
const word = words[wordIndex];
- const wordWidth = word.length * currFontSize * 0.5;
+ const wordWidth = word.length * currFontSize * 0.7;
if (currentRowWidth + wordWidth <= contWidth) {
currentRowWidth += wordWidth;
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx
index ee7f19907..648f9e034 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx
@@ -66,7 +66,7 @@ export class TemplateLayouts {
br: [0.8, 0.3],
types: [TemplateFieldType.TEXT],
sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
- description: 'A caption for field #2, very short to short text that contextualizes the content of field #2',
+ description: 'A caption for field #2, very short text.',
opts: {
backgroundColor: 'transparent',
contentXCentering: 'h-center',
@@ -341,70 +341,137 @@ export class TemplateLayouts {
};
public static FourField005: FieldSettings = {
- title: 'fourfield04',
+ title: 'fourfield05',
viewType: ViewType.FREEFORM,
tl: [0,0],
- br: [400,700],
+ br: [400,550],
opts: {
- backgroundColor: '#6CCAF0',
- borderColor: '#1088C3',
- borderWidth: '10',
+ backgroundColor: '#95A575',
},
subfields: [
{
viewType: ViewType.STATIC,
- tl: [-0.8, -.9],
- br: [-.05, .15],
- types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
+ tl: [-0.9, -.925],
+ br: [-.075, -.775],
+ types: [TemplateFieldType.TEXT],
sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
- description: 'A small text field for a title that categorizes the rest of the content.',
+ description: 'A small text field for a title or word(s) that categorize the rest of the content.',
opts: {
- borderColor: 'yellow',
+ borderColor: '#3B4A2C',
borderWidth: '8',
contentXCentering: "h-center",
- backgroundColor: 'transparent',
+ backgroundColor: '#B8DC90',
},
},
{
viewType: ViewType.STATIC,
- tl: [-0.8, -.9],
- br: [0.8, -.5],
+ tl: [.075, -.925],
+ br: [.9, -.775],
types: [TemplateFieldType.TEXT],
sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
description: 'A small text field for a title that categorizes the rest of the content.',
opts: {
- borderColor: 'yellow',
+ borderColor: '#3B4A2C',
borderWidth: '8',
contentXCentering: "h-center",
- backgroundColor: 'transparent',
+ backgroundColor: '#B8DC90',
+ },
+ },
+ {
+ viewType: ViewType.DEC,
+ tl: [-.82, -.4],
+ br: [-.5, -.2],
+ opts: {
+ backgroundColor: '#94B058',
+ borderColor: '#3B4A2C',
+ borderWidth: '8',
},
},
{
viewType: ViewType.STATIC,
- tl: [-0.8, -.9],
- br: [0.8, -.5],
- types: [TemplateFieldType.TEXT],
- sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
- description: 'A small text field for a title that categorizes the rest of the content.',
+ tl: [-0.66, -.65],
+ br: [0.66, .25],
+ types: [TemplateFieldType.VISUAL],
+ sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
+ description: 'A medium to large field in the center of the template, for the main visual content.',
opts: {
- borderColor: 'yellow',
+ borderColor: '#3B4A2C',
borderWidth: '8',
- contentXCentering: "h-center",
- backgroundColor: 'transparent',
+ backgroundColor: '#B8DC90',
},
},
{
viewType: ViewType.STATIC,
- tl: [-0.8, -.9],
- br: [0.8, -.5],
+ tl: [-.875, .425],
+ br: [0.875, .925],
types: [TemplateFieldType.TEXT],
- sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL],
- description: 'A small text field for a title that categorizes the rest of the content.',
+ sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE],
+ description: 'A medium to large field at the bottom of the template, for the main text content.',
opts: {
- borderColor: 'yellow',
+ borderColor: '#3B4A2C',
borderWidth: '8',
contentXCentering: "h-center",
- backgroundColor: 'transparent',
+ backgroundColor: '#B8DC90',
+ },
+ },
+ {
+ viewType: ViewType.DEC,
+ tl: [-1.1, -.62],
+ br: [-.9, -.5],
+ opts: {
+ backgroundColor: '#7A9D31',
+ borderColor: '#3B4A2C',
+ borderWidth: '8',
+ },
+ },
+ {
+ viewType: ViewType.DEC,
+ tl: [-1.1, 0],
+ br: [-.9, .15],
+ opts: {
+ backgroundColor: '#94B058',
+ borderColor: '#3B4A2C',
+ borderWidth: '8',
+ },
+ },
+ {
+ viewType: ViewType.DEC,
+ tl: [-.93, -.265],
+ br: [-.715, -.125],
+ opts: {
+ backgroundColor: '#728745',
+ borderColor: '#3B4A2C',
+ borderWidth: '8',
+ },
+ },
+ {
+ viewType: ViewType.DEC,
+ tl: [.7, -.45],
+ br: [.85, -.3],
+ opts: {
+ backgroundColor: '#7A9D31',
+ borderColor: '#3B4A2C',
+ borderWidth: '8',
+ },
+ },
+ {
+ viewType: ViewType.DEC,
+ tl: [.8, .03],
+ br: [1.2, .33],
+ opts: {
+ backgroundColor: '#728745',
+ borderColor: '#3B4A2C',
+ borderWidth: '8',
+ },
+ },
+ {
+ viewType: ViewType.DEC,
+ tl: [.875, -.13],
+ br: [1.2, .12],
+ opts: {
+ backgroundColor: '#94B058',
+ borderColor: '#3B4A2C',
+ borderWidth: '8',
},
},
]