aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/.DS_Storebin8196 -> 6148 bytes
-rw-r--r--src/client/views/DocumentDecorations.scss86
-rw-r--r--src/client/views/DocumentDecorations.tsx18
-rw-r--r--src/client/views/TemplateEditButton.tsx92
-rw-r--r--src/client/views/Templates.tsx62
-rw-r--r--src/client/views/nodes/DocumentView.tsx44
6 files changed, 265 insertions, 37 deletions
diff --git a/src/client/views/.DS_Store b/src/client/views/.DS_Store
index 0964d5ff3..5008ddfcf 100644
--- a/src/client/views/.DS_Store
+++ b/src/client/views/.DS_Store
Binary files differ
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index c1a949639..e926c2be6 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -3,10 +3,11 @@
.documentDecorations {
position: absolute;
}
+
#documentDecorations-container {
position: absolute;
top: 0;
- left:0;
+ left: 0;
display: grid;
z-index: $docDecorations-zindex;
grid-template-rows: 20px 8px 1fr 8px;
@@ -14,7 +15,7 @@
pointer-events: none;
#documentDecorations-centerCont {
- grid-column:3;
+ grid-column: 3;
background: none;
}
@@ -39,8 +40,8 @@
#documentDecorations-bottomRightResizer,
#documentDecorations-topRightResizer,
#documentDecorations-rightResizer {
- grid-column-start:5;
- grid-column-end:7;
+ grid-column-start: 5;
+ grid-column-end: 7;
}
#documentDecorations-topLeftResizer,
@@ -62,17 +63,18 @@
#documentDecorations-rightResizer {
cursor: ew-resize;
}
- .title{
- width:100%;
+
+ .title {
+ width: 100%;
background: lightblue;
- grid-column-start:3;
+ grid-column-start: 3;
grid-column-end: 4;
pointer-events: auto;
}
}
.documentDecorations-closeButton {
- background:$alt-accent;
+ background: $alt-accent;
opacity: 0.8;
grid-column-start: 4;
grid-column-end: 6;
@@ -80,8 +82,9 @@
text-align: center;
cursor: pointer;
}
+
.documentDecorations-minimizeButton {
- background:$alt-accent;
+ background: $alt-accent;
opacity: 0.8;
grid-column-start: 1;
grid-column-end: 3;
@@ -89,6 +92,7 @@
text-align: center;
cursor: pointer;
}
+
.documentDecorations-background {
background: lightblue;
position: absolute;
@@ -100,21 +104,18 @@
margin-left: 25px;
}
-.linkButton-empty:hover {
- background: $main-accent;
- transform: scale(1.05);
- cursor: pointer;
+.documentDecorations-extra {
+ display: flex;
+ position: absolute;
}
-.linkButton-nonempty:hover {
- background: $main-accent;
- transform: scale(1.05);
- cursor: pointer;
+.documentDecorations-ex-wrapper {
+ margin-right: 10px;
}
.linkButton-linker {
- position:absolute;
- bottom:0px;
+ position: absolute;
+ bottom: 0px;
left: 0px;
height: 20px;
width: 20px;
@@ -134,13 +135,14 @@
justify-content: center;
align-items: center;
}
+
.linkButton-tray {
grid-column: 1/4;
}
+
.linkButton-empty {
height: 20px;
width: 20px;
- margin-top: 10px;
border-radius: 50%;
opacity: 0.9;
pointer-events: auto;
@@ -154,23 +156,33 @@
display: flex;
justify-content: center;
align-items: center;
+
+ &:hover {
+ background: $main-accent;
+ transform: scale(1.05);
+ cursor: pointer;
+ }
}
-.linkButton-nonempty {
- height: 20px;
- width: 20px;
- margin-top: 10px;
- border-radius: 50%;
- opacity: 0.9;
- pointer-events: auto;
- background-color: $dark-color;
- color: $light-color;
- text-transform: uppercase;
- letter-spacing: 2px;
- font-size: 75%;
- transition: transform 0.2s;
- text-align: center;
- display: flex;
- justify-content: center;
- align-items: center;
+.templating-button-wrapper {
+ position: relative;
+}
+
+#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;
+
+ 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 b97a47a3c..51c085038 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -14,11 +14,27 @@ import './DocumentDecorations.scss';
import { MainOverlayTextBox } from "./MainOverlayTextBox";
import { DocumentView } from "./nodes/DocumentView";
import { LinkMenu } from "./nodes/LinkMenu";
+import { TemplateEditButton } from "./TemplateEditButton";
import React = require("react");
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<{}, { value: string }> {
static Instance: DocumentDecorations;
@@ -359,6 +375,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
// buttonOnPointerUp = (e: React.PointerEvent): void => {
// e.stopPropagation();
// }
+
render() {
var bounds = this.Bounds;
if (bounds.x === Number.MAX_VALUE) {
@@ -419,6 +436,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]} />
</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
new file mode 100644
index 000000000..a6ba2243d
--- /dev/null
+++ b/src/client/views/Templates.tsx
@@ -0,0 +1,62 @@
+import { observer } from "mobx-react";
+import { observable } from "mobx";
+import { action, computed } from "mobx";
+import React = require("react");
+import { StringLiteral } from "babel-types";
+
+export class Template {
+ constructor(name: string, layout: string) {
+ this._name = name;
+ this._layout = layout;
+ }
+
+ private _name: string;
+ private _layout: string;
+
+ get Name(): string {
+ return this._name;
+ }
+
+ get Layout(): string {
+ return this._layout;
+ }
+
+}
+
+export namespace Templates {
+ export const OuterCaption = new Template("Outer caption",
+ `
+ <div>
+ <div style="margin:auto; height:calc(100%); width:100%;">
+ {layout}
+ </div>
+ <div style="height:(100% + 25px); width:100%; position:absolute">
+ <FormattedTextBox doc={Document} DocumentViewForField={DocumentView} bindings={bindings} fieldKey={"CaptionKey"} isSelected={isSelected} select={select} selectOnLoad={SelectOnLoad} isTopMost={isTopMost}/>
+ </div>
+ </div>
+ `);
+ export const InnerCaption = new Template("Inner caption",
+ `
+ <div>
+ <div style="margin:auto; height:calc(100% - 25px); width:100%;">
+ {layout}
+ </div>
+ <div style="height:25px; width:100%; position:absolute">
+ <FormattedTextBox doc={Document} DocumentViewForField={DocumentView} bindings={bindings} fieldKey={"CaptionKey"} isSelected={isSelected} select={select} selectOnLoad={SelectOnLoad} isTopMost={isTopMost}/>
+ </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 bcd746024..3c61810e2 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1,4 +1,8 @@
+<<<<<<< HEAD
+import { action, computed, IReactionDisposer, reaction, runInAction, observable } from "mobx";
+=======
import { action, computed, runInAction } from "mobx";
+>>>>>>> 6c0b421db6aa3204bbc6e42139d240f503000b5d
import { observer } from "mobx-react";
import { BooleanField } from "../../../fields/BooleanField";
import { Document } from "../../../fields/Document";
@@ -21,6 +25,7 @@ import { CollectionVideoView } from "../collections/CollectionVideoView";
import { CollectionView } from "../collections/CollectionView";
import { ContextMenu } from "../ContextMenu";
import { DocumentContentsView } from "./DocumentContentsView";
+import { Template } from "./../Templates"
import "./DocumentView.scss";
import React = require("react");
@@ -91,6 +96,9 @@ export class DocumentView extends React.Component<DocumentViewProps> {
}
private _downX: number = 0;
private _downY: number = 0;
+ @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.parentActive(); }
@computed get topMost(): boolean { return this.props.isTopMost; }
@computed get layout(): string { return this.props.Document.GetText(KeyStore.Layout, "<p>Error loading layout data</p>"); }
@@ -299,6 +307,42 @@ export class DocumentView extends React.Component<DocumentViewProps> {
}
}
+ updateLayout = (): void => {
+ let base = this._useBase ? this._baseLayout : "<div style='margin: auto; width: 100%; height: 100%; border: 1px solid black'></div>";
+ // this.props.Document.SetText(KeyStore.Layout, base);
+ this._templates.forEach(temp => {
+ let text = temp.Layout;
+ base = text.replace("{layout}", base);
+ // let oldLayout = this.props.Document.GetText(KeyStore.Layout, "");
+ // let layout = text.replace("{layout}", oldLayout);
+ // this.props.Document.SetText(KeyStore.Layout, layout);
+ });
+ this.props.Document.SetText(KeyStore.Layout, base);
+ }
+
+ @action
+ toggleBase = (useBase: boolean) => {
+ this._useBase = useBase;
+ this.updateLayout();
+ }
+
+ @action
+ addTemplate = (template: Template) => {
+ this._templates.add(template);
+ this.updateLayout();
+ }
+
+ @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();
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-10 00:44:13 +0000