From 03dafe7743dc3e70f9e936aec8bf2e49efbfb041 Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 17 Jan 2020 17:09:29 -0500 Subject: changed view types around to be stored on extension doc. added stuff to stackingview to create views of fields using ';" --- src/client/util/DropConverter.ts | 5 +++-- src/client/views/TemplateMenu.tsx | 4 ++++ .../collections/CollectionStackingViewFieldColumn.tsx | 19 +++++++++++++++++++ src/client/views/collections/CollectionView.tsx | 19 +++++++++++++++---- src/client/views/nodes/DocumentView.tsx | 17 ++++++++++++++++- 5 files changed, 57 insertions(+), 7 deletions(-) (limited to 'src') 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 { toggleCustom = (e: React.ChangeEvent): void => { this.props.docs.map(dv => dv.setCustomView(e.target.checked)); } + toggleNarrative = (e: React.ChangeEvent): void => { + this.props.docs.map(dv => dv.setNarrativeView(e.target.checked)); + } toggleFloat = (e: React.ChangeEvent): void => { SelectionManager.DeselectAll(); @@ -146,6 +149,7 @@ export class TemplateMenu extends React.Component { templateMenu.push()); templateMenu.push(); templateMenu.push(); + templateMenu.push(); templateMenu.push(); return ( { + 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 { @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, @@ -551,6 +552,20 @@ export class DocumentView extends DocComponent(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([])); + this.props.Document.viewType = CollectionViewType.Stacking; + this.props.Document.layoutKey = "layout_narrative"; + } else { + DocumentView.makeNativeViewClicked(this.props.Document) + } + } + @undoBatch @action setCustomView = (custom: boolean): void => { @@ -744,7 +759,7 @@ export class DocumentView extends DocComponent(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(); -- cgit v1.2.3-70-g09d2