diff options
| -rw-r--r-- | src/client/documents/Documents.ts | 4 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionCarousel3DView.tsx | 60 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionView.tsx | 4 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionViewChromes.tsx | 1 |
4 files changed, 35 insertions, 34 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 18a0b43ff..47e13c8e2 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -670,6 +670,10 @@ export namespace Docs { return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { _chromeStatus: "collapsed", schemaColumns: new List([new SchemaHeaderField("title", "#f1efeb")]), ...options, _viewType: CollectionViewType.Carousel }); } + export function Carousel3DDocument(documents: Array<Doc>, options: DocumentOptions) { + return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { _chromeStatus: "collapsed", schemaColumns: new List([new SchemaHeaderField("title", "#f1efeb")]), ...options, _viewType: CollectionViewType.Carousel3D }); + } + export function SchemaDocument(schemaColumns: SchemaHeaderField[], documents: Array<Doc>, options: DocumentOptions) { return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { _chromeStatus: "collapsed", schemaColumns: new List(schemaColumns), ...options, _viewType: CollectionViewType.Schema }); } diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index 4de35a978..8839658d6 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -2,21 +2,20 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { observable, computed } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { documentSchema } from '../../../new_fields/documentSchemas'; -import { makeInterface } from '../../../new_fields/Schema'; -import { NumCast, StrCast } from '../../../new_fields/Types'; +import { documentSchema, collectionSchema } from '../../../fields/documentSchemas'; +import { makeInterface } from '../../../fields/Schema'; +import { NumCast, StrCast, ScriptCast, Cast } from '../../../fields/Types'; import { DragManager } from '../../util/DragManager'; import { ContentFittingDocumentView } from '../nodes/ContentFittingDocumentView'; import "./CollectionCarousel3DView.scss"; import { CollectionSubView } from './CollectionSubView'; -import { faCaretLeft, faCaretRight } from '@fortawesome/free-solid-svg-icons'; -import { Doc } from '../../../new_fields/Doc'; -import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox'; +import { Doc } from '../../../fields/Doc'; import { ContextMenu } from '../ContextMenu'; -import { ObjectField } from '../../../new_fields/ObjectField'; +import { ObjectField } from '../../../fields/ObjectField'; +import { returnFalse } from '../../../Utils'; -type Carousel3DDocument = makeInterface<[typeof documentSchema,]>; -const Carousel3DDocument = makeInterface(documentSchema); +type Carousel3DDocument = makeInterface<[typeof documentSchema, typeof collectionSchema]>; +const Carousel3DDocument = makeInterface(documentSchema, collectionSchema); @observer export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocument) { @@ -39,44 +38,37 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume e.stopPropagation(); this.layoutDoc._itemIndex = (NumCast(this.layoutDoc._itemIndex) - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length; } - panelHeight = () => this.props.PanelHeight() - 50; @computed get content() { const index = NumCast(this.layoutDoc._itemIndex); return !(this.childLayoutPairs?.[index]?.layout instanceof Doc) ? (null) : <> - <div className="collectionCarouselView-prev"></div> - <div className="collectionCarouselView-next"></div> - <div className="collectionCarouselView-center-container"> - <div className="collectionCarouselView-image" key="image"> - <ContentFittingDocumentView {...this.props} - renderDepth={this.props.renderDepth + 1} - Document={this.childLayoutPairs[index].layout} - DataDocument={this.childLayoutPairs[index].data} - PanelHeight={this.panelHeight} - getTransform={this.props.ScreenToLocalTransform} /> - </div> - <div className="collectionCarouselView-caption" key="caption" - style={{ - background: StrCast(this.layoutDoc._captionBackgroundColor, this.props.backgroundColor?.(this.props.Document)), - color: StrCast(this.layoutDoc._captionColor, StrCast(this.layoutDoc.color)), - borderRadius: StrCast(this.layoutDoc._captionBorderRounding), - }}> - <FormattedTextBox key={index} {...this.props} - xMargin={NumCast(this.layoutDoc["caption-xMargin"])} - yMargin={NumCast(this.layoutDoc["caption-yMargin"])} - Document={this.childLayoutPairs[index].layout} DataDoc={undefined} fieldKey={"caption"}></FormattedTextBox> - </div> + <div className="collectionCarouselView-prev" /> + <div className="collectionCarouselView-next" /> + <div className="collectionCarouselView-image" key="image"> + <ContentFittingDocumentView {...this.props} + onDoubleClick={ScriptCast(this.layoutDoc.onChildDoubleClick)} + onClick={ScriptCast(this.layoutDoc.onChildClick)} + renderDepth={this.props.renderDepth + 1} + LayoutTemplate={this.props.ChildLayoutTemplate} + LayoutTemplateString={this.props.ChildLayoutString} + Document={this.childLayoutPairs[index].layout} + DataDoc={this.childLayoutPairs[index].data} + PanelHeight={this.panelHeight} + ScreenToLocalTransform={this.props.ScreenToLocalTransform} + bringToFront={returnFalse} + parentActive={this.props.active} + /> </div> </>; } @computed get buttons() { return <> <div key="back" className="carouselView-back" style={{ background: `${StrCast(this.props.Document.backgroundColor)}` }} onClick={this.goback}> - <FontAwesomeIcon icon={faCaretLeft} size={"2x"} /> + <FontAwesomeIcon icon={"caret-left"} size={"2x"} /> </div> <div key="fwd" className="carouselView-fwd" style={{ background: `${StrCast(this.props.Document.backgroundColor)}` }} onClick={this.advance}> - <FontAwesomeIcon icon={faCaretRight} size={"2x"} /> + <FontAwesomeIcon icon={"caret-right"} size={"2x"} /> </div> </>; } diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 3b2e5e4fc..8d6866632 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -21,6 +21,7 @@ import { FieldView, FieldViewProps } from '../nodes/FieldView'; import { ScriptBox } from '../ScriptBox'; import { Touchable } from '../Touchable'; import { CollectionCarouselView } from './CollectionCarouselView'; +import { CollectionCarousel3DView } from './CollectionCarousel3DView'; import { CollectionDockingView } from "./CollectionDockingView"; import { AddCustomFreeFormLayout } from './collectionFreeForm/CollectionFreeFormLayoutEngines'; import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView'; @@ -63,6 +64,7 @@ export enum CollectionViewType { Multirow = "multirow", Time = "time", Carousel = "carousel", + Carousel3D = "3D carousel", Linear = "linear", Staff = "staff", Map = "map", @@ -183,6 +185,7 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus case CollectionViewType.Linear: { return (<CollectionLinearView key="collview" {...props} />); } case CollectionViewType.Pile: { return (<CollectionPileView key="collview" {...props} />); } case CollectionViewType.Carousel: { return (<CollectionCarouselView key="collview" {...props} />); } + case CollectionViewType.Carousel3D: { return (<CollectionCarousel3DView key="collview" {...props} />); } case CollectionViewType.Stacking: { this.props.Document.singleColumn = true; return (<CollectionStackingView key="collview" {...props} />); } case CollectionViewType.Masonry: { this.props.Document.singleColumn = false; return (<CollectionStackingView key="collview" {...props} />); } case CollectionViewType.Time: { return (<CollectionTimeView key="collview" {...props} />); } @@ -222,6 +225,7 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus subItems.push({ description: "Multirow", event: () => func(CollectionViewType.Multirow), icon: "columns" }); subItems.push({ description: "Masonry", event: () => func(CollectionViewType.Masonry), icon: "columns" }); subItems.push({ description: "Carousel", event: () => func(CollectionViewType.Carousel), icon: "columns" }); + subItems.push({ description: "3D Carousel", event: () => func(CollectionViewType.Carousel3D), icon: "columns" }); subItems.push({ description: "Pivot/Time", event: () => func(CollectionViewType.Time), icon: "columns" }); subItems.push({ description: "Map", event: () => func(CollectionViewType.Map), icon: "globe-americas" }); if (addExtras && this.props.Document._viewType === CollectionViewType.Freeform) { diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 5dc0b09ac..53860d8ad 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -75,6 +75,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro case CollectionViewType.Freeform: return this._freeform_commands; case CollectionViewType.Time: return this._freeform_commands; case CollectionViewType.Carousel: return this._freeform_commands; + case CollectionViewType.Carousel3D: return this._freeform_commands; } return []; } |