From 80a8e0a7e48ee84cb121b80d72d485bc10e9269b Mon Sep 17 00:00:00 2001
From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com>
Date: Thu, 1 Oct 2020 19:32:21 +0800
Subject: redesigned presItems

---
 src/client/views/nodes/PresBox.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

(limited to 'src/client/views/nodes/PresBox.tsx')

diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index 7eca09f8c..739f564a5 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -118,7 +118,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         this.rootDoc._forceRenderEngine = "timeline";
         this.rootDoc._replacedChrome = "replaced";
         this.layoutDoc.presStatus = "edit";
-        this.layoutDoc._gridGap = 5;
+        this.layoutDoc._gridGap = 0;
         this.turnOffEdit(true);
         DocListCastAsync((Doc.UserDoc().myPresentations as Doc).data).then(async pres => {
             await Promise.all(pres!);
@@ -277,7 +277,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
 
         // If openDocument is selected then it should open the document for the user
         if (activeItem.openDocument) {
-            collectionDocView ? collectionDocView.props.addDocTab(activeItem, "inPlace") : this.props.addDocTab(activeItem, "replace:right");
+            collectionDocView ? collectionDocView.props.addDocTab(activeItem, "replace") : this.props.addDocTab(activeItem, "replace:left");
         } else
             //docToJump stayed same meaning, it was not in the group or was the last element in the group
             if (activeItem.zoomProgressivize && this.rootDoc.presStatus !== 'edit') {
@@ -526,7 +526,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         // pivot field may be set by the user in timeline view (or some other way) -- need to reset it here
         viewType === CollectionViewType.Stacking && (this.rootDoc._pivotField = undefined);
         this.rootDoc._viewType = viewType;
-        if (viewType === CollectionViewType.Stacking) this.layoutDoc._gridGap = 5;
+        if (viewType === CollectionViewType.Stacking) this.layoutDoc._gridGap = 0;
     });
 
     /**
@@ -1684,6 +1684,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                 </Tooltip>
                 <Tooltip title={<><div className="dash-tooltip">{this.rootDoc.expandBoolean ? "Minimize all" : "Expand all"}</div></>}>
                     <div className={`toolbar-button ${this.rootDoc.expandBoolean ? "active" : ""}`} onClick={this.toggleExpandMode}>
+                        {/* <FontAwesomeIcon icon={this.rootDoc.expandBoolean ? "eye-slash" : "eye"} /> */}
                         <FontAwesomeIcon icon={"eye"} />
                     </div>
                 </Tooltip>
-- 
cgit v1.2.3-70-g09d2


From 3d266cb4636aad2e6fe39595b113b0dd52f4f329 Mon Sep 17 00:00:00 2001
From: geireann <60007097+geireann@users.noreply.github.com>
Date: Sun, 4 Oct 2020 20:20:08 +0800
Subject: stepping through PDF fixes

---
 src/client/views/collections/TabDocView.tsx        |  2 +-
 .../views/nodes/CollectionFreeFormDocumentView.tsx | 30 +++----
 src/client/views/nodes/PresBox.tsx                 | 27 +-----
 .../views/presentationview/PresElementBox.scss     | 99 +---------------------
 4 files changed, 24 insertions(+), 134 deletions(-)

(limited to 'src/client/views/nodes/PresBox.tsx')

diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index 8c1a003b9..70eb5b895 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -123,7 +123,7 @@ export class TabDocView extends React.Component<TabDocViewProps> {
     @undoBatch
     @action
     public static PinDoc(doc: Doc, unpin = false, audioRange?: boolean) {
-        if (unpin) console.log('remove unpin');
+        if (unpin) console.log('TODO: Remove UNPIN from this location');
         //add this new doc to props.Document
         const curPres = CurrentUserUtils.ActivePresentation;
         if (curPres) {
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index d6f8ce19c..5a8ce4e14 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -65,7 +65,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
             w: Cast(doc["w-indexed"], listSpec("number"), [NumCast(doc._width)]).reduce((p, w, i) => (i <= timecode && w !== undefined) || p === undefined ? w : p, undefined as any as number),
             x: Cast(doc["x-indexed"], listSpec("number"), [NumCast(doc.x)]).reduce((p, x, i) => (i <= timecode && x !== undefined) || p === undefined ? x : p, undefined as any as number),
             y: Cast(doc["y-indexed"], listSpec("number"), [NumCast(doc.y)]).reduce((p, y, i) => (i <= timecode && y !== undefined) || p === undefined ? y : p, undefined as any as number),
-            scroll: Cast(doc["scroll-indexed"], listSpec("number"), [NumCast(doc._scrollY, 0)]).reduce((p, s, i) => (i <= timecode && s !== undefined) || p === undefined ? s : p, undefined as any as number),
+            scroll: Cast(doc["scroll-indexed"], listSpec("number"), [NumCast(doc._scrollTop, 0)]).reduce((p, s, i) => (i <= timecode && s !== undefined) || p === undefined ? s : p, undefined as any as number),
             opacity: Cast(doc["opacity-indexed"], listSpec("number"), [NumCast(doc.opacity, 1)]).reduce((p, o, i) => i <= timecode || p === undefined ? o : p, undefined as any as number),
         });
     }
@@ -97,24 +97,24 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
                 d["text-color"] = "grey";
             } else { d["text-color"] = "black"; }
         } else if (d.appearFrame === 0) {
-            d["text-color"] = "black";
         }
     }
 
-    public static updateScrollframe(doc: Doc, time: number) {
-        const timecode = Math.round(time);
-        const scrollIndexed = Cast(doc['scroll-indexed'], listSpec("number"), null);
-        scrollIndexed?.length <= timecode + 1 && scrollIndexed.push(undefined as any as number);
-        setTimeout(() => doc.dataTransition = "inherit", 1010);
-    }
+    // public static updateScrollframe(doc: Doc, time: number) {
+    //     console.log('update scroll frame');
+    //     const timecode = Math.round(time);
+    //     const scrollIndexed = Cast(doc['scroll-indexed'], listSpec("number"), null);
+    //     scrollIndexed?.length <= timecode + 1 && scrollIndexed.push(undefined as any as number);
+    //     setTimeout(() => doc.dataTransition = "inherit", 1010);
+    // }
 
-    public static setupScroll(doc: Doc, timecode: number) {
-        const scrollList = new List<number>();
-        scrollList[timecode] = NumCast(doc._scrollY);
-        doc["scroll-indexed"] = scrollList;
-        doc.activeFrame = ComputedField.MakeFunction("self._currentFrame");
-        doc._scrollY = ComputedField.MakeInterpolated("scroll", "activeFrame");
-    }
+    // public static setupScroll(doc: Doc, timecode: number) {
+    //     const scrollList = new List<number>();
+    //     scrollList[timecode] = NumCast(doc._scrollTop);
+    //     doc["scroll-indexed"] = scrollList;
+    //     doc.activeFrame = ComputedField.MakeFunction("self._currentFrame");
+    //     doc._scrollTop = ComputedField.MakeInterpolated("scroll", "activeFrame");
+    // }
 
 
     public static updateKeyframe(docs: Doc[], time: number, targetDoc?: Doc) {
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index 739f564a5..2af00586b 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -153,7 +153,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             setTimeout(() => targetDoc._viewTransition = undefined, 1010);
             // targetDoc._currentFrame = curFrame + 1;
             this.nextKeyframe(targetDoc, activeItem);
-            // if (targetDoc.scrollProgressivize) CollectionFreeFormDocumentView.updateScrollframe(targetDoc, currentFrame);
             if (activeItem.presProgressivize) CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0, targetDoc);
             else targetDoc.editing = true;
             // if (activeItem.zoomProgressivize) this.zoomProgressivizeNext(targetDoc);
@@ -1252,22 +1251,13 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         const currentFrame = Cast(tagDoc._currentFrame, "number", null);
         if (currentFrame === undefined) {
             tagDoc._currentFrame = 0;
-            CollectionFreeFormDocumentView.setupScroll(tagDoc, 0);
+            // CollectionFreeFormDocumentView.setupScroll(tagDoc, 0);
             CollectionFreeFormDocumentView.setupKeyframes(childDocs, 0);
         }
