diff options
Diffstat (limited to 'src/client/views/TemplateMenu.tsx')
| -rw-r--r-- | src/client/views/TemplateMenu.tsx | 59 |
1 files changed, 17 insertions, 42 deletions
diff --git a/src/client/views/TemplateMenu.tsx b/src/client/views/TemplateMenu.tsx index c65b338b4..10419ddb7 100644 --- a/src/client/views/TemplateMenu.tsx +++ b/src/client/views/TemplateMenu.tsx @@ -1,6 +1,5 @@ import { action, observable } from "mobx"; import { observer } from "mobx-react"; -import { DocumentManager } from "../util/DocumentManager"; import { DragManager } from "../util/DragManager"; import { SelectionManager } from "../util/SelectionManager"; import { undoBatch } from "../util/UndoManager"; @@ -10,7 +9,6 @@ import { Template, Templates } from "./Templates"; import React = require("react"); import { Doc } from "../../new_fields/Doc"; import { StrCast } from "../../new_fields/Types"; -import { emptyFunction } from "../../Utils"; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -61,35 +59,13 @@ export class TemplateMenu extends React.Component<TemplateMenuProps> { toggleFloat = (e: React.ChangeEvent<HTMLInputElement>): void => { SelectionManager.DeselectAll(); - let topDocView = this.props.docs[0]; - let topDoc = topDocView.props.Document; - let xf = topDocView.props.ScreenToLocalTransform(); - let ex = e.target.clientLeft; - let ey = e.target.clientTop; - undoBatch(action(() => topDoc.z = topDoc.z ? 0 : 1))(); - if (e.target.checked) { - setTimeout(() => { - let newDocView = DocumentManager.Instance.getDocumentView(topDoc); - if (newDocView) { - let de = new DragManager.DocumentDragData([topDoc]); - de.moveDocument = topDocView.props.moveDocument; - let xf = newDocView.ContentDiv!.getBoundingClientRect(); - DragManager.StartDocumentDrag([newDocView.ContentDiv!], de, ex, ey, { - offsetX: (ex - xf.left), offsetY: (ey - xf.top), - handlers: { dragComplete: () => { }, }, - hideSource: false - }); - } - }, 10); - } else if (topDocView.props.ContainingCollectionView) { - let collView = topDocView.props.ContainingCollectionView; - let [sx, sy] = xf.inverse().transformPoint(0, 0); - let [x, y] = collView.props.ScreenToLocalTransform().transformPoint(sx, sy); - topDoc.x = x; - topDoc.y = y; - } + const topDocView = this.props.docs[0]; + const ex = e.target.getBoundingClientRect().left; + const ey = e.target.getBoundingClientRect().top; + DocumentView.FloatDoc(topDocView, ex, ey); } + @undoBatch @action toggleTemplate = (event: React.ChangeEvent<HTMLInputElement>, template: Template): void => { @@ -122,7 +98,7 @@ export class TemplateMenu extends React.Component<TemplateMenuProps> { @action toggleChrome = (): void => { this.props.docs.map(dv => { - let layout = Doc.Layout(dv.Document); + const layout = Doc.Layout(dv.Document); layout.chromeStatus = (layout.chromeStatus !== "disabled" ? "disabled" : "enabled"); }); } @@ -147,17 +123,14 @@ export class TemplateMenu extends React.Component<TemplateMenuProps> { document.removeEventListener("pointermove", this.onAliasButtonMoved); document.removeEventListener("pointerup", this.onAliasButtonUp); - let dragDocView = this.props.docs[0]; - let dragData = new DragManager.DocumentDragData([dragDocView.props.Document]); + const dragDocView = this.props.docs[0]; + const dragData = new DragManager.DocumentDragData([dragDocView.props.Document]); const [left, top] = dragDocView.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); dragData.embedDoc = true; dragData.dropAction = "alias"; DragManager.StartDocumentDrag([dragDocView.ContentDiv!], dragData, left, top, { offsetX: dragData.offset[0], offsetY: dragData.offset[1], - handlers: { - dragComplete: action(emptyFunction), - }, hideSource: false }); } @@ -165,21 +138,23 @@ export class TemplateMenu extends React.Component<TemplateMenuProps> { } render() { - let layout = Doc.Layout(this.props.docs[0].Document); - let templateMenu: Array<JSX.Element> = []; + const layout = Doc.Layout(this.props.docs[0].Document); + const templateMenu: Array<JSX.Element> = []; this.props.templates.forEach((checked, template) => templateMenu.push(<TemplateToggle key={template.Name} template={template} checked={checked} toggle={this.toggleTemplate} />)); templateMenu.push(<OtherToggle key={"float"} name={"Float"} checked={this.props.docs[0].Document.z ? true : false} toggle={this.toggleFloat} />); templateMenu.push(<OtherToggle key={"custom"} name={"Custom"} checked={StrCast(this.props.docs[0].Document.layoutKey, "layout") !== "layout"} toggle={this.toggleCustom} />); templateMenu.push(<OtherToggle key={"chrome"} name={"Chrome"} checked={layout.chromeStatus !== "disabled"} toggle={this.toggleChrome} />); return ( - <div className="templating-menu" onPointerDown={this.onAliasButtonDown}> - <div title="Drag:(create alias). Tap:(modify layout)." className="templating-button" onClick={() => this.toggleTemplateActivity()}>+</div> - <ul className="template-list" ref={this._dragRef} style={{ display: this._hidden ? "none" : "block" }}> + <Flyout anchorPoint={anchorPoints.RIGHT_TOP} + content={<ul className="template-list" ref={this._dragRef} style={{ display: this._hidden ? "none" : "block" }}> {templateMenu} {<button onClick={this.clearTemplates}>Restore Defaults</button>} - </ul> - </div> + </ul>}> + <div className="templating-menu" onPointerDown={this.onAliasButtonDown}> + <div title="Drag:(create alias). Tap:(modify layout)." className="templating-button" onClick={() => this.toggleTemplateActivity()}>+</div> + </div> + </Flyout> ); } }
\ No newline at end of file |