From 9aded8f992b83a53eeb31faa3af1aeea4a5f4617 Mon Sep 17 00:00:00 2001
From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com>
Date: Tue, 13 Oct 2020 23:08:20 +0800
Subject: Pres redesign and minor changes

---
 src/client/views/nodes/PresBox.tsx                 |  10 +-
 .../views/presentationview/PresElementBox.scss     | 134 +++++++++++----------
 .../views/presentationview/PresElementBox.tsx      |  12 +-
 3 files changed, 82 insertions(+), 74 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index 1af1d5c90..f59d6f966 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -1312,7 +1312,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                     <div className={`presBox-ribbon ${this.progressivizeTools && this.layoutDoc.presStatus === "edit" ? "active" : ""}`} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
                         <div className="ribbon-box">
                             {this.stringType} selected
-                            <div className="ribbon-doubleButton" style={{ borderTop: 'solid 1px darkgrey', display: (targetDoc.type === DocumentType.COL && targetDoc._viewType === 'freeform') || targetDoc.type === DocumentType.IMG ? "inline-flex" : "none" }}>
+                            <div className="ribbon-doubleButton" style={{ borderTop: 'solid 1px darkgrey', display: (targetDoc.type === DocumentType.COL && targetDoc._viewType === 'freeform') || targetDoc.type === DocumentType.IMG || targetDoc.type === DocumentType.RTF ? "inline-flex" : "none" }}>
                                 <div className="ribbon-toggle" style={{ backgroundColor: activeItem.presProgressivize ? "#aedef8" : "" }} onClick={this.progressivizeChild}>Contents</div>
                                 <div className="ribbon-toggle" style={{ opacity: activeItem.presProgressivize ? 1 : 0.4, backgroundColor: targetDoc.editProgressivize ? "#aedef8" : "" }} onClick={this.editProgressivize}>Edit</div>
                             </div>
@@ -1501,18 +1501,18 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         const targetDoc: Doc = this.targetDoc;
         const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]);
         if (!activeItem.presProgressivize) {
-            targetDoc.editing = false;
+            // targetDoc.editing = false;
             activeItem.presProgressivize = true;
             targetDoc.presProgressivize = true;
             targetDoc._currentFrame = 0;
             docs.forEach((doc, i) => CollectionFreeFormDocumentView.setupKeyframes([doc], i, true));
             targetDoc.lastFrame = targetDoc.lastFrame ? NumCast(targetDoc.lastFrame) : docs.length - 1;
         } else {
-            targetDoc.editProgressivize = false;
+            // targetDoc.editProgressivize = false;
             activeItem.presProgressivize = false;
             targetDoc.presProgressivize = false;
             targetDoc._currentFrame = 0;
-            targetDoc.editing = true;
+            // targetDoc.editing = true;
         }
     }
 
@@ -1785,7 +1785,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                 {this.topPanel}
                 {this.toolbar}
                 {this.newDocumentToolbarDropdown}
-                <div className="presBox-listCont" style={{ padding: 0 }}>
+                <div className="presBox-listCont">
                     {mode !== CollectionViewType.Invalid ?
                         <CollectionView {...this.props}
                             ContainingCollectionDoc={this.props.Document}
diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss
index 0e1953e7c..6bd80afb8 100644
--- a/src/client/views/presentationview/PresElementBox.scss
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -43,9 +43,10 @@ $slide-active: #5B9FDD;
     position: relative;
     background-color: #d5dce2;
     border-radius: 5px;
-    height: calc(100% - 8px);
+    height: calc(100% - 7px);
     width: calc(100% - 5px);
     display: grid;
+    grid-template-rows: 23px auto;
     grid-template-columns: max-content max-content max-content max-content auto;
 
     .presItem-name {
@@ -64,6 +65,75 @@ $slide-active: #5B9FDD;
         overflow: hidden;
         white-space: pre;
     }
+
+    .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;
+    }
+
+
+    .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: 75%;
+            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);
+        }
+    }
 }
 
 .presItem-slide.active {
@@ -74,66 +144,4 @@ $slide-active: #5B9FDD;
 //     background: $slide-hover;
 // }
 
-.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;
-}
-
-.presElementBox-embeddedMask {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    border-radius: 3px;
-    top: 0;
-    left: 0;
-    z-index: 1;
-    overflow: hidden;
-}
 
-.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: 75%;
-        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);
-    }
-}
\ No newline at end of file
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index 97344d33d..b1eac5832 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -71,7 +71,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
         this.rootDoc.presExpandInlineButton = !this.rootDoc.presExpandInlineButton;
     }
 
-    embedHeight = () => 100;
+    embedHeight = () => 97;
     // embedWidth = () => this.props.PanelWidth();
     // embedHeight = () => Math.min(this.props.PanelWidth() - 20, this.props.PanelHeight() - this.collapsedHeight);
     embedWidth = () => this.props.PanelWidth() - 30;
@@ -81,7 +81,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
      */
     @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>;
     }
 
@@ -287,9 +287,9 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                             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">{"Movement speed"}</div></>}><div className="presItem-time" style={{ display: PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>{this.transition}</div></Tooltip>
+                    <Tooltip title={<><div className="dash-tooltip">{"Duration"}</div></>}><div className="presItem-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="presItem-time" style={{ fontWeight: 700, display: this.rootDoc.presPinView && PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>V</div></Tooltip>
                     <div className={"presItem-slideButtons"}>
                         <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()} />
-- 
cgit v1.2.3-70-g09d2