aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/documents/Documents.ts1
-rw-r--r--src/client/views/DocumentDecorations.scss63
-rw-r--r--src/client/views/DocumentDecorations.tsx12
-rw-r--r--src/client/views/TemplateEditButton.tsx92
-rw-r--r--src/client/views/TemplateMenu.tsx88
-rw-r--r--src/client/views/Templates.tsx2
-rw-r--r--src/client/views/nodes/DocumentView.tsx8
-rw-r--r--src/client/views/nodes/FormattedTextBox.tsx4
8 files changed, 140 insertions, 130 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 4febfa7eb..8db1a1c6d 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -130,6 +130,7 @@ export namespace Documents {
{ x: 0, y: 0, nativeWidth: 600, width: 300, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] });
imageProto.SetText(KeyStore.BackgroundLayout, ImageBox.LayoutString());
imageProto.SetNumber(KeyStore.CurPage, 0);
+ imageProto.SetData(KeyStore.LayoutFields, [KeyStore.Title], ListField);
return imageProto;
}
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index e926c2be6..14f3359ca 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -104,15 +104,6 @@
margin-left: 25px;
}
-.documentDecorations-extra {
- display: flex;
- position: absolute;
-}
-
-.documentDecorations-ex-wrapper {
- margin-right: 10px;
-}
-
.linkButton-linker {
position: absolute;
bottom: 0px;
@@ -164,25 +155,43 @@
}
}
-.templating-button-wrapper {
- position: relative;
-}
-
-#template-list {
+.templating-menu {
position: absolute;
- top: 0;
- left: 30px;
- width: 150px;
- line-height: 25px;
- max-height: 175px;
- font-family: $sans-serif;
- font-size: 12px;
- background-color: $light-color-secondary;
- padding: 2px 12px;
-
- input {
- margin-right: 10px;
- }
+ bottom: 0;
+ left: 50px;
+ pointer-events: auto;
+ .templating-button {
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ opacity: 0.9;
+ background-color: $dark-color;
+ color: $light-color;
+ text-align: center;
+ cursor: pointer;
+ &:hover {
+ background: $main-accent;
+ transform: scale(1.05);
+ }
+ }
+
+ #template-list {
+ position: absolute;
+ top: 0;
+ left: 30px;
+ width: 150px;
+ line-height: 25px;
+ max-height: 175px;
+ font-family: $sans-serif;
+ font-size: 12px;
+ background-color: $light-color-secondary;
+ padding: 2px 12px;
+ list-style: none;
+
+ input {
+ margin-right: 10px;
+ }
+ }
} \ No newline at end of file
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 51c085038..1e936a881 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -14,8 +14,9 @@ import './DocumentDecorations.scss';
import { MainOverlayTextBox } from "./MainOverlayTextBox";
import { DocumentView } from "./nodes/DocumentView";
import { LinkMenu } from "./nodes/LinkMenu";
-import { TemplateEditButton } from "./TemplateEditButton";
+import { TemplateMenu } from "./TemplateMenu";
import React = require("react");
+import { Template, Templates } from "./Templates";
const higflyout = require("@hig/flyout");
export const { anchorPoints } = higflyout;
export const Flyout = higflyout.default;
@@ -404,6 +405,13 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
<div className={"linkButton-" + (selFirst.props.Document.GetData(KeyStore.LinkedToDocs, ListField, []).length ? "nonempty" : "empty")} onPointerDown={this.onLinkButtonDown} >{linkCount}</div>
</Flyout>);
}
+
+ let templates: Map<Template, boolean> = new Map();
+ let doc = SelectionManager.SelectedDocuments()[0];
+ Array.from(Object.values(Templates)).map(template => {
+ templates.set(template, doc.hasTemplate(template));
+ });
+
return (<div className="documentDecorations">
<div className="documentDecorations-background" style={{
width: (bounds.r - bounds.x + this._resizeBorderWidth) + "px",
@@ -436,7 +444,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
<div title="View Links" className="linkFlyout" ref={this._linkButton}> {linkButton} </div>
<div className="linkButton-linker" ref={this._linkerButton} onPointerDown={this.onLinkerButtonDown}>∞</div>
- <TemplateEditButton Document={SelectionManager.SelectedDocuments()[0]} />
+ <TemplateMenu doc={doc} templates={templates} />
</div >
</div>
);
diff --git a/src/client/views/TemplateEditButton.tsx b/src/client/views/TemplateEditButton.tsx
deleted file mode 100644
index 6542ac7ec..000000000
--- a/src/client/views/TemplateEditButton.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-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/TemplateMenu.tsx b/src/client/views/TemplateMenu.tsx
new file mode 100644
index 000000000..7f670aec0
--- /dev/null
+++ b/src/client/views/TemplateMenu.tsx
@@ -0,0 +1,88 @@
+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>
+ );
+ } else {
+ return (null);
+ }
+ }
+}
+
+export interface TemplateMenuProps {
+ doc: DocumentView;
+ templates: Map<Template, boolean>;
+}
+
+@observer
+export class TemplateMenu extends React.Component<TemplateMenuProps> {
+
+ @observable private _hidden: boolean = true;
+ @observable private _showBase: boolean = true;
+ @observable private _templates: Map<Template, boolean> = this.props.templates;
+
+
+ @action
+ toggleTemplate = (event: React.ChangeEvent<HTMLInputElement>, template: Template): void => {
+ if (event.target.checked) {
+ this.props.doc.addTemplate(template);
+ this._templates.set(template, true);
+ } else {
+ this.props.doc.removeTemplate(template);
+ this._templates.set(template, false);
+ }
+
+ // const docs = view.props.ContainingCollectionView;
+ // const docs = view.props.Document.GetList<Document>(view.props.fieldKey, []);
+
+ }
+
+ @action
+ componentWillReceiveProps(nextProps: TemplateMenuProps) {
+ this._templates = nextProps.templates;
+ }
+
+ @action
+ toggleBase = (event: React.ChangeEvent<HTMLInputElement>): void => {
+ this.props.doc.toggleBase(event.target.checked);
+ this._showBase = !this._showBase;
+ }
+
+ @action
+ toggleTemplateActivity = (): void => {
+ this._hidden = !this._hidden;
+ }
+
+ render() {
+ let templateMenu: Array<JSX.Element> = [];
+ this._templates.forEach((checked, template) => {
+ templateMenu.push(<TemplateToggle key={template.Name} template={template} checked={checked} toggle={this.toggleTemplate} />);
+ });
+
+ return (
+ <div className="templating-menu" >
+ <div className="templating-button" onClick={() => this.toggleTemplateActivity()}>T</div>
+ <ul id="template-list" style={{ display: this._hidden ? "none" : "block" }}>
+ <li><input type="checkbox" onChange={(event) => this.toggleBase(event)} defaultChecked={true} />Base layout</li>
+ {templateMenu}
+ </ul>
+ </div>
+ );
+ }
+} \ No newline at end of file
diff --git a/src/client/views/Templates.tsx b/src/client/views/Templates.tsx
index a6ba2243d..b82b383bb 100644
--- a/src/client/views/Templates.tsx
+++ b/src/client/views/Templates.tsx
@@ -54,7 +54,7 @@ export namespace Templates {
{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}/>
+ {Title}
</div>
</div>
`);
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 3c61810e2..ef1420027 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1,8 +1,4 @@
-<<<<<<< HEAD
-import { action, computed, IReactionDisposer, reaction, runInAction, observable } from "mobx";
-=======
-import { action, computed, runInAction } from "mobx";
->>>>>>> 6c0b421db6aa3204bbc6e42139d240f503000b5d
+import { action, computed, runInAction, observable } from "mobx";
import { observer } from "mobx-react";
import { BooleanField } from "../../../fields/BooleanField";
import { Document } from "../../../fields/Document";
@@ -25,7 +21,7 @@ import { CollectionVideoView } from "../collections/CollectionVideoView";
import { CollectionView } from "../collections/CollectionView";
import { ContextMenu } from "../ContextMenu";
import { DocumentContentsView } from "./DocumentContentsView";
-import { Template } from "./../Templates"
+import { Template } from "./../Templates";
import "./DocumentView.scss";
import React = require("react");
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index ad1ed5df0..9f71609d5 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -105,7 +105,7 @@ export class FormattedTextBox extends React.Component<(FieldViewProps & Formatte
}
);
} else {
- this._proxyReactionDisposer = reaction(() => this.props.isSelected(),
+ this._proxyReactionDisposer = reaction(() => { }/*this.props.isSelected()*/,
() => this.props.isSelected() && MainOverlayTextBox.Instance.SetTextDoc(this.props.Document, this.props.fieldKey, this._ref.current!, this.props.ScreenToLocalTransform()));
}
@@ -241,7 +241,7 @@ export class FormattedTextBox extends React.Component<(FieldViewProps & Formatte
render() {
return (
<div
- style={{ overflowY: this.props.isSelected() || this.props.isOverlay ? "scroll" : "hidden" }}
+ style={{ overflowY: /*this.props.isSelected() ||*/ this.props.isOverlay ? "scroll" : "hidden" }}
className={`formattedTextBox-cont`}
onKeyDown={this.onKeyPress}
onKeyPress={this.onKeyPress}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 23:21:54 +0000