-        CollectionFreeFormDocumentView.updateScrollframe(tagDoc, currentFrame);
+        // if (tagDoc.editScrollProgressivize) CollectionFreeFormDocumentView.updateScrollframe(tagDoc, currentFrame);
         CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0, tagDoc);
         tagDoc._currentFrame = Math.max(0, (currentFrame || 0) + 1);
         tagDoc.lastFrame = Math.max(NumCast(tagDoc._currentFrame), NumCast(tagDoc.lastFrame));
-        // if (curDoc.zoomProgressivize) {
-        //     const resize = document.getElementById('resizable');
-        //     if (resize) {
-        //         resize.style.width = this.checkList(tagDoc, curDoc["viewfinder-width-indexed"]) + 'px';
-        //         resize.style.height = this.checkList(tagDoc, curDoc["viewfinder-height-indexed"]) + 'px';
-        //         resize.style.top = this.checkList(tagDoc, curDoc["viewfinder-top-indexed"]) + 'px';
-        //         resize.style.left = this.checkList(tagDoc, curDoc["viewfinder-left-indexed"]) + 'px';
-        //     }
-        // }
     }
 
     @undoBatch
@@ -1281,15 +1271,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         }
         CollectionFreeFormDocumentView.gotoKeyframe(childDocs.slice());
         tagDoc._currentFrame = Math.max(0, (currentFrame || 0) - 1);
