diff options
| -rw-r--r-- | src/client/views/DocumentDecorations.scss | 2 | ||||
| -rw-r--r-- | src/client/views/TemplateMenu.tsx | 29 | ||||
| -rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 4 |
3 files changed, 19 insertions, 16 deletions
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index 4ab5d733f..e68bfc6ad 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -154,7 +154,7 @@ $linkGap : 3px; .link-button-container { margin-top: $linkGap; grid-column: 1/4; - width: auto; + width: max-content; height: auto; display: flex; flex-direction: row; diff --git a/src/client/views/TemplateMenu.tsx b/src/client/views/TemplateMenu.tsx index 34876cc79..bfb8168e4 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 { DocumentType } from "../documents/DocumentTypes"; import { DocumentManager } from "../util/DocumentManager"; import { DragManager } from "../util/DragManager"; import { SelectionManager } from "../util/SelectionManager"; @@ -30,12 +29,12 @@ class TemplateToggle extends React.Component<{ template: Template, checked: bool } } @observer -class ChromeToggle extends React.Component<{ checked: boolean, toggle: (event: React.ChangeEvent<HTMLInputElement>) => void }> { +class OtherToggle extends React.Component<{ checked: boolean, name: string, toggle: (event: React.ChangeEvent<HTMLInputElement>) => void }> { render() { return ( <li className="chromeToggle"> <input type="checkbox" checked={this.props.checked} onChange={(event) => this.props.toggle(event)} /> - Chrome + {this.props.name} </li> ); } @@ -51,19 +50,19 @@ export class TemplateMenu extends React.Component<TemplateMenuProps> { @observable private _hidden: boolean = true; dragRef = React.createRef<HTMLUListElement>(); - toggleCustom = (e: React.MouseEvent): void => { - this.props.docs.map(dv => dv.toggleCustomView()); + toggleCustom = (e: React.ChangeEvent<HTMLInputElement>): void => { + this.props.docs.map(dv => dv.setCustomView(e.target.checked)); } - toggleFloat = (e: React.MouseEvent): void => { + 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.clientX; - let ey = e.clientY; + let ex = e.target.clientLeft; + let ey = e.target.clientTop; undoBatch(action(() => topDoc.z = topDoc.z ? 0 : 1))(); - if (!topDoc.z) { + if (e.target.checked) { setTimeout(() => { let newDocView = DocumentManager.Instance.getDocumentView(topDoc); if (newDocView) { @@ -110,21 +109,25 @@ export class TemplateMenu extends React.Component<TemplateMenuProps> { @undoBatch @action toggleChrome = (): void => { - this.props.docs.map(dv => dv.Document.chromeStatus = (dv.Document.chromeStatus !== "disabled" ? "disabled" : "enabled")); + this.props.docs.map(dv => { + let layout = dv.Document.layout instanceof Doc ? dv.Document.layout as Doc : dv.Document; + layout.chromeStatus = (layout.chromeStatus !== "disabled" ? "disabled" : "enabled"); + }); } render() { + let layout = this.props.docs[0].Document.layout instanceof Doc ? this.props.docs[0].Document.layout as Doc : this.props.docs[0].Document; let 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(<ChromeToggle key={"chrome"} checked={this.props.docs[0].Document.chromeStatus !== "disabled"} toggle={this.toggleChrome} />); + 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={typeof this.props.docs[0].Document.layout === "string" ? false : true} toggle={this.toggleCustom} />); + templateMenu.push(<OtherToggle key={"chrome"} name={"Chrome"} checked={layout.chromeStatus !== "disabled"} toggle={this.toggleChrome} />); return ( <div className="templating-menu" > <div title="Template Options" className="templating-button" onClick={() => this.toggleTemplateActivity()}>+</div> <ul id="template-list" ref={this.dragRef} style={{ display: this._hidden ? "none" : "block" }}> {templateMenu} - <button onClick={this.toggleCustom}>{typeof this.props.docs[0].Document.layout === "string" ? "Custom" : "Native"}</button> - <button onClick={this.toggleFloat}>Float</button> {/* <button onClick={this.clearTemplates}>Clear</button> */} </ul> </div> diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index c27e7f4a1..7f3ebe026 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -393,11 +393,11 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu @undoBatch @action - toggleCustomView = (): void => { + setCustomView = (custom: boolean): void => { if (this.props.ContainingCollectionView && this.props.ContainingCollectionView.props.DataDoc) { Doc.MakeMetadataFieldTemplate(this.props.Document, this.props.ContainingCollectionView.props.DataDoc); } else { // bcz: not robust -- for now documents with string layout are native documents, and those with Doc layouts are customized - typeof this.props.Document.layout === "string" ? this.makeCustomViewClicked() : this.makeNativeViewClicked(); + custom ? this.makeCustomViewClicked() : this.makeNativeViewClicked(); } } |