diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/client/views/DocumentDecorations.tsx | 2 | ||||
-rw-r--r-- | src/client/views/TemplateMenu.tsx | 30 | ||||
-rw-r--r-- | src/client/views/Templates.tsx | 4 | ||||
-rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 41 |
4 files changed, 35 insertions, 42 deletions
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 1e936a881..3dcdc596d 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -409,7 +409,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> let templates: Map<Template, boolean> = new Map(); let doc = SelectionManager.SelectedDocuments()[0]; Array.from(Object.values(Templates)).map(template => { - templates.set(template, doc.hasTemplate(template)); + templates.set(template, doc.Template === template); }); return (<div className="documentDecorations"> diff --git a/src/client/views/TemplateMenu.tsx b/src/client/views/TemplateMenu.tsx index 7f670aec0..0c8ae7055 100644 --- a/src/client/views/TemplateMenu.tsx +++ b/src/client/views/TemplateMenu.tsx @@ -1,9 +1,8 @@ import { observable, computed, action } from "mobx"; import React = require("react"); -import { SelectionManager } from "../util/SelectionManager"; import { observer } from "mobx-react"; import './DocumentDecorations.scss'; -import { Templates, Template } from "./Templates"; +import { Template } from "./Templates"; import { DocumentView } from "./nodes/DocumentView"; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; @@ -34,19 +33,19 @@ export interface TemplateMenuProps { export class TemplateMenu extends React.Component<TemplateMenuProps> { @observable private _hidden: boolean = true; - @observable private _showBase: boolean = true; + @observable private _useBase: boolean = true; @observable private _templates: Map<Template, boolean> = this.props.templates; @action toggleTemplate = (event: React.ChangeEvent<HTMLInputElement>, template: Template): void => { - if (event.target.checked) { - this.props.doc.addTemplate(template); - this._templates.set(template, true); - } else { - this.props.doc.removeTemplate(template); - this._templates.set(template, false); - } + this._useBase = false; + this.props.doc.toggleBase(false); + this.props.doc.changeTemplate(template); + this._templates.forEach((checked, temp) => { + this._templates.set(temp, false); + }); + this._templates.set(template, true); // const docs = view.props.ContainingCollectionView; // const docs = view.props.Document.GetList<Document>(view.props.fieldKey, []); @@ -59,9 +58,12 @@ export class TemplateMenu extends React.Component<TemplateMenuProps> { } @action - toggleBase = (event: React.ChangeEvent<HTMLInputElement>): void => { - this.props.doc.toggleBase(event.target.checked); - this._showBase = !this._showBase; + toggleBase = (event: React.MouseEvent): void => { + this._useBase = true; + this.props.doc.toggleBase(true); + this._templates.forEach((checked, temp) => { + this._templates.set(temp, false); + }); } @action @@ -79,7 +81,7 @@ export class TemplateMenu extends React.Component<TemplateMenuProps> { <div className="templating-menu" > <div className="templating-button" onClick={() => this.toggleTemplateActivity()}>T</div> <ul id="template-list" style={{ display: this._hidden ? "none" : "block" }}> - <li><input type="checkbox" onChange={(event) => this.toggleBase(event)} defaultChecked={true} />Base layout</li> + <li><input type="checkbox" onClick={(event) => this.toggleBase(event)} checked={this._useBase} />Base layout</li> {templateMenu} </ul> </div> diff --git a/src/client/views/Templates.tsx b/src/client/views/Templates.tsx index b82b383bb..c22b22286 100644 --- a/src/client/views/Templates.tsx +++ b/src/client/views/Templates.tsx @@ -31,7 +31,7 @@ export namespace Templates { {layout} </div> <div style="height:(100% + 25px); width:100%; position:absolute"> - <FormattedTextBox doc={Document} DocumentViewForField={DocumentView} bindings={bindings} fieldKey={"CaptionKey"} isSelected={isSelected} select={select} selectOnLoad={SelectOnLoad} isTopMost={isTopMost}/> + <FormattedTextBox doc={Document} DocumentViewForField={DocumentView} bindings={bindings} fieldKey={CaptionKey} isSelected={isSelected} select={select} selectOnLoad={SelectOnLoad} isTopMost={isTopMost}/> </div> </div> `); @@ -42,7 +42,7 @@ export namespace Templates { {layout} </div> <div style="height:25px; width:100%; position:absolute"> - <FormattedTextBox doc={Document} DocumentViewForField={DocumentView} bindings={bindings} fieldKey={"CaptionKey"} isSelected={isSelected} select={select} selectOnLoad={SelectOnLoad} isTopMost={isTopMost}/> + <FormattedTextBox doc={Document} DocumentViewForField={DocumentView} bindings={bindings} fieldKey={CaptionKey} isSelected={isSelected} select={select} selectOnLoad={SelectOnLoad} isTopMost={isTopMost}/> </div> </div> `); diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index ef1420027..12332348b 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -92,9 +92,8 @@ export class DocumentView extends React.Component<DocumentViewProps> { } private _downX: number = 0; private _downY: number = 0; - @observable private _templates: Set<Template> = new Set<Template>(); - private _useBase: boolean = true; - private _baseLayout: string = this.props.Document.GetText(KeyStore.Layout, "<p>Error loading layout data</p>"); + private _base: string = this.props.Document.GetText(KeyStore.Layout, "<p>Error loading layout data</p>"); + @observable private _template: Template = new Template("", ""); @computed get active(): boolean { return SelectionManager.IsSelected(this) || this.props.parentActive(); } @computed get topMost(): boolean { return this.props.isTopMost; } @computed get layout(): string { return this.props.Document.GetText(KeyStore.Layout, "<p>Error loading layout data</p>"); } @@ -304,39 +303,31 @@ export class DocumentView extends React.Component<DocumentViewProps> { } updateLayout = (): void => { - let base = this._useBase ? this._baseLayout : "<div style='margin: auto; width: 100%; height: 100%; border: 1px solid black'></div>"; - // this.props.Document.SetText(KeyStore.Layout, base); - this._templates.forEach(temp => { - let text = temp.Layout; - base = text.replace("{layout}", base); - // let oldLayout = this.props.Document.GetText(KeyStore.Layout, ""); - // let layout = text.replace("{layout}", oldLayout); - // this.props.Document.SetText(KeyStore.Layout, layout); - }); - this.props.Document.SetText(KeyStore.Layout, base); + if (this._template.Name === "") { + this.props.Document.SetText(KeyStore.Layout, this._base); + } else { + let temp = this._template.Layout; + let layout = temp.replace("{layout}", this._base); + this.props.Document.SetText(KeyStore.Layout, layout); + } } @action toggleBase = (useBase: boolean) => { - this._useBase = useBase; - this.updateLayout(); - } - - @action - addTemplate = (template: Template) => { - this._templates.add(template); + if (useBase) { + this._template = new Template("", ""); + } this.updateLayout(); } @action - removeTemplate = (template: Template) => { - this._templates.delete(template); + changeTemplate = (template: Template) => { + this._template = template; this.updateLayout(); } - @action - hasTemplate = (template: Template) => { - return this._templates.has(template); + get Template() { + return this._template; } @action |