rough 3D layout, add prev/next images

2 files changed, 46 insertions, 20 deletions

diff --git a/src/client/views/collections/CollectionCarousel3DView.scss b/src/client/views/collections/CollectionCarousel3DView.scss
index 2142eca39..ee92cde4c 100644
--- a/src/client/views/collections/CollectionCarousel3DView.scss
+++ b/src/client/views/collections/CollectionCarousel3DView.scss
@@ -2,27 +2,21 @@
     background: white;
     height: 100%;
 
-    .collectionCarouselView-center-container {
+    .collectionCarouselView-image {
+        overflow: hidden; //fix ContentFittingView size
+        position: absolute;
+        height: 100%;
         width: 70%;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
         margin: auto;
-        overflow: hidden; //fix ContentFittingView position!!
-
-        .collectionCarouselView-caption {
-            height: 50;
-            display: inline-block;
-            width: 100%;
-            margin: auto;
-        }
-
-        .collectionCarouselView-image {
-            height: calc(100% - 50px);
-            width: 70%;
-            display: inline-block;
-            user-select: none;
-        }
+        user-select: none;
     }
 
     .collectionCarouselView-prev {
+        overflow: hidden;
         position: absolute;
         height: 50%;
         width: 50%;
@@ -32,6 +26,7 @@
     }
 
     .collectionCarouselView-next {
+        overflow: hidden;
         position: absolute;
         height: 50%;
         width: 50%;
diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx
index 8839658d6..4452ceb6b 100644
--- a/src/client/views/collections/CollectionCarousel3DView.tsx
+++ b/src/client/views/collections/CollectionCarousel3DView.tsx
@@ -34,17 +34,48 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume
         e.stopPropagation();
         this.layoutDoc._itemIndex = (NumCast(this.layoutDoc._itemIndex) + 1) % this.childLayoutPairs.length;
     }
+
     goback = (e: React.MouseEvent) => {
         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);
+        const prevIndex = (index - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length;
+        const nextIndex = (index + 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length;
         return !(this.childLayoutPairs?.[index]?.layout instanceof Doc) ? (null) :
             <>
-                <div className="collectionCarouselView-prev" />
-                <div className="collectionCarouselView-next" />
+                <div className="collectionCarouselView-prev">
+                    <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[prevIndex].layout}
+                        DataDoc={this.childLayoutPairs[prevIndex].data}
+                        PanelHeight={this.props.PanelHeight}
+                        ScreenToLocalTransform={this.props.ScreenToLocalTransform}
+                        bringToFront={returnFalse}
+                        parentActive={this.props.active}
+                    />
+                </div>
+                <div className="collectionCarouselView-next">
+                    <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[nextIndex].layout}
+                        DataDoc={this.childLayoutPairs[nextIndex].data}
+                        PanelHeight={this.props.PanelHeight}
+                        ScreenToLocalTransform={this.props.ScreenToLocalTransform}
+                        bringToFront={returnFalse}
+                        parentActive={this.props.active}
+                    />
+                </div>
                 <div className="collectionCarouselView-image" key="image">
                     <ContentFittingDocumentView {...this.props}
                         onDoubleClick={ScriptCast(this.layoutDoc.onChildDoubleClick)}
@@ -54,7 +85,7 @@ export class CollectionCarousel3DView extends CollectionSubView(Carousel3DDocume
                         LayoutTemplateString={this.props.ChildLayoutString}
                         Document={this.childLayoutPairs[index].layout}
                         DataDoc={this.childLayoutPairs[index].data}
-                        PanelHeight={this.panelHeight}
+                        PanelHeight={this.props.PanelHeight}
                         ScreenToLocalTransform={this.props.ScreenToLocalTransform}
                         bringToFront={returnFalse}
                         parentActive={this.props.active}