marquee create slide

1 files changed, 31 insertions, 18 deletions

diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 48223a5f0..5a7604ca4 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -94,6 +94,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     @observable _expandBoolean: boolean = false;
 
     private _disposers: { [name: string]: IReactionDisposer } = {};
+
+    @observable static startMarquee: boolean = false; // onclick "+ new slide" in presentation mode, set as true, then when marquee selection finish, onPointerUp automatically triggers PinWithView
     @observable private transitionTools: boolean = false;
     @observable private newDocumentTools: boolean = false;
     @observable private progressivizeTools: boolean = false;
@@ -2422,6 +2424,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         else this.pauseAutoPres();
     }
 
+    @action
+    startMarqueeCreateSlide = () => {
+        PresBox.startMarquee = true;
+    }
+
     render() {
         // calling this method for keyEvents
         this.isPres;
@@ -2455,24 +2462,30 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                 {this.toolbar}
                 {this.newDocumentToolbarDropdown}
                 <div className="presBox-listCont">
-                    {mode !== CollectionViewType.Invalid ?
-                        <CollectionView {...this.props}
-                            ContainingCollectionDoc={this.props.Document}
-                            PanelWidth={this.props.PanelWidth}
-                            PanelHeight={this.panelHeight}
-                            childIgnoreNativeSize={true}
-                            moveDocument={returnFalse}
-                            childFitWidth={returnTrue}
-                            childOpacity={returnOne}
-                            childLayoutTemplate={this.childLayoutTemplate}
-                            filterAddDocument={this.addDocumentFilter}
-                            removeDocument={returnFalse}
-                            dontRegisterView={true}
-                            focus={this.selectElement}
-                            ScreenToLocalTransform={this.getTransform}
-                        />
-                        : (null)
-                    }
+                    <div className="Slide" style={{ height: `calc(100% - 100px)` }}>
+                        {mode !== CollectionViewType.Invalid ?
+                            <CollectionView {...this.props}
+                                ContainingCollectionDoc={this.props.Document}
+                                PanelWidth={this.props.PanelWidth}
+                                PanelHeight={this.panelHeight}
+                                childIgnoreNativeSize={true}
+                                moveDocument={returnFalse}
+                                childFitWidth={returnTrue}
+                                childOpacity={returnOne}
+                                childLayoutTemplate={this.childLayoutTemplate}
+                                filterAddDocument={this.addDocumentFilter}
+                                removeDocument={returnFalse}
+                                dontRegisterView={true}
+                                focus={this.selectElement}
+                                ScreenToLocalTransform={this.getTransform}
+                            /> : (null)
+                        }
+                    </div>
+
+                    { // if the document type is a presentation, then the collection stacking view has a "+ new slide" button at the bottom of the stack
+                        <div className="add button" style={{ width: 200, height: 100 }}>
+                            <button onClick={this.startMarqueeCreateSlide}> + NEW SLIDE</button>
+                        </div>}
                 </div>
             </div>;
     }