From e81c43baadcaf31314c07505fa7cde70e709706d Mon Sep 17 00:00:00 2001 From: Fawn Date: Mon, 15 Apr 2019 15:25:43 -0400 Subject: pulling from master --- src/client/views/DocumentDecorations.tsx | 58 ++++++-------------- src/client/views/TemplateEditButton.tsx | 92 ++++++++++++++++++++++++++++++++ src/client/views/Templates.tsx | 12 +++++ src/client/views/nodes/DocumentView.tsx | 12 +++-- 4 files changed, 130 insertions(+), 44 deletions(-) create mode 100644 src/client/views/TemplateEditButton.tsx (limited to 'src') 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, template: Template) => void }> { +// render() { +// if (this.props.template) { +// return ( +//
  • +// this.props.toggle(event, this.props.template)} /> +// {this.props.template.Name} +//
    • +// ) +// } +// 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(); @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, template: Template): void => { - let view = SelectionManager.SelectedDocuments()[0]; - if (event.target.checked) { - view.addTemplate(template); - } else { - view.removeTemplate(template); - } - } - - @action - toggleBase = (event: React.ChangeEvent): 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 { ); } - let templateMenu = !this._templatesActive ? (null) : ( -
      -
    • this.toggleBase(event)} checked={this._showBase} />Base layout
      • - {Array.from(Object.values(Templates)).map(template => { - return ( -
    • - this.toggleTemplate(event, template)} /> - {template.Name} -
      • - ) - })} -
    - ) return (
    {linkButton}
    -
    -
    this.toggleTemplateActivity()}>T
    - {templateMenu} -
    +
    ) 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, template: Template) => void }> { + render() { + if (this.props.template) { + return ( +
  • + this.props.toggle(event, this.props.template)} /> + {this.props.template.Name} +
    • + ) + } + return (null); + } +} + +export interface TemplateButtonProps { + Document: DocumentView; +} + +@observer +export class TemplateEditButton extends React.Component { + + @observable private _templatesActive: boolean = false; + @observable private _showBase: boolean = true; + + toggleTemplate = (event: React.ChangeEvent, 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(view.props.fieldKey, []); + + } + + @action + toggleBase = (event: React.ChangeEvent): 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) : ( +
      +
    • this.toggleBase(event)} defaultChecked={true} />Base layout
      • + {console.log("mm")} + {Array.from(Object.values(Templates)).map(template => { + let view = this.props.Document + let checked = view.hasTemplate(template); + return ( + + ) + + // return ( + //
    • + // {console.log(template.Name, checked)} + // this.toggleTemplate(event, template)} defaultChecked={checked} /> + // {template.Name} + //
      • + // ) + })} +
    + ) + return ( +
    +
    this.toggleTemplateActivity()}>T
    + {templateMenu} +
    + ) + } +} \ 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 { `); + + export const Title = new Template("Title", + ` +
    +
    + {layout} +
    +
    + +
    +
    + `); } 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 { private _downX: number = 0; private _downY: number = 0; private _reactionDisposer: Opt; - private _templates: Set