created template adding menu

4 files changed, 120 insertions, 80 deletions

diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 642d7caf3..f6d332a36 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -70,26 +70,21 @@
 //         cursor: ew-resize;
 //     }
 // }
-.linkFlyout {
-    grid-column: 1/4
-}
 
-.linkButton-empty:hover {
-    background: $main-accent;
-    transform: scale(1.05);
-    cursor: pointer;
+.documentDecorations-extra {
+    display: flex;
+    position: absolute;
 }
 
-.linkButton-nonempty:hover {
-    background: $main-accent;
-    transform: scale(1.05);
-    cursor: pointer;
+.documentDecorations-ex-wrapper {
+    margin-right: 10px;
 }
 
-.linkButton-empty {
+.linkButton-empty,
+.linkButton-nonempty,
+.documentDecorations-ex {
     height: 20px;
     width: 20px;
-    margin-top: 10px;
     border-radius: 50%;
     opacity: 0.9;
     pointer-events: auto;
@@ -103,34 +98,33 @@
     display: flex;
     justify-content: center;
     align-items: center;
+
+    &:hover {
+        background: $main-accent;
+        transform: scale(1.05);
+        cursor: pointer;
+    }
 }
 
-.linkButton-nonempty {
-    height: 20px;
-    width: 20px;
-    margin-top: 10px;
-    border-radius: 50%;
-    opacity: 0.9;
-    pointer-events: auto;
-    background-color: $dark-color;
-    color: $light-color;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    font-size: 75%;
-    transition: transform 0.2s;
-    text-align: center;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+.templating-button-wrapper {
+    position: relative;
 }
 
-.templating-button {
-    height: 20px;
-    width: 20px;
-    margin-top: 10px;
-    border-radius: 50%;
-    opacity: 0.9;
-    pointer-events: auto;
-    background-color: red;
-    cursor: pointer;
+#template-list {
+    position: absolute;
+    top: 0;
+    left: 30px;
+    width: 150px;
+    line-height: 25px;
+    max-height: 175px;
+    font-family: $sans-serif;
+    font-size: 12px;
+    background-color: $light-color-secondary;
+    padding: 2px 12px;
+
+    input {
+        margin-right: 10px;
+    }
+
+
 }
\ No newline at end of file
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 6d60f9740..9fe3cdc75 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -9,7 +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";
+import { Templates, Template } from "./Templates";
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -23,6 +23,7 @@ export class DocumentDecorations extends React.Component {
     private _resizeBorderWidth = 16;
     private _linkButton = React.createRef<HTMLDivElement>();
     @observable private _hidden = false;
+    @observable private _templatesActive: boolean = false;
 
     constructor(props: Readonly<{}>) {
         super(props)
@@ -193,20 +194,18 @@ 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>       
-                `;
+    toggleTemplate = (event: React.ChangeEvent<HTMLInputElement>, template: Template): void => {
         let view = SelectionManager.SelectedDocuments()[0];
-        view.addTemplate(Templates.OuterCaption);
+        if (event.target.checked) {
+            view.addTemplate(template);
+        } else {
+            view.removeTemplate(template);
+        }
+    }
+
+    @action
+    toggleTemplateActivity = (): void => {
+        this._templatesActive = !this._templatesActive;
     }
 
     render() {
@@ -234,28 +233,52 @@ export class DocumentDecorations extends React.Component {
                 <div className={"linkButton-" + (selFirst.props.Document.GetData(KeyStore.LinkedToDocs, ListField, []).length ? "nonempty" : "empty")} onPointerDown={this.onLinkButtonDown} >{linkCount}</div>
             </Flyout>);
         }
-        return (
-            <div id="documentDecorations-container" style={{
-                width: (bounds.r - bounds.x + this._resizeBorderWidth) + "px",
-                height: (bounds.b - bounds.y + this._resizeBorderWidth + 30) + "px",
-                left: bounds.x - this._resizeBorderWidth / 2,
-                top: bounds.y - this._resizeBorderWidth / 2,
-            }}>
-                <div id="documentDecorations-topLeftResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
-                <div id="documentDecorations-topResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
-                <div id="documentDecorations-topRightResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
-                <div id="documentDecorations-leftResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
-                <div id="documentDecorations-centerCont"></div>
-                <div id="documentDecorations-rightResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
-                <div id="documentDecorations-bottomLeftResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
-                <div id="documentDecorations-bottomResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
-                <div id="documentDecorations-bottomRightResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
 
-                <div title="View Links" className="linkFlyout" ref={this._linkButton}>{linkButton}</div>
+        let templateMenu = !this._templatesActive ? (null) : (
+            <ul id="template-list">
+                {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={{
+                    width: (bounds.r - bounds.x + this._resizeBorderWidth) + "px",
+                    height: (bounds.b - bounds.y + this._resizeBorderWidth + 30) + "px",
+                    left: bounds.x - this._resizeBorderWidth / 2,
+                    top: bounds.y - this._resizeBorderWidth / 2,
+                }}>
+                    <div id="documentDecorations-topLeftResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
+                    <div id="documentDecorations-topResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
+                    <div id="documentDecorations-topRightResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
+                    <div id="documentDecorations-leftResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
+                    <div id="documentDecorations-centerCont"></div>
+                    <div id="documentDecorations-rightResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
+                    <div id="documentDecorations-bottomLeftResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
+                    <div id="documentDecorations-bottomResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
+                    <div id="documentDecorations-bottomRightResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
 
-                <div className="templating-button" onClick={this.addTemplate}></div>
+                </div >
+                <div className="documentDecorations-extra" style={{
+                    width: (bounds.r - bounds.x + this._resizeBorderWidth) + "px",
+                    left: bounds.x - this._resizeBorderWidth / 2,
+                    top: bounds.y - this._resizeBorderWidth / 2 + (bounds.b - bounds.y + this._resizeBorderWidth)
+                }}>
+                    <div title="View Links" className="linkFlyout documentDecorations-ex-wrapper" ref={this._linkButton}>{linkButton}</div>
 
-            </div >
+                    <div className="templating-button-wrapper documentDecorations-ex-wrapper">
+                        <div className="templating-button documentDecorations-ex"
+                            onClick={() => this.toggleTemplateActivity()}>T</div>
+                        {templateMenu}
+                    </div>
+                </div>
+            </div>
         )
     }
 }
\ No newline at end of file
diff --git a/src/client/views/Templates.tsx b/src/client/views/Templates.tsx
index 8260f9414..d717fb778 100644
--- a/src/client/views/Templates.tsx
+++ b/src/client/views/Templates.tsx
@@ -2,21 +2,30 @@ import { observer } from "mobx-react";
 import { observable } from "mobx";
 import { action, computed } from "mobx";
 import React = require("react");
+import { StringLiteral } from "babel-types";
 
 export class Template {
-    constructor(layout: string) {
+    constructor(name: string, layout: string) {
+        this._name = name;
         this._layout = layout;
     }
 
-    private _layout: string = "";
+    private _name: string;
+    private _layout: string;
+
+    get Name(): string {
+        return this._name;
+    }
 
     get Layout(): string {
         return this._layout;
     }
+
 }
 
 export namespace Templates {
-    export const OuterCaption = new Template(`
+    export const OuterCaption = new Template("Outer caption",
+        `
     <div>
         <div style="margin:auto; height:calc(100%); width:100%;">
             {layout}
@@ -26,7 +35,8 @@ export namespace Templates {
         </div>
     </div>       
             `);
-    export const InnerCaption = new Template(`
+    export const InnerCaption = new Template("Inner caption",
+        `
     <div>
         <div style="margin:auto; height:calc(100% - 25px); width:100%;">
             {layout}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index f8e5b0277..e5c6859f8 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -94,7 +94,8 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     private _downX: number = 0;
     private _downY: number = 0;
     private _reactionDisposer: Opt<IReactionDisposer>;
-    private _templates: Array<Template> = [];
+    private _templates: Set<Template> = new Set<Template>();
+    private _basicLayout: 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(); }
     @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>"); }
@@ -276,16 +277,28 @@ export class DocumentView extends React.Component<DocumentViewProps> {
 
     @action
     addTemplate = (template: Template) => {
-        // TODO: should change to set
-        this._templates.push(template);
+        this._templates.add(template);
 
         // TODO: apply templates to original layout
+        this.props.Document.SetText(KeyStore.Layout, this._basicLayout);
         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 removeTemplate = (template: Template) => {
+        this._templates.delete(template);
+
+        this.props.Document.SetText(KeyStore.Layout, this._basicLayout);
+        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