added margins for carousel view. allow fordoc decorations to be turned off for carousel items.

1 files changed, 9 insertions, 4 deletions

diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx
index 9f59322e8..a1c59d238 100644
--- a/src/client/views/collections/CollectionCarouselView.tsx
+++ b/src/client/views/collections/CollectionCarouselView.tsx
@@ -7,7 +7,7 @@ import * as React from 'react';
 import { StopEvent, returnFalse, returnOne, returnTrue, returnZero } from '../../../ClientUtils';
 import { emptyFunction } from '../../../Utils';
 import { Doc, Opt } from '../../../fields/Doc';
-import { DocCast, NumCast, ScriptCast, StrCast } from '../../../fields/Types';
+import { BoolCast, DocCast, NumCast, ScriptCast, StrCast } from '../../../fields/Types';
 import { DocumentType } from '../../documents/DocumentTypes';
 import { Docs } from '../../documents/Documents';
 import { DragManager } from '../../util/DragManager';
@@ -167,7 +167,7 @@ export class CollectionCarouselView extends CollectionSubView() {
         const childValue = doc?.['caption_' + property] ? this._props.styleProvider?.(doc, captionProps, property) : undefined;
         return childValue ?? this._props.styleProvider?.(this.layoutDoc, captionProps, property);
     };
-    panelHeight = () => this._props.PanelHeight() - (StrCast(this.layoutDoc._layout_showCaption) ? 50 : 0);
+    contentPanelHeight = () => this._props.PanelHeight() - (StrCast(this.layoutDoc._layout_showCaption) ? 50 : 0) - 2 * NumCast(this.layoutDoc.yMargin);
     onContentDoubleClick = () => ScriptCast(this.layoutDoc.onChildDoubleClick);
     onContentClick = () => ScriptCast(this.layoutDoc.onChildClick);
     captionWidth = () => this._props.PanelWidth() - 2 * this.marginX;
@@ -197,7 +197,9 @@ export class CollectionCarouselView extends CollectionSubView() {
             // Doc.setDocFilter(this.Document, 'data_star', true, 'remove');
         }
     };
+    contentScreentToLocalXf = () => this._props.ScreenToLocalTransform().translate(-NumCast(this.layoutDoc.xMargin), -NumCast(this.layoutDoc.yMargin));
 
+    contentPanelWidth = () => this._props.PanelWidth() - 2 * NumCast(this.layoutDoc.xMargin);
     @computed get content() {
         trace();
         if (this.layoutDoc._carousel_index === this.carouselItems.length && this.layoutDoc._carousel_index !== 0) {
@@ -210,7 +212,7 @@ export class CollectionCarouselView extends CollectionSubView() {
 
         return !(curDoc?.layout instanceof Doc) ? null : (
             <>
-                <div className="collectionCarouselView-image">
+                <div className="collectionCarouselView-image" style={{ padding: `${NumCast(this.layoutDoc.yMargin)}px ${NumCast(this.layoutDoc.xMargin)}px ${NumCast(this.layoutDoc.yMargin)}px ${NumCast(this.layoutDoc.xMargin)}px` }}>
                     <DocumentView
                         {...this._props}
                         NativeWidth={returnZero}
@@ -221,6 +223,7 @@ export class CollectionCarouselView extends CollectionSubView() {
                         containerViewPath={this._props.docViewPath}
                         onDoubleClickScript={this.onContentDoubleClick}
                         onClickScript={this.onContentClick}
+                        hideDecorations={BoolCast(this.layoutDoc.layout_hideDecorations)}
                         isDocumentActive={this._props.childDocumentsActive?.() ? this._props.isDocumentActive : this._props.isContentActive}
                         isContentActive={(this._props.childContentsActive ?? this._props.isContentActive() === false) ? returnFalse : emptyFunction}
                         addDocument={this._props.addDocument}
@@ -230,7 +233,9 @@ export class CollectionCarouselView extends CollectionSubView() {
                         LayoutTemplateString={this._props.childLayoutString}
                         Document={curDoc.layout}
                         TemplateDataDocument={DocCast(curDoc.layout.resolvedDataDoc)}
-                        PanelHeight={this.panelHeight}
+                        ScreenToLocalTransform={this.contentScreentToLocalXf}
+                        PanelWidth={this.contentPanelWidth}
+                        PanelHeight={this.contentPanelHeight}
                     />
                 </div>
                 {!carouselShowsCaptions ? null : (