5 files changed, 94 insertions, 0 deletions

diff --git a/src/client/views/.DS_Store b/src/client/views/.DS_Store
index 0964d5ff3..5008ddfcf 100644
--- a/src/client/views/.DS_Store
+++ b/src/client/views/.DS_Store
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 11595aa01..642d7caf3 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -1,4 +1,5 @@
 @import "global_variables";
+
 #documentDecorations-container {
     position: absolute;
     display: grid;
@@ -6,26 +7,32 @@
     grid-template-rows: 8px 1fr 8px 30px;
     grid-template-columns: 8px 1fr 8px;
     pointer-events: none;
+
     #documentDecorations-centerCont {
         background: none;
     }
+
     .documentDecorations-resizer {
         pointer-events: auto;
         background: $alt-accent;
         opacity: 0.8;
     }
+
     #documentDecorations-topLeftResizer,
     #documentDecorations-bottomRightResizer {
         cursor: nwse-resize;
     }
+
     #documentDecorations-topRightResizer,
     #documentDecorations-bottomLeftResizer {
         cursor: nesw-resize;
     }
+
     #documentDecorations-topResizer,
     #documentDecorations-bottomResizer {
         cursor: ns-resize;
     }
+
     #documentDecorations-leftResizer,
     #documentDecorations-rightResizer {
         cursor: ew-resize;
@@ -115,4 +122,15 @@
     display: flex;
     justify-content: center;
     align-items: center;
+}
+
+.templating-button {
+    height: 20px;
+    width: 20px;
+    margin-top: 10px;
+    border-radius: 50%;
+    opacity: 0.9;
+    pointer-events: auto;
+    background-color: red;
+    cursor: pointer;
 }
\ No newline at end of file
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 47098c3b5..6d60f9740 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -9,6 +9,7 @@ import { props } from "bluebird";
 import { DragManager } from "../util/DragManager";
 import { LinkMenu } from "./nodes/LinkMenu";
 import { ListField } from "../../fields/ListField";
+import { Templates } from "./Templates";
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -192,6 +193,22 @@ export class DocumentDecorations extends React.Component {
     //     e.stopPropagation();
     // }
 
+    addTemplate = (): void => {
+        console.log("add template");
+        let text = `
+        <div>
+            <div style="margin:auto; height:calc(100%); width:100%;">
+                {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}/>
+            </div>
+        </div>       
+                `;
+        let view = SelectionManager.SelectedDocuments()[0];
+        view.addTemplate(Templates.OuterCaption);
+    }
+
     render() {
         var bounds = this.Bounds;
         if (this.Hidden) {
@@ -236,6 +253,8 @@ export class DocumentDecorations extends React.Component {
 
                 <div title="View Links" className="linkFlyout" ref={this._linkButton}>{linkButton}</div>
 
+                <div className="templating-button" onClick={this.addTemplate}></div>
+
             </div >
         )
     }
diff --git a/src/client/views/Templates.tsx b/src/client/views/Templates.tsx
new file mode 100644
index 000000000..8260f9414
--- /dev/null
+++ b/src/client/views/Templates.tsx
@@ -0,0 +1,40 @@
+import { observer } from "mobx-react";
+import { observable } from "mobx";
+import { action, computed } from "mobx";
+import React = require("react");
+
+export class Template {
+    constructor(layout: string) {
+        this._layout = layout;
+    }
+
+    private _layout: string = "";
+
+    get Layout(): string {
+        return this._layout;
+    }
+}
+
+export namespace Templates {
+    export const OuterCaption = new Template(`
+    <div>
+        <div style="margin:auto; height:calc(100%); width:100%;">
+            {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}/>
+        </div>
+    </div>       
+            `);
+    export const InnerCaption = new Template(`
+    <div>
+        <div style="margin:auto; height:calc(100% - 25px); width:100%;">
+            {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}/>
+        </div>
+    </div>       
+            `);
+}
+
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 71613ca4f..f8e5b0277 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -16,6 +16,7 @@ import { CollectionDockingView } from "../collections/CollectionDockingView";
 import { CollectionView, CollectionViewType } from "../collections/CollectionView";
 import { ContextMenu } from "../ContextMenu";
 import { DocumentContentsView } from "./DocumentContentsView";
+import { Template } from "./../Templates"
 import "./DocumentView.scss";
 import React = require("react");
 import { ServerUtils } from "../../../server/ServerUtil";
@@ -93,6 +94,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     private _downX: number = 0;
     private _downY: number = 0;
     private _reactionDisposer: Opt<IReactionDisposer>;
+    private _templates: Array<Template> = [];
     @computed get active(): boolean { return SelectionManager.IsSelected(this) || !this.props.ContainingCollectionView || this.props.ContainingCollectionView.active(); }
     @computed get topMost(): boolean { return !this.props.ContainingCollectionView || this.props.ContainingCollectionView.collectionViewType == CollectionViewType.Docking; }
     @computed get layout(): string { return this.props.Document.GetText(KeyStore.Layout, "<p>Error loading layout data</p>"); }
@@ -273,6 +275,20 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     }
 
     @action
+    addTemplate = (template: Template) => {
+        // TODO: should change to set
+        this._templates.push(template);
+
+        // TODO: apply templates to original layout
+        this._templates.forEach(temp => {
+            let text = temp.Layout;
+            let oldLayout = this.props.Document.GetText(KeyStore.Layout, "");
+            let layout = text.replace("{layout}", oldLayout);
+            this.props.Document.SetText(KeyStore.Layout, layout);
+        })
+    }
+
+    @action
     onContextMenu = (e: React.MouseEvent): void => {
         e.stopPropagation();
         let moved = Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3;
@@ -327,6 +343,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         var nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 0);
         var nativeHeight = this.props.Document.GetNumber(KeyStore.NativeHeight, 0);
         var backgroundcolor = this.props.Document.GetText(KeyStore.BackgroundColor, "");
+
         return (
             <div className="documentView-node" ref={this._mainCont}
                 style={{