aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/DocumentDecorations.tsx58
-rw-r--r--src/client/views/TemplateEditButton.tsx92
-rw-r--r--src/client/views/Templates.tsx12
-rw-r--r--src/client/views/nodes/DocumentView.tsx12
4 files changed, 130 insertions, 44 deletions
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<HTMLInputElement>, template: Template) => void }> {
+// render() {
+// if (this.props.template) {
+// return (
+// <li>
+// <input type="checkbox" checked={this.props.checked} onChange={(event) => this.props.toggle(event, this.props.template)} />
+// {this.props.template.Name}
+// </li>
+// )
+// }
+// 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<HTMLDivElement>();
@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<HTMLInputElement>, template: Template): void => {
- let view = SelectionManager.SelectedDocuments()[0];
- if (event.target.checked) {
- view.addTemplate(template);
- } else {
- view.removeTemplate(template);
- }
- }
-
- @action
- toggleBase = (event: React.ChangeEvent<HTMLInputElement>): 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 {
</Flyout>);
}
- let templateMenu = !this._templatesActive ? (null) : (
- <ul id="template-list">
- <li><input type="checkbox" onChange={(event) => this.toggleBase(event)} checked={this._showBase} />Base layout</li>
- {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={{
@@ -281,11 +261,7 @@ export class DocumentDecorations extends React.Component {
}}>
<div title="View Links" className="linkFlyout documentDecorations-ex-wrapper" ref={this._linkButton}>{linkButton}</div>
- <div className="templating-button-wrapper documentDecorations-ex-wrapper">
- <div className="templating-button documentDecorations-ex"
- onClick={() => this.toggleTemplateActivity()}>T</div>
- {templateMenu}
- </div>
+ <TemplateEditButton Document={SelectionManager.SelectedDocuments()[0]} />
</div>
</div>
)
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<HTMLInputElement>, template: Template) => void }> {
+ render() {
+ if (this.props.template) {
+ return (
+ <li>
+ <input type="checkbox" checked={this.props.checked} onChange={(event) => this.props.toggle(event, this.props.template)} />
+ {this.props.template.Name}
+ </li>
+ )
+ }
+ return (null);
+ }
+}
+
+export interface TemplateButtonProps {
+ Document: DocumentView;
+}
+
+@observer
+export class TemplateEditButton extends React.Component<TemplateButtonProps> {
+
+ @observable private _templatesActive: boolean = false;
+ @observable private _showBase: boolean = true;
+
+ toggleTemplate = (event: React.ChangeEvent<HTMLInputElement>, 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<Document>(view.props.fieldKey, []);
+
+ }
+
+ @action
+ toggleBase = (event: React.ChangeEvent<HTMLInputElement>): 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) : (
+ <ul id="template-list">
+ <li><input type="checkbox" onChange={(event) => this.toggleBase(event)} defaultChecked={true} />Base layout</li>
+ {console.log("mm")}
+ {Array.from(Object.values(Templates)).map(template => {
+ let view = this.props.Document
+ let checked = view.hasTemplate(template);
+ return (
+ <TemplateToggle key={template.Name} template={template} checked={checked} toggle={this.toggleTemplate} />
+ )
+
+ // return (
+ // <li key={template.Name}>
+ // {console.log(template.Name, checked)}
+ // <input type="checkbox" onChange={(event) => this.toggleTemplate(event, template)} defaultChecked={checked} />
+ // {template.Name}
+ // </li>
+ // )
+ })}
+ </ul>
+ )
+ return (
+ <div className="templating-button-wrapper documentDecorations-ex-wrapper">
+ <div className="templating-button documentDecorations-ex"
+ onClick={() => this.toggleTemplateActivity()}>T</div>
+ {templateMenu}
+ </div>
+ )
+ }
+} \ 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 {
</div>
</div>
`);
+
+ export const Title = new Template("Title",
+ `
+ <div>
+ <div style="margin:auto; height:calc(100% - 50px); width:100%;">
+ {layout}
+ </div>
+ <div style="height:50px; width:100%; position:absolute">
+ <FormattedTextBox doc={Document} DocumentViewForField={DocumentView} bindings={bindings} fieldKey={"TitleKey"} isSelected={isSelected} select={select} selectOnLoad={SelectOnLoad} isTopMost={isTopMost}/>
+ </div>
+ </div>
+ `);
}
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<DocumentViewProps> {
private _downX: number = 0;
private _downY: number = 0;
private _reactionDisposer: Opt<IReactionDisposer>;
- private _templates: Set<Template> = new Set<Template>();
+ @observable private _templates: Set<Template> = new Set<Template>();
private _useBase: boolean = true;
private _baseLayout: 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(); }
@@ -301,12 +301,18 @@ export class DocumentView extends React.Component<DocumentViewProps> {
this.updateLayout();
}
- @action removeTemplate = (template: Template) => {
+ @action
+ removeTemplate = (template: Template) => {
this._templates.delete(template);
this.updateLayout();
}
@action
+ hasTemplate = (template: Template) => {
+ return this._templates.has(template);
+ }
+
+ @action
onContextMenu = (e: React.MouseEvent): void => {
e.stopPropagation();
let moved = Math.abs(this._downX - e.clientX) > 3 || Math.abs(this._downY - e.clientY) > 3;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 12:47:55 +0000