From 5246c3c38acda6cbd8636577ff8f658657609d88 Mon Sep 17 00:00:00 2001 From: Fawn Date: Mon, 1 Apr 2019 17:22:49 -0400 Subject: set up for templating --- src/client/views/.DS_Store | Bin 8196 -> 6148 bytes src/client/views/DocumentDecorations.scss | 18 ++++++++++++++ src/client/views/DocumentDecorations.tsx | 19 ++++++++++++++ src/client/views/Templates.tsx | 40 ++++++++++++++++++++++++++++++ src/client/views/nodes/DocumentView.tsx | 17 +++++++++++++ 5 files changed, 94 insertions(+) create mode 100644 src/client/views/Templates.tsx (limited to 'src') diff --git a/src/client/views/.DS_Store b/src/client/views/.DS_Store index 0964d5ff3..5008ddfcf 100644 Binary files a/src/client/views/.DS_Store and b/src/client/views/.DS_Store differ 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 = ` +
+
+ {layout} +
+
+ +
+
+ `; + 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 {
{linkButton}
+
+ ) } 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(` +
+
+ {layout} +
+
+ +
+
+ `); + export const InnerCaption = new Template(` +
+
+ {layout} +
+
+ +
+
+ `); +} + 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 { private _downX: number = 0; private _downY: number = 0; private _reactionDisposer: Opt; + private _templates: Array