Merge pull request #891 from browngraphicslab/presentation_v1

Presentation v1

2 files changed, 134 insertions, 46 deletions

diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss
index f1bdb7737..00ba5f9bb 100644
--- a/src/client/views/presentationview/PresElementBox.scss
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -25,7 +25,7 @@ $slide-active: #5B9FDD;
     align-items: center;
 
     .presItem-number {
-        margin-top: 7px;
+        margin-top: 3.5px;
         font-size: 12px;
         font-weight: 700;
         text-align: center;
@@ -36,7 +36,6 @@ $slide-active: #5B9FDD;
         overflow: hidden;
     }
 
-
 }
 
 .presItem-slide {
@@ -46,17 +45,18 @@ $slide-active: #5B9FDD;
     height: calc(100% - 7px);
     width: calc(100% - 5px);
     display: grid;
-    grid-template-rows: 23px auto;
+    grid-template-rows: 16px 10px auto;
     grid-template-columns: max-content max-content max-content max-content auto;
 
     .presItem-name {
+        min-width: 20px;
         z-index: 300;
+        top: 2px;
         align-self: center;
-        font-size: 13px;
+        font-size: 11px;
         font-family: Roboto;
         font-weight: 500;
         position: relative;
-        top: 1px;
         padding-left: 10px;
         padding-right: 10px;
         letter-spacing: normal;
@@ -64,22 +64,44 @@ $slide-active: #5B9FDD;
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: pre;
+        transition: 500ms;
+    }
+
+    .presItem-docName {
+        min-width: 20px;
+        z-index: 300;
+        align-self: center;
+        font-size: 9px;
+        font-family: Roboto;
+        font-weight: 300;
+        position: relative;
+        padding-left: 10px;
+        padding-right: 10px;
+        letter-spacing: normal;
+        width: max-content;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: pre;
+        transition: 500ms;
+        grid-row: 2;
+        grid-column: 1/6;
     }
 
     .presItem-time {
         align-self: center;
         position: relative;
-        top: 2px;
         padding-right: 10px;
+        top: 1px;
         font-size: 10;
         font-weight: 300;
         font-family: Roboto;
         z-index: 300;
         letter-spacing: normal;
     }
-    
+
     .presItem-embedded {
         overflow: hidden;
+        grid-row: 3;
         grid-column: 1/8;
         position: relative;
         display: flex;
@@ -90,7 +112,7 @@ $slide-active: #5B9FDD;
         border-bottom-left-radius: 5px;
         border-bottom-right-radius: 5px;
     }
-    
+
     .presItem-embeddedMask {
         width: 100%;
         height: 100%;
@@ -106,6 +128,7 @@ $slide-active: #5B9FDD;
     .presItem-slideButtons {
         display: flex;
         grid-column: 7;
+        grid-row: 1/3;
         width: 60px;
         justify-self: right;
         justify-content: flex-end;
@@ -115,10 +138,10 @@ $slide-active: #5B9FDD;
             position: relative;
             border-radius: 100%;
             z-index: 300;
-            width: 15px;
-            height: 15px;
+            width: 18px;
+            height: 18px;
             display: flex;
-            font-size: 10px;
+            font-size: 12px;
             justify-self: center;
             align-self: center;
             background-color: rgba(0, 0, 0, 0.5);
@@ -131,17 +154,52 @@ $slide-active: #5B9FDD;
 
         .slideButton:hover {
             background-color: rgba(0, 0, 0, 1);
-            transform: scale(1.15);
+            transform: scale(1.2);
         }
     }
 }
 
+
+
 .presItem-slide.active {
     box-shadow: 0 0 0px 1.5px $dark-blue;
 }
 
-// .presItem-slide:hover {
-//     background: $slide-hover;
-// }
+.presItem-multiDrag {
+    font-family: Roboto;
+    font-weight: 600;
+    color: white;
+    text-align: center;
+    justify-content: center;
+    align-content: center;
+    width: 100px;
+    height: 30px;
+    position: absolute;
+    background-color: $dark-blue;
+    z-index: 4000;
+    border-radius: 10px;
+    box-shadow: black 0.4vw 0.4vw 0.8vw;
+    line-height: 30px;
+}
+
+.presItem-miniSlide {
+    font-weight: 700;
+    font-size: 12;
+    grid-column: 1/8;
+    align-self: center;
+    justify-self: center;
+    background-color: #d5dce2;
+    width: 26px;
+    text-align: center;
+    height: 26px;
+    line-height: 28px;
+    border-radius: 100%;
+}
 
+.presItem-miniSlide.active {
+    box-shadow: 0 0 0px 1.5px $dark-blue;
+}
 
+// .presItem-slide:hover {
+//     background: $slide-hover;
+// }
\ No newline at end of file
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index aea00f812..9e1a7b615 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -22,6 +22,7 @@ import { undoBatch } from "../../util/UndoManager";
 import { EditableView } from "../EditableView";
 import { DocUtils } from "../../documents/Documents";
 import { DateField } from "../../../fields/DateField";
+import { DocumentManager } from "../../util/DocumentManager";
 
 export const presSchema = createSchema({
     presentationTargetDoc: Doc,
@@ -142,7 +143,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
         e.stopPropagation();
         e.preventDefault();
         if (element && !(e.ctrlKey || e.metaKey)) {
-            if (PresBox.Instance._eleArray.includes(this._itemRef.current!)) {
+            if (PresBox.Instance._selectedArray.includes(this.rootDoc)) {
                 setupMoveUpEvents(this, e, this.startDrag, emptyFunction, emptyFunction);
             } else {
                 PresBox.Instance._selectedArray = [];
@@ -161,26 +162,30 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
         e.preventDefault();
     }
 
-    @action
-    stopDrag = (e: PointerEvent) => {
-        this._dragging = false;
-        e.stopPropagation();
-        e.preventDefault();
-    }
-
     startDrag = (e: PointerEvent, down: number[], delta: number[]) => {
+        const miniView: boolean = this.toolbarWidth <= 100;
         const activeItem = this.rootDoc;
+        const dragArray = PresBox.Instance._dragArray;
         const dragData = new DragManager.DocumentDragData(PresBox.Instance.sortArray().map(doc => doc));
         const dragItem: HTMLElement[] = [];
-        PresBox.Instance._dragArray.map(ele => {
-            const doc = ele;
-            doc.className = "presItem-slide";
+        if (dragArray.length === 1) {
+            const doc = dragArray[0];
+            doc.className = miniView ? "presItem-miniSlide" : "presItem-slide";
+            dragItem.push(doc);
+        } else if (dragArray.length >= 1) {
+            const doc = document.createElement('div');
+            doc.className = "presItem-multiDrag";
+            doc.innerText = "Move " + dragArray.length + " slides";
+            doc.style.position = 'absolute';
+            doc.style.top = (e.clientY) + 'px';
+            doc.style.left = (e.clientX - 50) + 'px';
             dragItem.push(doc);
-        });
-        const dropEvent = () => runInAction(() => this._dragging = false);
+        }
+
+        // const dropEvent = () => runInAction(() => this._dragging = false);
         if (activeItem) {
-            DragManager.StartDocumentDrag(dragItem.map(ele => ele), dragData, e.clientX, e.clientY, undefined, dropEvent);
-            runInAction(() => this._dragging = true);
+            DragManager.StartDocumentDrag(dragItem.map(ele => ele), dragData, e.clientX, e.clientY, undefined);
+            // runInAction(() => this._dragging = true);
             return true;
         }
         return false;
@@ -233,15 +238,18 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
 
     @action
     onSetValue = (value: string) => {
-        this.rootDoc.title = value;
+        const length: number = value.length;
+        const spaces: string = new Array(value.length + 1).join(" ");
+        if (length === 0 || value === spaces) this.rootDoc.title = "-untitled-";
+        else this.rootDoc.title = value;
         return true;
     }
 
     @action
     clearArrays = () => {
         PresBox.Instance._eleArray = [];
-        PresBox.Instance._eleArray.push(this._itemRef.current!);
         PresBox.Instance._dragArray = [];
+        PresBox.Instance._eleArray.push(this._itemRef.current!);
         PresBox.Instance._dragArray.push(this._dragRef.current!);
     }
 
@@ -271,11 +279,20 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
         }
     }
 
+    @computed
+    get toolbarWidth(): number {
+        const presBoxDocView = DocumentManager.Instance.getDocumentView(this.presBox)
+        let width: number = NumCast(this.presBox._width);
+        if (presBoxDocView) width = presBoxDocView.props.PanelWidth();
+        return width;
+    }
+
     @computed get mainItem() {
         const isSelected: boolean = PresBox.Instance._selectedArray.includes(this.rootDoc);
-        const toolbarWidth: number = PresBox.Instance.toolbarWidth;
-        const showMore: boolean = PresBox.Instance.toolbarWidth >= 300;
-        const targetDoc: Doc = Cast(this.rootDoc.presentationTargetDoc, Doc, null);
+        const toolbarWidth: number = this.toolbarWidth;
+        const showMore: boolean = this.toolbarWidth >= 300;
+        const miniView: boolean = this.toolbarWidth <= 100;
+        const targetDoc: Doc = this.targetDoc;
         const activeItem: Doc = this.rootDoc;
         return (
             <div className={`presItem-container`} key={this.props.Document[Id] + this.indexInPres}
@@ -306,21 +323,26 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                 onPointerDown={this.headerDown}
                 onPointerUp={this.headerUp}
             >
-                <div className="presItem-number">
-                    {`${this.indexInPres + 1}.`}
-                </div>
-                <div ref={this._dragRef} className={`presItem-slide ${isSelected ? "active" : ""}`}>
-                    <div className="presItem-name" style={{ maxWidth: showMore ? (toolbarWidth - 175) : toolbarWidth - 85 }}>
+                {miniView ?
+                    <div className={`presItem-miniSlide ${isSelected ? "active" : ""}`} ref={miniView ? this._dragRef : null}>
+                        {`${this.indexInPres + 1}.`}
+                    </div>
+                    :
+                    <div className="presItem-number">
+                        {`${this.indexInPres + 1}.`}
+                    </div>}
+                {miniView ? (null) : <div ref={miniView ? null : this._dragRef} className={`presItem-slide ${isSelected ? "active" : ""}`}>
+                    <div className="presItem-name" style={{ maxWidth: showMore ? (toolbarWidth - 175) : toolbarWidth - 85, cursor: isSelected ? 'text' : 'grab' }}>
                         {isSelected ? <EditableView
                             ref={this._titleRef}
-                            contents={this.rootDoc.title}
-                            GetValue={() => StrCast(this.rootDoc.title)}
-                            SetValue={action((value: string) => {
+                            contents={activeItem.title}
+                            GetValue={() => StrCast(activeItem.title)}
+                            SetValue={undoBatch(action((value: string) => {
                                 this.onSetValue(value);
                                 return true;
-                            })}
+                            }))}
                         /> :
-                            this.rootDoc.title
+                            activeItem.title
                         }
                     </div>
                     <Tooltip title={<><div className="dash-tooltip">{"Movement speed"}</div></>}><div className="presItem-time" style={{ display: showMore ? "block" : "none" }}>{this.transition}</div></Tooltip>
@@ -331,6 +353,13 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                                 onClick={() => this.updateView(targetDoc, activeItem)}
                                 style={{ fontWeight: 700, display: activeItem.presPinView ? "flex" : "none" }}>V</div>
                         </Tooltip>
+                        {/* <Tooltip title={<><div className="dash-tooltip">{"Group with up"}</div></>}>
+                            <div className="slideButton"
+                                onClick={() => activeItem.groupWithUp = !activeItem.groupWithUp}
+                                style={{ fontWeight: 700, display: activeItem.presPinView ? "flex" : "none" }}>
+                                <FontAwesomeIcon icon={""} onPointerDown={e => e.stopPropagation()} />
+                            </div>
+                        </Tooltip> */}
                         <Tooltip title={<><div className="dash-tooltip">{this.rootDoc.presExpandInlineButton ? "Minimize" : "Expand"}</div></>}><div className={"slideButton"} onClick={e => { e.stopPropagation(); this.presExpandDocumentClick(); }}>
                             <FontAwesomeIcon icon={this.rootDoc.presExpandInlineButton ? "eye-slash" : "eye"} onPointerDown={e => e.stopPropagation()} />
                         </div></Tooltip>
@@ -340,8 +369,9 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                             <FontAwesomeIcon icon={"trash"} onPointerDown={e => e.stopPropagation()} />
                         </div></Tooltip>
                     </div>
+                    <div className="presItem-docName" style={{ maxWidth: showMore ? (toolbarWidth - 175) : toolbarWidth - 85 }}>{activeItem.presPinView ? (<><i>View of </i> {targetDoc.title}</>) : targetDoc.title}</div>
                     {this.renderEmbeddedInline}
-                </div>
+                </div>}
             </div >);
     }