merge with master

8 files changed, 247 insertions, 89 deletions

diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index 011b6ff87..900963eb0 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -510,7 +510,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent<FieldViewProps, AudioD
     labelScript = () => AudioBox.LabelScript;
 
     render() {
-        AudioBox.Instance = this;
         const interactive = SnappingManager.GetIsDragging() || this.active() ? "-interactive" : "";
         this._first = true;  // for indicating the first marker that is rendered
         this.path && this._buckets.length !== 100 ? this.peaks : null; // render waveform if audio is done recording
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index a1c934e81..d92dc0ec2 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -6,15 +6,13 @@ import { Document } from '../../../fields/documentSchemas';
 import { Id } from '../../../fields/FieldSymbols';
 import { InkTool } from '../../../fields/InkField';
 import { listSpec } from "../../../fields/Schema";
-import { SchemaHeaderField } from '../../../fields/SchemaHeaderField';
 import { ScriptField } from '../../../fields/ScriptField';
 import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from "../../../fields/Types";
 import { GetEffectiveAcl, TraceMobx } from '../../../fields/util';
 import { MobileInterface } from '../../../mobile/MobileInterface';
 import { GestureUtils } from '../../../pen-gestures/GestureUtils';
-import { emptyFunction, emptyPath, OmitKeys, returnOne, returnTransparent, Utils } from "../../../Utils";
+import { emptyFunction, OmitKeys, returnOne, returnTransparent, Utils } from "../../../Utils";
 import { GooglePhotos } from '../../apis/google_docs/GooglePhotosClientUtils';
-import { ClientRecommender } from '../../ClientRecommender';
 import { Docs, DocUtils } from "../../documents/Documents";
 import { DocumentType } from '../../documents/DocumentTypes';
 import { DocumentManager } from "../../util/DocumentManager";
@@ -22,7 +20,6 @@ import { DragManager, dropActionType } from "../../util/DragManager";
 import { InteractionUtils } from '../../util/InteractionUtils';
 import { LinkManager } from '../../util/LinkManager';
 import { Scripting } from '../../util/Scripting';
-import { SearchUtil } from '../../util/SearchUtil';
 import { SelectionManager } from "../../util/SelectionManager";
 import SharingManager from '../../util/SharingManager';
 import { SnappingManager } from '../../util/SnappingManager';
@@ -33,7 +30,6 @@ import { ContextMenu } from "../ContextMenu";
 import { ContextMenuProps } from '../ContextMenuItem';
 import { DocComponent } from "../DocComponent";
 import { EditableView } from '../EditableView';
-import { KeyphraseQueryView } from '../KeyphraseQueryView';
 import { DocumentContentsView } from "./DocumentContentsView";
 import { DocumentLinksButton } from './DocumentLinksButton';
 import "./DocumentView.scss";
@@ -767,7 +763,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
             Doc.AreProtosEqual(this.props.Document, Doc.UserDoc()) && moreItems.push({ description: "Toggle Always Show Link End", event: () => Doc.UserDoc()["documentLinksButton-hideEnd"] = !Doc.UserDoc()["documentLinksButton-hideEnd"], icon: "eye" });
         }
 
-        moreItems.push({ description: "Close", event: this.deleteClicked, icon: "trash" });
+        moreItems.push({ description: "Close", event: this.deleteClicked, icon: "times" });
 
         !more && cm.addItem({ description: "More...", subitems: moreItems, icon: "hand-point-right" });
         cm.moveAfter(cm.findByDescription("More...")!, cm.findByDescription("OnClick...")!);
