pulling from master

4 files changed, 130 insertions, 44 deletions

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 231d85050..e6b72a8d5 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -9,11 +9,26 @@ import { props } from "bluebird";
 import { DragManager } from "../util/DragManager";
 import { LinkMenu } from "./nodes/LinkMenu";
 import { ListField } from "../../fields/ListField";
-import { Templates, Template } from "./Templates";
+import { TemplateEditButton } from "./TemplateEditButton";
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
 
+// @observer
+// class TemplateToggle extends React.Component<{ template: Template, checked: boolean, toggle: (event: React.ChangeEvent<HTMLInputElement>, template: Template) => void }> {
+//     render() {
+//         if (this.props.template) {
+//             return (
+//                 <li>
+//                     <input type="checkbox" checked={this.props.checked} onChange={(event) => this.props.toggle(event, this.props.template)} />
+//                     {this.props.template.Name}
+//                 </li>
+//             )
+//         }
+//         return (null);
+//     }
+// }
+
 @observer
 export class DocumentDecorations extends React.Component {
     static Instance: DocumentDecorations
@@ -23,8 +38,6 @@ export class DocumentDecorations extends React.Component {
     private _resizeBorderWidth = 16;
     private _linkButton = React.createRef<HTMLDivElement>();
     @observable private _hidden = false;
-    @observable private _templatesActive: boolean = false;
-    @observable private _showBase: boolean = true;
 
     constructor(props: Readonly<{}>) {
         super(props)
@@ -195,26 +208,6 @@ export class DocumentDecorations extends React.Component {
     //     e.stopPropagation();
     // }
 
-    toggleTemplate = (event: React.ChangeEvent<HTMLInputElement>, template: Template): void => {
-        let view = SelectionManager.SelectedDocuments()[0];
-        if (event.target.checked) {
-            view.addTemplate(template);
-        } else {
-            view.removeTemplate(template);
-        }
-    }
-
-    @action
-    toggleBase = (event: React.ChangeEvent<HTMLInputElement>): void => {
-        let view = SelectionManager.SelectedDocuments()[0];
-        view.toggleBase(event.target.checked);
-        this._showBase = !this._showBase;
-    }
-
-    @action
-    toggleTemplateActivity = (): void => {
-        this._templatesActive = !this._templatesActive;
-    }
 
     render() {
         var bounds = this.Bounds;
@@ -242,19 +235,6 @@ export class DocumentDecorations extends React.Component {
             </Flyout>);
         }
 
-        let templateMenu = !this._templatesActive ? (null) : (
-            <ul id="template-list">
-                <li><input type="checkbox" onChange={(event) => this.toggleBase(event)} checked={this._showBase} />Base layout</li>
-                {Array.from(Object.values(Templates)).map(template => {
-                    return (
-                        <li>
-                            <input type="checkbox" onChange={(event) => this.toggleTemplate(event, template)} />
-                            {template.Name}
-                        </li>
-                    )
-                })}
-            </ul>
-        )
         return (
             <div id="documentDecorations">
                 <div id="documentDecorations-container" style={{
@@ -281,11 +261,7 @@ export class DocumentDecorations extends React.Component {
                 }}>
                     <div title="View Links" className="linkFlyout documentDecorations-ex-wrapper" ref={this._linkButton}>{linkButton}</div>
 
-                    <div className="templating-button-wrapper documentDecorations-ex-wrapper">
-                        <div className="templating-button documentDecorations-ex"
-                            onClick={() => this.toggleTemplateActivity()}>T</div>
-                        {templateMenu}
-                    </div>
+                    <TemplateEditButton Document={SelectionManager.SelectedDocuments()[0]} />
                 </div>
             </div>
         )
diff --git a/src/client/views/TemplateEditButton.tsx b/src/client/views/TemplateEditButton.tsx
new file mode 100644
index 000000000..6542ac7ec
--- /dev/null
+++ b/src/client/views/TemplateEditButton.tsx
@@ -0,0 +1,92 @@
+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 { DocumentView } from "./nodes/DocumentView";
+const higflyout = require("@hig/flyout");
+export const { anchorPoints } = higflyout;
+export const Flyout = higflyout.default;
+
+@observer
+class TemplateToggle extends React.Component<{ template: Template, checked: boolean, toggle: (event: React.ChangeEvent<HTMLInputElement>, template: Template) => void }> {
+    render() {
+        if (this.props.template) {
+            return (
+                <li>
+                    <input type="checkbox" checked={this.props.checked} onChange={(event) => this.props.toggle(event, this.props.template)} />
+                    {this.props.template.Name}
+                </li>
+            )
+        }
+        return (null);
+    }
+}
+
+export interface TemplateButtonProps {
+    Document: DocumentView;
+}
+
+@observer
+export class TemplateEditButton extends React.Component<TemplateButtonProps> {
+
+    @observable private _templatesActive: boolean = false;
+    @observable private _showBase: boolean = true;
+
+    toggleTemplate = (event: React.ChangeEvent<HTMLInputElement>, template: Template): void => {
+        let view = this.props.Document;
+        if (event.target.checked) {
+            view.addTemplate(template);
+        } else {
+            view.removeTemplate(template);
+        }
+
+        // const docs = view.props.ContainingCollectionView;
+        // const docs = view.props.Document.GetList<Document>(view.props.fieldKey, []);
+
+    }
+
+    @action
+    toggleBase = (event: React.ChangeEvent<HTMLInputElement>): void => {
+        let view = this.props.Document;
+        view.toggleBase(event.target.checked);
+        this._showBase = !this._showBase;
+    }
+
+    @action
+    toggleTemplateActivity = (): void => {
+        this._templatesActive = !this._templatesActive;
+    }
+
+    render() {
+        let templateMenu = !this._templatesActive ? (null) : (
+            <ul id="template-list">
+                <li><input type="checkbox" onChange={(event) => this.toggleBase(event)} defaultChecked={true} />Base layout</li>
+                {console.log("mm")}
+                {Array.from(Object.values(Templates)).map(template => {
+                    let view = this.props.Document
+                    let checked = view.hasTemplate(template);
+                    return (
+                        <TemplateToggle key={template.Name} template={template} checked={checked} toggle={this.toggleTemplate} />
+                    )
+
+                    // return (
+                    //     <li key={template.Name}>
+                    //         {console.log(template.Name, checked)}
+                    //         <input type="checkbox" onChange={(event) => this.toggleTemplate(event, template)} defaultChecked={checked} />
+                    //         {template.Name}
+                    //     </li>
+                    // )
+                })}
+            </ul>
+        )
+        return (
+            <div className="templating-button-wrapper documentDecorations-ex-wrapper">
+                <div className="templating-button documentDecorations-ex"
+                    onClick={() => this.toggleTemplateActivity()}>T</div>
+                {templateMenu}
+            </div>
+        )
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/Templates.tsx b/src/client/views/Templates.tsx
index d717fb778..a6ba2243d 100644
--- a/src/client/views/Templates.tsx
+++ b/src/client/views/Templates.tsx
@@ -46,5 +46,17 @@ export namespace Templates {
         </div>
     </div>       
             `);
+
+    export const Title = new Template("Title",
+        `
+    <div>
+        <div style="margin:auto; height:calc(100% - 50px); width:100%;">
+            {layout}
+        </div>
+        <div style="height:50px; width:100%; position:absolute">
+            <FormattedTextBox doc={Document} DocumentViewForField={DocumentView} bindings={bindings} fieldKey={"TitleKey"} 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 2ede6d28e..806387e20 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1,4 +1,4 @@
-import { action, computed, IReactionDisposer, reaction, runInAction } from "mobx";
+import { action, computed, IReactionDisposer, reaction, runInAction, observable } from "mobx";
 import { observer } from "mobx-react";
 import { Document } from "../../../fields/Document";
 import { Field, Opt, FieldWaiting } from "../../../fields/Field";
@@ -94,7 +94,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     private _downX: number = 0;
     private _downY: number = 0;
     private _reactionDisposer: Opt<IReactionDisposer>;
-    private _templates: Set<Template> = new Set<Template>();
+    @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>");
     @computed get active(): boolean { return SelectionManager.IsSelected(this) || !this.props.ContainingCollectionView || this.props.ContainingCollectionView.active(); }
@@ -301,12 +301,18 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         this.updateLayout();
     }
 
-    @action removeTemplate = (template: Template) => {
+    @action
+    removeTemplate = (template: Template) => {
         this._templates.delete(template);
         this.updateLayout();
     }
 
     @action
+    hasTemplate = (template: Template) => {
+        return this._templates.has(template);
+    }
+
+    @action
     onContextMenu = (e: React.MouseEvent): void => {
         e.stopPropagation();
         let moved = Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3;