diff options
Diffstat (limited to 'src/client/views')
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', }, }, ] |
