Merge pull request #860 from browngraphicslab/presentation_v1

Presentation v1 presentation items redesign

2 files changed, 211 insertions, 241 deletions

diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss
index 4642caeb2..f1bdb7737 100644
--- a/src/client/views/presentationview/PresElementBox.scss
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -1,12 +1,14 @@
 $light-blue: #AEDDF8;
 $dark-blue: #5B9FDD;
 $light-background: #ececec;
+$slide-background: #d5dce2;
+$slide-hover: #98b7da;
+$slide-active: #5B9FDD;
 
-.presElementBox-item {
+.presItem-container {
     cursor: grab;
     display: grid;
-    grid-template-columns: max-content max-content max-content max-content;
-    background-color: #d5dce2;
+    grid-template-columns: 20px auto;
     font-family: Roboto;
     letter-spacing: normal;
     position: relative;
@@ -14,200 +16,132 @@ $light-background: #ececec;
     width: 100%;
     height: 100%;
     font-weight: 400;
-    border-radius: 6px;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
-    transition: all .3s;
-    padding: 0px;
-    padding-bottom: 3px;
-
-    .presElementBox-highlight {
-        position: absolute;
-        transform: translate(-100px, -4px);
-        z-index: -1;
-        width: calc(100% + 200px);
-        height: calc(100% + 8px);
-        background-color: $light-blue;
-    }
-
-    .presElementBox-highlightTop {
-        position: absolute;
-        transform: translate(-100px, -4px);
-        z-index: -1;
-        width: calc(100% + 200px);
-        height: calc(50% + 4px);
-    }
-
-    .presElementBox-highlightBottom {
-        position: absolute;
-        transform: translate(-100px, 0px);
-        z-index: -1;
-        top: 50%;
-        width: calc(100% + 200px);
-        height: calc(50% + 4px);
-    }
+    align-items: center;
 
-    .documentView-node {
-        position: absolute;
-        z-index: 1;
+    .presItem-number {
+        margin-top: 7px;
+        font-size: 12px;
+        font-weight: 700;
+        text-align: center;
+        justify-self: center;
+        align-self: flex-start;
+        position: relative;
+        display: inline-block;
+        overflow: hidden;
     }
-}
-
-.presElementBox-item-above {
-    border-top: black 2px solid;
-}
-
-.presElementBox-item-below {
-    border-bottom: black 2px solid;
-}
 
-.presElementBox-item:hover {
-    transition: all .1s;
-    background: #98b7da;
-    border-radius: 6px;
-}
 
-.presElementBox-active {
-    color: black;
-    border-radius: 6px;
-    border: solid 2px $dark-blue;
 }
 
-.presElementBox-buttons {
+.presItem-slide {
+    position: relative;
+    background-color: #d5dce2;
+    border-radius: 5px;
+    height: calc(100% - 7px);
+    width: calc(100% - 5px);
     display: grid;
-    grid-template-rows: 15px;
-    top: 15px;
-    left: -20;
-    position: absolute;
-    width: 100%;
-    height: auto;
-
-    .presElementBox-interaction {
-        display: none;
+    grid-template-rows: 23px auto;
+    grid-template-columns: max-content max-content max-content max-content auto;
+
+    .presItem-name {
+        z-index: 300;
+        align-self: center;
+        font-size: 13px;
+        font-family: Roboto;
+        font-weight: 500;
+        position: relative;
+        top: 1px;
+        padding-left: 10px;
+        padding-right: 10px;
+        letter-spacing: normal;
+        width: max-content;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: pre;
     }
 
-    .presElementBox-interaction-selected {
-        color: grey;
-        background-color: rgba(0, 0, 0, 0);
-        float: left;
-        padding: 0px;
-        width: 20px;
-        height: 20px;
+    .presItem-time {
+        align-self: center;
+        position: relative;
+        top: 2px;
+        padding-right: 10px;
+        font-size: 10;
+        font-weight: 300;
+        font-family: Roboto;
+        z-index: 300;
+        letter-spacing: normal;
+    }
+    
+    .presItem-embedded {
+        overflow: hidden;
+        grid-column: 1/8;
+        position: relative;
+        display: flex;
+        width: auto;
+        justify-content: center;
+        margin: auto;
+        margin-bottom: 2px;
+        border-bottom-left-radius: 5px;
+        border-bottom-right-radius: 5px;
+    }
+    
+    .presItem-embeddedMask {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        border-radius: 3px;
+        top: 0;
+        left: 0;
+        z-index: 1;
+        overflow: hidden;
     }
-}
-
-.presElementBox-number {
-    font-size: 12px;
-    width: 20;
-    font-weight: 700;
-    text-align: right;
-    justify-content: center;
-    align-content: center;
-    left: -20;
-    position: absolute;
-    display: inline-block;
-    overflow: hidden;
-}
-
-.presElementBox-name {
-    z-index: 300;
-    align-self: center;
-    font-size: 13px;
-    font-family: Roboto;
-    font-weight: 500;
-    position: relative;
-    top: 1px;
-    padding-left: 10px;
-    padding-right: 10px;
-    letter-spacing: normal;
-    width: max-content;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: pre;
-}
 
-.presElementBox-time {
-    align-self: center;
-    position: relative;
-    top: 2px;
-    padding-right: 10px;
-    font-size: 10;
-    font-weight: 300;
-    font-family: Roboto;
-    z-index: 300;
-    letter-spacing: normal;
-}
 
-.presElementBox-embedded {
-    grid-column: 1/8;
-    position: relative;
-    display: flex;
-    width: auto;
-    justify-content: center;
-    margin: auto;
+    .presItem-slideButtons {
+        display: flex;
+        grid-column: 7;
+        width: 60px;
+        justify-self: right;
+        justify-content: flex-end;
+
+        .slideButton {
+            cursor: pointer;
+            position: relative;
+            border-radius: 100%;
+            z-index: 300;
+            width: 15px;
+            height: 15px;
+            display: flex;
+            font-size: 10px;
+            justify-self: center;
+            align-self: center;
+            background-color: rgba(0, 0, 0, 0.5);
+            color: white;
+            justify-content: center;
+            align-items: center;
+            transition: 0.2s;
+            margin-right: 3px;
+        }
+
+        .slideButton:hover {
+            background-color: rgba(0, 0, 0, 1);
+            transform: scale(1.15);
+        }
+    }
 }
 
-.presElementBox-embeddedMask {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    border-radius: 3px;
-    top: 0;
-    left: 0;
-    z-index: 1;
-    overflow: hidden;
+.presItem-slide.active {
+    box-shadow: 0 0 0px 1.5px $dark-blue;
 }
 
-.presElementBox-closeIcon {
-    cursor: pointer;
-    position: absolute;
-    border-radius: 100%;
-    z-index: 300;
-    right: 3px;
-    top: 3px;
-    width: 20px;
-    height: 20px;
-    display: flex;
-    font-size: 75%;
-    background-color: black;
-    color: white;
-    justify-content: center;
-    align-items: center;
-}
+// .presItem-slide:hover {
+//     background: $slide-hover;
+// }
 
-.presElementBox-expand {
-    cursor: pointer;
-    position: absolute;
-    border-radius: 100%;
-    z-index: 300;
-    right: 26px;
-    top: 3px;
-    width: 20px;
-    height: 20px;
-    display: flex;
-    font-size: 75%;
-    background-color: black;
-    color: white;
-    justify-content: center;
-    align-items: center;
-}
 
-.presElementBox-expand-selected {
-    cursor: pointer;
-    position: absolute;
-    border-radius: 100%;
-    right: 3px;
-    bottom: 3px;
-    width: 20px;
-    height: 20px;
-    z-index: 300;
-    display: flex;
-    background-color: black;
-    color: white;
-    justify-content: center;
-    align-items: center;
-}
\ No newline at end of file
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index aa44c13d1..9052967e5 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -71,17 +71,17 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
         this.rootDoc.presExpandInlineButton = !this.rootDoc.presExpandInlineButton;
     }
 
-    embedHeight = () => 100;
+    embedHeight = (): number => 97;
     // embedWidth = () => this.props.PanelWidth();
     // embedHeight = () => Math.min(this.props.PanelWidth() - 20, this.props.PanelHeight() - this.collapsedHeight);
-    embedWidth = () => this.props.PanelWidth() - 20;
+    embedWidth = (): number => this.props.PanelWidth() - 30;
     /**
      * The function that is responsible for rendering a preview or not for this
      * presentation element.
      */
     @computed get renderEmbeddedInline() {
         return !this.rootDoc.presExpandInlineButton || !this.targetDoc ? (null) :
-            <div className="presElementBox-embedded" style={{ height: this.embedHeight(), width: this.embedWidth() }}>
+            <div className="presItem-embedded" style={{ height: this.embedHeight(), width: this.embedWidth() }}>
                 <ContentFittingDocumentView
                     Document={this.targetDoc}
                     DataDoc={this.targetDoc[DataSym] !== this.targetDoc && this.targetDoc[DataSym]}
@@ -110,7 +110,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                     ContainingCollectionDoc={undefined}
                     ContentScaling={returnOne}
                 />
-                <div className="presElementBox-embeddedMask" />
+                <div className="presItem-embeddedMask" />
             </div>;
     }
 
@@ -157,9 +157,13 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
     headerUp = (e: React.PointerEvent<HTMLDivElement>) => {
         e.stopPropagation();
         e.preventDefault();
-        DragManager.docsBeingDragged = [];
-        this._highlightTopRef.current!.style.borderBottom = "0px";
-        this._highlightBottomRef.current!.style.borderBottom = "0px";
+    }
+
+    stopDrag = (e: PointerEvent) => {
+        const activeItem = this.rootDoc;
+        activeItem.dragging = false;
+        e.stopPropagation();
+        e.preventDefault();
     }
 
     startDrag = (e: PointerEvent, down: number[], delta: number[]) => {
@@ -167,10 +171,9 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
         const dragData = new DragManager.DocumentDragData(PresBox.Instance.sortArray().map(doc => doc));
         const dragItem: HTMLElement[] = [];
         PresBox.Instance._dragArray.map(ele => {
-            const drag = ele;
-            drag.style.backgroundColor = "#d5dce2";
-            drag.style.borderRadius = '5px';
-            dragItem.push(drag);
+            const doc = ele;
+            doc.className = "presItem-slide"
+            dragItem.push(doc);
         });
         if (activeItem) {
             DragManager.StartDocumentDrag(dragItem.map(ele => ele), dragData, e.clientX, e.clientY);
@@ -180,27 +183,33 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
         return false;
     }
 
-    private _highlightTopRef: React.RefObject<HTMLDivElement> = React.createRef();
-    private _highlightBottomRef: React.RefObject<HTMLDivElement> = React.createRef();
-
-
-    onPointerTop = (e: React.PointerEvent<HTMLDivElement>) => {
-        if (DragManager.docsBeingDragged.length > 1) {
-            this._highlightTopRef.current!.style.borderTop = "solid 2px #5B9FDD";
-        }
+    onPointerOver = (e: any) => {
+        document.removeEventListener("pointermove", this.onPointerMove);
+        document.addEventListener("pointermove", this.onPointerMove);
     }
 
-    onPointerBottom = (e: React.PointerEvent<HTMLDivElement>) => {
+    onPointerMove = (e: PointerEvent) => {
+        const slide = this._itemRef.current!;
+        const rect = slide?.getBoundingClientRect();
+        let y = e.clientY - rect.top;  //y position within the element.
+        let height = slide.clientHeight;
+        let halfLine = height / 2;
         if (DragManager.docsBeingDragged.length > 1) {
-            this._highlightBottomRef.current!.style.borderBottom = "solid 2px #5B9FDD";
+            if (y <= halfLine) {
+                slide.style.borderTop = "solid 2px #5B9FDD";
+                slide.style.borderBottom = "0px";
+            } else if (y > halfLine) {
+                slide.style.borderTop = "0px";
+                slide.style.borderBottom = "solid 2px #5B9FDD";
+            }
         }
+        document.removeEventListener("pointermove", this.onPointerMove);
     }
 
-    onPointerLeave = (e: React.PointerEvent<HTMLDivElement>) => {
-        if (DragManager.docsBeingDragged.length > 1) {
-            this._highlightBottomRef.current!.style.borderBottom = "0px";
-            this._highlightTopRef.current!.style.borderTop = "0px";
-        }
+    onPointerLeave = (e: any) => {
+        this._itemRef.current!.style.borderTop = "0px";
+        this._itemRef.current!.style.borderBottom = "0px";
+        document.removeEventListener("pointermove", this.onPointerMove);
     }
 
     @action
@@ -225,12 +234,25 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
         return true;
     }
 
-    render() {
-        const className = "presElementBox-item" + (PresBox.Instance._selectedArray.includes(this.rootDoc) ? " presElementBox-active" : "");
-        return !(this.rootDoc instanceof Doc) || this.targetDoc instanceof Promise ? (null) : (
-            <div className={className} key={this.props.Document[Id] + this.indexInPres}
+    @action
+    clearArrays = () => {
+        PresBox.Instance._eleArray = [];
+        PresBox.Instance._eleArray.push(this._itemRef.current!);
+        PresBox.Instance._dragArray = [];
+        PresBox.Instance._dragArray.push(this._dragRef.current!);
+    }
+
+    @computed get mainItem() {
+        const isSelected: boolean = PresBox.Instance._selectedArray.includes(this.rootDoc);
+        const isDragging: boolean = BoolCast(this.rootDoc.dragging);
+        const toolbarWidth: number = PresBox.Instance.toolbarWidth;
+        const showMore: boolean = PresBox.Instance.toolbarWidth >= 300;
+        const targetDoc: Doc = Cast(this.rootDoc.presentationTargetDoc, Doc, null);
+        const activeItem: Doc = this.rootDoc;
+        return (
+            <div className={`presItem-container`} key={this.props.Document[Id] + this.indexInPres}
                 ref={this._itemRef}
-                style={{ outlineWidth: Doc.IsBrushed(this.targetDoc) ? `1px` : "0px", }}
+                style={{ backgroundColor: isSelected ? "#AEDDF8" : "rgba(0,0,0,0)", opacity: isDragging ? 0.3 : 1 }}
                 onClick={e => {
                     e.stopPropagation();
                     e.preventDefault();
@@ -243,30 +265,25 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                         // Regular click
                     } else {
                         this.props.focus(this.rootDoc);
-                        PresBox.Instance._eleArray = [];
-                        PresBox.Instance._eleArray.push(this._itemRef.current!);
-                        PresBox.Instance._dragArray = [];
-                        PresBox.Instance._dragArray.push(this._dragRef.current!);
+                        this.clearArrays();
                     }
                 }}
                 onDoubleClick={e => {
-                    console.log('double click to open');
                     this.toggleProperties();
                     this.props.focus(this.rootDoc);
-                    PresBox.Instance._eleArray = [];
-                    PresBox.Instance._eleArray.push(this._itemRef.current!);
-                    PresBox.Instance._dragArray = [];
-                    PresBox.Instance._dragArray.push(this._dragRef.current!);
+                    this.clearArrays();
                 }}
+                onPointerOver={this.onPointerOver}
+                onPointerLeave={this.onPointerLeave}
                 onPointerDown={this.headerDown}
                 onPointerUp={this.headerUp}
             >
-                <>
-                    <div className="presElementBox-number">
-                        {`${this.indexInPres + 1}.`}
-                    </div>
-                    <div ref={this._dragRef} className="presElementBox-name" style={{ maxWidth: (PresBox.Instance.toolbarWidth - 70) }}>
-                        <EditableView
+                <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 }}>
+                        {isSelected ? <EditableView
                             ref={this._titleRef}
                             contents={this.rootDoc.title}
                             GetValue={() => StrCast(this.rootDoc.title)}
@@ -274,25 +291,44 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                                 this.onSetValue(value);
                                 return true;
                             })}
-                        />
+                        /> :
+                            this.rootDoc.title
+                        }
                     </div>
-                    <Tooltip title={<><div className="dash-tooltip">{"Movement speed"}</div></>}><div className="presElementBox-time" style={{ display: PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>{this.transition}</div></Tooltip>
-                    <Tooltip title={<><div className="dash-tooltip">{"Duration"}</div></>}><div className="presElementBox-time" style={{ display: PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>{this.duration}</div></Tooltip>
-                    <Tooltip title={<><div className="dash-tooltip">{"Presentation pin view"}</div></>}><div className="presElementBox-time" style={{ fontWeight: 700, display: this.rootDoc.presPinView && PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>V</div></Tooltip>
-                    <Tooltip title={<><div className="dash-tooltip">{"Remove from presentation"}</div></>}><div
-                        className="presElementBox-closeIcon"
-                        onClick={this.removeItem}>
-                        <FontAwesomeIcon icon={"trash"} onPointerDown={e => e.stopPropagation()} />
-                    </div></Tooltip>
-                    <Tooltip title={<><div className="dash-tooltip">{this.rootDoc.presExpandInlineButton ? "Minimize" : "Expand"}</div></>}><div className={"presElementBox-expand" + (this.rootDoc.presExpandInlineButton ? "-selected" : "")} onClick={e => { e.stopPropagation(); this.presExpandDocumentClick(); }}>
-                        <FontAwesomeIcon icon={(this.rootDoc.presExpandInlineButton ? "angle-up" : "angle-down")} onPointerDown={e => e.stopPropagation()} />
-                    </div></Tooltip>
-                </>
-                <div ref={this._highlightTopRef} onPointerOver={this.onPointerTop} onPointerLeave={this.onPointerLeave} className="presElementBox-highlightTop" style={{ zIndex: 299, backgroundColor: "rgba(0,0,0,0)" }} />
-                <div ref={this._highlightBottomRef} onPointerOver={this.onPointerBottom} onPointerLeave={this.onPointerLeave} className="presElementBox-highlightBottom" style={{ zIndex: 299, backgroundColor: "rgba(0,0,0,0)" }} />
-                <div className="presElementBox-highlight" style={{ backgroundColor: PresBox.Instance._selectedArray.includes(this.rootDoc) ? "#AEDDF8" : "rgba(0,0,0,0)" }} />
-                {this.renderEmbeddedInline}
-            </div>
-        );
+                    <Tooltip title={<><div className="dash-tooltip">{"Movement speed"}</div></>}><div className="presItem-time" style={{ display: showMore ? "block" : "none" }}>{this.transition}</div></Tooltip>
+                    <Tooltip title={<><div className="dash-tooltip">{"Duration"}</div></>}><div className="presItem-time" style={{ display: showMore ? "block" : "none" }}>{this.duration}</div></Tooltip>
+                    <div className={"presItem-slideButtons"}>
+                        <Tooltip title={<><div className="dash-tooltip">{"Update view"}</div></>}>
+                            <div className="slideButton"
+                                onClick={e => {
+                                    const x = targetDoc._panX;
+                                    const y = targetDoc._panY;
+                                    const scale = targetDoc._viewScale;
+                                    activeItem.presPinViewX = x;
+                                    activeItem.presPinViewY = y;
+                                    activeItem.presPinViewScale = scale;
+                                }}
+                                style={{ fontWeight: 700, display: activeItem.presPinView ? "flex" : "none" }}>V</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>
+                        <Tooltip title={<><div className="dash-tooltip">{"Remove from presentation"}</div></>}><div
+                            className={"slideButton"}
+                            onClick={this.removeItem}>
+                            <FontAwesomeIcon icon={"trash"} onPointerDown={e => e.stopPropagation()} />
+                        </div></Tooltip>
+                    </div>
+                    {this.renderEmbeddedInline}
+                </div>
+            </div>);
+    }
+
+    render() {
+        let item = null;
+        if (!(this.rootDoc instanceof Doc) || this.targetDoc instanceof Promise) item = null;
+        else item = this.mainItem;
+
+        return item;
     }
 }
\ No newline at end of file