diff options
| -rw-r--r-- | src/client/views/collections/CollectionCarousel3DView.scss | 9 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionCarousel3DView.tsx | 38 |
2 files changed, 17 insertions, 30 deletions
diff --git a/src/client/views/collections/CollectionCarousel3DView.scss b/src/client/views/collections/CollectionCarousel3DView.scss index 47ee8ef53..601071917 100644 --- a/src/client/views/collections/CollectionCarousel3DView.scss +++ b/src/client/views/collections/CollectionCarousel3DView.scss @@ -7,16 +7,13 @@ .carousel-wrapper { display: flex; position: absolute; - top: 10px; + top: 15%; align-items: center; - transition: transform 0.75s cubic-bezier(0.455, 0.03, 0.515, 0.955); + transition: transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); .collectionCarouselView-item { flex: 1; - transition: opacity 0.5s linear; - transition: transform 0.5s linear; - transition: height 0.5s linear; - transition: width 0.5s linear; + transition: opacity 0.5s linear, transform 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); } } diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx index aefac3512..b47ce0836 100644 --- a/src/client/views/collections/CollectionCarousel3DView.tsx +++ b/src/client/views/collections/CollectionCarousel3DView.tsx @@ -11,9 +11,10 @@ import { CollectionSubView } from './CollectionSubView'; import { Doc } from '../../../fields/Doc'; import { ContextMenu } from '../ContextMenu'; import { ObjectField } from '../../../fields/ObjectField'; -import { returnFalse } from '../../../Utils'; +import { returnFalse, Utils } from '../../../Utils'; import { ScriptField } from '../../../fields/ScriptField'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Id } from '../../../fields/FieldSymbols'; type Carousel3DDocument = makeInterface<[typeof documentSchema, typeof collectionSchema]>; const Carousel3DDocument = makeInterface(documentSchema, collectionSchema); @@ -31,15 +32,11 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume } } - mainPanelWidth = () => this.props.PanelWidth() * 0.5; - mainPanelHeight = () => this.props.PanelHeight() * 0.9; - sidePanelWidth = () => this.props.PanelWidth() * 0.25; - sidePanelHeight = () => this.props.PanelHeight() * 0.5; - + panelWidth = () => this.props.PanelWidth() / 3; + panelHeight = () => this.props.PanelHeight() * 0.6; @computed get content() { const currentIndex = NumCast(this.layoutDoc._itemIndex); - const displayDoc = (childPair: { layout: Doc, data: Doc }, width: () => number, height: () => number) => { const showCaptionScript = ScriptField.MakeScript( "child._showCaption = 'caption'", @@ -70,20 +67,14 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume }; return ( - this.childLayoutPairs.map((child, index) => { - if (index === currentIndex) { - return ( - <div key={index} className={`collectionCarouselView-item ${index}`} - style={{ opacity: '1' }}> - {displayDoc(child, this.mainPanelWidth, this.mainPanelHeight)} - </div>); - } else { - return ( - <div key={index} className={`collectionCarouselView-item ${index}`} - style={{ opacity: '0.5', userSelect: 'none' }}> - {displayDoc(child, this.sidePanelWidth, this.sidePanelHeight)} - </div>); - } + this.childLayoutPairs.map((childPair, index) => { + return ( + <div key={childPair.layout[Id]} className={`collectionCarouselView-item ${index}`} + style={index === currentIndex ? + { opacity: '1', transform: 'scale(1.3)' } : + { opacity: '0.5', transform: 'scale(0.6)', userSelect: 'none' }}> + {displayDoc(childPair, this.panelWidth, this.panelHeight)} + </div>); })); } @@ -143,18 +134,17 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume @computed get dots() { return (this.childLayoutPairs.map((_child, index) => { - return <div key={index} className={`dot${index === NumCast(this.layoutDoc._itemIndex) ? "-active" : ""}`} + return <div key={Utils.GenerateGuid()} className={`dot${index === NumCast(this.layoutDoc._itemIndex) ? "-active" : ""}`} onClick={() => this.layoutDoc._itemIndex = index} />; })); } render() { const index = NumCast(this.layoutDoc._itemIndex); - const offset = (index - 1) * (this.mainPanelWidth() - this.sidePanelWidth()) / this.childLayoutPairs.length; const translateX = (1 - index) / this.childLayoutPairs.length * 100; return <div className="collectionCarouselView-outer" onClick={this.onClick} onPointerDown={this.onPointerDown} ref={this.createDashEventsTarget} onContextMenu={this.onContextMenu}> - <div className="carousel-wrapper" style={{ transform: `translateX(calc(${translateX}% + ${offset}px)` }}> + <div className="carousel-wrapper" style={{ transform: `translateX(calc(${translateX}%` }}> {this.content} </div> {this.props.Document._chromeStatus !== "replaced" ? this.buttons : (null)} |