@@ -819,7 +815,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     @computed get contents() {
         const pos = this.props.relative ? "relative " : "absolute";
         TraceMobx();
-        return (<div style={{ width: "100%", height: "100%" }}>
+        return (<div className="documentView-contentsView" style={{ borderRadius: "inherit", width: "100%", height: "100%" }}>
             <DocumentContentsView key={1}
                 docFilters={this.props.docFilters}
                 ContainingCollectionView={this.props.ContainingCollectionView}
diff --git a/src/client/views/nodes/FontIconBox.scss b/src/client/views/nodes/FontIconBox.scss
index 6a540269e..75bc90d7a 100644
--- a/src/client/views/nodes/FontIconBox.scss
+++ b/src/client/views/nodes/FontIconBox.scss
@@ -13,6 +13,27 @@
     width: 100%;
 }
 
+.fontIconBadge-container {
+    position:absolute;
+    z-index: 1000;
+    top: 12px;
+
+    .fontIconBadge {
+        position: absolute;
+        top: -10px;
+        right: -10px;
+        color: white;
+        background: #f44b42;
+        font-weight: 300;
+        border-radius: 100%;
+        width: 25px;
+        height: 25px;
+        text-align: center;
+        padding-top: 4px;
+        font-size: 12px;
+    }
+}
+
 .menuButton-round {
     border-radius: 100%;
     background-color: black;
diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx
index 168d640e9..fa21a8594 100644
--- a/src/client/views/nodes/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox.tsx
@@ -5,13 +5,15 @@ import { createSchema, makeInterface } from '../../../fields/Schema';
 import { DocComponent } from '../DocComponent';
 import './FontIconBox.scss';
 import { FieldView, FieldViewProps } from './FieldView';
-import { StrCast, Cast } from '../../../fields/Types';
-import { Utils } from "../../../Utils";
+import { StrCast, Cast, ScriptCast } from '../../../fields/Types';
+import { Utils, setupMoveUpEvents, returnFalse, emptyFunction } from "../../../Utils";
 import { runInAction, observable, reaction, IReactionDisposer } from 'mobx';
-import { Doc } from '../../../fields/Doc';
+import { Doc, DocListCast } from '../../../fields/Doc';
 import { ContextMenu } from '../ContextMenu';
 import { ScriptField } from '../../../fields/ScriptField';
 import { Tooltip } from '@material-ui/core';
+import { MainViewNotifs } from '../MainViewNotifs';
+import { DragManager } from '../../util/DragManager';
 const FontIconSchema = createSchema({
     icon: "string",
 });
@@ -73,6 +75,7 @@ export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>(
                 {<FontAwesomeIcon className={`menuButton-icon-${shape}`} icon={StrCast(this.dataDoc.icon, "user") as any} color={color}
                     size={this.layoutDoc.iconShape === "square" ? "sm" : "lg"} />}
                 {!label ? (null) : <div className="fontIconBox-label" style={{ color, backgroundColor }}> {label} </div>}
+                {this.props.Document.watchedDocuments ? <FontIconBadge collection={Cast(this.props.Document.watchedDocuments, Doc, null)} /> : (null)}
             </div>
         </button>;
         return !this.layoutDoc.toolTip ? button :
@@ -80,4 +83,34 @@ export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>(
                 {button}
             </Tooltip>;
     }
+}
+
+interface FontIconBadgeProps {
+    collection: Doc;
+}
+
+@observer
+export class FontIconBadge extends React.Component<FontIconBadgeProps> {
+    _notifsRef = React.createRef<HTMLDivElement>();
+
+    onPointerDown = (e: React.PointerEvent) => {
+        setupMoveUpEvents(this, e,
+            (e: PointerEvent) => {
+                const dragData = new DragManager.DocumentDragData([this.props.collection]);
+                DragManager.StartDocumentDrag([this._notifsRef.current!], dragData, e.x, e.y);
+                return true;
+            },
+            returnFalse, emptyFunction, false);
+    }
+
+    render() {
+        if (!(this.props.collection instanceof Doc)) return (null);
+        const length = DocListCast(this.props.collection.data).length;
+        return <div className="fontIconBadge-container" style={{ width: 15, height: 15, top: 12 }} ref={this._notifsRef}>
+            <div className="fontIconBadge" style={length > 0 ? { "display": "initial" } : { "display": "none" }}
+                onPointerDown={this.onPointerDown} >
+                {length}
+            </div>
+        </div>;
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index d668d332b..216c5f39e 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -158,7 +158,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps, ImageD
         if (field) {
             const funcs: ContextMenuProps[] = [];
             funcs.push({ description: "Rotate Clockwise 90", event: this.rotate, icon: "expand-arrows-alt" });
-            funcs.push({ description: "Make Background", event: () => this.layoutDoc.isBackground = true, icon: "expand-arrows-alt" });
+            funcs.push({ description: "Make Background", event: () => { this.layoutDoc.isBackground = true; this.props.bringToFront?.(this.rootDoc); }, icon: "expand-arrows-alt" });
             if (!Doc.UserDoc().noviceMode) {
                 funcs.push({ description: "Export to Google Photos", event: () => GooglePhotos.Transactions.UploadImages([this.props.Document]), icon: "caret-square-right" });
                 funcs.push({ description: "Copy path", event: () => Utils.CopyText(field.url.href), icon: "expand-arrows-alt" });
@@ -466,7 +466,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps, ImageD
                 width: this.props.PanelWidth() ? undefined : `${100 / this.props.ContentScaling()}%`,
                 height: this.props.PanelWidth() ? undefined : `${100 / this.props.ContentScaling()}%`,
                 pointerEvents: this.layoutDoc.isBackground ? "none" : undefined,
-                borderRadius: `${Number(StrCast(this.layoutDoc.borderRoundisng).replace("px", "")) / this.props.ContentScaling()}px`
+                borderRadius: `${Number(StrCast(this.layoutDoc.borderRounding).replace("px", "")) / this.props.ContentScaling()}px`
             }} >
             <CollectionFreeFormView {...this.props}
                 forceScaling={true}
diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index 54accb012..c4d8f1a4f 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -13,7 +13,7 @@ $light-background: #ececec;
     width: 100%;
     min-width: 20px;
     height: 100%;
-    min-height: 41px;
+    min-height: 35px;
     letter-spacing: 2px;
     overflow: hidden;
     transition: 0.7s opacity ease;
@@ -801,7 +801,7 @@ $light-background: #ececec;
     }
 
 
-    .miniPresOverlay {
+    .presPanelOverlay {
         background-color: #323232;
         color: white;
         border-radius: 5px;
@@ -816,7 +816,7 @@ $light-background: #ececec;
         right: 10px;
         transition: all 0.2s;
 
-        .miniPres-button-text {
+        .presPanel-button-text {
             display: flex;
             height: 20;
             width: max-content;
@@ -833,13 +833,13 @@ $light-background: #ececec;
             transition: all 0.3s;
         }
 
-        .miniPres-divider {
+        .presPanel-divider {
             width: 0.5px;
             height: 80%;
             border-right: solid 1px #5a5a5a;
         }
 
-        .miniPres-button-frame {
+        .presPanel-button-frame {
             justify-self: center;
             align-self: center;
             align-items: center;
@@ -854,7 +854,7 @@ $light-background: #ececec;
             border-radius: 5px;
         }
 
-        .miniPres-button {
+        .presPanel-button {
             cursor: pointer;
             display: flex;
             height: 20;
@@ -867,11 +867,11 @@ $light-background: #ececec;
             transition: all 0.3s;
         }
 
-        .miniPres-button:hover {
+        .presPanel-button:hover {
             background-color: #5a5a5a;
         }
 
-        .miniPres-button-text:hover {
+        .presPanel-button-text:hover {
             background-color: #5a5a5a;
         }
     }
@@ -950,4 +950,82 @@ $light-background: #ececec;
     .select {
         font-size: 100%;
     }
-}
\ No newline at end of file
+}
+
+.miniPres:hover {
+    opacity: 1;
+}
+
+.miniPres {
+    cursor: grab;
+    position: absolute;
+    overflow: hidden;
+    right: 10;
+    top: 10;
+    opacity: 0.1;
+    transition: all 0.4s;
+    /* border: solid 1px; */
+    color: white;
+    /* box-shadow: black 0.4vw 0.4vw 0.8vw; */
+    
+    .miniPresOverlay {
+        display: grid;
+        grid-template-columns: auto auto auto auto auto auto auto auto;
+        grid-template-rows: 100%;
+        height: 100%;
+        justify-items: center;
+        align-items: center;
+
+        .miniPres-button-text {
+            cursor: pointer;
+            display: flex;
+            height: 20;
+            font-weight: 400;
+            min-width: 100%;
+            border-radius: 5px;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s;
+        }
+
+        .miniPres-button-frame {
+            justify-self: center;
+            align-self: center;
+            align-items: center;
+            display: grid;
+            grid-template-columns: auto auto auto;
+            justify-content: space-around;
+            font-size: 11;
+            margin-left: 7;
+            width: 30;
+            height: 85%;
+            background-color: rgba(91, 157, 221, 0.4);
+            border-radius: 5px;
+        }
+
+        .miniPres-divider {
+            width: 0.5px;
+            height: 80%;
+            border-right: solid 2px #5a5a5a;
+        }
+
+        .miniPres-button {
+            cursor: pointer;
+            display: flex;
+            height: 20;
+            min-width: 20;
+            border-radius: 100%;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s;
+        }
+
+        .miniPres-button:hover {
+            background-color: #5a5a5a;
+        }
+
+        .miniPres-button-text:hover {
+            background-color: #5a5a5a;
+        }
+    }
+}
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index f6f6a2333..dd4c103c4 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -147,9 +147,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             // Case 3: No more frames in current doc and next slide is defined, therefore move to next slide
         } else if (this.childDocs[this.itemIndex + 1] !== undefined) {
             const nextSelected = this.itemIndex + 1;
+            if (presTargetDoc.type === DocumentType.AUDIO) AudioBox.Instance.pause();
             this.gotoDocument(nextSelected, this.itemIndex);
             const targetNext = Cast(activeNext.presentationTargetDoc, Doc, null);
             if (activeNext && targetNext.type === DocumentType.AUDIO && activeNext.playAuto) {
+                AudioBox.Instance.playFrom(0);
+                this._moveOnFromAudio = true;
             } else this._moveOnFromAudio = false;
         }
     }
@@ -228,21 +231,25 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         const docToJump = curDoc;
         const willZoom = false;
 
-        //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') {
-            this.zoomProgressivizeNext(targetDoc);
-        } else if (docToJump === curDoc) {
-            //checking if curDoc has navigation open
-            if (curDoc.presNavButton && targetDoc) {
-                await DocumentManager.Instance.jumpToDocument(targetDoc, false, undefined, srcContext);
-            } else if (curDoc.presZoomButton && targetDoc) {
+        // If openDocument is selected then it should open the document for the user
+        if (activeItem.openDocument) {
+            this.props.addDocTab(activeItem, "replace");
+        } 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') {
+                this.zoomProgressivizeNext(targetDoc);
+            } else if (docToJump === curDoc) {
+                //checking if curDoc has navigation open
+                if (curDoc.presNavButton && targetDoc) {
+                    await DocumentManager.Instance.jumpToDocument(targetDoc, false, undefined, srcContext);
+                } else if (curDoc.presZoomButton && targetDoc) {
+                    //awaiting jump so that new scale can be found, since jumping is async
+                    await DocumentManager.Instance.jumpToDocument(targetDoc, true, undefined, srcContext);
+                }
+            } else {
                 //awaiting jump so that new scale can be found, since jumping is async
-                await DocumentManager.Instance.jumpToDocument(targetDoc, true, undefined, srcContext);
+                targetDoc && await DocumentManager.Instance.jumpToDocument(targetDoc, willZoom, undefined, srcContext);
             }
-        } else {
-            //awaiting jump so that new scale can be found, since jumping is async
-            targetDoc && await DocumentManager.Instance.jumpToDocument(targetDoc, willZoom, undefined, srcContext);
-        }
         // After navigating to the document, if it is added as a presPinView then it will
         // adjust the pan and scale to that of the pinView when it was added.
         // TODO: Add option to remove presPinView 
@@ -251,10 +258,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             targetDoc._panY = activeItem.presPinViewY;
             targetDoc._viewScale = activeItem.presPinViewScale;
         }
-        // If openDocument is selected then it should open the document for the user
-        if (collectionDocView && activeItem.openDocument) {
-            collectionDocView.props.addDocTab(activeItem, "inPlace");
-        }
         // If website and has presWebsite data associated then on click it should
         // go back to that specific website
         // TODO: Add progressivize for navigating web (storing websites for given frames)
@@ -353,9 +356,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             for (var i = startSlide; i < this.childDocs.length; i++) {
                 activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
                 targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
-                if (targetDoc.presDuration && targetDoc.presTransition) {
-                    duration = NumCast(targetDoc.presDuration) + NumCast(targetDoc.presTransition);
-                } else duration = 2500;
+                duration = NumCast(targetDoc.presDuration) + NumCast(targetDoc.presTransition);
+                if (duration <= 100) { duration = 2500; }
                 if (NumCast(targetDoc.lastFrame) > 0) {
                     for (var f = 0; f < NumCast(targetDoc.lastFrame); f++) {
                         await timer(duration / NumCast(targetDoc.lastFrame));
@@ -415,17 +417,23 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
      * The method called to open the presentation as a minimized view
      * TODO: Look at old updateMinimize and compare...
      */
+    @undoBatch
+    @action
     updateMinimize = () => {
-        const srcContext = Cast(this.rootDoc.presCollection, Doc, null);
-        this.turnOffEdit();
-        if (srcContext) {
-            if (srcContext.miniPres) {
-                srcContext.miniPres = false;
-                CollectionDockingView.AddRightSplit(this.rootDoc);
-            } else {
-                srcContext.miniPres = true;
-                this.props.addDocTab?.(this.rootDoc, "close");
-            }
+        if (this.layoutDoc.inOverlay) {
+            this.layoutDoc.presStatus = 'edit';
+            Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc);
+            CollectionDockingView.AddRightSplit(this.rootDoc);
+            this.layoutDoc.inOverlay = false;
+        } else {
+            this.layoutDoc.presStatus = 'manual';
+            const pt = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
+            this.rootDoc.x = pt[0] + (this.props.PanelWidth() - 250);
+            this.rootDoc.y = pt[1] + 10;
+            this.rootDoc._height = 35;
+            this.rootDoc._width = 250;
+            this.props.addDocTab?.(this.rootDoc, "close");
+            Doc.AddDocToList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc);
         }
     }
 
@@ -465,6 +473,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                 break;
             case 'jump': //Jump Cut
                 targetDoc.presTransition = 0;
+                activeItem.presZoomButton = true;
                 activeItem.presSwitchButton = !activeItem.presSwitchButton;
                 if (activeItem.presSwitchButton) activeItem.presMovement = 'Jump cut';
                 else activeItem.presMovement = 'None';
@@ -574,8 +583,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         const anchorNode = document.activeElement as HTMLDivElement;
         if (anchorNode && anchorNode.className?.includes("lm_title")) return;
         if (e.keyCode === 27) { // Escape key
-            if (this.layoutDoc.presStatus === "edit") { this._selectedArray = []; this._eleArray = []; this._dragArray = []; }
-            else this.layoutDoc.presStatus = "edit"; if (this._presTimer) clearTimeout(this._presTimer);
+            if (this.layoutDoc.inOverlay) { this.updateMinimize(); }
+            else if (this.layoutDoc.presStatus === "edit") { this._selectedArray = []; this._eleArray = []; this._dragArray = []; }
+            else this.layoutDoc.presStatus = "edit";
+            if (this._presTimer) clearTimeout(this._presTimer);
             handled = true;
         } if ((e.metaKey || e.altKey) && e.keyCode === 65) { // Ctrl-A to select all
             if (this.layoutDoc.presStatus === "edit") {
@@ -862,6 +873,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         return effect;
     }
 
+    @undoBatch
+    @action
     applyTo = (array: Doc[]) => {
         const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
         const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
@@ -1096,7 +1109,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     @computed get presentDropdown() {
         return (
             <div className={`dropdown-play ${this.presentTools ? "active" : ""}`} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
-                <div className="dropdown-play-button" onClick={() => this.updateMinimize()}>
+                <div className="dropdown-play-button" onClick={this.updateMinimize}>
                     Minimize
                 </div>
                 <div className="dropdown-play-button" onClick={(action(() => { this.layoutDoc.presStatus = "manual"; this.turnOffEdit(); }))}>
@@ -1287,9 +1300,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             doc.editZoomProgressivize = false;
             doc.editScrollProgressivize = false;
             const targetDoc = Cast(doc.presentationTargetDoc, Doc, null);
-            targetDoc.editSnapZoomProgressivize = false;
-            targetDoc.editZoomProgressivize = false;
-            targetDoc.editScrollProgressivize = false;
+            if (targetDoc) {
+                targetDoc.editZoomProgressivize = false;
+                targetDoc.editScrollProgressivize = false;
+            }
         });
     }
 
@@ -1607,18 +1621,18 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
 
     @computed get playButtons() {
         // Case 1: There are still other frames and should go through all frames before going to next slide
-        return (<div className="miniPresOverlay" style={{ display: this.layoutDoc.presStatus !== "edit" ? "inline-flex" : "none" }}>
-            <div className="miniPres-button" onClick={this.back}><FontAwesomeIcon icon={"arrow-left"} /></div>
-            <div className="miniPres-button" onClick={() => this.startAutoPres(this.itemIndex)}><FontAwesomeIcon icon={this.layoutDoc.presStatus === "auto" ? "pause" : "play"} /></div>
-            <div className="miniPres-button" onClick={this.next}><FontAwesomeIcon icon={"arrow-right"} /></div>
-            <div className="miniPres-divider"></div>
-            <div className="miniPres-button-text" style={{ display: this.props.PanelWidth() > 250 ? "inline-flex" : "none" }}>
+        return (<div className="presPanelOverlay" style={{ display: this.layoutDoc.presStatus !== "edit" ? "inline-flex" : "none" }}>
+            <div className="presPanel-button" onClick={this.back}><FontAwesomeIcon icon={"arrow-left"} /></div>
+            <div className="presPanel-button" onClick={() => this.startAutoPres(this.itemIndex)}><FontAwesomeIcon icon={this.layoutDoc.presStatus === "auto" ? "pause" : "play"} /></div>
+            <div className="presPanel-button" onClick={this.next}><FontAwesomeIcon icon={"arrow-right"} /></div>
+            <div className="presPanel-divider"></div>
+            <div className="presPanel-button-text" style={{ display: this.props.PanelWidth() > 250 ? "inline-flex" : "none" }}>
                 Slide {this.itemIndex + 1} / {this.childDocs.length}
                 {this.playButtonFrames}
             </div>
-            <div className="miniPres-divider"></div>
-            {this.props.PanelWidth() > 250 ? <div className="miniPres-button-text" onClick={() => this.layoutDoc.presStatus = "edit"}>EXIT</div>
-                : <div className="miniPres-button" onClick={() => this.layoutDoc.presStatus = "edit"}>
+            <div className="presPanel-divider"></div>
+            {this.props.PanelWidth() > 250 ? <div className="presPanel-button-text" onClick={() => this.layoutDoc.presStatus = "edit"}>EXIT</div>
+                : <div className="presPanel-button" onClick={() => this.layoutDoc.presStatus = "edit"}>
                     <FontAwesomeIcon icon={"times"} />
                 </div>}
         </div>);
@@ -1630,28 +1644,44 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         // needed to ensure that the childDocs are loaded for looking up fields
         this.childDocs.slice();
         const mode = StrCast(this.rootDoc._viewType) as CollectionViewType;
-        return <div className="presBox-cont" style={{ minWidth: this.layoutDoc.inOverlay ? 240 : undefined }} >
-            {this.topPanel}
-            {this.toolbar}
-            {this.newDocumentToolbarDropdown}
-            <div className="presBox-listCont">
-                {mode !== CollectionViewType.Invalid ?
-                    <CollectionView {...this.props}
-                        ContainingCollectionDoc={this.props.Document}
-                        PanelWidth={this.props.PanelWidth}
-                        PanelHeight={this.panelHeight}
-                        moveDocument={returnFalse}
-                        childOpacity={returnOne}
-                        childLayoutTemplate={this.childLayoutTemplate}
-                        filterAddDocument={this.addDocumentFilter}
-                        removeDocument={returnFalse}
-                        dontRegisterView={true}
-                        focus={this.selectElement}
-                        ScreenToLocalTransform={this.getTransform} />
-                    : (null)
-                }
+        return this.layoutDoc.inOverlay ?
+            <div className="miniPres" style={{ width: 250, height: 35, background: '#323232', top: 0, zIndex: 3000000 }}>
+                {<div className="miniPresOverlay">
+                    <div className="miniPres-button" onClick={this.back}><FontAwesomeIcon icon={"arrow-left"} /></div>
+                    <div className="miniPres-button" onClick={() => this.startAutoPres(this.itemIndex)}><FontAwesomeIcon icon={this.layoutDoc.presStatus === "auto" ? "pause" : "play"} /></div>
+                    <div className="miniPres-button" onClick={this.next}><FontAwesomeIcon icon={"arrow-right"} /></div>
+                    <div className="miniPres-divider"></div>
+                    <div className="miniPres-button-text">
+                        Slide {this.itemIndex + 1} / {this.childDocs.length}
+                        {this.playButtonFrames}
+                    </div>
+                    <div className="miniPres-divider"></div>
+                    <div className="miniPres-button-text" onClick={this.updateMinimize}>EXIT</div>
+                </div>}
             </div>
-        </div>;
+            :
+            <div className="presBox-cont" style={{ minWidth: this.layoutDoc.inOverlay ? 240 : undefined }} >
+                {this.topPanel}
+                {this.toolbar}
+                {this.newDocumentToolbarDropdown}
+                <div className="presBox-listCont">
+                    {mode !== CollectionViewType.Invalid ?
+                        <CollectionView {...this.props}
+                            ContainingCollectionDoc={this.props.Document}
+                            PanelWidth={this.props.PanelWidth}
+                            PanelHeight={this.panelHeight}
+                            moveDocument={returnFalse}
+                            childOpacity={returnOne}
+                            childLayoutTemplate={this.childLayoutTemplate}
+                            filterAddDocument={this.addDocumentFilter}
+                            removeDocument={returnFalse}
+                            dontRegisterView={true}
+                            focus={this.selectElement}
+                            ScreenToLocalTransform={this.getTransform} />
+                        : (null)
+                    }
+                </div>
+            </div>;
     }
 }
 Scripting.addGlobal(function lookupPresBoxField(container: Doc, field: string, data: Doc) {
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index f1eb5ef09..8c05d3603 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -648,7 +648,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
 
         const options = cm.findByDescription("Options...");
         const optionItems = options && "subitems" in options ? options.subitems : [];
-        !Doc.UserDoc().noviceMode && optionItems.push({ description: this.Document._singleLine ? "Make Single Line" : "Make Multi Line", event: () => this.layoutDoc._singleLine = !this.layoutDoc._singleLine, icon: "expand-arrows-alt" });
+        !Doc.UserDoc().noviceMode && optionItems.push({ description: !this.Document._singleLine ? "Make Single Line" : "Make Multi Line", event: () => this.layoutDoc._singleLine = !this.layoutDoc._singleLine, icon: "expand-arrows-alt" });
         optionItems.push({ description: `${this.Document._autoHeight ? "Lock" : "Auto"} Height`, event: () => this.layoutDoc._autoHeight = !this.layoutDoc._autoHeight, icon: "plus" });
         optionItems.push({ description: `${!this.layoutDoc._nativeWidth || !this.layoutDoc._nativeHeight ? "Lock" : "Unlock"} Aspect`, event: this.toggleNativeDimensions, icon: "snowflake" });
         !options && cm.addItem({ description: "Options...", subitems: optionItems, icon: "eye" });
@@ -1580,6 +1580,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
                         onScroll={this.onscrolled} onDrop={this.ondrop} >
                         <div className={`formattedTextBox-inner${rounded}${selclass}`} ref={this.createDropTarget}
                             style={{
+                                overflow: this.layoutDoc._singleLine ? "hidden" : undefined,
                                 padding: this.layoutDoc._textBoxPadding ? StrCast(this.layoutDoc._textBoxPadding) : `${Math.max(0, NumCast(this.layoutDoc._yMargin, this.props.yMargin || 0) + selPad)}px  ${NumCast(this.layoutDoc._xMargin, this.props.xMargin || 0) + selPad}px`,
                                 pointerEvents: !this.props.active() ? ((this.layoutDoc.isLinkButton || this.props.onClick) ? "none" : undefined) : undefined
                             }}