aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/DocumentDecorations.tsx2
-rw-r--r--src/client/views/TemplateMenu.tsx30
-rw-r--r--src/client/views/Templates.tsx4
-rw-r--r--src/client/views/nodes/DocumentView.tsx41
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