diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/client/util/DropConverter.ts | 5 | ||||
-rw-r--r-- | src/client/views/TemplateMenu.tsx | 4 | ||||
-rw-r--r-- | src/client/views/collections/CollectionStackingViewFieldColumn.tsx | 19 | ||||
-rw-r--r-- | src/client/views/collections/CollectionView.tsx | 19 | ||||
-rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 17 |
5 files changed, 57 insertions, 7 deletions
diff --git a/src/client/util/DropConverter.ts b/src/client/util/DropConverter.ts index da0ad7efe..dc66bceee 100644 --- a/src/client/util/DropConverter.ts +++ b/src/client/util/DropConverter.ts @@ -27,7 +27,8 @@ function makeTemplate(doc: Doc): boolean { export function convertDropDataToButtons(data: DragManager.DocumentDragData) { data && data.draggedDocuments.map((doc, i) => { let dbox = doc; - if (!doc.onDragStart && !doc.onClick && doc.viewType !== CollectionViewType.Linear) { + // bcz: isButtonBar is intended to allow a collection of linear buttons to be dropped and nested into another collection of buttons... it's not being used yet, and isn't very elegant + if (!doc.onDragStart && !doc.onClick && !doc.isButtonBar) { const layoutDoc = doc.layout instanceof Doc && doc.layout.isTemplateField ? doc.layout : doc; if (layoutDoc.type === DocumentType.COL) { layoutDoc.isTemplateDoc = makeTemplate(layoutDoc); @@ -38,7 +39,7 @@ export function convertDropDataToButtons(data: DragManager.DocumentDragData) { dbox.dragFactory = layoutDoc; dbox.removeDropProperties = doc.removeDropProperties instanceof ObjectField ? ObjectField.MakeCopy(doc.removeDropProperties) : undefined; dbox.onDragStart = ScriptField.MakeFunction('getCopy(this.dragFactory, true)'); - } else if (doc.viewType === CollectionViewType.Linear) { + } else if (doc.isButtonBar) { dbox.ignoreClick = true; } data.droppedDocuments[i] = dbox; diff --git a/src/client/views/TemplateMenu.tsx b/src/client/views/TemplateMenu.tsx index 8f2ec4bef..d953d3bab 100644 --- a/src/client/views/TemplateMenu.tsx +++ b/src/client/views/TemplateMenu.tsx @@ -58,6 +58,9 @@ export class TemplateMenu extends React.Component<TemplateMenuProps> { toggleCustom = (e: React.ChangeEvent<HTMLInputElement>): void => { this.props.docs.map(dv => dv.setCustomView(e.target.checked)); } + toggleNarrative = (e: React.ChangeEvent<HTMLInputElement>): void => { + this.props.docs.map(dv => dv.setNarrativeView(e.target.checked)); + } toggleFloat = (e: React.ChangeEvent<HTMLInputElement>): void => { SelectionManager.DeselectAll(); @@ -146,6 +149,7 @@ export class TemplateMenu extends React.Component<TemplateMenuProps> { templateMenu.push(<TemplateToggle key={template.Name} template={template} checked={checked} toggle={this.toggleTemplate} />)); 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={StrCast(this.props.docs[0].Document.layoutKey, "layout") !== "layout"} toggle={this.toggleCustom} />); + templateMenu.push(<OtherToggle key={"narrative"} name={"Narrative"} checked={StrCast(this.props.docs[0].Document.layoutKey, "layout") === "layout_narrative"} toggle={this.toggleNarrative} />); templateMenu.push(<OtherToggle key={"chrome"} name={"Chrome"} checked={layout.chromeStatus !== "disabled"} toggle={this.toggleChrome} />); return ( <Flyout anchorPoint={anchorPoints.LEFT_TOP} diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx index 39b4e4e1d..9cdb9b281 100644 --- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx +++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx @@ -18,6 +18,9 @@ import { EditableView } from "../EditableView"; import { CollectionStackingView } from "./CollectionStackingView"; import "./CollectionStackingView.scss"; import { TraceMobx } from "../../../new_fields/util"; +import { FormattedTextBox } from "../nodes/FormattedTextBox"; +import { ImageField } from "../../../new_fields/URLField"; +import { ImageBox } from "../nodes/ImageBox"; library.add(faPalette); @@ -132,6 +135,22 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC @action addDocument = (value: string, shiftDown?: boolean) => { + if (value === ":freeForm") { + return this.props.parent.props.addDocument(Docs.Create.FreeformDocument([], { width: 200, height: 200 })); + } else if (value.startsWith(":")) { + const field = value.substring(1); + if (this.props.parent.props.Document[field] instanceof ImageField) { + let doc = Docs.Create.ImageDocument((this.props.parent.props.Document[field] as ImageField).url.href, {}); + doc.layout = ImageBox.LayoutString(field); + doc.proto = Doc.GetProto(this.props.parent.props.Document); + return this.props.parent.props.addDocument(doc); + } else { + let doc = Docs.Create.TextDocument({ width: 200, height: 25, autoHeight: true }); + doc.layout = FormattedTextBox.LayoutString(field); + doc.proto = Doc.GetProto(this.props.parent.props.Document); + return this.props.parent.props.addDocument(doc); + } + } this._createAliasSelected = false; const key = StrCast(this.props.parent.props.Document.sectionFilter); const newDoc = Docs.Create.TextDocument({ height: 18, width: 200, documentText: "@@@" + value, title: value, autoHeight: true }); diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 4bd456233..db4da30d1 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -1,7 +1,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'; import { faEye } from '@fortawesome/free-regular-svg-icons'; import { faColumns, faCopy, faEllipsisV, faFingerprint, faImage, faProjectDiagram, faSignature, faSquare, faTh, faThList, faTree } from '@fortawesome/free-solid-svg-icons'; -import { action, IReactionDisposer, observable, reaction, runInAction } from 'mobx'; +import { action, IReactionDisposer, observable, reaction, runInAction, computed } from 'mobx'; import { observer } from "mobx-react"; import * as React from 'react'; import Lightbox from 'react-image-lightbox-with-rotate'; @@ -10,7 +10,7 @@ import { DateField } from '../../../new_fields/DateField'; import { Doc, DocListCast } from '../../../new_fields/Doc'; import { Id } from '../../../new_fields/FieldSymbols'; import { listSpec } from '../../../new_fields/Schema'; -import { BoolCast, Cast, StrCast } from '../../../new_fields/Types'; +import { BoolCast, Cast, StrCast, NumCast } from '../../../new_fields/Types'; import { ImageField } from '../../../new_fields/URLField'; import { TraceMobx } from '../../../new_fields/util'; import { CurrentUserUtils } from '../../../server/authentication/models/current_user_utils'; @@ -50,7 +50,8 @@ export enum CollectionViewType { Pivot, Linear, Staff, - Multicolumn + Multicolumn, + Timeline } export namespace CollectionViewType { @@ -90,8 +91,18 @@ export class CollectionView extends Touchable<FieldViewProps> { @observable private static _safeMode = false; public static SetSafeMode(safeMode: boolean) { this._safeMode = safeMode; } + @computed get dataDoc() { return this.props.DataDoc && this.props.Document.isTemplateField ? Doc.GetProto(this.props.DataDoc) : Doc.GetProto(this.props.Document); } + @computed get extensionDoc() { return Doc.fieldExtensionDoc(this.dataDoc, this.props.fieldKey); } + get collectionViewType(): CollectionViewType | undefined { - const viewField = Cast(this.props.Document.viewType, "number"); + if (!this.extensionDoc) return CollectionViewType.Invalid; + NumCast(this.props.Document.viewType) && setTimeout(() => { + if (this.props.Document.viewType) { + this.extensionDoc!.viewType = NumCast(this.props.Document.viewType); + } + Doc.GetProto(this.props.Document).viewType = this.props.Document.viewType = undefined; + }); + const viewField = NumCast(this.extensionDoc.viewType, Cast(this.props.Document.viewType, "number")); if (CollectionView._safeMode) { if (viewField === CollectionViewType.Freeform) { return CollectionViewType.Tree; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index dabe5a7aa..60dc253f7 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -44,6 +44,7 @@ import { InkTool } from '../../../new_fields/InkField'; import { TraceMobx } from '../../../new_fields/util'; import { List } from '../../../new_fields/List'; import { FormattedTextBoxComment } from './FormattedTextBoxComment'; +import { CollectionStackingView } from '../collections/CollectionStackingView'; library.add(fa.faEdit, fa.faTrash, fa.faShare, fa.faDownload, fa.faExpandArrowsAlt, fa.faCompressArrowsAlt, fa.faLayerGroup, fa.faExternalLinkAlt, fa.faAlignCenter, fa.faCaretSquareRight, fa.faSquare, fa.faConciergeBell, fa.faWindowRestore, fa.faFolder, fa.faMapPin, fa.faLink, fa.faFingerprint, fa.faCrosshairs, fa.faDesktop, fa.faUnlock, fa.faLock, fa.faLaptopCode, fa.faMale, @@ -553,6 +554,20 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu @undoBatch @action + setNarrativeView = (custom: boolean): void => { + if (custom) { + this.props.Document.layout_narrative = CollectionView.LayoutString("narrative"); + this.props.Document.nativeWidth = this.props.Document.nativeHeight = undefined; + !this.props.Document.narrative && (Doc.GetProto(this.props.Document).narrative = new List<Doc>([])); + this.props.Document.viewType = CollectionViewType.Stacking; + this.props.Document.layoutKey = "layout_narrative"; + } else { + DocumentView.makeNativeViewClicked(this.props.Document) + } + } + + @undoBatch + @action setCustomView = (custom: boolean): void => { if (this.props.ContainingCollectionView?.props.DataDoc || this.props.ContainingCollectionView?.props.Document.isTemplateDoc) { Doc.MakeMetadataFieldTemplate(this.props.Document, this.props.ContainingCollectionView.props.Document); @@ -744,7 +759,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu return (showTitle && !showTitleHover ? 0 : 0) + 1; } - @computed get finalLayoutKey() { return this.props.layoutKey || "layout"; } + @computed get finalLayoutKey() { return this.props.layoutKey || StrCast(this.props.Document.layoutKey, "layout"); } childScaling = () => (this.layoutDoc.fitWidth ? this.props.PanelWidth() / this.nativeWidth : this.props.ContentScaling()); @computed get contents() { TraceMobx(); |