-        // if (actItem.zoomProgressivize) {
-        //     const resize = document.getElementById('resizable');
-        //     if (resize) {
-        //         resize.style.width = this.checkList(tagDoc, actItem["viewfinder-width-indexed"]) + 'px';
-        //         resize.style.height = this.checkList(tagDoc, actItem["viewfinder-height-indexed"]) + 'px';
-        //         resize.style.top = this.checkList(tagDoc, actItem["viewfinder-top-indexed"]) + 'px';
-        //         resize.style.left = this.checkList(tagDoc, actItem["viewfinder-left-indexed"]) + 'px';
-        //     }
-        // }
     }
 
     /**
@@ -1474,7 +1455,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         activeItem.scrollProgressivize = !activeItem.scrollProgressivize;
         const targetDoc: Doc = this.targetDoc;
         targetDoc.scrollProgressivize = !targetDoc.scrollProgressivize;
-        CollectionFreeFormDocumentView.setupScroll(targetDoc, NumCast(targetDoc._currentFrame));
+        // CollectionFreeFormDocumentView.setupScroll(targetDoc, NumCast(targetDoc._currentFrame));
         if (targetDoc.editScrollProgressivize) {
             targetDoc.editScrollProgressivize = false;
             targetDoc._currentFrame = 0;
@@ -1803,7 +1784,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                 {this.topPanel}
                 {this.toolbar}
                 {this.newDocumentToolbarDropdown}
-                <div className="presBox-listCont">
+                <div className="presBox-listCont" style={{ padding: 0 }}>
                     {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 0fd32602a..d757fc1de 100644
--- a/src/client/views/presentationview/PresElementBox.scss
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -37,7 +37,7 @@ $slide-active: #5B9FDD;
         overflow: hidden;
     }
 
-    
+
 }
 
 .presItem-slide {
@@ -80,46 +80,6 @@ $slide-active: #5B9FDD;
     z-index: 1;
 }
 
-.presElementBox-buttons {
-    display: grid;
-    grid-template-rows: 15px;
-    top: 15px;
-    left: -20;
-    position: absolute;
-    width: 100%;
-    height: auto;
-
-    .presElementBox-interaction {
-        display: none;
-    }
-
-    .presElementBox-interaction-selected {
-        color: grey;
-        background-color: rgba(0, 0, 0, 0);
-        float: left;
-        padding: 0px;
-        width: 20px;
-        height: 20px;
-    }
-}
-
-.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;
@@ -152,30 +112,12 @@ $slide-active: #5B9FDD;
     overflow: hidden;
 }
 
-.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-slideButtons {
     display: flex;
     grid-column: 7;
-    width: 40px;
+    width: 60px;
     justify-self: right;
-    justify-content: space-evenly;
+    justify-content: flex-end;
 
     .slideButton {
         cursor: pointer;
@@ -188,7 +130,7 @@ $slide-active: #5B9FDD;
         font-size: 75%;
         justify-self: center;
         align-self: center;
-        background-color: rgba(0,0,0,0.5);
+        background-color: rgba(0, 0, 0, 0.5);
         color: white;
         justify-content: center;
         align-items: center;
@@ -199,37 +141,4 @@ $slide-active: #5B9FDD;
         background-color: rgba(0, 0, 0, 1);
         transform: scale(1.15);
     }
-}
-.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: relative;
-    border-radius: 100%;
-    z-index: 300;
-    width: 15px;
-    height: 15px;
-    display: flex;
-    font-size: 75%;
-    justify-self: right;
-    align-self: center;
-    background-color: rgba(0,0,0,0.5);
-    color: white;
-    justify-content: center;
-    align-items: center;
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From d6131dbdb72fe220af1857e8090b0ca67db8b22d Mon Sep 17 00:00:00 2001
From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com>
Date: Tue, 13 Oct 2020 17:37:14 +0800
Subject: updates before merge

---
 src/client/views/nodes/PresBox.scss                 |  1 -
 src/client/views/nodes/PresBox.tsx                  |  1 +
 .../views/presentationview/PresElementBox.scss      | 21 ++++++++-------------
 .../views/presentationview/PresElementBox.tsx       | 17 +++++++----------
 4 files changed, 16 insertions(+), 24 deletions(-)

(limited to 'src/client/views/nodes/PresBox.tsx')

diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index 7bc6c1dfd..ad2e7122f 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -22,7 +22,6 @@ $light-background: #ececec;
         position: relative;
         height: calc(100% - 67px);
         width: 100%;
-        margin-top: 3px;
     }
 
     .presBox-toolbar-dropdown {
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index 2af00586b..1af1d5c90 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -119,6 +119,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         this.rootDoc._replacedChrome = "replaced";
         this.layoutDoc.presStatus = "edit";
         this.layoutDoc._gridGap = 0;
+        this.layoutDoc._yMargin = 0;
         this.turnOffEdit(true);
         DocListCastAsync((Doc.UserDoc().myPresentations as Doc).data).then(async pres => {
             await Promise.all(pres!);
diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss
index d757fc1de..0e1953e7c 100644
--- a/src/client/views/presentationview/PresElementBox.scss
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -25,13 +25,12 @@ $slide-active: #5B9FDD;
     align-items: center;
 
     .presItem-number {
+        margin-top: 7px;
         font-size: 12px;
         font-weight: 700;
         text-align: center;
         justify-self: center;
-        align-self: center;
-        /* padding-right: 3%; */
-        /* width: 8%; */
+        align-self: flex-start;
         position: relative;
         display: inline-block;
         overflow: hidden;
@@ -44,7 +43,7 @@ $slide-active: #5B9FDD;
     position: relative;
     background-color: #d5dce2;
     border-radius: 5px;
-    height: calc(100% - 5px);
+    height: calc(100% - 8px);
     width: calc(100% - 5px);
     display: grid;
     grid-template-columns: max-content max-content max-content max-content auto;
@@ -68,17 +67,12 @@ $slide-active: #5B9FDD;
 }
 
 .presItem-slide.active {
-    border: solid 2px $dark-blue;
-}
-
-.presItem-slide:hover {
-    background: $slide-hover;
+    box-shadow: 0 0 0px 1.5px $dark-blue;
 }
 
