2 files changed, 45 insertions, 20 deletions
diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss
index 0e58d77a0..51ad6839c 100644
--- a/src/client/views/presentationview/PresElementBox.scss
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -1,14 +1,13 @@
 .presElementBox-item {
     display: grid;
-    grid-template-rows: max-content max-content max-content;
-    background-color: #d0d0d0;
-    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    grid-template-columns: max-content max-content max-content;
+    background-color: #d5dce2;
+    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
     position: relative;
     pointer-events: all;
     width: 100%;
     height: 100%;
-    outline-color: maroon;
-    outline-style: dashed;
+    font-weight: 400;
     border-radius: 6px;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
@@ -16,7 +15,7 @@
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
-    transition: all .1s;
+    transition: all .3s;
     padding: 0px;
     padding-bottom: 3px;
 
@@ -88,26 +87,36 @@
 }
 
 .presElementBox-name {
+    align-self: center;
     font-size: 13px;
+    font-family: Roboto;
+    font-weight: 500;
     position: relative;
-    left: 10px;
-    top: 4px;
+    top: 1px;
+    padding-left: 10px;
+    padding-right: 10px;
     letter-spacing: normal;
-    width: calc(100% - 60px);
+    max-width: max-content;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: pre;
 }
 
 .presElementBox-time {
+    align-self: center;
     position: relative;
-    font-size: 8;
-    font-style: italic;
+    top: 2px;
+    padding-right: 10px;
+    font-size: 10;
+    font-weight: 300;
+    font-family: Roboto;
+    /* font-style: italic; */
     letter-spacing: normal;
-    left: 10px;
+    /* left: 10px; */
 }
 
 .presElementBox-embedded {
+    grid-column: 1/8;
     position: relative;
     display: flex;
     width: auto;
@@ -119,10 +128,11 @@
     width: 100%;
     height: 100%;
     position: absolute;
-    left: 0;
+    border-radius: 3px;
     top: 0;
-    background: transparent;
-    z-index: 2;
+    left: 0;
+    z-index: 1;
+    overflow: hidden;
 }
 
 .presElementBox-closeIcon {
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index c503b0678..ab27443d2 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -17,6 +17,7 @@ import React = require("react");
 import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
 import { PresBox } from "../nodes/PresBox";
 import { DocumentType } from "../../documents/DocumentTypes";
+import { Tooltip } from "@material-ui/core";
 
 export const presSchema = createSchema({
     presentationTargetDoc: Doc,
@@ -214,6 +215,20 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
             </div>;
     }
 
+    @computed get duration() {
+        let durationInS: number;
+        if (this.targetDoc.presDuration) durationInS = NumCast(this.targetDoc.presDuration) / 1000;
+        else durationInS = 2;
+        return "D: " + durationInS + "s";
+    }
+
+    @computed get transition() {
+        let transitionInS: number;
+        if (this.targetDoc.presTransition) transitionInS = NumCast(this.targetDoc.presTransition) / 1000;
+        else transitionInS = 0.5;
+        return "T: " + transitionInS + "s";
+    }
+
     render() {
         const treecontainer = this.props.ContainingCollectionDoc?._viewType === CollectionViewType.Tree;
         const className = "presElementBox-item" + (this.itemIndex === this.indexInPres ? " presElementBox-active" : "");
@@ -232,7 +247,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                         console.log("normal click");
                     }
                 }}
-            // onPointerDown={e => e.stopPropagation()}
+                onPointerDown={e => e.stopPropagation()}
             >
                 {treecontainer ? (null) : <>
                     <div className="presElementBox-number">
@@ -241,8 +256,8 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                     <div className="presElementBox-name">
                         {`${this.targetDoc?.title}`}
                     </div>
-                    <div className="presElementBox-time">{"Transition speed: " + (this.targetDoc?.presTransition) + "ms"}</div>
-                    <div className="presElementBox-time" style={{ display: this.targetDoc.presDuration ? "block" : "none" }}>{"Duration: " + (this.targetDoc?.presDuration) + "ms"}</div>
+                    <Tooltip title={<><div className="dash-tooltip">{"Transition speed"}</div></>}><div className="presElementBox-time">{this.transition}</div></Tooltip>
+                    <Tooltip title={<><div className="dash-tooltip">{"Duration"}</div></>}><div className="presElementBox-time">{this.duration}</div></Tooltip>
                     <button
                         title="Close"
                         className="presElementBox-closeIcon"
@@ -258,13 +273,13 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                     </button>
                 </>}
                 <div className="presElementBox-highlight" style={{ display: PresBox.Instance._selectedArray.includes(this.rootDoc) ? "block" : "none" }} />
-                <div className="presElementBox-buttons">
+                <div className="presElementBox-buttons" style={{ display: this.rootDoc.presExpandInlineButton ? "grid" : "none" }}>
                     <button title="Zoom" className={pbi + (this.rootDoc.presZoomButton ? "-selected" : "")} onClick={this.onZoomDocumentClick}><FontAwesomeIcon icon={"search-plus"} onPointerDown={e => e.stopPropagation()} /></button>
                     <button title="Navigate" className={pbi + (this.rootDoc.presNavButton ? "-selected" : "")} onClick={this.onNavigateDocumentClick}><FontAwesomeIcon icon={"location-arrow"} onPointerDown={e => e.stopPropagation()} /></button>
                     <button title="Hide Before" className={pbi + (this.rootDoc.presHideTillShownButton ? "-selected" : "")} onClick={this.onHideDocumentUntilPressClick}><FontAwesomeIcon icon={"file"} onPointerDown={e => e.stopPropagation()} /></button>
-                    <button title="Fade After" className={pbi + (this.rootDoc.presFadeButton ? "-selected" : "")} onClick={this.onFadeDocumentAfterPresentedClick}><FontAwesomeIcon icon={"file-download"} onPointerDown={e => e.stopPropagation()} /></button>
                     <button title="Hide After" className={pbi + (this.rootDoc.presHideAfterButton ? "-selected" : "")} onClick={this.onHideDocumentAfterPresentedClick}><FontAwesomeIcon icon={"file-download"} onPointerDown={e => e.stopPropagation()} /></button>
                     <button title="Progressivize" className={pbi + (this.rootDoc.presProgressivize ? "-selected" : "")} onClick={this.progressivize}><FontAwesomeIcon icon={"tasks"} onPointerDown={e => e.stopPropagation()} /></button>
+                    <button title="Effect" className={pbi + (this.rootDoc.presEffect ? "-selected" : "")}>E</button>
                 </div>
                 {this.renderEmbeddedInline}
             </div>