aboutsummaryrefslogtreecommitdiff
path: root/src/client
diff options
context:
space:
mode:
Diffstat (limited to 'src/client')
-rw-r--r--src/client/documents/Documents.ts8
-rw-r--r--src/client/views/DocumentDecorations.tsx20
-rw-r--r--src/client/views/TemplateMenu.tsx13
-rw-r--r--src/client/views/Templates.tsx55
-rw-r--r--src/client/views/nodes/DocumentView.tsx37
5 files changed, 50 insertions, 83 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 8db1a1c6d..eba53273f 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -32,6 +32,8 @@ import { action } from "mobx";
import { ColumnAttributeModel } from "../northstar/core/attribute/AttributeModel";
import { AttributeTransformationModel } from "../northstar/core/attribute/AttributeTransformationModel";
import { AggregateFunction } from "../northstar/model/idea/idea";
+import { Template } from "../views/Templates";
+import { TemplateField } from "../../fields/TemplateField";
export interface DocumentOptions {
x?: number;
@@ -46,7 +48,9 @@ export interface DocumentOptions {
pany?: number;
page?: number;
scale?: number;
+ baseLayout?: string;
layout?: string;
+ template?: Template;
layoutKeys?: Key[];
viewType?: number;
backgroundColor?: string;
@@ -95,7 +99,9 @@ export namespace Documents {
if (options.viewType !== undefined) { doc.SetNumber(KeyStore.ViewType, options.viewType); }
if (options.backgroundColor !== undefined) { doc.SetText(KeyStore.BackgroundColor, options.backgroundColor); }
if (options.ink !== undefined) { doc.Set(KeyStore.Ink, new InkField(options.ink)); }
+ if (options.baseLayout !== undefined) { doc.SetText(KeyStore.BaseLayout, options.baseLayout); }
if (options.layout !== undefined) { doc.SetText(KeyStore.Layout, options.layout); }
+ if (options.template !== undefined) { doc.Set(KeyStore.Template, new TemplateField(options.template)); }
if (options.layoutKeys !== undefined) { doc.Set(KeyStore.LayoutKeys, new ListField(options.layoutKeys)); }
if (options.copyDraggedItems !== undefined) { doc.SetBoolean(KeyStore.CopyDraggedItems, options.copyDraggedItems); }
return doc;
@@ -112,7 +118,7 @@ export namespace Documents {
}
function setupPrototypeOptions(protoId: string, title: string, layout: string, options: DocumentOptions): Document {
- return assignOptions(new Document(protoId), { ...options, title: title, layout: layout });
+ return assignOptions(new Document(protoId), { ...options, title: title, layout: layout , baseLayout: layout});
}
function SetInstanceOptions<T, U extends Field & { Data: T }>(doc: Document, options: DocumentOptions, value: [T, { new(): U }] | Document, id?: string) {
var deleg = doc.MakeDelegate(id);
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 3dcdc596d..2a40d7347 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -17,25 +17,11 @@ import { LinkMenu } from "./nodes/LinkMenu";
import { TemplateMenu } from "./TemplateMenu";
import React = require("react");
import { Template, Templates } from "./Templates";
+import { TemplateField } from "../../fields/TemplateField";
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;
@@ -409,8 +395,10 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
let templates: Map<Template, boolean> = new Map();
let doc = SelectionManager.SelectedDocuments()[0];
Array.from(Object.values(Templates)).map(template => {
- templates.set(template, doc.Template === template);
+ templates.set(template, doc.template.Name === template.Name);
});
+ // let docSrc = doc.props.Document.GetT(KeyStore.Prototype, TemplateField);
+ // console.log(docSrc);
return (<div className="documentDecorations">
<div className="documentDecorations-background" style={{
diff --git a/src/client/views/TemplateMenu.tsx b/src/client/views/TemplateMenu.tsx
index 0c8ae7055..1e83463c8 100644
--- a/src/client/views/TemplateMenu.tsx
+++ b/src/client/views/TemplateMenu.tsx
@@ -33,14 +33,11 @@ export interface TemplateMenuProps {
export class TemplateMenu extends React.Component<TemplateMenuProps> {
@observable private _hidden: boolean = true;
- @observable private _useBase: boolean = true;
@observable private _templates: Map<Template, boolean> = this.props.templates;
@action
toggleTemplate = (event: React.ChangeEvent<HTMLInputElement>, template: Template): void => {
- this._useBase = false;
- this.props.doc.toggleBase(false);
this.props.doc.changeTemplate(template);
this._templates.forEach((checked, temp) => {
this._templates.set(temp, false);
@@ -58,15 +55,6 @@ export class TemplateMenu extends React.Component<TemplateMenuProps> {
}
@action
- toggleBase = (event: React.MouseEvent): void => {
- this._useBase = true;
- this.props.doc.toggleBase(true);
- this._templates.forEach((checked, temp) => {
- this._templates.set(temp, false);
- });
- }
-
- @action
toggleTemplateActivity = (): void => {
this._hidden = !this._hidden;
}
@@ -81,7 +69,6 @@ export class TemplateMenu extends React.Component<TemplateMenuProps> {
<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" onClick={(event) => this.toggleBase(event)} checked={this._useBase} />Base layout</li>
{templateMenu}
</ul>
</div>
diff --git a/src/client/views/Templates.tsx b/src/client/views/Templates.tsx
index c22b22286..3afdc711c 100644
--- a/src/client/views/Templates.tsx
+++ b/src/client/views/Templates.tsx
@@ -24,39 +24,34 @@ export class Template {
}
export namespace Templates {
+ export const BasicLayout = new Template("Basic layout", "{layout}");
+
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>
- `);
+ `<div><div style="margin:auto; height:calc(100%); width:100%;">{layout}</div><div style="height:(100% + 50px); 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>
- `);
+ `<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={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">
- {Title}
- </div>
- </div>
- `);
+ `<div>
+ <div style="margin:auto; height:calc(100% - 50px); width:100%;">
+ {layout}
+ </div>
+ <div style="height:50px; width:100%; position:absolute; background-color: rgba(0, 0, 0, .6); color: white; padding:12px">
+ {Title}
+ </div>
+ </div>`
+ );
+
+
}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 12332348b..440269e36 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -21,9 +21,10 @@ import { CollectionVideoView } from "../collections/CollectionVideoView";
import { CollectionView } from "../collections/CollectionView";
import { ContextMenu } from "../ContextMenu";
import { DocumentContentsView } from "./DocumentContentsView";
-import { Template } from "./../Templates";
+import { Template, Templates } from "./../Templates";
import "./DocumentView.scss";
import React = require("react");
+import { TemplateField } from "../../../fields/TemplateField";
export interface DocumentViewProps {
@@ -92,13 +93,19 @@ export class DocumentView extends React.Component<DocumentViewProps> {
}
private _downX: number = 0;
private _downY: number = 0;
- private _base: string = this.props.Document.GetText(KeyStore.Layout, "<p>Error loading layout data</p>");
- @observable private _template: Template = new Template("", "");
+ @computed get base(): string { return this.props.Document.GetText(KeyStore.BaseLayout, "<p>Error loading base 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>"); }
@computed get layoutKeys(): Key[] { return this.props.Document.GetData(KeyStore.LayoutKeys, ListField, new Array<Key>()); }
@computed get layoutFields(): Key[] { return this.props.Document.GetData(KeyStore.LayoutFields, ListField, new Array<Key>()); }
+ @computed get template(): Template {
+ let field = this.props.Document.GetT(KeyStore.Template, TemplateField);
+ return !field || field === FieldWaiting ? Templates.BasicLayout : field.Data;
+ }
+ set template(template: Template) {
+ this.props.Document.SetData(KeyStore.Template, template, TemplateField);
+ }
screenRect = (): ClientRect | DOMRect => this._mainCont.current ? this._mainCont.current.getBoundingClientRect() : new DOMRect();
onPointerDown = (e: React.PointerEvent): void => {
this._downX = e.clientX;
@@ -303,33 +310,17 @@ export class DocumentView extends React.Component<DocumentViewProps> {
}
updateLayout = (): void => {
- if (this._template.Name === "") {
- this.props.Document.SetText(KeyStore.Layout, this._base);
- } else {
- let temp = this._template.Layout;
- let layout = temp.replace("{layout}", this._base);
- this.props.Document.SetText(KeyStore.Layout, layout);
- }
- }
-
- @action
- toggleBase = (useBase: boolean) => {
- if (useBase) {
- this._template = new Template("", "");
- }
- this.updateLayout();
+ let temp = this.template.Layout;
+ let layout = temp.replace("{layout}", this.base);
+ this.props.Document.SetText(KeyStore.Layout, layout);
}
@action
changeTemplate = (template: Template) => {
- this._template = template;
+ this.template = template;
this.updateLayout();
}
- get Template() {
- return this._template;
- }
-
@action
onContextMenu = (e: React.MouseEvent): void => {
e.stopPropagation();
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-02-25 20:54:26 +0000