-.documentView-node {
-    position: absolute;
-    z-index: 1;
-}
+// .presItem-slide:hover {
+//     background: $slide-hover;
+// }
 
 .presElementBox-time {
     align-self: center;
@@ -135,6 +129,7 @@ $slide-active: #5B9FDD;
         justify-content: center;
         align-items: center;
         transition: 0.2s;
+        margin-right: 3px;
     }
 
     .slideButton:hover {
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index 8d53c8cc6..97344d33d 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -178,21 +178,16 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
     }
 
     onPointerOver = (e: any) => {
-        console.log('pointerOver');
         document.removeEventListener("pointermove", this.onPointerMove);
         document.addEventListener("pointermove", this.onPointerMove);
     }
 
     onPointerMove = (e: PointerEvent) => {
-        console.log('pointerMove');
         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;
-        console.log(y);
-        console.log(height);
-        console.log(halfLine);
         if (DragManager.docsBeingDragged.length > 1) {
             if (y <= halfLine) {
                 slide.style.borderTop = "solid 2px #5B9FDD";
@@ -248,7 +243,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
         return (
             <div className={`presItem-container`} key={this.props.Document[Id] + this.indexInPres}
                 ref={this._itemRef}
-                style={{ backgroundColor: isSelected ? "#AEDDF8" : "rgba(0,0,0,0)" }}
+                style={{ backgroundColor: isSelected ? "#AEDDF8" : "rgba(0,0,0,0)", opacity: isDragging ? 0.3 : 1 }}
                 onClick={e => {
                     e.stopPropagation();
                     e.preventDefault();
@@ -278,9 +273,9 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                 <div className="presItem-number">
                     {`${this.indexInPres + 1}.`}
                 </div>
-                <div ref={this._dragRef} className={`presItem-slide ${isSelected ? "active" : ""}`} style={{ opacity: isDragging ? 0.3 : 1 }}>
-                    <div className="presItem-name" onClick={e => { e.stopPropagation(); this.presExpandDocumentClick(); isSelected ? console.log('selected') : console.log('not selected'); }} style={{ maxWidth: (PresBox.Instance.toolbarWidth - 70) }}>
-                        <EditableView
+                <div ref={this._dragRef} className={`presItem-slide ${isSelected ? "active" : ""}`}>
+                    <div className="presItem-name" style={{ maxWidth: (PresBox.Instance.toolbarWidth - 70) }}>
+                        {isSelected ? <EditableView
                             ref={this._titleRef}
                             contents={this.rootDoc.title}
                             GetValue={() => StrCast(this.rootDoc.title)}
@@ -288,7 +283,9 @@ 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>
-- 
cgit v1.2.3-70-g09d2


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/client/views/nodes/PresBox.tsx')

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


From f38686582cb17c40223174452a08f8ffa576e9b5 Mon Sep 17 00:00:00 2001
From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com>
Date: Tue, 13 Oct 2020 23:14:17 +0800
Subject: css mini fix :+1:

---
 src/client/views/nodes/PresBox.tsx                    | 4 ++--
 src/client/views/presentationview/PresElementBox.scss | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/client/views/nodes/PresBox.tsx')

diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index f59d6f966..9f71611a1 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -1501,7 +1501,7 @@ 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;
@@ -1512,7 +1512,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             activeItem.presProgressivize = false;
             targetDoc.presProgressivize = false;
             targetDoc._currentFrame = 0;
-            // targetDoc.editing = true;
+            targetDoc.editing = true;
         }
     }
 
diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss
index 6bd80afb8..f1bdb7737 100644
--- a/src/client/views/presentationview/PresElementBox.scss
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -118,7 +118,7 @@ $slide-active: #5B9FDD;
             width: 15px;
             height: 15px;
             display: flex;
-            font-size: 75%;
+            font-size: 10px;
             justify-self: center;
             align-self: center;
             background-color: rgba(0, 0, 0, 0.5);
-- 
cgit v1.2.3-70-g09d2


From 80ccba05db32ca09ac513f3ec370f3deef873ce7 Mon Sep 17 00:00:00 2001
From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com>
Date: Wed, 14 Oct 2020 02:45:39 +0800
Subject: update view (as button), doc.dragging q?

---
 .../views/collections/CollectionStackingView.tsx   |  4 +--
 src/client/views/nodes/PresBox.tsx                 | 33 ++++++++++++++---
 .../views/presentationview/PresElementBox.tsx      | 42 ++++++++++++++++------
 3 files changed, 61 insertions(+), 18 deletions(-)

(limited to 'src/client/views/nodes/PresBox.tsx')

diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index d41e0528d..3607b97d0 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -295,7 +295,7 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
                 if (docs) {
                     newDocs.map((doc, i) => {
                         if (i === 0) {
-                            doc.dragging = false;
+                            if (doc.presentationTargetDoc) doc.dragging = false; //glr: so it only applies to items in presentation
                             DragManager.docsBeingDragged = [];
                             if (targInd === -1) targInd = docs.length;
                             else targInd = docs.indexOf(this.filteredChildren[targInd]);
@@ -303,7 +303,7 @@ export class CollectionStackingView extends CollectionSubView<StackingDocument,
                             docs.splice(srcInd, 1);
                             docs.splice((targInd > srcInd ? targInd - 1 : targInd) + plusOne, 0, doc);
                         } else if (i < (newDocs.length / 2)) { //glr: for some reason dragged documents are duplicated
-                            doc.dragging = false;
+                            if (doc.presentationTargetDoc) doc.dragging = false;
                             DragManager.docsBeingDragged = [];
                             if (targInd === -1) targInd = docs.length;
                             else targInd = docs.indexOf(newDocs[0]) + 1;
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index 1a16e6237..8e2884968 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -1250,10 +1250,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         const currentFrame = Cast(tagDoc._currentFrame, "number", null);
         if (currentFrame === undefined) {
             tagDoc._currentFrame = 0;
-            // CollectionFreeFormDocumentView.setupScroll(tagDoc, 0);
+            CollectionFreeFormDocumentView.setupScroll(tagDoc, 0);
             CollectionFreeFormDocumentView.setupKeyframes(childDocs, 0);
         }
-        // if (tagDoc.editScrollProgressivize) CollectionFreeFormDocumentView.updateScrollframe(tagDoc, currentFrame);
+        if (tagDoc.editScrollProgressivize) CollectionFreeFormDocumentView.updateScrollframe(tagDoc, currentFrame);
         CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0, tagDoc);
         tagDoc._currentFrame = Math.max(0, (currentFrame || 0) + 1);
         tagDoc.lastFrame = Math.max(NumCast(tagDoc._currentFrame), NumCast(tagDoc.lastFrame));
@@ -1314,7 +1314,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                                 <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>
-                            <div className="ribbon-doubleButton" style={{ display: activeItem.presProgressivize ? "inline-flex" : "none" }}>
+                            {/* <div className="ribbon-doubleButton" style={{ display: activeItem.presProgressivize ? "inline-flex" : "none" }}>
                                 <div className="presBox-subheading">Active text color</div>
                                 <div className="ribbon-colorBox" style={{ backgroundColor: activeFontColor, height: 15, width: 15 }} onClick={action(() => { this.openActiveColorPicker = !this.openActiveColorPicker; })}>
                                 </div>
@@ -1325,7 +1325,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                                 <div className="ribbon-colorBox" style={{ backgroundColor: viewedFontColor, height: 15, width: 15 }} onClick={action(() => this.openViewedColorPicker = !this.openViewedColorPicker)}>
                                 </div>
                             </div>
-                            {this.viewedColorPicker}
+                            {this.viewedColorPicker} */}
                             {/* <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-toggle" style={{ backgroundColor: activeItem.zoomProgressivize ? "#aedef8" : "" }} onClick={this.progressivizeZoom}>Zoom</div>
                                 <div className="ribbon-toggle" style={{ opacity: activeItem.zoomProgressivize ? 1 : 0.4, backgroundColor: activeItem.editZoomProgressivize ? "#aedef8" : "" }} onClick={this.editZoomProgressivize}>Edit</div>
@@ -1352,6 +1352,14 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                                 </div>
                                 <Tooltip title={<><div className="dash-tooltip">{"Last frame"}</div></>}><div className="ribbon-property">{NumCast(targetDoc.lastFrame)}</div></Tooltip>
                             </div>
+                            <div className="ribbon-frameList">
+                                <div className="frameList-header">
+
+                                </div>
+                                <div className="frameList-item">
+                                    {this.frameList}
+                                </div>
+                            </div>
                             <div className="ribbon-toggle" style={{ height: 20, backgroundColor: "#AEDDF8" }} onClick={() => console.log(" TODO: play frames")}>Play</div>
                         </div>
                     </div>
@@ -1454,7 +1462,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         activeItem.scrollProgressivize = !activeItem.scrollProgressivize;
         const targetDoc: Doc = this.targetDoc;
         targetDoc.scrollProgressivize = !targetDoc.scrollProgressivize;
-        // CollectionFreeFormDocumentView.setupScroll(targetDoc, NumCast(targetDoc._currentFrame));
+        CollectionFreeFormDocumentView.setupScroll(targetDoc, NumCast(targetDoc._currentFrame));
         if (targetDoc.editScrollProgressivize) {
             targetDoc.editScrollProgressivize = false;
             targetDoc._currentFrame = 0;
@@ -1715,6 +1723,21 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         );
     }
 
+    @computed get frameList() {
+        const activeItem: Doc = this.activeItem;
+        const targetDoc: Doc = this.targetDoc;
+        const frameList: number[] = [];
+        frameList.length = NumCast(targetDoc.lastFrame);
+        const frameItems = frameList.map((value) => {
+            <div className="frameItem">
+
+            </div>
+        })
+        return <div>
+            {frameItems}
+        </div>;
+    }
+
     @computed get playButtonFrames() {
         const targetDoc: Doc = this.targetDoc;
         return (
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index b1eac5832..367bc6533 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -71,10 +71,10 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
         this.rootDoc.presExpandInlineButton = !this.rootDoc.presExpandInlineButton;
     }
 
-    embedHeight = () => 97;
+    embedHeight = (): number => 97;
     // embedWidth = () => this.props.PanelWidth();
     // embedHeight = () => Math.min(this.props.PanelWidth() - 20, this.props.PanelHeight() - this.collapsedHeight);
-    embedWidth = () => this.props.PanelWidth() - 30;
+    embedWidth = (): number => this.props.PanelWidth() - 30;
     /**
      * The function that is responsible for rendering a preview or not for this
      * presentation element.
@@ -155,7 +155,14 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
     }
 
     headerUp = (e: React.PointerEvent<HTMLDivElement>) => {
+        e.stopPropagation();
+        e.preventDefault();
+    }
+
+    stopDrag = (e: PointerEvent) => {
+        console.log('stop drag')
         const activeItem = this.rootDoc;
+        activeItem.dragging = false;
         e.stopPropagation();
         e.preventDefault();
     }
@@ -184,7 +191,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
 
     onPointerMove = (e: PointerEvent) => {
         const slide = this._itemRef.current!;
-        const rect = slide!.getBoundingClientRect();
+        const rect = slide?.getBoundingClientRect();
         let y = e.clientY - rect.top;  //y position within the element.
         let height = slide.clientHeight;
         let halfLine = height / 2;
@@ -201,9 +208,8 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
     }
 
     onPointerLeave = (e: any) => {
-        console.log('pointerLeave');
-        this._itemRef.current!.style.borderTop = "0px"
-        this._itemRef.current!.style.borderBottom = "0px"
+        this._itemRef.current!.style.borderTop = "0px";
+        this._itemRef.current!.style.borderBottom = "0px";
         document.removeEventListener("pointermove", this.onPointerMove);
     }
 
@@ -240,6 +246,10 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
     @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}
@@ -260,7 +270,6 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                     }
                 }}
                 onDoubleClick={e => {
-                    console.log('double click to open');
                     this.toggleProperties();
                     this.props.focus(this.rootDoc);
                     this.clearArrays();
@@ -274,7 +283,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                     {`${this.indexInPres + 1}.`}
                 </div>
                 <div ref={this._dragRef} className={`presItem-slide ${isSelected ? "active" : ""}`}>
-                    <div className="presItem-name" style={{ maxWidth: (PresBox.Instance.toolbarWidth - 70) }}>
+                    <div className="presItem-name" style={{ maxWidth: showMore ? (toolbarWidth - 175) : toolbarWidth - 85 }}>
                         {isSelected ? <EditableView
                             ref={this._titleRef}
                             contents={this.rootDoc.title}
@@ -287,10 +296,21 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                             this.rootDoc.title
                         }
                     </div>
-                    <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>
+                    <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>
-- 
cgit v1.2.3-70-g09d2

