From 66bcfb6364ca5d8b4a0fd26139966ea9d6c12f87 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Wed, 22 Jul 2020 18:07:45 -0500
Subject: adding buttons

---
 src/client/views/PropertiesButtons.tsx | 296 +++++++++++++++++++++++++++++++++
 1 file changed, 296 insertions(+)
 create mode 100644 src/client/views/PropertiesButtons.tsx

(limited to 'src/client/views/PropertiesButtons.tsx')

diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
new file mode 100644
index 000000000..842d0320f
--- /dev/null
+++ b/src/client/views/PropertiesButtons.tsx
@@ -0,0 +1,296 @@
+import { IconProp, library } from '@fortawesome/fontawesome-svg-core';
+import { faArrowAltCircleDown, faArrowAltCircleRight, faArrowAltCircleUp, faCheckCircle, faCloudUploadAlt, faLink, faPhotoVideo, faShare, faStopCircle, faSyncAlt, faTag, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { action, computed, observable, runInAction } from "mobx";
+import { observer } from "mobx-react";
+import { Doc, DocListCast } from "../../fields/Doc";
+import { RichTextField } from '../../fields/RichTextField';
+import { Cast, NumCast } from "../../fields/Types";
+import { emptyFunction, setupMoveUpEvents } from "../../Utils";
+import GoogleAuthenticationManager from '../apis/GoogleAuthenticationManager';
+import { Pulls, Pushes } from '../apis/google_docs/GoogleApiClientUtils';
+import { Docs, DocUtils } from '../documents/Documents';
+import { DragManager } from '../util/DragManager';
+import { CollectionDockingView, DockedFrameRenderer } from './collections/CollectionDockingView';
+import { ParentDocSelector } from './collections/ParentDocumentSelector';
+import './collections/ParentDocumentSelector.scss';
+import './PropertiesButtons.scss';
+import { MetadataEntryMenu } from './MetadataEntryMenu';
+import { DocumentView } from './nodes/DocumentView';
+import { GoogleRef } from "./nodes/formattedText/FormattedTextBox";
+import { TemplateMenu } from "./TemplateMenu";
+import { Template, Templates } from "./Templates";
+import React = require("react");
+import { Tooltip } from '@material-ui/core';
+const higflyout = require("@hig/flyout");
+export const { anchorPoints } = higflyout;
+export const Flyout = higflyout.default;
+
+library.add(faLink);
+library.add(faTag);
+library.add(faTimes);
+library.add(faArrowAltCircleDown);
+library.add(faArrowAltCircleUp);
+library.add(faArrowAltCircleRight);
+library.add(faStopCircle);
+library.add(faCheckCircle);
+library.add(faCloudUploadAlt);
+library.add(faSyncAlt);
+library.add(faShare);
+library.add(faPhotoVideo);
+
+const cloud: IconProp = "cloud-upload-alt";
+const fetch: IconProp = "sync-alt";
+
+enum UtilityButtonState {
+    Default,
+    OpenRight,
+    OpenExternally
+}
+
+@observer
+export class PropertiesButtons extends React.Component<{ doc: Doc }, {}> {
+    private _dragRef = React.createRef<HTMLDivElement>();
+    private _pullAnimating = false;
+    private _pushAnimating = false;
+    private _pullColorAnimating = false;
+
+    @observable private pushIcon: IconProp = "arrow-alt-circle-up";
+    @observable private pullIcon: IconProp = "arrow-alt-circle-down";
+    @observable private pullColor: string = "white";
+    @observable public isAnimatingFetch = false;
+    @observable public isAnimatingPulse = false;
+
+    @observable private openHover: UtilityButtonState = UtilityButtonState.Default;
+
+    @observable public static Instance: PropertiesButtons;
+    public static hasPushedHack = false;
+    public static hasPulledHack = false;
+
+    public startPullOutcome = action((success: boolean) => {
+        if (!this._pullAnimating) {
+            this._pullAnimating = true;
+            this.pullIcon = success ? "check-circle" : "stop-circle";
+            setTimeout(() => runInAction(() => {
+                this.pullIcon = "arrow-alt-circle-down";
+                this._pullAnimating = false;
+            }), 1000);
+        }
+    });
+
+    public startPushOutcome = action((success: boolean) => {
+        this.isAnimatingPulse = false;
+        if (!this._pushAnimating) {
+            this._pushAnimating = true;
+            this.pushIcon = success ? "check-circle" : "stop-circle";
+            setTimeout(() => runInAction(() => {
+                this.pushIcon = "arrow-alt-circle-up";
+                this._pushAnimating = false;
+            }), 1000);
+        }
+    });
+
+    public setPullState = action((unchanged: boolean) => {
+        this.isAnimatingFetch = false;
+        if (!this._pullColorAnimating) {
+            this._pullColorAnimating = true;
+            this.pullColor = unchanged ? "lawngreen" : "red";
+            setTimeout(this.clearPullColor, 1000);
+        }
+    });
+
+    private clearPullColor = action(() => {
+        this.pullColor = "white";
+        this._pullColorAnimating = false;
+    });
+
+    //get view0() { return this.props.views()?.[0]; }
+
+    @computed
+    get considerGoogleDocsPush() {
+        const targetDoc = this.props.doc;
+        const published = targetDoc && Doc.GetProto(targetDoc)[GoogleRef] !== undefined;
+        const animation = this.isAnimatingPulse ? "shadow-pulse 1s linear infinite" : "none";
+        return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{`${published ? "Push" : "Publish"} to Google Docs`}</div></>}>
+            <div
+                className="propertiesButtons-linker"
+                style={{ animation }}
+                onClick={async () => {
+                    await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken();
+                    !published && runInAction(() => this.isAnimatingPulse = true);
+                    PropertiesButtons.hasPushedHack = false;
+                    targetDoc[Pushes] = NumCast(targetDoc[Pushes]) + 1;
+                }}>
+                <FontAwesomeIcon className="documentdecorations-icon" icon={published ? (this.pushIcon as any) : cloud} size={published ? "sm" : "xs"} />
+            </div></Tooltip>;
+    }
+
+    @computed
+    get considerGoogleDocsPull() {
+        const targetDoc = this.props.doc;
+        const dataDoc = targetDoc && Doc.GetProto(targetDoc);
+        const animation = this.isAnimatingFetch ? "spin 0.5s linear infinite" : "none";
+
+        const title = (() => {
+            switch (this.openHover) {
+                default:
+                case UtilityButtonState.Default: return `${!dataDoc?.unchanged ? "Pull from" : "Fetch"} Google Docs`;
+                case UtilityButtonState.OpenRight: return "Open in Right Split";
+                case UtilityButtonState.OpenExternally: return "Open in new Browser Tab";
+            }
+        })();
+
+        return !targetDoc || !dataDoc || !dataDoc[GoogleRef] ? (null) : <Tooltip
+            title={<><div className="dash-tooltip">{title}</div></>}>
+            <div className="propertiesButtons-linker"
+                style={{ backgroundColor: this.pullColor }}
+                onPointerEnter={action(e => {
+                    if (e.altKey) {
+                        this.openHover = UtilityButtonState.OpenExternally;
+                    } else if (e.shiftKey) {
+                        this.openHover = UtilityButtonState.OpenRight;
+                    }
+                })}
+                onPointerLeave={action(() => this.openHover = UtilityButtonState.Default)}
+                onClick={async e => {
+                    const googleDocUrl = `https://docs.google.com/document/d/${dataDoc[GoogleRef]}/edit`;
+                    if (e.shiftKey) {
+                        e.preventDefault();
+                        let googleDoc = await Cast(dataDoc.googleDoc, Doc);
+                        if (!googleDoc) {
+                            const options = { _width: 600, _nativeWidth: 960, _nativeHeight: 800, isAnnotating: false, UseCors: false };
+                            googleDoc = Docs.Create.WebDocument(googleDocUrl, options);
+                            dataDoc.googleDoc = googleDoc;
+                        }
+                        CollectionDockingView.AddRightSplit(googleDoc);
+                    } else if (e.altKey) {
+                        e.preventDefault();
+                        window.open(googleDocUrl);
+                    } else {
+                        this.clearPullColor();
+                        PropertiesButtons.hasPulledHack = false;
+                        targetDoc[Pulls] = NumCast(targetDoc[Pulls]) + 1;
+                        dataDoc.unchanged && runInAction(() => this.isAnimatingFetch = true);
+                    }
+                }}>
+                <FontAwesomeIcon className="documentdecorations-icon" size="sm"
+                    style={{ WebkitAnimation: animation, MozAnimation: animation }}
+                    icon={(() => {
+                        switch (this.openHover) {
+                            default:
+                            case UtilityButtonState.Default: return dataDoc.unchanged === false ? (this.pullIcon as any) : fetch;
+                            case UtilityButtonState.OpenRight: return "arrow-alt-circle-right";
+                            case UtilityButtonState.OpenExternally: return "share";
+                        }
+                    })()}
+                />
+            </div></Tooltip>;
+    }
+    @computed
+    get pinButton() {
+        const targetDoc = this.props.doc;
+        const isPinned = targetDoc && Doc.isDocPinned(targetDoc);
+        return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : "Pin to presentation"}</div></>}>
+            <div className="propertiesButtons-linker"
+                style={{ backgroundColor: isPinned ? "black" : "white", color: isPinned ? "white" : "black" }}
+                onClick={e => DockedFrameRenderer.PinDoc(targetDoc, isPinned)}>
+                <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin"
+                />
+            </div></Tooltip>;
+    }
+
+    @computed
+    get metadataButton() {
+        //const view0 = this.view0;
+        return <Tooltip title={<><div className="dash-tooltip">Show metadata panel</div></>}>
+            <div className="propertiesButtons-linkFlyout">
+                <Flyout anchorPoint={anchorPoints.LEFT_TOP}
+                    content={<MetadataEntryMenu docs={[this.props.doc]} suggestWithFunction />  /* tfs: @bcz This might need to be the data document? */}>
+                    <div className={"propertiesButtons-linkButton-" + "empty"} onPointerDown={e => e.stopPropagation()} >
+                        {<FontAwesomeIcon className="documentdecorations-icon" icon="tag" size="sm" />}
+                    </div>
+                </Flyout>
+            </div></Tooltip>;
+    }
+
+    // @computed
+    // get contextButton() {
+    //     return <ParentDocSelector Document={this.Document} addDocTab={(doc, where) => {
+    //         where === "onRight" ? CollectionDockingView.AddRightSplit(doc) :
+    //                 this.props.doc.props.addDocTab(doc, "onRight");
+    //         return true;
+    //     }} />;
+    // }
+
+    @observable _aliasDown = false;
+    onAliasButtonDown = (e: React.PointerEvent): void => {
+        //setupMoveUpEvents(this, e, this.onAliasButtonMoved, emptyFunction, emptyFunction);
+
+    }
+
+    // onAliasButtonMoved = () => {
+    //     if (this._dragRef.current) {
+    //         const dragDocView = this.props.doc!;
+    //         if (dragDocView.props){
+    //             const dragData = new DragManager.DocumentDragData([dragDocView.props.Document]);
+    //             const [left, top] = dragDocView.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
+    //             dragData.dropAction = "alias";
+    //             DragManager.StartDocumentDrag([dragDocView.ContentDiv!], dragData, left, top, {
+    //             offsetX: dragData.offset[0],
+    //             offsetY: dragData.offset[1],
+    //             hideSource: false
+    //         });
+    //         return true;
+    //         }
+
+    //     }
+    //     return false;
+    // }
+
+    // @computed
+    // get templateButton() {
+    //     //const view0 = this.view0;
+    //     const templates: Map<Template, boolean> = new Map();
+    //     //const views = this.props.views();
+    //     Array.from(Object.values(Templates.TemplateList)).map(template =>
+    //         templates.set(template, views.reduce((checked, doc) => checked || doc?.props.Document["_show" + template.Name] ? true : false, false as boolean)));
+    //     return !this.props.doc ? (null) :
+    //         <Tooltip title={<><div className="dash-tooltip">Tap: Customize layout.  Drag: Create alias</div></>}>
+    //             <div className="propertiesButtons-linkFlyout" ref={this._dragRef}>
+    //                 <Flyout anchorPoint={anchorPoints.LEFT_TOP} onOpen={action(() => this._aliasDown = true)} onClose={action(() => this._aliasDown = false)}
+    //                     content={!this._aliasDown ? (null) : <TemplateMenu docViews={views.filter(v => v).map(v => v as DocumentView)} templates={templates} />}>
+    //                     <div className={"propertiesButtons-linkButton-empty"} ref={this._dragRef} onPointerDown={this.onAliasButtonDown} >
+    //                         {<FontAwesomeIcon className="documentdecorations-icon" icon="edit" size="sm" />}
+    //                     </div>
+    //                 </Flyout>
+    //             </div></Tooltip>;
+    // }
+
+    render() {
+        if (!this.props.doc) return (null);
+
+        const isText = this.props.doc[Doc.LayoutFieldKey(this.props.doc)] instanceof RichTextField;
+        const considerPull = isText && this.considerGoogleDocsPull;
+        const considerPush = isText && this.considerGoogleDocsPush;
+        return <div className="propertiesButtons">
+            {/* <div className="propertiesButtons-button">
+                {this.templateButton}
+            </div> */}
+            <div className="propertiesButtons-button">
+                {this.metadataButton}
+            </div>
+            {/* <div className="propertiesButtons-button">
+                {this.contextButton}
+            </div> */}
+            <div className="propertiesButtons-button">
+                {this.pinButton}
+            </div>
+            <div className="propertiesButtons-button" style={{ display: !considerPush ? "none" : "" }}>
+                {this.considerGoogleDocsPush}
+            </div>
+            <div className="propertiesButtons-button" style={{ display: !considerPull ? "none" : "" }}>
+                {this.considerGoogleDocsPull}
+            </div>
+        </div>;
+    }
+}
-- 
cgit v1.2.3-70-g09d2


From 831fbc76ec1c6e9829da547cdef791ac087677d9 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Thu, 23 Jul 2020 11:08:54 -0500
Subject: moved right panel into mainview

---
 src/client/util/SelectionManager.ts                |  24 +++
 src/client/views/MainView.scss                     |  38 ++++
 src/client/views/MainView.tsx                      |  65 ++++++-
 src/client/views/PropertiesButtons.tsx             |  39 +++--
 src/client/views/collections/CollectionView.scss   |  34 ----
 src/client/views/collections/CollectionView.tsx    |  49 +-----
 .../collectionFreeForm/PropertiesView.tsx          | 193 +++++++++++++--------
 7 files changed, 262 insertions(+), 180 deletions(-)

(limited to 'src/client/views/PropertiesButtons.tsx')

diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index 9a968aeda..6fb758eac 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -12,9 +12,14 @@ export namespace SelectionManager {
 
         @observable IsDragging: boolean = false;
         SelectedDocuments: ObservableMap<DocumentView, boolean> = new ObservableMap();
+
+        @observable public lastSelection: DocumentView | undefined;
+
         @action
         SelectDoc(docView: DocumentView, ctrlPressed: boolean): void {
 
+            this.lastSelection = docView;
+
             // if doc is not in SelectedDocuments, add it
             if (!manager.SelectedDocuments.get(docView)) {
                 if (!ctrlPressed) {
@@ -33,6 +38,15 @@ export namespace SelectionManager {
         }
         @action
         DeselectDoc(docView: DocumentView): void {
+
+            if (this.lastSelection === docView) {
+                const list = Array.from(manager.SelectedDocuments.keys());
+                if (list.length > 0) {
+                    this.lastSelection = list[list.length - 1];
+                } else {
+                    this.lastSelection = undefined;
+                }
+            }
             if (manager.SelectedDocuments.get(docView)) {
                 manager.SelectedDocuments.delete(docView);
                 docView.props.whenActiveChanged(false);
@@ -41,10 +55,16 @@ export namespace SelectionManager {
         }
         @action
         DeselectAll(): void {
+            this.lastSelection = undefined;
             Array.from(manager.SelectedDocuments.keys()).map(dv => dv.props.whenActiveChanged(false));
             manager.SelectedDocuments.clear();
             Doc.UserDoc().activeSelection = new List<Doc>([]);
         }
+
+        @action
+        getLast(): DocumentView | undefined {
+            return this.lastSelection;
+        }
     }
 
     const manager = new Manager();
@@ -56,6 +76,10 @@ export namespace SelectionManager {
         manager.SelectDoc(docView, ctrlPressed);
     }
 
+    export function LastSelection(): DocumentView | undefined {
+        return manager.getLast();
+    }
+
     // computed functions, such as used in IsSelected generate errors if they're called outside of a
     // reaction context.  Specifying the context with 'outsideReaction' allows an efficiency feature
     // to avoid unnecessary mobx invalidations when running inside a reaction.
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index 55280b231..f64129600 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -102,6 +102,44 @@
     user-select: none;
 }
 
+.mainView-propertiesDragger {
+    background-color: rgb(140, 139, 139);
+    height: 55px;
+    width: 15.5px;
+    position: absolute;
+    top: 55%;
+    border: 1px black solid;
+    border-radius: 0;
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+    border-right: unset;
+    z-index: 2;
+
+    .mainView-propertiesDragger-icon {
+        width: 10px;
+        height: 10px;
+        float: left;
+        margin-left: 3px;
+        padding-top: 19px;
+    }
+
+    &:hover {
+        cursor: pointer;
+    }
+}
+
+.mainiView-propertiesView {
+    display: flex;
+    flex-direction: column;
+    width: 200px;
+    height: 100%;
+    position: absolute;
+    right: 0;
+    top: 0;
+    border-left: solid 1px;
+    z-index: 10;
+}
+
 .mainView-flyoutContainer {
     display: flex;
     flex-direction: column;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 766626a82..88f072493 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -21,10 +21,10 @@ import { Doc, DocListCast, Field, Opt } from '../../fields/Doc';
 import { Id } from '../../fields/FieldSymbols';
 import { List } from '../../fields/List';
 import { listSpec } from '../../fields/Schema';
-import { BoolCast, Cast, FieldValue, StrCast } from '../../fields/Types';
+import { BoolCast, Cast, FieldValue, StrCast, NumCast } from '../../fields/Types';
 import { TraceMobx } from '../../fields/util';
 import { CurrentUserUtils } from '../util/CurrentUserUtils';
-import { emptyFunction, emptyPath, returnFalse, returnOne, returnZero, returnTrue, Utils, returnEmptyFilter } from '../../Utils';
+import { emptyFunction, emptyPath, returnFalse, returnOne, returnZero, returnTrue, Utils, returnEmptyFilter, setupMoveUpEvents } from '../../Utils';
 import GoogleAuthenticationManager from '../apis/GoogleAuthenticationManager';
 import { DocServer } from '../DocServer';
 import { Docs, DocumentOptions } from '../documents/Documents';
@@ -66,7 +66,9 @@ import { LinkDescriptionPopup } from './nodes/LinkDescriptionPopup';
 import FormatShapePane from "./collections/collectionFreeForm/FormatShapePane";
 import HypothesisAuthenticationManager from '../apis/HypothesisAuthenticationManager';
 import CollectionMenu from './collections/CollectionMenu';
-import { Tooltip } from '@material-ui/core';
+import { Tooltip, AccordionActions } from '@material-ui/core';
+import { PropertiesView } from './collections/collectionFreeForm/PropertiesView';
+import { SelectionManager } from '../util/SelectionManager';
 
 @observer
 export class MainView extends React.Component {
@@ -90,9 +92,24 @@ export class MainView extends React.Component {
 
     @observable public sidebarContent: any = this.userDoc?.["tabs-panelContainer"];
     @observable public panelContent: string = "none";
+    @observable public showProperties: boolean = false;
 
+    @computed get selectedDocumentView() { return SelectionManager.LastSelection(); }
+    @observable selectedDoc: Doc | undefined = this.selectedDocumentView?.props.Document;
+    @observable selectedDataDoc: Doc | undefined = this.selectedDocumentView?.props.DataDoc ? this.selectedDocumentView.props.DataDoc : this.selectedDoc;
     public isPointerDown = false;
 
+    @observable _propertiesWidth: number = 0;
+    propertiesWidth = () => Math.max(0, Math.min(this._panelWidth - 50, this._propertiesWidth));
+
+    @computed get propertiesIcon() {
+        if (this.propertiesWidth() < 10) {
+            return "chevron-left";
+        } else {
+            return "chevron-right";
+        }
+    }
+
     componentDidMount() {
         DocServer.setPlaygroundFields(["dataTransition", "_viewTransition", "_panX", "_panY", "_viewScale", "_viewType", "_chromeStatus"]); // can play with these fields on someone else's
 
@@ -216,7 +233,7 @@ export class MainView extends React.Component {
         const freeformOptions: DocumentOptions = {
             x: 0,
             y: 400,
-            _width: this._panelWidth * .7,
+            _width: this._panelWidth * .7 - this._propertiesWidth,
             _height: this._panelHeight,
             title: "Collection " + workspaceCount,
         };
@@ -282,10 +299,13 @@ export class MainView extends React.Component {
 
     @action
     onResize = (r: any) => {
-        this._panelWidth = r.offset.width;
+        this._panelWidth = r.offset.width - this._propertiesWidth;
         this._panelHeight = r.offset.height;
     }
-    getPWidth = () => this._panelWidth;
+
+    @action
+    getPWidth = () => this._panelWidth - this._propertiesWidth;
+
     getPHeight = () => this._panelHeight;
     getContentsHeight = () => this._panelHeight - this._buttonBarHeight;
 
@@ -329,7 +349,6 @@ export class MainView extends React.Component {
             NativeWidth={returnZero}
             PanelWidth={this.getPWidth}
             PanelHeight={this.getPHeight}
-            renderDepth={0}
             focus={emptyFunction}
             parentActive={returnTrue}
             whenActiveChanged={emptyFunction}
@@ -570,6 +589,30 @@ export class MainView extends React.Component {
         }
     }
 
+    @action
+    onDown = (e: React.PointerEvent) => {
+        setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => {
+            this._propertiesWidth = this._panelWidth - Math.max(Transform.Identity().transformPoint(e.clientX, 0)[0], 0);
+            return false;
+        }), returnFalse, action(() => this._propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._panelWidth - 50, 200) : 0), false);
+    }
+
+    @computed get propertiesView() {
+        TraceMobx();
+        return this._propertiesWidth === 0 ? (null) :
+            <div className="mainView-propertiesView" style={{
+                width: `${this.propertiesWidth()}px`,
+                overflow: this.propertiesWidth() < 15 ? "hidden" : undefined
+            }}>
+                <PropertiesView
+                    width={this._propertiesWidth}
+                    height={this._panelHeight}
+                    renderDepth={1}
+                    ScreenToLocalTransform={Transform.Identity}
+                />
+            </div>;
+    }
+
     @computed get mainContent() {
         const n = (RichTextMenu.Instance?.Pinned ? 1 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0);
         const height = `calc(100% - ${n * Number(ANTIMODEMENU_HEIGHT.replace("px", ""))}px)`;
@@ -606,6 +649,14 @@ export class MainView extends React.Component {
                         </div>
                     </div>
                     {this.dockingContent}
+                    {this.showProperties ? (null) :
+                        <div className="mainView-propertiesDragger" title="Properties View Dragger" onPointerDown={this.onDown}
+                            style={{ right: this._propertiesWidth - 1, top: "45%" }}>
+                            <div className="mainView-propertiesDragger-icon">
+                                <FontAwesomeIcon icon={this.propertiesIcon} color="white" size="sm" /> </div>
+                        </div>
+                    }
+                    {this.propertiesWidth() < 10 ? (null) : this.propertiesView}
                 </div>
             </div>);
     }
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 842d0320f..1b06a41fa 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -22,6 +22,7 @@ import { TemplateMenu } from "./TemplateMenu";
 import { Template, Templates } from "./Templates";
 import React = require("react");
 import { Tooltip } from '@material-ui/core';
+import { SelectionManager } from '../util/SelectionManager';
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -49,7 +50,7 @@ enum UtilityButtonState {
 }
 
 @observer
-export class PropertiesButtons extends React.Component<{ doc: Doc }, {}> {
+export class PropertiesButtons extends React.Component<{}, {}> {
     private _dragRef = React.createRef<HTMLDivElement>();
     private _pullAnimating = false;
     private _pushAnimating = false;
@@ -67,6 +68,9 @@ export class PropertiesButtons extends React.Component<{ doc: Doc }, {}> {
     public static hasPushedHack = false;
     public static hasPulledHack = false;
 
+    @observable selectedDocumentView: DocumentView | undefined = SelectionManager.LastSelection();
+    @observable selectedDoc: Doc | undefined = this.selectedDocumentView?.props.Document;
+
     public startPullOutcome = action((success: boolean) => {
         if (!this._pullAnimating) {
             this._pullAnimating = true;
@@ -108,7 +112,7 @@ export class PropertiesButtons extends React.Component<{ doc: Doc }, {}> {
 
     @computed
     get considerGoogleDocsPush() {
-        const targetDoc = this.props.doc;
+        const targetDoc = this.selectedDoc;
         const published = targetDoc && Doc.GetProto(targetDoc)[GoogleRef] !== undefined;
         const animation = this.isAnimatingPulse ? "shadow-pulse 1s linear infinite" : "none";
         return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{`${published ? "Push" : "Publish"} to Google Docs`}</div></>}>
@@ -127,7 +131,7 @@ export class PropertiesButtons extends React.Component<{ doc: Doc }, {}> {
 
     @computed
     get considerGoogleDocsPull() {
-        const targetDoc = this.props.doc;
+        const targetDoc = this.selectedDoc;
         const dataDoc = targetDoc && Doc.GetProto(targetDoc);
         const animation = this.isAnimatingFetch ? "spin 0.5s linear infinite" : "none";
 
@@ -188,7 +192,7 @@ export class PropertiesButtons extends React.Component<{ doc: Doc }, {}> {
     }
     @computed
     get pinButton() {
-        const targetDoc = this.props.doc;
+        const targetDoc = this.selectedDoc;
         const isPinned = targetDoc && Doc.isDocPinned(targetDoc);
         return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : "Pin to presentation"}</div></>}>
             <div className="propertiesButtons-linker"
@@ -202,15 +206,20 @@ export class PropertiesButtons extends React.Component<{ doc: Doc }, {}> {
     @computed
     get metadataButton() {
         //const view0 = this.view0;
-        return <Tooltip title={<><div className="dash-tooltip">Show metadata panel</div></>}>
-            <div className="propertiesButtons-linkFlyout">
-                <Flyout anchorPoint={anchorPoints.LEFT_TOP}
-                    content={<MetadataEntryMenu docs={[this.props.doc]} suggestWithFunction />  /* tfs: @bcz This might need to be the data document? */}>
-                    <div className={"propertiesButtons-linkButton-" + "empty"} onPointerDown={e => e.stopPropagation()} >
-                        {<FontAwesomeIcon className="documentdecorations-icon" icon="tag" size="sm" />}
-                    </div>
-                </Flyout>
-            </div></Tooltip>;
+        if (this.selectedDoc) {
+            return <Tooltip title={<><div className="dash-tooltip">Show metadata panel</div></>}>
+                <div className="propertiesButtons-linkFlyout">
+                    <Flyout anchorPoint={anchorPoints.LEFT_TOP}
+                        content={<MetadataEntryMenu docs={[this.selectedDoc]} suggestWithFunction />  /* tfs: @bcz This might need to be the data document? */}>
+                        <div className={"propertiesButtons-linkButton-" + "empty"} onPointerDown={e => e.stopPropagation()} >
+                            {<FontAwesomeIcon className="documentdecorations-icon" icon="tag" size="sm" />}
+                        </div>
+                    </Flyout>
+                </div></Tooltip>;
+        } else {
+            return null;
+        }
+
     }
 
     // @computed
@@ -267,9 +276,9 @@ export class PropertiesButtons extends React.Component<{ doc: Doc }, {}> {
     // }
 
     render() {
-        if (!this.props.doc) return (null);
+        if (!this.selectedDoc) return (null);
 
-        const isText = this.props.doc[Doc.LayoutFieldKey(this.props.doc)] instanceof RichTextField;
+        const isText = this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof RichTextField;
         const considerPull = isText && this.considerGoogleDocsPull;
         const considerPush = isText && this.considerGoogleDocsPush;
         return <div className="propertiesButtons">
diff --git a/src/client/views/collections/CollectionView.scss b/src/client/views/collections/CollectionView.scss
index 585f6865e..a5aef86de 100644
--- a/src/client/views/collections/CollectionView.scss
+++ b/src/client/views/collections/CollectionView.scss
@@ -25,40 +25,6 @@
         z-index: 2;
     }
 
-    .collectionView-propertiesDragger {
-        background-color: rgb(140, 139, 139);
-        height: 55px;
-        width: 15.5px;
-        position: absolute;
-        top: 55%;
-        border: 1px black solid;
-        border-radius: 0;
-        border-top-left-radius: 10px;
-        border-bottom-left-radius: 10px;
-        border-right: unset;
-        z-index: 2;
-
-        .collectionView-propertiesDragger-icon {
-            width: 10px;
-            height: 10px;
-            float: left;
-            margin-left: 3px;
-            padding-top: 19px;
-        }
-    }
-
-    .collectionView-propertiesView {
-        display: flex;
-        flex-direction: column;
-        width: 200px;
-        height: 100%;
-        position: absolute;
-        right: 0;
-        top: 0;
-        border-left: solid 1px;
-        z-index: 10;
-    }
-
     .collectionTimeView-treeView {
         display: flex;
         flex-direction: column;
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 853321d3c..19a82a113 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -49,7 +49,6 @@ import { CollectionTreeView } from "./CollectionTreeView";
 import './CollectionView.scss';
 import CollectionMenu from './CollectionMenu';
 import { SharingPermissions } from '../../util/SharingManager';
-import { PropertiesView } from './collectionFreeForm/PropertiesView';
 import { DocumentView } from '../nodes/DocumentView';
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
@@ -369,22 +368,9 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
     get _facetWidth() { return NumCast(this.props.Document._facetWidth); }
     set _facetWidth(value) { this.props.Document._facetWidth = value; }
 
-    get _propertiesWidth() { return NumCast(this.props.Document._propertiesWidth); }
-    set _propertiesWidth(value) { this.props.Document._propertiesWidth = value; }
-
-    bodyPanelWidth = () => this.props.PanelWidth() - this.propertiesWidth();
+    bodyPanelWidth = () => this.props.PanelWidth();
     facetWidth = () => Math.max(0, Math.min(this.props.PanelWidth() - 25, this._facetWidth));
 
-    propertiesWidth = () => Math.max(0, Math.min(this.props.PanelWidth() - 25, this._propertiesWidth));
-
-    @computed get propertiesIcon() {
-        if (this.propertiesWidth() < 10) {
-            return "chevron-left";
-        } else {
-            return "chevron-right";
-        }
-    }
-
     @computed get dataDoc() {
         return (this.props.DataDoc && this.props.Document.isTemplateForField ? Doc.GetProto(this.props.DataDoc) :
             this.props.Document.resolvedDataDoc ? this.props.Document : Doc.GetProto(this.props.Document)); // if the layout document has a resolvedDataDoc, then we don't want to get its parent which would be the unexpanded template
@@ -505,13 +491,6 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
         }), returnFalse, action(() => this._facetWidth = this.facetWidth() < 15 ? Math.min(this.props.PanelWidth() - 25, 200) : 0), false);
     }
 
-    onDown = (e: React.PointerEvent) => {
-        setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => {
-            this._propertiesWidth = this.props.PanelWidth() - Math.max(this.props.ScreenToLocalTransform().transformPoint(e.clientX, 0)[0], 0);
-            return false;
-        }), returnFalse, action(() => this._propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this.props.PanelWidth() - 25, 200) : 0), false);
-    }
-
     filterBackground = () => "rgba(105, 105, 105, 0.432)";
     get ignoreFields() { return ["_docFilters", "_docRangeFilters"]; } // this makes the tree view collection ignore these filters (otherwise, the filters would filter themselves)
     @computed get scriptField() {
@@ -582,23 +561,6 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
             </div>;
     }
 
-    @computed get propertiesView() {
-        TraceMobx();
-        return !this._propertiesWidth || this.props.dontRegisterView ? (null) :
-            <div className="collectionView-propertiesView" style={{
-                width: `${this.propertiesWidth()}px`,
-                overflow: this.propertiesWidth() < 15 ? "hidden" : undefined
-            }}>
-                <PropertiesView dataDoc={this.dataDoc} Document={this.props.Document}
-                    docView={CollectionView as unknown as DocumentView}
-                    width={this._propertiesWidth}
-                    height={this.props.PanelHeight()}
-                    renderDepth={this.props.renderDepth}
-                    ScreenToLocalTransform={this.props.ScreenToLocalTransform}
-                />
-            </div>;
-    }
-
     childLayoutTemplate = () => this.props.childLayoutTemplate?.() || Cast(this.props.Document.childLayoutTemplate, Doc, null);
     childLayoutString = this.props.childLayoutString || StrCast(this.props.Document.childLayoutString);
 
@@ -634,15 +596,6 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
                     style={{ right: this.facetWidth() - 1, top: this.props.Document._viewType === CollectionViewType.Docking ? "25%" : "55%" }} />
             }
             {this.facetWidth() < 10 ? (null) : this.filterView} */}
-
-            {this.props.hideFilter || this.props.Document.hideFilterView || !this.props.isSelected() && !this.props.Document.forceActive ? (null) :
-                <div className="collectionView-propertiesDragger" title="Properties View Dragger" onPointerDown={this.onDown}
-                    style={{ right: this.propertiesWidth() - 1, top: this.props.Document._viewType === CollectionViewType.Docking ? "25%" : "55%" }}>
-                    <div className="collectionView-propertiesDragger-icon">
-                        <FontAwesomeIcon icon={this.propertiesIcon} color="white" size="sm" /> </div>
-                </div>
-            }
-            {this.propertiesWidth() < 10 ? (null) : this.propertiesView}
         </div>);
     }
 }
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index 5242aa8fd..5aa0066d2 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -14,121 +14,162 @@ import { returnFalse, returnOne, emptyFunction, emptyPath, returnTrue, returnZer
 import { Id } from "../../../../fields/FieldSymbols";
 import { Transform } from "../../../util/Transform";
 import { PropertiesButtons } from "../../PropertiesButtons";
+import { SelectionManager } from "../../../util/SelectionManager";
 
 
 interface PropertiesViewProps {
-    dataDoc: Doc;
-    Document: Doc;
     width: number;
     height: number;
     renderDepth: number;
     ScreenToLocalTransform: () => Transform;
-    docView: DocumentView;
 }
 
 @observer
 export class PropertiesView extends React.Component<PropertiesViewProps> {
 
     @computed get MAX_EMBED_HEIGHT() { return 200; }
+    @observable numSelected: number = SelectionManager.SelectedDocuments().length;
+    @computed get selectedDocumentView() { return SelectionManager.LastSelection(); }
+    @observable selectedDoc: Doc | undefined = this.selectedDocumentView?.props.Document;
+    @observable dataDoc: Doc | undefined = this.selectedDocumentView?.props.DataDoc ? this.selectedDocumentView.props.DataDoc : this.selectedDoc;
 
-    rtfWidth = () => Math.min(this.props.Document?.[WidthSym](), this.props.width - 20);
-    rtfHeight = () => this.rtfWidth() <= this.props.Document?.[WidthSym]() ? Math.min(this.props.Document?.[HeightSym](), this.MAX_EMBED_HEIGHT) : this.MAX_EMBED_HEIGHT;
+    @action
+    rtfWidth = () => {
+        if (this.selectedDoc) {
+            return Math.min(this.selectedDoc?.[WidthSym](), this.props.width - 20);
+        } else {
+            return 0;
+        }
+    }
+    @action
+    rtfHeight = () => {
+        if (this.selectedDoc) {
+            return this.rtfWidth() <= this.selectedDoc?.[WidthSym]() ? Math.min(this.selectedDoc?.[HeightSym](), this.MAX_EMBED_HEIGHT) : this.MAX_EMBED_HEIGHT;
+        } else {
+            return 0;
+        }
+    }
 
+    @action
     docWidth = () => {
-        const layoutDoc = this.props.Document;
-        const aspect = NumCast(layoutDoc._nativeHeight, layoutDoc._fitWidth ? 0 : layoutDoc[HeightSym]()) / NumCast(layoutDoc._nativeWidth, layoutDoc._fitWidth ? 1 : layoutDoc[WidthSym]());
-        if (aspect) return Math.min(layoutDoc[WidthSym](), Math.min(this.MAX_EMBED_HEIGHT / aspect, this.props.width - 20));
-        return NumCast(layoutDoc._nativeWidth) ? Math.min(layoutDoc[WidthSym](), this.props.width - 20) : this.props.width - 20;
+        if (this.selectedDoc) {
+            const layoutDoc = this.selectedDoc;
+            const aspect = NumCast(layoutDoc._nativeHeight, layoutDoc._fitWidth ? 0 : layoutDoc[HeightSym]()) / NumCast(layoutDoc._nativeWidth, layoutDoc._fitWidth ? 1 : layoutDoc[WidthSym]());
+            if (aspect) return Math.min(layoutDoc[WidthSym](), Math.min(this.MAX_EMBED_HEIGHT / aspect, this.props.width - 20));
+            return NumCast(layoutDoc._nativeWidth) ? Math.min(layoutDoc[WidthSym](), this.props.width - 20) : this.props.width - 20;
+        } else {
+            return 0;
+        }
     }
+
+    @action
     docHeight = () => {
-        const layoutDoc = this.props.Document;
-        return Math.max(70, Math.min(this.MAX_EMBED_HEIGHT, (() => {
-            const aspect = NumCast(layoutDoc._nativeHeight, layoutDoc._fitWidth ? 0 : layoutDoc[HeightSym]()) / NumCast(layoutDoc._nativeWidth, layoutDoc._fitWidth ? 1 : layoutDoc[WidthSym]());
-            if (aspect) return this.docWidth() * aspect;
-            return layoutDoc._fitWidth ? (!this.props.dataDoc._nativeHeight ? NumCast(this.props.height) :
-                Math.min(this.docWidth() * NumCast(layoutDoc.scrollHeight, NumCast(layoutDoc._nativeHeight)) / NumCast(layoutDoc._nativeWidth,
-                    NumCast(this.props.height)))) :
-                NumCast(layoutDoc._height) ? NumCast(layoutDoc._height) : 50;
-        })()));
+        if (this.selectedDoc && this.dataDoc) {
+            const layoutDoc = this.selectedDoc;
+            return Math.max(70, Math.min(this.MAX_EMBED_HEIGHT, (() => {
+                const aspect = NumCast(layoutDoc._nativeHeight, layoutDoc._fitWidth ? 0 : layoutDoc[HeightSym]()) / NumCast(layoutDoc._nativeWidth, layoutDoc._fitWidth ? 1 : layoutDoc[WidthSym]());
+                if (aspect) return this.docWidth() * aspect;
+                return layoutDoc._fitWidth ? (!this.dataDoc._nativeHeight ? NumCast(this.props.height) :
+                    Math.min(this.docWidth() * NumCast(layoutDoc.scrollHeight, NumCast(layoutDoc._nativeHeight)) / NumCast(layoutDoc._nativeWidth,
+                        NumCast(this.props.height)))) :
+                    NumCast(layoutDoc._height) ? NumCast(layoutDoc._height) : 50;
+            })()));
+        } else {
+            return 0;
+        }
     }
 
     @computed get expandedField() {
-        const ids: { [key: string]: string } = {};
-        const doc = this.props.dataDoc;
-        doc && Object.keys(doc).forEach(key => !(key in ids) && doc[key] !== ComputedField.undefined && (ids[key] = key));
+        if (this.dataDoc) {
+            const ids: { [key: string]: string } = {};
+            const doc = this.dataDoc;
+            doc && Object.keys(doc).forEach(key => !(key in ids) && doc[key] !== ComputedField.undefined && (ids[key] = key));
 
-        const rows: JSX.Element[] = [];
-        for (const key of Object.keys(ids).slice().sort()) {
-            const contents = doc[key];
-            let contentElement: (JSX.Element | null)[] | JSX.Element = [];
-            contentElement = <EditableView key="editableView"
-                contents={contents !== undefined ? Field.toString(contents as Field) : "null"}
-                height={13}
-                fontSize={10}
-                GetValue={() => Field.toKeyValueString(doc, key)}
-                SetValue={(value: string) => KeyValueBox.SetField(doc, key, value, true)}
-            />;
+            const rows: JSX.Element[] = [];
+            for (const key of Object.keys(ids).slice().sort()) {
+                const contents = doc[key];
+                let contentElement: (JSX.Element | null)[] | JSX.Element = [];
+                contentElement = <EditableView key="editableView"
+                    contents={contents !== undefined ? Field.toString(contents as Field) : "null"}
+                    height={13}
+                    fontSize={10}
+                    GetValue={() => Field.toKeyValueString(doc, key)}
+                    SetValue={(value: string) => KeyValueBox.SetField(doc, key, value, true)}
+                />;
 
-            rows.push(<div style={{ display: "flex", overflowY: "visible", marginBottom: "-1px" }} key={key}>
-                <span style={{ fontWeight: "bold", whiteSpace: "nowrap" }}>{key + ":"}</span>
-                &nbsp;
-                {contentElement}
-            </div>);
+                rows.push(<div style={{ display: "flex", overflowY: "visible", marginBottom: "-1px" }} key={key}>
+                    <span style={{ fontWeight: "bold", whiteSpace: "nowrap" }}>{key + ":"}</span>
+                    &nbsp;
+                    {contentElement}
+                </div>);
+            }
+            return rows;
         }
-        return rows;
     }
 
     @computed get layoutPreview() {
-        const layoutDoc = Doc.Layout(this.props.Document);
-        const panelHeight = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : this.docHeight;
-        const panelWidth = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : this.docWidth;
-        return <div style={{ display: "inline-block", height: panelHeight() }} key={this.props.dataDoc[Id]}>
-            <ContentFittingDocumentView
-                Document={layoutDoc}
-                DataDoc={this.props.dataDoc}
-                LibraryPath={emptyPath}
-                renderDepth={this.props.renderDepth + 1}
-                rootSelected={returnFalse}
-                treeViewDoc={undefined}
-                backgroundColor={() => "lightgrey"}
-                fitToBox={false}
-                FreezeDimensions={true}
-                NativeWidth={layoutDoc.type ===
-                    StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : returnZero}
-                NativeHeight={layoutDoc.type ===
-                    StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : returnZero}
-                PanelWidth={panelWidth}
-                PanelHeight={panelHeight}
-                focus={returnFalse}
-                ScreenToLocalTransform={this.props.ScreenToLocalTransform}
-                docFilters={returnEmptyFilter}
-                ContainingCollectionDoc={undefined}
-                ContainingCollectionView={undefined}
-                addDocument={returnFalse}
-                moveDocument={undefined}
-                removeDocument={returnFalse}
-                parentActive={() => false}
-                whenActiveChanged={emptyFunction}
-                addDocTab={returnFalse}
-                pinToPres={emptyFunction}
-                bringToFront={returnFalse}
-                ContentScaling={returnOne}
-            />
-        </div>;
+        if (this.selectedDoc) {
+            const layoutDoc = Doc.Layout(this.selectedDoc);
+            const panelHeight = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : this.docHeight;
+            const panelWidth = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : this.docWidth;
+            return <div style={{ display: "inline-block", height: panelHeight() }} key={this.selectedDoc[Id]}>
+                <ContentFittingDocumentView
+                    Document={layoutDoc}
+                    DataDoc={this.dataDoc}
+                    LibraryPath={emptyPath}
+                    renderDepth={this.props.renderDepth + 1}
+                    rootSelected={returnFalse}
+                    treeViewDoc={undefined}
+                    backgroundColor={() => "lightgrey"}
+                    fitToBox={false}
+                    FreezeDimensions={true}
+                    NativeWidth={layoutDoc.type ===
+                        StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : returnZero}
+                    NativeHeight={layoutDoc.type ===
+                        StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : returnZero}
+                    PanelWidth={panelWidth}
+                    PanelHeight={panelHeight}
+                    focus={returnFalse}
+                    ScreenToLocalTransform={this.props.ScreenToLocalTransform}
+                    docFilters={returnEmptyFilter}
+                    ContainingCollectionDoc={undefined}
+                    ContainingCollectionView={undefined}
+                    addDocument={returnFalse}
+                    moveDocument={undefined}
+                    removeDocument={returnFalse}
+                    parentActive={() => false}
+                    whenActiveChanged={emptyFunction}
+                    addDocTab={returnFalse}
+                    pinToPres={emptyFunction}
+                    bringToFront={returnFalse}
+                    ContentScaling={returnOne}
+                />
+            </div>;
+        } else {
+            return null;
+        }
     }
 
     render() {
+
+        if (!this.selectedDocumentView || !this.selectedDoc || !this.dataDoc) {
+            return <div className="propertiesView" >
+                <div className="propertiesView-title">
+                    No Document Selected
+            </div> </div>;
+        }
+
         return <div className="propertiesView" >
             <div className="propertiesView-title">
                 Properties
             </div>
             <div className="propertiesView-name">
-                Collection
+                {this.dataDoc.title}
             </div>
             <div className="propertiesView-settings">
                 <div className="propertiesView-settings-title"> Settings</div>
                 <div className="propertiesView-settings-content">
-                    <PropertiesButtons doc={this.props.Document} />
+                    <PropertiesButtons />
                 </div>
             </div>
             <div className="propertiesView-fields">
-- 
cgit v1.2.3-70-g09d2


From feb86078832da5f7207bc5775a61d7dd93681e98 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Thu, 23 Jul 2020 14:40:57 -0400
Subject: fixes for gettin new sidebar to work

---
 src/client/views/MainView.tsx                                  |  6 +-----
 src/client/views/PropertiesButtons.tsx                         | 10 ++++++++--
 .../views/collections/collectionFreeForm/PropertiesView.tsx    | 10 +++++-----
 3 files changed, 14 insertions(+), 12 deletions(-)

(limited to 'src/client/views/PropertiesButtons.tsx')

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 8113ad698..d3bdeda9e 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -95,10 +95,6 @@ export class MainView extends React.Component {
     @observable public sidebarContent: any = this.userDoc?.["tabs-panelContainer"];
     @observable public panelContent: string = "none";
     @observable public showProperties: boolean = false;
-
-    @computed get selectedDocumentView() { return SelectionManager.LastSelection(); }
-    @observable selectedDoc: Doc | undefined = this.selectedDocumentView?.props.Document;
-    @observable selectedDataDoc: Doc | undefined = this.selectedDocumentView?.props.DataDoc ? this.selectedDocumentView.props.DataDoc : this.selectedDoc;
     public isPointerDown = false;
 
     @observable _propertiesWidth: number = 0;
@@ -359,7 +355,7 @@ export class MainView extends React.Component {
             docFilters={returnEmptyFilter}
             ContainingCollectionView={undefined}
             ContainingCollectionDoc={undefined}
-            renderDepth={1}
+            renderDepth={0}
         />;
     }
     @computed get dockingContent() {
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 1b06a41fa..b55593b11 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -68,8 +68,14 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     public static hasPushedHack = false;
     public static hasPulledHack = false;
 
-    @observable selectedDocumentView: DocumentView | undefined = SelectionManager.LastSelection();
-    @observable selectedDoc: Doc | undefined = this.selectedDocumentView?.props.Document;
+
+    @computed get selectedDocumentView() {
+        if (SelectionManager.SelectedDocuments().length) {
+            return SelectionManager.SelectedDocuments()[0];
+        } else { return undefined; }
+    }
+    @computed get selectedDoc() { return this.selectedDocumentView?.props.Document; }
+    @computed get dataDoc() { return this.selectedDocumentView?.props.DataDoc; }
 
     public startPullOutcome = action((success: boolean) => {
         if (!this._pullAnimating) {
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index 11609b1c0..1954a11bf 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -30,12 +30,12 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     @computed get MAX_EMBED_HEIGHT() { return 200; }
 
     @computed get selectedDocumentView() {
-        if (SelectionManger.SelectedDocuments().length) {
+        if (SelectionManager.SelectedDocuments().length) {
             return SelectionManager.SelectedDocuments()[0];
         } else { return undefined; }
     }
-    @computed get selectedDoc() { return this.selectedDocumentView?.props.Document; }
-    @computed get dataDoc() { return this.selectedDocumentView?.props.DataDoc; }
+    @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; }
+    @computed get dataDoc() { return this.selectedDocumentView?.dataDoc; }
 
     @action
     rtfWidth = () => {
@@ -156,7 +156,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
 
     render() {
 
-        if (!this.selectedDocumentView || !this.selectedDoc || !this.dataDoc) {
+        if (!this.selectedDoc) {
             return <div className="propertiesView" >
                 <div className="propertiesView-title">
                     No Document Selected
@@ -168,7 +168,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 Properties
             </div>
             <div className="propertiesView-name">
-                {this.dataDoc.title}
+                {this.selectedDoc.title}
             </div>
             <div className="propertiesView-settings">
                 <div className="propertiesView-settings-title"> Settings</div>
-- 
cgit v1.2.3-70-g09d2


From 3c83787b8c55663484bee4b6fb03a6bc86d7fc49 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Fri, 24 Jul 2020 00:08:21 -0500
Subject: added universal settings options

---
 src/client/views/DocumentButtonBar.tsx |   8 +-
 src/client/views/PropertiesButtons.tsx | 188 ++++++++++++++++++++++-----------
 2 files changed, 132 insertions(+), 64 deletions(-)

(limited to 'src/client/views/PropertiesButtons.tsx')

diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index c99034d81..2eabea8ef 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -281,7 +281,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
             {DocumentLinksButton.StartLink ? <div className="documentButtonBar-button">
                 <DocumentLinksButton View={this.view0} AlwaysOn={true} InMenu={true} StartLink={false} />
             </div> : null}
-            <div className="documentButtonBar-button">
+            {/* <div className="documentButtonBar-button">
                 {this.templateButton}
             </div>
             <div className="documentButtonBar-button">
@@ -289,16 +289,16 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
             </div>
             <div className="documentButtonBar-button">
                 {this.contextButton}
-            </div>
+            </div> */}
             <div className="documentButtonBar-button">
                 {this.pinButton}
             </div>
-            <div className="documentButtonBar-button" style={{ display: !considerPush ? "none" : "" }}>
+            {/* <div className="documentButtonBar-button" style={{ display: !considerPush ? "none" : "" }}>
                 {this.considerGoogleDocsPush}
             </div>
             <div className="documentButtonBar-button" style={{ display: !considerPull ? "none" : "" }}>
                 {this.considerGoogleDocsPull}
-            </div>
+            </div> */}
         </div>;
     }
 }
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index b55593b11..52e46147a 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -5,7 +5,7 @@ import { action, computed, observable, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import { Doc, DocListCast } from "../../fields/Doc";
 import { RichTextField } from '../../fields/RichTextField';
-import { Cast, NumCast } from "../../fields/Types";
+import { Cast, NumCast, BoolCast } from "../../fields/Types";
 import { emptyFunction, setupMoveUpEvents } from "../../Utils";
 import GoogleAuthenticationManager from '../apis/GoogleAuthenticationManager';
 import { Pulls, Pushes } from '../apis/google_docs/GoogleApiClientUtils';
@@ -74,8 +74,8 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             return SelectionManager.SelectedDocuments()[0];
         } else { return undefined; }
     }
-    @computed get selectedDoc() { return this.selectedDocumentView?.props.Document; }
-    @computed get dataDoc() { return this.selectedDocumentView?.props.DataDoc; }
+    @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; }
+    @computed get dataDoc() { return this.selectedDocumentView?.dataDoc; }
 
     public startPullOutcome = action((success: boolean) => {
         if (!this._pullAnimating) {
@@ -114,8 +114,6 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         this._pullColorAnimating = false;
     });
 
-    //get view0() { return this.props.views()?.[0]; }
-
     @computed
     get considerGoogleDocsPush() {
         const targetDoc = this.selectedDoc;
@@ -228,58 +226,116 @@ export class PropertiesButtons extends React.Component<{}, {}> {
 
     }
 
-    // @computed
-    // get contextButton() {
-    //     return <ParentDocSelector Document={this.Document} addDocTab={(doc, where) => {
-    //         where === "onRight" ? CollectionDockingView.AddRightSplit(doc) :
-    //                 this.props.doc.props.addDocTab(doc, "onRight");
-    //         return true;
-    //     }} />;
-    // }
-
     @observable _aliasDown = false;
     onAliasButtonDown = (e: React.PointerEvent): void => {
-        //setupMoveUpEvents(this, e, this.onAliasButtonMoved, emptyFunction, emptyFunction);
+        setupMoveUpEvents(this, e, this.onAliasButtonMoved, emptyFunction, emptyFunction);
+    }
+    onAliasButtonMoved = () => {
+        if (this._dragRef.current) {
+            const dragDocView = this.selectedDocumentView!;
+            const dragData = new DragManager.DocumentDragData([dragDocView.props.Document]);
+            const [left, top] = dragDocView.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
+            dragData.dropAction = "alias";
+            DragManager.StartDocumentDrag([dragDocView.ContentDiv!], dragData, left, top, {
+                offsetX: dragData.offset[0],
+                offsetY: dragData.offset[1],
+                hideSource: false
+            });
+            return true;
+        }
+        return false;
+    }
+
+    @computed
+    get templateButton() {
+        const docView = this.selectedDocumentView;
+        const templates: Map<Template, boolean> = new Map();
+        const views = [this.selectedDocumentView];
+        Array.from(Object.values(Templates.TemplateList)).map(template =>
+            templates.set(template, views.reduce((checked, doc) => checked || doc?.props.Document["_show" + template.Name] ? true : false, false as boolean)));
+        return !docView ? (null) :
+            <Tooltip title={<><div className="dash-tooltip">Tap: Customize layout.  Drag: Create alias</div></>}>
+                <div className="documentButtonBar-linkFlyout" ref={this._dragRef}>
+                    <Flyout anchorPoint={anchorPoints.LEFT_TOP} onOpen={action(() => this._aliasDown = true)} onClose={action(() => this._aliasDown = false)}
+                        content={!this._aliasDown ? (null) : <TemplateMenu docViews={views.filter(v => v).map(v => v as DocumentView)} templates={templates} />}>
+                        <div className={"documentButtonBar-linkButton-empty"} ref={this._dragRef} onPointerDown={this.onAliasButtonDown} >
+                            {<FontAwesomeIcon className="documentdecorations-icon" icon="edit" size="sm" />}
+                        </div>
+                    </Flyout>
+                </div></Tooltip>;
+    }
 
+    onCopy = () => {
+        if (this.selectedDoc && this.selectedDocumentView) {
+            const copy = Doc.MakeCopy(this.selectedDoc, true);
+            copy.x = NumCast(this.selectedDoc.x) + NumCast(this.selectedDoc._width);
+            copy.y = NumCast(this.selectedDoc.y) + 30;
+            this.selectedDocumentView.props.addDocument?.(copy);
+        }
+    }
+
+    @computed
+    get copyButton() {
+        const targetDoc = this.selectedDoc;
+        return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Create a copy"}</div></>}>
+            <div className={"documentButtonBar-linkButton-empty"}
+                onPointerDown={this.onCopy} >
+                {<FontAwesomeIcon className="documentdecorations-icon" icon="copy" size="sm" />}
+            </div>
+        </Tooltip>;
+    }
+
+    @action
+    onLock = () => {
+        this.selectedDocumentView?.toggleLockPosition();
+    }
+
+    @computed
+    get lockButton() {
+        const targetDoc = this.selectedDoc;
+        return !targetDoc ? (null) : <Tooltip
+            title={<><div className="dash-tooltip">{this.selectedDoc?.lockedPosition ?
+                "Unlock Position" : "Lock Position"}</div></>}>
+            <div className={"documentButtonBar-linkButton-empty"}
+                onPointerDown={this.onLock} >
+                {<FontAwesomeIcon className="documentdecorations-icon"
+                    icon={BoolCast(this.selectedDoc?.lockedPosition) ? "unlock" : "lock"} size="sm" />}
+            </div>
+        </Tooltip>;
     }
 
-    // onAliasButtonMoved = () => {
-    //     if (this._dragRef.current) {
-    //         const dragDocView = this.props.doc!;
-    //         if (dragDocView.props){
-    //             const dragData = new DragManager.DocumentDragData([dragDocView.props.Document]);
-    //             const [left, top] = dragDocView.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
-    //             dragData.dropAction = "alias";
-    //             DragManager.StartDocumentDrag([dragDocView.ContentDiv!], dragData, left, top, {
-    //             offsetX: dragData.offset[0],
-    //             offsetY: dragData.offset[1],
-    //             hideSource: false
-    //         });
-    //         return true;
-    //         }
+    @computed
+    get downloadButton() {
+        const targetDoc = this.selectedDoc;
+        return !targetDoc ? (null) : <Tooltip
+            title={<><div className="dash-tooltip">{"Download Document"}</div></>}>
+            <div className={"documentButtonBar-linkButton-empty"}
+                onPointerDown={async () => {
+                    if (this.selectedDocumentView?.props.Document) {
+                        Doc.Zip(this.selectedDocumentView?.props.Document);
+                    }
+                }}>
+                {<FontAwesomeIcon className="documentdecorations-icon"
+                    icon="download" size="sm" />}
+            </div>
+        </Tooltip>;
+    }
 
-    //     }
-    //     return false;
-    // }
+    @computed
+    get deleteButton() {
+        const targetDoc = this.selectedDoc;
+        return !targetDoc ? (null) : <Tooltip
+            title={<><div className="dash-tooltip">{"Delete Document"}</div></>}>
+            <div className={"documentButtonBar-linkButton-empty"}
+                onPointerDown={() => {
+                    this.selectedDocumentView?.props.ContainingCollectionView?.removeDocument(this.selectedDocumentView?.props.Document);
+                }}>
+                {<FontAwesomeIcon className="documentdecorations-icon"
+                    icon="trash-alt" size="sm" />}
+            </div>
+        </Tooltip>;
+    }
 
-    // @computed
-    // get templateButton() {
-    //     //const view0 = this.view0;
-    //     const templates: Map<Template, boolean> = new Map();
-    //     //const views = this.props.views();
-    //     Array.from(Object.values(Templates.TemplateList)).map(template =>
-    //         templates.set(template, views.reduce((checked, doc) => checked || doc?.props.Document["_show" + template.Name] ? true : false, false as boolean)));
-    //     return !this.props.doc ? (null) :
-    //         <Tooltip title={<><div className="dash-tooltip">Tap: Customize layout.  Drag: Create alias</div></>}>
-    //             <div className="propertiesButtons-linkFlyout" ref={this._dragRef}>
-    //                 <Flyout anchorPoint={anchorPoints.LEFT_TOP} onOpen={action(() => this._aliasDown = true)} onClose={action(() => this._aliasDown = false)}
-    //                     content={!this._aliasDown ? (null) : <TemplateMenu docViews={views.filter(v => v).map(v => v as DocumentView)} templates={templates} />}>
-    //                     <div className={"propertiesButtons-linkButton-empty"} ref={this._dragRef} onPointerDown={this.onAliasButtonDown} >
-    //                         {<FontAwesomeIcon className="documentdecorations-icon" icon="edit" size="sm" />}
-    //                     </div>
-    //                 </Flyout>
-    //             </div></Tooltip>;
-    // }
 
     render() {
         if (!this.selectedDoc) return (null);
@@ -287,24 +343,36 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         const isText = this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof RichTextField;
         const considerPull = isText && this.considerGoogleDocsPull;
         const considerPush = isText && this.considerGoogleDocsPush;
-        return <div className="propertiesButtons">
-            {/* <div className="propertiesButtons-button">
+        return <div><div className="propertiesButtons">
+            <div className="propertiesButtons-button">
                 {this.templateButton}
-            </div> */}
+            </div>
             <div className="propertiesButtons-button">
                 {this.metadataButton}
             </div>
-            {/* <div className="propertiesButtons-button">
-                {this.contextButton}
-            </div> */}
             <div className="propertiesButtons-button">
                 {this.pinButton}
             </div>
-            <div className="propertiesButtons-button" style={{ display: !considerPush ? "none" : "" }}>
-                {this.considerGoogleDocsPush}
+            <div className="propertiesButtons-button">
+                {this.copyButton}
+            </div>
+            <div className="propertiesButtons-button">
+                {this.lockButton}
+            </div>
+            <div className="propertiesButtons-button">
+                {this.downloadButton}
+            </div>
+            <div className="propertiesButtons-button">
+                {this.deleteButton}
             </div>
-            <div className="propertiesButtons-button" style={{ display: !considerPull ? "none" : "" }}>
-                {this.considerGoogleDocsPull}
+        </div>
+            <div className="propertiesButtons">
+                <div className="propertiesButtons-button" style={{ display: !considerPush ? "none" : "" }}>
+                    {this.considerGoogleDocsPush}
+                </div>
+                <div className="propertiesButtons-button" style={{ display: !considerPull ? "none" : "" }}>
+                    {this.considerGoogleDocsPull}
+                </div>
             </div>
         </div>;
     }
-- 
cgit v1.2.3-70-g09d2


From 7d0778a9dd1d5e70bf5e4f51e264dcf2f86829d3 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Fri, 24 Jul 2020 00:25:30 -0500
Subject: two rows in settings and adjusting context menu

---
 src/client/views/PropertiesButtons.tsx  | 25 +++++++++++++++++++++++--
 src/client/views/nodes/DocumentView.tsx |  4 ++--
 2 files changed, 25 insertions(+), 4 deletions(-)

(limited to 'src/client/views/PropertiesButtons.tsx')

diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 52e46147a..8488b553f 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -23,6 +23,7 @@ import { Template, Templates } from "./Templates";
 import React = require("react");
 import { Tooltip } from '@material-ui/core';
 import { SelectionManager } from '../util/SelectionManager';
+import SharingManager from '../util/SharingManager';
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -267,7 +268,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
 
     onCopy = () => {
         if (this.selectedDoc && this.selectedDocumentView) {
-            const copy = Doc.MakeCopy(this.selectedDoc, true);
+            const copy = Doc.MakeCopy(this.selectedDocumentView.props.Document, true);
             copy.x = NumCast(this.selectedDoc.x) + NumCast(this.selectedDoc._width);
             copy.y = NumCast(this.selectedDoc.y) + 30;
             this.selectedDocumentView.props.addDocument?.(copy);
@@ -336,6 +337,23 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         </Tooltip>;
     }
 
+    @computed
+    get sharingButton() {
+        const targetDoc = this.selectedDoc;
+        return !targetDoc ? (null) : <Tooltip
+            title={<><div className="dash-tooltip">{"Share Document"}</div></>}>
+            <div className={"documentButtonBar-linkButton-empty"}
+                onPointerDown={() => {
+                    if (this.selectedDocumentView) {
+                        SharingManager.Instance.open(this.selectedDocumentView);
+                    }
+                }}>
+                {<FontAwesomeIcon className="documentdecorations-icon"
+                    icon="users" size="sm" />}
+            </div>
+        </Tooltip>;
+    }
+
 
     render() {
         if (!this.selectedDoc) return (null);
@@ -343,7 +361,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         const isText = this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof RichTextField;
         const considerPull = isText && this.considerGoogleDocsPull;
         const considerPush = isText && this.considerGoogleDocsPush;
-        return <div><div className="propertiesButtons">
+        return <div><div className="propertiesButtons" style={{ paddingBottom: "5.5px" }}>
             <div className="propertiesButtons-button">
                 {this.templateButton}
             </div>
@@ -367,6 +385,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             </div>
         </div>
             <div className="propertiesButtons">
+                <div className="propertiesButtons-button">
+                    {this.sharingButton}
+                </div>
                 <div className="propertiesButtons-button" style={{ display: !considerPush ? "none" : "" }}>
                     {this.considerGoogleDocsPush}
                 </div>
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 02fe60255..30582a287 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -809,7 +809,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
             moreItems.push({ description: "Copy ID", event: () => Utils.CopyText(Utils.prepend("/doc/" + this.props.Document[Id])), icon: "fingerprint" });
         }
         GetEffectiveAcl(this.props.Document) === AclEdit && moreItems.push({ description: "Delete", event: this.deleteClicked, icon: "trash" });
-        moreItems.push({ description: "Share", event: () => SharingManager.Instance.open(this), icon: "external-link-alt" });
+        //moreItems.push({ description: "Share", event: () => SharingManager.Instance.open(this), icon: "external-link-alt" });
         !more && cm.addItem({ description: "More...", subitems: moreItems, icon: "hand-point-right" });
         cm.moveAfter(cm.findByDescription("More...")!, cm.findByDescription("OnClick...")!);
 
@@ -817,7 +817,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         const helpItems: ContextMenuProps[] = help && "subitems" in help ? help.subitems : [];
         //!Doc.UserDoc().novice && helpItems.push({ description: "Text Shortcuts Ctrl+/", event: () => this.props.addDocTab(Docs.Create.PdfDocument(Utils.prepend("/assets/cheat-sheet.pdf"), { _width: 300, _height: 300 }), "onRight"), icon: "keyboard" });
         !Doc.UserDoc().novice && helpItems.push({ description: "Show Fields ", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "onRight"), icon: "layer-group" });
-        cm.addItem({ description: "Help...", noexpand: true, subitems: helpItems, icon: "question" });
+        //cm.addItem({ description: "Help...", noexpand: true, subitems: helpItems, icon: "question" });
 
         // const existingAcls = cm.findByDescription("Privacy...");
         // const aclItems: ContextMenuProps[] = existingAcls && "subitems" in existingAcls ? existingAcls.subitems : [];
-- 
cgit v1.2.3-70-g09d2


From 649470762c722eea1067e30d2f35aedcf84a369c Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Fri, 24 Jul 2020 13:40:24 -0500
Subject: sally UI changes

---
 src/client/views/DocumentDecorations.tsx           |  5 +--
 src/client/views/MainView.tsx                      |  4 +--
 src/client/views/PropertiesButtons.tsx             |  2 +-
 .../collectionFreeForm/PropertiesView.scss         | 13 +++++++
 .../collectionFreeForm/PropertiesView.tsx          | 42 +++++++++-------------
 src/client/views/linking/LinkMenuItem.tsx          |  2 +-
 src/client/views/nodes/DocumentView.tsx            | 12 ++++++-
 7 files changed, 47 insertions(+), 33 deletions(-)

(limited to 'src/client/views/PropertiesButtons.tsx')

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index fec4ad9e0..d30adc5a2 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -1,5 +1,5 @@
 import { IconProp, library } from '@fortawesome/fontawesome-svg-core';
-import { faCaretUp, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faTextHeight, faArrowAltCircleDown, faArrowAltCircleUp, faCheckCircle, faCloudUploadAlt, faLink, faShare, faStopCircle, faSyncAlt, faTag, faTimes, faAngleLeft, faAngleRight, faAngleDoubleLeft, faAngleDoubleRight, faPause } from '@fortawesome/free-solid-svg-icons';
+import { faCaretUp, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faTextHeight, faArrowAltCircleDown, faArrowAltCircleUp, faCheckCircle, faCloudUploadAlt, faLink, faShare, faStopCircle, faSyncAlt, faTag, faTimes, faAngleLeft, faAngleRight, faAngleDoubleLeft, faAngleDoubleRight, faPause, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { action, computed, observable, reaction, runInAction } from "mobx";
 import { observer } from "mobx-react";
@@ -44,6 +44,7 @@ library.add(faAngleDoubleRight);
 library.add(faAngleLeft);
 library.add(faAngleRight);
 library.add(faPause);
+library.add(faExternalLinkAlt);
 
 @observer
 export class DocumentDecorations extends React.Component<{}, { value: string }> {
@@ -617,7 +618,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
                                 {"_"}
                             </div></Tooltip>}
                     <Tooltip title={<><div className="dash-tooltip">Open Document In Tab</div></>} placement="top"><div className="documentDecorations-closeButton" onPointerDown={this.onMaximizeDown}>
-                        {SelectionManager.SelectedDocuments().length === 1 ? DocumentDecorations.DocumentIcon(StrCast(seldoc.props.Document.layout, "...")) : "..."}
+                        {SelectionManager.SelectedDocuments().length === 1 ? <FontAwesomeIcon icon="external-link-alt" className="documentView-minimizedIcon" /> : "..."}
                     </div></Tooltip>
                     <div id="documentDecorations-rotation" className="documentDecorations-rotation"
                         onPointerDown={this.onRotateDown}> ⟲ </div>
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index f43eca468..4a80f57b3 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -8,7 +8,7 @@ import {
     faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faTimesCircle,
     faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight,
     faHeading, faRulerCombined, faFillDrip, faLink, faUnlink, faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper,
-    faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faMap, faDesktop, faTrashRestore, faUsers, faWrench, faCog, faBellSlash
+    faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faMap, faDesktop, faTrashRestore, faUsers, faWrench, faCog, faBellSlash, faExpandAlt
 } from '@fortawesome/free-solid-svg-icons';
 import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -174,7 +174,7 @@ export class MainView extends React.Component {
             faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faTrashAlt, faAngleRight, faBell,
             faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight,
             faHeading, faRulerCombined, faFillDrip, faLink, faUnlink, faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper,
-            faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faDesktop, faTrashRestore, faUsers, faWrench, faCog, faMap, faBellSlash);
+            faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faDesktop, faTrashRestore, faUsers, faWrench, faCog, faMap, faBellSlash, faExpandAlt);
         this.initEventListeners();
         this.initAuthenticationRouters();
     }
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 8488b553f..32a98b072 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -278,7 +278,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     @computed
     get copyButton() {
         const targetDoc = this.selectedDoc;
-        return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Create a copy"}</div></>}>
+        return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Create an Alias"}</div></>}>
             <div className={"documentButtonBar-linkButton-empty"}
                 onPointerDown={this.onCopy} >
                 {<FontAwesomeIcon className="documentdecorations-icon" icon="copy" size="sm" />}
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index e025c7e87..e6bc3f15a 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -79,6 +79,17 @@
         }
     }
 
+    .expansion-button-icon {
+        width: 11px;
+        height: 11px;
+        color: black;
+        margin-left: 27px;
+
+        &:hover {
+            color: rgb(131, 131, 131);
+        }
+    }
+
     .propertiesView-sharingTable {
 
         border: 1px solid black;
@@ -103,6 +114,8 @@
 
             .propertiesView-sharingTable-item-permission {
 
+                display: flex;
+
                 .permissions-select {
                     z-index: 1;
                     //border: 0.5px solid grey;
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index 9af4bd276..e911c7a9f 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -17,6 +17,7 @@ import { PropertiesButtons } from "../../PropertiesButtons";
 import { SelectionManager } from "../../../util/SelectionManager";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Tooltip } from "@material-ui/core";
+import SharingManager from "../../../util/SharingManager";
 
 
 interface PropertiesViewProps {
@@ -174,19 +175,32 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     }
 
     @computed get notifyIcon() {
-        return <Tooltip title={<><div className="dash-tooltip">{"Notify user or group of permissions change"}</div></>}>
+        return <Tooltip title={<><div className="dash-tooltip">{"Notify group of permissions change"}</div></>}>
             <div className="notify-button">
                 <FontAwesomeIcon className="notify-button-icon" icon="bell" color="white" size="sm" />
             </div>
         </Tooltip>;
     }
 
+    @computed get expansionIcon() {
+        return <Tooltip title={<><div className="dash-tooltip">{"Show more permissions"}</div></>}>
+            <div className="expansion-button" onPointerDown={() => {
+                if (this.selectedDocumentView) {
+                    SharingManager.Instance.open(this.selectedDocumentView);
+                }
+            }}>
+                <FontAwesomeIcon className="expansion-button-icon" icon="ellipsis-h" color="black" size="sm" />
+            </div>
+        </Tooltip>;
+    }
+
     sharingItem(name: string, notify: boolean, editable: boolean, permission?: string) {
         return <div className="propertiesView-sharingTable-item">
             <div className="propertiesView-sharingTable-item-name" style={{ width: notify ? "70px" : "80px" }}> {name} </div>
             {notify ? this.notifyIcon : null}
             <div className="propertiesView-sharingTable-item-permission">
                 {editable ? this.permissionsSelect : permission}
+                {permission === "Owner" ? this.expansionIcon : null}
             </div>
         </div>;
     }
@@ -197,30 +211,6 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             {this.sharingItem("Public", false, true)}
             {this.sharingItem("Group 1", true, true)}
             {this.sharingItem("Group 2", true, true)}
-            {/* <div className="propertiesView-sharingTable-item">
-                <div className="propertiesView-sharingTable-item-name"> Me: </div>
-                <div className="propertiesView-sharingTable-item-permission"> Owner </div>
-            </div>
-            <div className="propertiesView-sharingTable-item">
-                <div className="propertiesView-sharingTable-item-name"> Public: </div>
-                <div className="propertiesView-sharingTable-item-permission">
-                    {this.permissionsSelect}
-                </div>
-            </div>
-            <div className="propertiesView-sharingTable-item">
-                <div className="propertiesView-sharingTable-item-name"> Group 1: </div>
-                <div> </div>
-                <div className="propertiesView-sharingTable-item-permission">
-                    {this.permissionsSelect}
-                </div>
-            </div>
-            <div className="propertiesView-sharingTable-item">
-                <div className="propertiesView-sharingTable-item-name"> Another group: </div>
-                <div> </div>
-                <div className="propertiesView-sharingTable-item-permission">
-                    {this.permissionsSelect}
-                </div>
-            </div> */}
         </div>;
     }
 
@@ -241,7 +231,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 {this.selectedDoc.title}
             </div>
             <div className="propertiesView-settings">
-                <div className="propertiesView-settings-title"> Settings</div>
+                <div className="propertiesView-settings-title"> Document Actions </div>
                 <div className="propertiesView-settings-content">
                     <PropertiesButtons />
                 </div>
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index d1c839c3b..8084d96ae 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -182,7 +182,7 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
         switch (this.props.destinationDoc.type) {
             case DocumentType.IMG: destinationIcon = "image"; break;
             case DocumentType.COMPARISON: destinationIcon = "columns"; break;
-            case DocumentType.RTF: destinationIcon = "font"; break;
+            case DocumentType.RTF: destinationIcon = "sticky-note"; break;
             case DocumentType.COL: destinationIcon = "folder"; break;
             case DocumentType.WEB: destinationIcon = "globe-asia"; break;
             case DocumentType.SCREENSHOT: destinationIcon = "photo-video"; break;
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 30582a287..ed3a9a4f3 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -726,6 +726,14 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         });
     }
 
+    @action
+    onCopy = () => {
+        const copy = Doc.MakeCopy(this.props.Document, true);
+        copy.x = NumCast(this.props.Document.x) + NumCast(this.props.Document._width);
+        copy.y = NumCast(this.props.Document.y) + 30;
+        this.props.addDocument?.(copy);
+    }
+
     @action
     onContextMenu = async (e: React.MouseEvent | Touch): Promise<void> => {
         // the touch onContextMenu is button 0, the pointer onContextMenu is button 2
@@ -787,6 +795,8 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
 
         const more = cm.findByDescription("More...");
         const moreItems = more && "subitems" in more ? more.subitems : [];
+        moreItems.push({ description: "Share", event: () => SharingManager.Instance.open(this), icon: "users" });
+        moreItems.push({ description: "Create an Alias", event: () => this.onCopy(), icon: "copy" });
         moreItems.push({
             description: "Download document", icon: "download", event: async () => {
                 Doc.Zip(this.props.Document);
@@ -809,7 +819,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
             moreItems.push({ description: "Copy ID", event: () => Utils.CopyText(Utils.prepend("/doc/" + this.props.Document[Id])), icon: "fingerprint" });
         }
         GetEffectiveAcl(this.props.Document) === AclEdit && moreItems.push({ description: "Delete", event: this.deleteClicked, icon: "trash" });
-        //moreItems.push({ description: "Share", event: () => SharingManager.Instance.open(this), icon: "external-link-alt" });
+
         !more && cm.addItem({ description: "More...", subitems: moreItems, icon: "hand-point-right" });
         cm.moveAfter(cm.findByDescription("More...")!, cm.findByDescription("OnClick...")!);
 
-- 
cgit v1.2.3-70-g09d2


From eab29b953a24659f16901fa10522f3787212ccc0 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Sun, 26 Jul 2020 11:25:48 -0500
Subject: merge fix again

---
 src/client/views/MainView.scss         |  2 +-
 src/client/views/PropertiesButtons.tsx | 70 ++++++++++++++++++++++++++++++++++
 2 files changed, 71 insertions(+), 1 deletion(-)

(limited to 'src/client/views/PropertiesButtons.tsx')

diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index 51548bf58..792cb5b1f 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -137,7 +137,7 @@
     right: 0;
     top: 0;
     border-left: solid 1px;
-    z-index: 10000;
+    z-index: 100000;
     cursor: auto;
 }
 
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 32a98b072..d2f6b1155 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -354,6 +354,73 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         </Tooltip>;
     }
 
+    @computed
+    get onClickButton() {
+        if (this.selectedDoc) {
+            return <Tooltip title={<><div className="dash-tooltip">Choose onClick behavior</div></>}>
+                <div className="propertiesButtons-linkFlyout">
+                    <Flyout anchorPoint={anchorPoints.LEFT_TOP}
+                        content={this.onClickFlyout}>
+                        <div className={"propertiesButtons-linkButton-" + "empty"} onPointerDown={e => e.stopPropagation()} >
+                            {<FontAwesomeIcon className="documentdecorations-icon" icon="mouse-pointer" size="sm" />}
+                        </div>
+                    </Flyout>
+                </div></Tooltip>;
+        } else {
+            return null;
+        }
+    }
+
+    @computed
+    get onClickFlyout() {
+        return <div><form>
+            <div className="radio">
+                <label>
+                    <input type="radio" value="option1" checked={true} />
+                Enter Portal
+            </label>
+            </div>
+            <div className="radio">
+                <label>
+                    <input type="radio" value="option2" />
+                Toggle Detail
+            </label>
+            </div>
+            <div className="radio">
+                <label>
+                    <input type="radio" value="option3" />
+                Do Nothing
+            </label>
+            </div>
+            <div className="radio">
+                <label>
+                    <input type="radio" value="option3" />
+                Follow Link in Place
+            </label>
+            </div>
+            <div className="radio">
+                <label>
+                    <input type="radio" value="option3" />
+                Follow Link on Right
+            </label>
+            </div>
+            <div className="radio">
+                <label>
+                    <input type="radio" value="option3" />
+                Edit onClick Script
+            </label>
+            </div>
+        </form> </div>;
+
+        // onClicks.push({ description: "Enter Portal", event: this.makeIntoPortal, icon: "window-restore" });
+        // onClicks.push({ description: "Toggle Detail", event: () => this.Document.onClick = ScriptField.MakeScript(`toggleDetail(self, "${this.Document.layoutKey}")`), icon: "window-restore" });
+        // onClicks.push({ description: this.Document.ignoreClick ? "Select" : "Do Nothing", event: () => this.Document.ignoreClick = !this.Document.ignoreClick, icon: this.Document.ignoreClick ? "unlock" : "lock" });
+        // onClicks.push({ description: this.Document.isLinkButton ? "Remove Follow Behavior" : "Follow Link in Place", event: this.toggleFollowInPlace, icon: "concierge-bell" });
+        // onClicks.push({ description: this.Document.isLinkButton ? "Remove Follow Behavior" : "Follow Link on Right", event: this.toggleFollowOnRight, icon: "concierge-bell" });
+        // onClicks.push({ description: this.Document.isLinkButton || this.onClickHandler ? "Remove Click Behavior" : "Follow Link", event: this.toggleLinkButtonBehavior, icon: "concierge-bell" });
+        // onClicks.push({ description: "Edit onClick Script", event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.props.Document, undefined, "onClick"), "edit onClick"), icon: "edit" });
+    }
+
 
     render() {
         if (!this.selectedDoc) return (null);
@@ -388,6 +455,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                 <div className="propertiesButtons-button">
                     {this.sharingButton}
                 </div>
+                <div className="propertiesButtons-button">
+                    {this.onClickButton}
+                </div>
                 <div className="propertiesButtons-button" style={{ display: !considerPush ? "none" : "" }}>
                     {this.considerGoogleDocsPush}
                 </div>
-- 
cgit v1.2.3-70-g09d2


From a607928d563520fc0a07c559334ea7039d269d3a Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Sun, 26 Jul 2020 16:19:23 -0500
Subject: overflow, open in tab bug fixes

---
 src/client/views/DocumentDecorations.tsx           |  2 +-
 src/client/views/MainView.scss                     |  1 +
 src/client/views/MainView.tsx                      |  9 +++++----
 src/client/views/PropertiesButtons.scss            |  1 +
 src/client/views/PropertiesButtons.tsx             | 23 ++++++++++++++++++++++
 .../collectionFreeForm/PropertiesView.scss         |  5 +++--
 src/client/views/nodes/DocumentView.tsx            |  2 ++
 7 files changed, 36 insertions(+), 7 deletions(-)

(limited to 'src/client/views/PropertiesButtons.tsx')

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 87222e942..c889557ba 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -619,7 +619,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
                             <div className="documentDecorations-iconifyButton" onPointerDown={this.onIconifyDown}>
                                 {"_"}
                             </div></Tooltip>}
-                    <Tooltip title={<><div className="dash-tooltip">Open Document In Tab</div></>} placement="top"><div className="documentDecorations-closeButton" onPointerDown={this.onMaximizeDown}>
+                    <Tooltip title={<><div className="dash-tooltip">Open Document In Tab</div></>} placement="top"><div className="documentDecorations-openInTab" onPointerDown={this.onMaximizeDown}>
                         {SelectionManager.SelectedDocuments().length === 1 ? <FontAwesomeIcon icon="external-link-alt" className="documentView-minimizedIcon" /> : "..."}
                     </div></Tooltip>
                     <div id="documentDecorations-rotation" className="documentDecorations-rotation"
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index 792cb5b1f..f1042ff50 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -139,6 +139,7 @@
     border-left: solid 1px;
     z-index: 100000;
     cursor: auto;
+    overflow-x: visible;
 }
 
 .mainView-flyoutContainer {
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 5eb9f3c38..4f85ef333 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -8,7 +8,7 @@ import {
     faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faTimesCircle,
     faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight,
     faHeading, faRulerCombined, faFillDrip, faLink, faUnlink, faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper,
-    faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faMap, faDesktop, faTrashRestore, faUsers, faWrench, faCog, faBellSlash, faExpandAlt, faUser
+    faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faMap, faDesktop, faTrashRestore, faUsers, faWrench, faCog, faBellSlash, faExpandAlt, faUser, faArchive
 } from '@fortawesome/free-solid-svg-icons';
 import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -175,7 +175,7 @@ export class MainView extends React.Component {
             faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faTrashAlt, faAngleRight, faBell,
             faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight,
             faHeading, faRulerCombined, faFillDrip, faLink, faUnlink, faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper,
-            faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faDesktop, faTrashRestore, faUsers, faWrench, faCog, faMap, faBellSlash, faExpandAlt, faUser);
+            faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faDesktop, faTrashRestore, faUsers, faWrench, faCog, faMap, faBellSlash, faExpandAlt, faUser, faArchive);
         this.initEventListeners();
         this.initAuthenticationRouters();
     }
@@ -492,6 +492,7 @@ export class MainView extends React.Component {
     //             ContainingCollectionView={undefined}
     //             ContainingCollectionDoc={undefined}
     //             relative={true}
+    //             scriptContext={this}
     //         />
     //     </div>;
     // }
@@ -519,10 +520,10 @@ export class MainView extends React.Component {
             <div className="mainView-menuPanel-button"
                 style={{ backgroundColor: this.panelContent === "deleted" ? "lightgrey" : "" }}
                 onPointerDown={e => this.selectPanel("deleted")}>
-                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="trash-alt"
+                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="archive"
                     color={this.panelContent === "deleted" ? "black" : "white"} size="lg" />
                 <div className="mainView-menuPanel-button-label"
-                    style={{ color: this.panelContent === "deleted" ? "black" : "white" }}> Recently Closed </div>
+                    style={{ color: this.panelContent === "deleted" ? "black" : "white" }}> Recently Used </div>
             </div>
 
             <div className="mainView-menuPanel-button"
diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss
index 8dd5cec03..305688bdb 100644
--- a/src/client/views/PropertiesButtons.scss
+++ b/src/client/views/PropertiesButtons.scss
@@ -50,6 +50,7 @@ $linkGap : 3px;
     height: auto;
     display: flex;
     flex-direction: row;
+    overflow-x: visible;
 }
 
 .propertiesButtons-button {
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index d2f6b1155..a512b3232 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -24,6 +24,8 @@ import React = require("react");
 import { Tooltip } from '@material-ui/core';
 import { SelectionManager } from '../util/SelectionManager';
 import SharingManager from '../util/SharingManager';
+import { GooglePhotos } from '../apis/google_docs/GooglePhotosClientUtils';
+import { ImageField } from '../../fields/URLField';
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -421,6 +423,23 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         // onClicks.push({ description: "Edit onClick Script", event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.props.Document, undefined, "onClick"), "edit onClick"), icon: "edit" });
     }
 
+    @computed
+    get googlePhotosButton() {
+        const targetDoc = this.selectedDoc;
+        return !targetDoc ? (null) : <Tooltip
+            title={<><div className="dash-tooltip">{"Export to Google Photos"}</div></>}>
+            <div className={"documentButtonBar-linkButton-empty"}
+                onPointerDown={() => {
+                    if (this.selectedDocumentView) {
+                        GooglePhotos.Export.CollectionToAlbum({ collection: this.selectedDocumentView.Document }).then(console.log)
+                    }
+                }}>
+                {<FontAwesomeIcon className="documentdecorations-icon"
+                    icon="cloud-upload-alt" size="sm" />}
+            </div>
+        </Tooltip>;
+    }
+
 
     render() {
         if (!this.selectedDoc) return (null);
@@ -428,6 +447,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         const isText = this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof RichTextField;
         const considerPull = isText && this.considerGoogleDocsPull;
         const considerPush = isText && this.considerGoogleDocsPush;
+        const isImage = this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof ImageField;
         return <div><div className="propertiesButtons" style={{ paddingBottom: "5.5px" }}>
             <div className="propertiesButtons-button">
                 {this.templateButton}
@@ -464,6 +484,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                 <div className="propertiesButtons-button" style={{ display: !considerPull ? "none" : "" }}>
                     {this.considerGoogleDocsPull}
                 </div>
+                <div className="propertiesButtons-button" style={{ display: !isImage ? "none" : "" }}>
+                    {this.googlePhotosButton}
+                </div>
             </div>
         </div>;
     }
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index 7b8f116b7..99db0022e 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -5,7 +5,8 @@
     font-family: "Noto Sans";
     cursor: auto;
 
-    overflow-y: scroll;
+    overflow-x: visible;
+    overflow-y: visible;
 
     .propertiesView-title {
         background-color: rgb(159, 159, 159);
@@ -23,7 +24,7 @@
         .propertiesView-title-icon {
             width: 20px;
             height: 20px;
-            padding-left: 32px;
+            padding-left: 38px;
             margin-top: -5px;
 
             &:hover {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 0cfb12f95..6aceec90e 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -101,6 +101,7 @@ export interface DocumentViewProps {
     radialMenu?: String[];
     display?: string;
     relative?: boolean;
+    scriptContext?: any;
 }
 
 @observer
@@ -323,6 +324,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 const func = () => this.onClickHandler.script.run({
                     this: this.layoutDoc,
                     self: this.rootDoc,
+                    scriptContext: this.props.scriptContext,
                     thisContainer: this.props.ContainingCollectionDoc, shiftKey: e.shiftKey
                 }, console.log);
                 if (this.props.Document !== Doc.UserDoc()["dockedBtn-undo"] && this.props.Document !== Doc.UserDoc()["dockedBtn-redo"]) {
-- 
cgit v1.2.3-70-g09d2


From e93058822d2b997b48fb711f49bb14357a61143c Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Sun, 26 Jul 2020 22:54:10 -0500
Subject: layout check in properties, rich text menu to top

---
 src/client/views/MainView.tsx                      |  4 +-
 src/client/views/PropertiesButtons.scss            |  9 ++
 src/client/views/PropertiesButtons.tsx             | 99 ++++++++++++++--------
 src/client/views/collections/CollectionMenu.tsx    | 44 +++++++---
 .../collectionFreeForm/PropertiesView.scss         | 21 ++++-
 .../collectionFreeForm/PropertiesView.tsx          | 31 ++++++-
 src/client/views/nodes/DocumentView.tsx            | 13 +++
 .../views/nodes/formattedText/RichTextMenu.tsx     | 47 +++++-----
 8 files changed, 192 insertions(+), 76 deletions(-)

(limited to 'src/client/views/PropertiesButtons.tsx')

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 4f85ef333..153df7d9d 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -628,7 +628,7 @@ export class MainView extends React.Component {
     }
 
     @computed get mainContent() {
-        const n = (RichTextMenu.Instance?.Pinned ? 1 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0);
+        const n = (RichTextMenu.Instance?.Pinned ? 0 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0);
         const height = `calc(100% - ${n * Number(ANTIMODEMENU_HEIGHT.replace("px", ""))}px)`;
 
         const rightFlyout = this.selectedDocumentView ? this._propertiesWidth - 1 : this.propertiesWidth() > 10 ? 151.5 : 0;
@@ -799,7 +799,7 @@ export class MainView extends React.Component {
             {/* {this.search} */}
             <CollectionMenu />
             <FormatShapePane />
-            <RichTextMenu key="rich" />
+            {/* <RichTextMenu key="rich" /> */}
             {LinkDescriptionPopup.descriptionPopup ? <LinkDescriptionPopup /> : null}
             {DocumentLinksButton.EditLink ? <LinkMenu location={DocumentLinksButton.EditLinkLoc} docView={DocumentLinksButton.EditLink} addDocTab={DocumentLinksButton.EditLink.props.addDocTab} changeFlyout={emptyFunction} /> : (null)}
             {LinkDocPreview.LinkInfo ? <LinkDocPreview location={LinkDocPreview.LinkInfo.Location} backgroundColor={this.defaultBackgroundColors}
diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss
index 305688bdb..c3fea5e29 100644
--- a/src/client/views/PropertiesButtons.scss
+++ b/src/client/views/PropertiesButtons.scss
@@ -53,6 +53,15 @@ $linkGap : 3px;
     overflow-x: visible;
 }
 
+.onClickFlyout-editScript {
+    text-align: center;
+    border: 0.5px solid grey;
+    background-color: rgb(230, 230, 230);
+    border-radius: 9px;
+    padding: 4px;
+}
+
+
 .propertiesButtons-button {
     pointer-events: auto;
     padding-right: 5px;
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index a512b3232..f1cb24425 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -26,6 +26,7 @@ import { SelectionManager } from '../util/SelectionManager';
 import SharingManager from '../util/SharingManager';
 import { GooglePhotos } from '../apis/google_docs/GooglePhotosClientUtils';
 import { ImageField } from '../../fields/URLField';
+import { undoBatch, UndoManager } from '../util/UndoManager';
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -80,6 +81,8 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; }
     @computed get dataDoc() { return this.selectedDocumentView?.dataDoc; }
 
+    @observable public onClick = this.selectedDoc?.onClickBehavior ? this.selectedDoc?.onClickBehavior : "nothing";
+
     public startPullOutcome = action((success: boolean) => {
         if (!this._pullAnimating) {
             this._pullAnimating = true;
@@ -373,54 +376,80 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         }
     }
 
+    @action
+    handleOptionChange = (e: any) => {
+        const value = e.target.value;
+        this.onClick = e.target.value;
+        if (value === "nothing") {
+            this.selectedDocumentView?.noOnClick;
+        } else if (value === "enterPortal") {
+            //this.selectedDocumentView?.noOnClick;
+            this.selectedDocumentView?.makeIntoPortal;
+        } else if (value === "toggleDetail") {
+            //this.selectedDocumentView?.noOnClick;
+            this.selectedDocumentView?.toggleDetail;
+        } else if (value === "linkInPlace") {
+            //this.selectedDocumentView?.noOnClick;
+            this.selectedDocumentView?.toggleFollowInPlace;
+        } else if (value === "linkOnRight") {
+            //this.selectedDocumentView?.noOnClick;
+            this.selectedDocumentView?.toggleFollowOnRight;
+        }
+    }
+
+    @undoBatch @action
+    editOnClickScript = () => {
+        if (this.selectedDoc) {
+            DocUtils.makeCustomViewClicked(this.selectedDoc, undefined, "onClick");
+        }
+    }
+
     @computed
     get onClickFlyout() {
         return <div><form>
             <div className="radio">
                 <label>
-                    <input type="radio" value="option1" checked={true} />
-                Enter Portal
-            </label>
+                    <input type="radio" value="nothing"
+                        checked={this.onClick === 'nothing'}
+                        onChange={this.handleOptionChange} />
+                    Select Document
+                </label>
             </div>
             <div className="radio">
                 <label>
-                    <input type="radio" value="option2" />
-                Toggle Detail
-            </label>
+                    <input type="radio" value="enterPortal"
+                        checked={this.onClick === 'enterPortal'}
+                        onChange={this.handleOptionChange} />
+                    Enter Portal
+                </label>
             </div>
             <div className="radio">
                 <label>
-                    <input type="radio" value="option3" />
-                Do Nothing
-            </label>
+                    <input type="radio" value="toggleDetail"
+                        checked={this.onClick === 'toggleDetail'}
+                        onChange={this.handleOptionChange} />
+                    Toggle Detail
+                </label>
             </div>
             <div className="radio">
                 <label>
-                    <input type="radio" value="option3" />
-                Follow Link in Place
-            </label>
+                    <input type="radio" value="linkInPlace"
+                        checked={this.onClick === 'linkInPlace'}
+                        onChange={this.handleOptionChange} />
+                    Follow Link
+                </label>
             </div>
             <div className="radio">
                 <label>
-                    <input type="radio" value="option3" />
-                Follow Link on Right
-            </label>
+                    <input type="radio" value="linkOnRight"
+                        checked={this.onClick === 'linkOnRight'}
+                        onChange={this.handleOptionChange} />
+                    Open Link on Right
+                </label>
             </div>
-            <div className="radio">
-                <label>
-                    <input type="radio" value="option3" />
-                Edit onClick Script
-            </label>
-            </div>
-        </form> </div>;
-
-        // onClicks.push({ description: "Enter Portal", event: this.makeIntoPortal, icon: "window-restore" });
-        // onClicks.push({ description: "Toggle Detail", event: () => this.Document.onClick = ScriptField.MakeScript(`toggleDetail(self, "${this.Document.layoutKey}")`), icon: "window-restore" });
-        // onClicks.push({ description: this.Document.ignoreClick ? "Select" : "Do Nothing", event: () => this.Document.ignoreClick = !this.Document.ignoreClick, icon: this.Document.ignoreClick ? "unlock" : "lock" });
-        // onClicks.push({ description: this.Document.isLinkButton ? "Remove Follow Behavior" : "Follow Link in Place", event: this.toggleFollowInPlace, icon: "concierge-bell" });
-        // onClicks.push({ description: this.Document.isLinkButton ? "Remove Follow Behavior" : "Follow Link on Right", event: this.toggleFollowOnRight, icon: "concierge-bell" });
-        // onClicks.push({ description: this.Document.isLinkButton || this.onClickHandler ? "Remove Click Behavior" : "Follow Link", event: this.toggleLinkButtonBehavior, icon: "concierge-bell" });
-        // onClicks.push({ description: "Edit onClick Script", event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.props.Document, undefined, "onClick"), "edit onClick"), icon: "edit" });
+        </form>
+            <div onPointerDown={this.editOnClickScript} className="onClickFlyout-editScript"> Edit onClick Script</div>
+        </div>;
     }
 
     @computed
@@ -452,9 +481,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             <div className="propertiesButtons-button">
                 {this.templateButton}
             </div>
-            <div className="propertiesButtons-button">
+            {/* <div className="propertiesButtons-button">
                 {this.metadataButton}
-            </div>
+            </div> */}
             <div className="propertiesButtons-button">
                 {this.pinButton}
             </div>
@@ -470,14 +499,14 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             <div className="propertiesButtons-button">
                 {this.deleteButton}
             </div>
+            <div className="propertiesButtons-button">
+                {this.onClickButton}
+            </div>
         </div>
             <div className="propertiesButtons">
                 <div className="propertiesButtons-button">
                     {this.sharingButton}
                 </div>
-                <div className="propertiesButtons-button">
-                    {this.onClickButton}
-                </div>
                 <div className="propertiesButtons-button" style={{ display: !considerPush ? "none" : "" }}>
                     {this.considerGoogleDocsPush}
                 </div>
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 24be69050..5a7c98f46 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -25,6 +25,8 @@ import { SelectionManager } from "../../util/SelectionManager";
 import { DocumentView } from "../nodes/DocumentView";
 import { ColorState } from "react-color";
 import { ObjectField } from "../../../fields/ObjectField";
+import RichTextMenu from "../nodes/formattedText/RichTextMenu";
+import { RichTextField } from "../../../fields/RichTextField";
 
 @observer
 export default class CollectionMenu extends AntimodeMenu {
@@ -300,6 +302,20 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
     @computed get childDocs() {
         return DocListCast(this.dataField);
     }
+
+    @computed get selectedDocumentView() {
+        if (SelectionManager.SelectedDocuments().length) {
+            return SelectionManager.SelectedDocuments()[0];
+        } else { return undefined; }
+    }
+    @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; }
+    @computed get isText() {
+        if (this.selectedDoc) {
+            return this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof RichTextField;
+        }
+        else return false;
+    }
+
     @undoBatch
     @action
     nextKeyframe = (): void => {
@@ -469,25 +485,27 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
     render() {
         return this.Document.isAnnotationOverlay ? (null) :
             <div className="collectionFreeFormMenu-cont">
-                <div key="map" title="mini map" className="backKeyframe" onClick={this.miniMap}>
+                {!!!this.isText ? <div key="map" title="mini map" className="backKeyframe" onClick={this.miniMap}>
                     <FontAwesomeIcon icon={"map"} size={"lg"} />
-                </div>
-                <div key="back" title="back frame" className="backKeyframe" onClick={this.prevKeyframe}>
+                </div> : null}
+                {!!!this.isText ? <div key="back" title="back frame" className="backKeyframe" onClick={this.prevKeyframe}>
                     <FontAwesomeIcon icon={"caret-left"} size={"lg"} />
-                </div>
-                <div key="num" title="toggle view all" className="numKeyframe" style={{ backgroundColor: this.Document.editing ? "#759c75" : "#c56565" }}
+                </div> : null}
+                {!!!this.isText ? <div key="num" title="toggle view all" className="numKeyframe" style={{ backgroundColor: this.Document.editing ? "#759c75" : "#c56565" }}
                     onClick={action(() => this.Document.editing = !this.Document.editing)} >
                     {NumCast(this.Document.currentFrame)}
-                </div>
-                <div key="fwd" title="forward frame" className="fwdKeyframe" onClick={this.nextKeyframe}>
+                </div> : null}
+                {!!!this.isText ? <div key="fwd" title="forward frame" className="fwdKeyframe" onClick={this.nextKeyframe}>
                     <FontAwesomeIcon icon={"caret-right"} size={"lg"} />
-                </div>
+                </div> : null}
+
+                {!!!this.isText ? this.widthPicker : null}
+                {!!!this.isText ? this.colorPicker : null}
+                {!!!this.isText ? this.fillPicker : null}
+                {!!!this.isText ? this.drawButtons : null}
+                {!!!this.isText ? this.formatPane : null}
+                {this.isText ? <RichTextMenu key="rich" /> : null}
 
-                {this.widthPicker}
-                {this.colorPicker}
-                {this.fillPicker}
-                {this.drawButtons}
-                {this.formatPane}
             </div>;
     }
 }
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index 99db0022e..8cc591875 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -164,9 +164,26 @@
         padding: 8.5px;
 
         .propertiesView-fields-title {
-            font-size: 12.5px;
-            font-weight: bold;
             padding-bottom: 7px;
+            display: flex;
+
+            .propertiesView-fields-title-name {
+                font-size: 12.5px;
+                font-weight: bold;
+            }
+
+            .propertiesView-fields-title-checkbox {
+                float: right;
+                height: 20px;
+                margin-top: -13px;
+                margin-left: 115px;
+
+                .propertiesView-fields-title-checkbox-text {
+                    font-size: 7px;
+                    margin-top: -10px;
+                    margin-left: 6px;
+                }
+            }
         }
 
         .propertiesView-fields-content {
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index a75ad13e5..3b8d782aa 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -16,7 +16,7 @@ import { Transform } from "../../../util/Transform";
 import { PropertiesButtons } from "../../PropertiesButtons";
 import { SelectionManager } from "../../../util/SelectionManager";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Tooltip } from "@material-ui/core";
+import { Tooltip, Checkbox } from "@material-ui/core";
 import SharingManager from "../../../util/SharingManager";
 
 
@@ -41,6 +41,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; }
     @computed get dataDoc() { return this.selectedDocumentView?.dataDoc; }
 
+    @observable layoutFields: boolean = false;
+
     @action
     rtfWidth = () => {
         if (this.selectedDoc) {
@@ -88,9 +90,9 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     }
 
     @computed get expandedField() {
-        if (this.dataDoc) {
+        if (this.dataDoc && this.selectedDoc) {
             const ids: { [key: string]: string } = {};
-            const doc = this.dataDoc;
+            const doc = this.layoutFields ? Doc.Layout(this.selectedDoc) : this.dataDoc;
             doc && Object.keys(doc).forEach(key => !(key in ids) && doc[key] !== ComputedField.undefined && (ids[key] = key));
 
             const rows: JSX.Element[] = [];
@@ -215,6 +217,19 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         </div>;
     }
 
+    @computed get fieldsCheckbox() {
+        return <Checkbox
+            color="primary"
+            onChange={this.toggleCheckbox}
+            checked={this.layoutFields}
+        />;
+    }
+
+    @action
+    toggleCheckbox = () => {
+        this.layoutFields = !this.layoutFields;
+    }
+
     render() {
 
         if (!this.selectedDoc) {
@@ -247,7 +262,15 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 </div>
             </div>
             <div className="propertiesView-fields">
-                <div className="propertiesView-fields-title"> Fields</div>
+                <div className="propertiesView-fields-title">
+                    <div className="propertiesView-fields-title-name">
+                        Fields
+                    </div>
+                    <div className="propertiesView-fields-title-checkbox">
+                        {this.fieldsCheckbox}
+                        <div className="propertiesView-fields-title-checkbox-text">Layout</div>
+                    </div>
+                </div>
                 <div className="propertiesView-fields-content"> {this.expandedField} </div>
             </div>
             <div className="propertiesView-layout">
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 6aceec90e..884104f62 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -622,6 +622,18 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         }
     }
 
+
+    @undoBatch
+    noOnClick = (): void => {
+        this.Document.ignoreClick = false;
+        this.Document.isLinkButton = false;
+    }
+
+    @undoBatch
+    toggleDetail = (): void => {
+        this.Document.onClick = ScriptField.MakeScript(`toggleDetail(self, "${this.Document.layoutKey}")`);
+    }
+
     @undoBatch
     @action
     drop = async (e: Event, de: DragManager.DropEvent) => {
@@ -673,6 +685,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     @undoBatch
     @action
     makeIntoPortal = async () => {
+        console.log("into portal");
         const portalLink = DocListCast(this.Document.links).find(d => d.anchor1 === this.props.Document);
         if (!portalLink) {
             const portal = Docs.Create.FreeformDocument([], { _width: NumCast(this.layoutDoc._width) + 10, _height: NumCast(this.layoutDoc._height), title: StrCast(this.props.Document.title) + ".portal" });
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index 47a4911b8..98c786566 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -77,7 +77,8 @@ export default class RichTextMenu extends AntimodeMenu {
         super(props);
         RichTextMenu.Instance = this;
         this._canFade = false;
-        this.Pinned = BoolCast(Doc.UserDoc()["menuRichText-pinned"]);
+        //this.Pinned = BoolCast(Doc.UserDoc()["menuRichText-pinned"]);
+        this.Pinned = true;
 
         this.fontSizeOptions = [
             { mark: schema.marks.pFontSize.create({ fontSize: 7 }), title: "Set font size", label: "7pt", command: this.changeFontSize },
@@ -918,28 +919,34 @@ export default class RichTextMenu extends AntimodeMenu {
     render() {
         TraceMobx();
         const row1 = <div className="antimodeMenu-row" key="row 1" style={{ display: this.collapsed ? "none" : undefined }}>{[
-            !this.collapsed ? this.getDragger() : (null),
-            !this.Pinned ? (null) : <div key="frag1"> {[
-                this.createButton("bold", "Bold", this.boldActive, toggleMark(schema.marks.strong)),
-                this.createButton("italic", "Italic", this.italicsActive, toggleMark(schema.marks.em)),
-                this.createButton("underline", "Underline", this.underlineActive, toggleMark(schema.marks.underline)),
-                this.createButton("strikethrough", "Strikethrough", this.strikethroughActive, toggleMark(schema.marks.strikethrough)),
-                this.createButton("superscript", "Superscript", this.superscriptActive, toggleMark(schema.marks.superscript)),
-                this.createButton("subscript", "Subscript", this.subscriptActive, toggleMark(schema.marks.subscript)),
-                <div className="richTextMenu-divider" key="divider" />
-            ]}</div>,
+            //!this.collapsed ? this.getDragger() : (null),
+            // !this.Pinned ? (null) : <div key="frag1"> {[
+            //     this.createButton("bold", "Bold", this.boldActive, toggleMark(schema.marks.strong)),
+            //     this.createButton("italic", "Italic", this.italicsActive, toggleMark(schema.marks.em)),
+            //     this.createButton("underline", "Underline", this.underlineActive, toggleMark(schema.marks.underline)),
+            //     this.createButton("strikethrough", "Strikethrough", this.strikethroughActive, toggleMark(schema.marks.strikethrough)),
+            //     this.createButton("superscript", "Superscript", this.superscriptActive, toggleMark(schema.marks.superscript)),
+            //     this.createButton("subscript", "Subscript", this.subscriptActive, toggleMark(schema.marks.subscript)),
+            //     <div className="richTextMenu-divider" key="divider" />
+            // ]}</div>,
+            this.createButton("bold", "Bold", this.boldActive, toggleMark(schema.marks.strong)),
+            this.createButton("italic", "Italic", this.italicsActive, toggleMark(schema.marks.em)),
+            this.createButton("underline", "Underline", this.underlineActive, toggleMark(schema.marks.underline)),
+            this.createButton("strikethrough", "Strikethrough", this.strikethroughActive, toggleMark(schema.marks.strikethrough)),
+            this.createButton("superscript", "Superscript", this.superscriptActive, toggleMark(schema.marks.superscript)),
+            this.createButton("subscript", "Subscript", this.subscriptActive, toggleMark(schema.marks.subscript)),
             this.createColorButton(),
             this.createHighlighterButton(),
-            this.createLinkButton(),
-            this.createBrushButton(),
+            //this.createLinkButton(),
+            //this.createBrushButton(),
             <div className="richTextMenu-divider" key="divider 2" />,
             this.createButton("align-left", "Align Left", this.activeAlignment === "left", this.alignLeft),
             this.createButton("align-center", "Align Center", this.activeAlignment === "center", this.alignCenter),
             this.createButton("align-right", "Align Right", this.activeAlignment === "right", this.alignRight),
             this.createButton("indent", "Inset More", undefined, this.insetParagraph),
             this.createButton("outdent", "Inset Less", undefined, this.outsetParagraph),
-            this.createButton("hand-point-left", "Hanging Indent", undefined, this.hangingIndentParagraph),
-            this.createButton("hand-point-right", "Indent", undefined, this.indentParagraph),
+            //this.createButton("hand-point-left", "Hanging Indent", undefined, this.hangingIndentParagraph),
+            //this.createButton("hand-point-right", "Indent", undefined, this.indentParagraph),
         ]}</div>;
 
         const row2 = <div className="antimodeMenu-row row-2" key="row2">
@@ -950,21 +957,21 @@ export default class RichTextMenu extends AntimodeMenu {
                 this.createMarksDropdown(this.activeFontFamily, this.fontFamilyOptions, "font family", action((val: string) => this.activeFontFamily = val)),
                 <div className="richTextMenu-divider" key="divider 4" />,
                 this.createNodesDropdown(this.activeListType, this.listTypeOptions, "list type", action((val: string) => this.activeListType = val)),
-                this.createButton("sort-amount-down", "Summarize", undefined, this.insertSummarizer),
+                //this.createButton("sort-amount-down", "Summarize", undefined, this.insertSummarizer),
                 this.createButton("quote-left", "Blockquote", undefined, this.insertBlockquote),
                 this.createButton("minus", "Horizontal Rule", undefined, this.insertHorizontalRule),
                 <div className="richTextMenu-divider" key="divider 5" />,]}
             </div>
-            <div key="collapser">
-                {/* <div key="collapser">
+            {/* <div key="collapser">
+                {<div key="collapser">
                     <button className="antimodeMenu-button" key="collapse menu" title="Collapse menu" onClick={this.toggleCollapse} style={{ backgroundColor: this.collapsed ? "#121212" : "", width: 25 }}>
                         <FontAwesomeIcon icon="chevron-left" size="lg" style={{ transitionProperty: "transform", transitionDuration: "0.3s", transform: `rotate(${this.collapsed ? 180 : 0}deg)` }} />
                     </button>
-                </div> */}
+                </div> }
                 <button className="antimodeMenu-button" key="pin menu" title="Pin menu" onClick={this.toggleMenuPin} style={{ backgroundColor: this.Pinned ? "#121212" : "", display: this.collapsed ? "none" : undefined }}>
                     <FontAwesomeIcon icon="thumbtack" size="lg" style={{ transitionProperty: "transform", transitionDuration: "0.1s", transform: `rotate(${this.Pinned ? 45 : 0}deg)` }} />
                 </button>
-            </div>
+            </div> */}
         </div>;
 
         return (
-- 
cgit v1.2.3-70-g09d2


From f58fb7428f6eeca6b41beb59df244c7c50c876fa Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Mon, 27 Jul 2020 13:37:01 -0500
Subject: bug fixes and adding to menu UI

---
 src/client/views/MainView.scss                     | 165 +++++++++++----------
 src/client/views/MainView.tsx                      | 137 ++++++++---------
 src/client/views/PropertiesButtons.scss            |   5 +-
 src/client/views/PropertiesButtons.tsx             |   4 +-
 .../views/nodes/formattedText/FormattedTextBox.tsx |   2 +-
 5 files changed, 162 insertions(+), 151 deletions(-)

(limited to 'src/client/views/PropertiesButtons.tsx')

diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index f1042ff50..7318d451b 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -139,7 +139,6 @@
     border-left: solid 1px;
     z-index: 100000;
     cursor: auto;
-    overflow-x: visible;
 }
 
 .mainView-flyoutContainer {
@@ -156,99 +155,105 @@
 
 .mainView-menuPanel {
 
-    max-width: 95px;
+    max-width: 60px;
     background-color: black;
-    padding: 15px;
-    /* padding-right: 50px; */
-    overflow-y: scroll;
-    overflow-x: hidden;
+    //overflow-y: scroll;
+    //overflow-x: hidden;
+
 
     .mainView-menuPanel-button {
-        width: 60px;
-        padding: 7.5px;
+        padding: 7px;
+        padding-left: 7px;
+        width: 100%;
+        .mainView-menuPanel-button-wrap {
+        width: 45px;
+        /* padding: 5px; */
         touch-action: none;
         background: black;
         transform-origin: top left;
-        margin-bottom: 5px;
+        /* margin-bottom: 5px; */
         margin-top: 5px;
         margin-right: 25px;
         border-radius: 8px;
+    
+            &:hover {
+                background: rgb(61, 61, 61);
+                cursor: pointer;
+            }
+        }  
+    }
+
+    .mainView-menuPanel-button-label {
+        color: white;
+        margin-left: px;
+        margin-right: 4px;
+        border-radius: 8px;
+        width: 42px;
+        position: relative;
+        text-align: center;
+        font-size: 8px;
+        margin-top: 1px;
+        letter-spacing: normal;
+        padding: 3px;
+        background-color: inherit;
+    }
 
-        .mainView-menuPanel-button-label {
-            color: white;
-            margin-left: -6px;
-            border-radius: 8px;
-            width: 55px;
-            position: relative;
-            text-align: center;
-            font-size: 9.5px;
-            margin-top: 1px;
-            letter-spacing: normal;
-            padding: 3px;
-            background-color: inherit;
-        }
-
-        .mainView-menuPanel-button-icon {
-            width: auto;
-            height: 35px;
-            padding: 5px;
-        }
-
-        svg {
-            width: 95% !important;
-            height: 95%;
-        }
-
-        &:hover {
-            background: rgb(61, 61, 61);
-            cursor: pointer;
-        }
+    .mainView-menuPanel-button-icon {
+        width: auto;
+        height: 35px;
+        padding: 5px;
     }
 
-    // .mainView-menuPanel-bottomButton {
-    //     width: 45px;
-    //     height: 45px;
-    //     padding: 10px;
-    //     pointer-events: all;
-    //     touch-action: none;
-    //     //border-radius: inherit;
-    //     background: black;
-    //     background-color: black;
-    //     //border-radius: 100%;
-    //     transform-origin: top left;
-    //     margin-bottom: 20px;
-    //     margin-top: 5px;
-
-    //     margin-right: 25px;
-
-    //     .mainView-menuPanel-bottomButton-label {
-    //         background: black;
-    //         color: white;
-    //         margin-left: -10px;
-    //         border-radius: 8px;
-    //         width: 65px;
-    //         position: absolute;
-    //         text-align: center;
-    //         font-size: 9.5px;
-    //         margin-top: 2px;
-    //         letter-spacing: normal;
-    //         padding: 3px;
-    //         //margin-bottom: 23px;
-    //     }
-
-    //     .mainView-menuPanel-bottomButton-icon {
-    //         width: 50px;
-    //         height: 50px;
-    //         color: white;
-    //     }
-
-    //     svg {
-    //         width: 95% !important;
-    //         height: 95%;
-    //     }
-    // }
+    svg {
+        width: 95% !important;
+        height: 95%;
+    }
 }
 
+// .mainView-menuPanel-bottomButton {
+//     width: 45px;
+//     height: 45px;
+//     padding: 10px;
+//     pointer-events: all;
+//     touch-action: none;
+//     //border-radius: inherit;
+//     background: black;
+//     background-color: black;
+//     //border-radius: 100%;
+//     transform-origin: top left;
+//     margin-bottom: 20px;
+//     margin-top: 5px;
+
+//     margin-right: 25px;
+
+//     .mainView-menuPanel-bottomButton-label {
+//         background: black;
+//         color: white;
+//         margin-left: -10px;
+//         border-radius: 8px;
+//         width: 65px;
+//         position: absolute;
+//         text-align: center;
+//         font-size: 9.5px;
+//         margin-top: 2px;
+//         letter-spacing: normal;
+//         padding: 3px;
+//         //margin-bottom: 23px;
+//     }
+
+//     .mainView-menuPanel-bottomButton-icon {
+//         width: 50px;
+//         height: 50px;
+//         color: white;
+//     }
+
+//     svg {
+//         width: 95% !important;
+//         height: 95%;
+//     }
+// }
+
+
 .mainView-searchPanel {
     width: 100%;
     height: 33px;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 153df7d9d..e06bfd0b0 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -423,7 +423,8 @@ export class MainView extends React.Component {
             doc.dockingConfig ? this.openWorkspace(doc) :
                 CollectionDockingView.AddRightSplit(doc, libraryPath);
     }
-    sidebarScreenToLocal = () => new Transform(0, (RichTextMenu.Instance.Pinned ? -35 : 0) + (CollectionMenu.Instance.Pinned ? -35 : 0), 1);
+    sidebarScreenToLocal = () => new Transform(0, (CollectionMenu.Instance.Pinned ? -35 : 0), 1);
+    //sidebarScreenToLocal = () => new Transform(0, (RichTextMenu.Instance.Pinned ? -35 : 0) + (CollectionMenu.Instance.Pinned ? -35 : 0), 1);
     mainContainerXf = () => this.sidebarScreenToLocal().translate(0, -this._buttonBarHeight);
 
     @computed get flyout() {
@@ -499,82 +500,85 @@ export class MainView extends React.Component {
 
     @computed get menuPanel() {
         return <div className="mainView-menuPanel">
-            <div className="mainView-menuPanel-button"
-                style={{ backgroundColor: this.panelContent === "workspace" ? "lightgrey" : "" }}
-                onPointerDown={e => this.selectPanel("workspace")}>
-                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="desktop"
-                    color={this.panelContent === "workspace" ? "black" : "white"} size="lg" />
-                <div className="mainView-menuPanel-button-label"
-                    style={{ color: this.panelContent === "workspace" ? "black" : "white" }}> Workspace </div>
+            <div className="mainView-menuPanel-button" style={{ backgroundColor: this.panelContent === "workspace" ? "lightgrey" : "" }}>
+                <div className="mainView-menuPanel-button-wrap"
+                    style={{ backgroundColor: this.panelContent === "workspace" ? "lightgrey" : "" }}
+                    onPointerDown={e => this.selectPanel("workspace")}>
+                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="desktop"
+                        color={this.panelContent === "workspace" ? "black" : "white"} size="lg" />
+                    <div className="mainView-menuPanel-button-label"
+                        style={{ color: this.panelContent === "workspace" ? "black" : "white" }}> Workspace </div>
+                </div>
             </div>
 
-            <div className="mainView-menuPanel-button"
-                style={{ backgroundColor: this.panelContent === "catalog" ? "lightgrey" : "" }}
-                onPointerDown={e => this.selectPanel("catalog")}>
-                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="file"
-                    color={this.panelContent === "catalog" ? "black" : "white"} size="lg" />
-                <div className="mainView-menuPanel-button-label"
-                    style={{ color: this.panelContent === "catalog" ? "black" : "white" }}> Catalog </div>
+            <div className="mainView-menuPanel-button" style={{ backgroundColor: this.panelContent === "catalog" ? "lightgrey" : "" }}>
+                <div className="mainView-menuPanel-button-wrap"
+                    style={{ backgroundColor: this.panelContent === "catalog" ? "lightgrey" : "" }}
+                    onPointerDown={e => this.selectPanel("catalog")}>
+                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="file"
+                        color={this.panelContent === "catalog" ? "black" : "white"} size="lg" />
+                    <div className="mainView-menuPanel-button-label"
+                        style={{ color: this.panelContent === "catalog" ? "black" : "white" }}> Catalog </div>
+                </div>
             </div>
 
-            <div className="mainView-menuPanel-button"
-                style={{ backgroundColor: this.panelContent === "deleted" ? "lightgrey" : "" }}
-                onPointerDown={e => this.selectPanel("deleted")}>
-                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="archive"
-                    color={this.panelContent === "deleted" ? "black" : "white"} size="lg" />
-                <div className="mainView-menuPanel-button-label"
-                    style={{ color: this.panelContent === "deleted" ? "black" : "white" }}> Recently Used </div>
+            <div className="mainView-menuPanel-button" style={{ backgroundColor: this.panelContent === "deleted" ? "lightgrey" : "" }}>
+                <div className="mainView-menuPanel-button-wrap"
+                    style={{ backgroundColor: this.panelContent === "deleted" ? "lightgrey" : "" }}
+                    onPointerDown={e => this.selectPanel("deleted")}>
+                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="archive"
+                        color={this.panelContent === "deleted" ? "black" : "white"} size="lg" />
+                    <div className="mainView-menuPanel-button-label"
+                        style={{ color: this.panelContent === "deleted" ? "black" : "white" }}> Recently Used </div>
+                </div>
             </div>
 
-            <div className="mainView-menuPanel-button"
-                onPointerDown={e => this.selectPanel("upload")}>
-                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="upload" color="white" size="lg" />
-                <div className="mainView-menuPanel-button-label"> Import </div>
+            <div className="mainView-menuPanel-button">
+                <div className="mainView-menuPanel-button-wrap"
+                    onPointerDown={e => this.selectPanel("upload")}>
+                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="upload" color="white" size="lg" />
+                    <div className="mainView-menuPanel-button-label"> Import </div>
+                </div>
             </div>
 
-            <div className="mainView-menuPanel-button"
-                //onPointerDown={e => this.selectPanel("sharing")}
-                onClick={() => GroupManager.Instance.open()}>
-                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="users" color="white" size="lg" />
-                <div className="mainView-menuPanel-button-label"> Sharing </div>
+            <div className="mainView-menuPanel-button">
+                <div className="mainView-menuPanel-button-wrap"
+                    //onPointerDown={e => this.selectPanel("sharing")}
+                    onClick={() => GroupManager.Instance.open()}>
+                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="users" color="white" size="lg" />
+                    <div className="mainView-menuPanel-button-label"> Sharing </div>
+                </div>
             </div>
 
-            <div className="mainView-menuPanel-button"
-                onPointerDown={e => this.selectPanel("tools")}
-                style={{
-                    backgroundColor: this.panelContent === "tools" ? "lightgrey" : "",
-                    marginBottom: "70px"
-                }}>
-                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="wrench"
-                    color={this.panelContent === "tools" ? "black" : "white"} size="lg" />
-                <div className="mainView-menuPanel-button-label"
-                    style={{ color: this.panelContent === "tools" ? "black" : "white" }}> Tools </div>
+            <div className="mainView-menuPanel-button" style={{ marginBottom: "110px", backgroundColor: this.panelContent === "tools" ? "lightgrey" : "", }}>
+                <div className="mainView-menuPanel-button-wrap"
+                    onPointerDown={e => this.selectPanel("tools")}
+                    style={{
+                        backgroundColor: this.panelContent === "tools" ? "lightgrey" : "",
+                    }}>
+                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="wrench"
+                        color={this.panelContent === "tools" ? "black" : "white"} size="lg" />
+                    <div className="mainView-menuPanel-button-label"
+                        style={{ color: this.panelContent === "tools" ? "black" : "white" }}> Tools </div>
+                </div>
             </div>
 
-            {/* <button className="mainView-menuPanel-button"
-                onPointerDown={e => this.selectPanel("search")}
-                style={{
-                    padding: "5px",
-                    background: "black",
-                    boxShadow: "4px 4px 12px black",
-                    //marginBottom: "45px"
-                }}>
-                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="search" color="white" size="lg" />
-                <div className="mainView-menuPanel-button-label"> Search </div>
-            </button> */}
-
-            <div className="mainView-menuPanel-button"
-                // style={{backgroundColor: this.panelContent= "help" ? "lightgrey" : "black"}}
-                onPointerDown={e => this.selectPanel("help")} >
-                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="question-circle" color="white" size="lg" />
-                <div className="mainView-menuPanel-button-label"> Help </div>
+            <div className="mainView-menuPanel-button">
+                <div className="mainView-menuPanel-button-wrap"
+                    // style={{backgroundColor: this.panelContent= "help" ? "lightgrey" : "black"}}
+                    onPointerDown={e => this.selectPanel("help")} >
+                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="question-circle" color="white" size="lg" />
+                    <div className="mainView-menuPanel-button-label"> Help </div>
+                </div>
             </div>
 
-            <div className="mainView-menuPanel-button"
-                // onPointerDown={e => this.selectPanel("settings")}
-                onClick={() => SettingsManager.Instance.open()}>
-                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="cog" color="white" size="lg" />
-                <div className="mainView-menuPanel-button-label"> Settings </div>
+            <div className="mainView-menuPanel-button">
+                <div className="mainView-menuPanel-button-wrap"
+                    // onPointerDown={e => this.selectPanel("settings")}
+                    onClick={() => SettingsManager.Instance.open()}>
+                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="cog" color="white" size="lg" />
+                    <div className="mainView-menuPanel-button-label"> Settings </div>
+                </div>
             </div>
         </div>;
     }
@@ -628,7 +632,8 @@ export class MainView extends React.Component {
     }
 
     @computed get mainContent() {
-        const n = (RichTextMenu.Instance?.Pinned ? 0 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0);
+        //const n = (RichTextMenu.Instance?.Pinned ? 1 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0);
+        const n = (CollectionMenu.Instance?.Pinned ? 1 : 0);
         const height = `calc(100% - ${n * Number(ANTIMODEMENU_HEIGHT.replace("px", ""))}px)`;
 
         const rightFlyout = this.selectedDocumentView ? this._propertiesWidth - 1 : this.propertiesWidth() > 10 ? 151.5 : 0;
@@ -684,7 +689,7 @@ export class MainView extends React.Component {
     });
 
     @computed get expandButton() {
-        return !this._flyoutTranslate ? (<div className="mainView-expandFlyoutButton" title="Re-attach sidebar" onPointerDown={MainView.expandFlyout}><FontAwesomeIcon icon="chevron-right" color="black" size="lg" /></div>) : (null);
+        return !this._flyoutTranslate ? (<div className="mainView-expandFlyoutButton" title="Re-attach sidebar" onPointerDown={MainView.expandFlyout}></div>) : (null);
     }
 
     addButtonDoc = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((flg: boolean, doc) => flg && Doc.AddDocToList(Doc.UserDoc().dockedBtns as Doc, "data", doc), true);
@@ -799,7 +804,7 @@ export class MainView extends React.Component {
             {/* {this.search} */}
             <CollectionMenu />
             <FormatShapePane />
-            {/* <RichTextMenu key="rich" /> */}
+            <div style={{ display: "none" }}><RichTextMenu key="rich" /></div>
             {LinkDescriptionPopup.descriptionPopup ? <LinkDescriptionPopup /> : null}
             {DocumentLinksButton.EditLink ? <LinkMenu location={DocumentLinksButton.EditLinkLoc} docView={DocumentLinksButton.EditLink} addDocTab={DocumentLinksButton.EditLink.props.addDocTab} changeFlyout={emptyFunction} /> : (null)}
             {LinkDocPreview.LinkInfo ? <LinkDocPreview location={LinkDocPreview.LinkInfo.Location} backgroundColor={this.defaultBackgroundColors}
diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss
index c3fea5e29..037b6b155 100644
--- a/src/client/views/PropertiesButtons.scss
+++ b/src/client/views/PropertiesButtons.scss
@@ -22,7 +22,7 @@ $linkGap : 3px;
 .propertiesButtons-linkButton-nonempty {
     height: 20px;
     width: 20px;
-    border-radius: 50%;
+    border-radius: 5px;
     opacity: 0.9;
     pointer-events: auto;
     background-color: $dark-color;
@@ -66,13 +66,14 @@ $linkGap : 3px;
     pointer-events: auto;
     padding-right: 5px;
     width: 25px;
+    border-radius: 5px;
 }
 
 .propertiesButtons-linker {
     height: 20px;
     width: 20px;
     text-align: center;
-    border-radius: 50%;
+    border-radius: 5px;
     pointer-events: auto;
     color: $dark-color;
     border: $dark-color 1px solid;
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index f1cb24425..1f13d0b07 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -81,7 +81,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; }
     @computed get dataDoc() { return this.selectedDocumentView?.dataDoc; }
 
-    @observable public onClick = this.selectedDoc?.onClickBehavior ? this.selectedDoc?.onClickBehavior : "nothing";
+    @computed get onClick() { return this.selectedDoc?.onClickBehavior ? this.selectedDoc?.onClickBehavior : "nothing"; }
 
     public startPullOutcome = action((success: boolean) => {
         if (!this._pullAnimating) {
@@ -379,7 +379,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     @action
     handleOptionChange = (e: any) => {
         const value = e.target.value;
-        this.onClick = e.target.value;
+        this.selectedDoc?.onClickBehavior = e.target.value;
         if (value === "nothing") {
             this.selectedDocumentView?.noOnClick;
         } else if (value === "enterPortal") {
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 6b6fc5da2..974dabd5c 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -1268,7 +1268,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
         this.doLinkOnDeselect();
 
         // move the richtextmenu offscreen
-        if (!RichTextMenu.Instance.Pinned) RichTextMenu.Instance.delayHide();
+        //if (!RichTextMenu.Instance.Pinned) RichTextMenu.Instance.delayHide();
     }
 
     _lastTimedMark: Mark | undefined = undefined;
-- 
cgit v1.2.3-70-g09d2


From d4f416ef5715c8f03132244831094f8485c5e6bf Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Mon, 27 Jul 2020 16:57:51 -0500
Subject: onClick functionality and pin change

---
 src/client/views/PropertiesButtons.tsx             | 44 +++++++++++-----------
 .../collectionFreeForm/PropertiesView.scss         | 10 +++++
 .../collectionFreeForm/PropertiesView.tsx          | 13 +++++++
 3 files changed, 45 insertions(+), 22 deletions(-)

(limited to 'src/client/views/PropertiesButtons.tsx')

diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 1f13d0b07..336cd6ff9 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -206,7 +206,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         const isPinned = targetDoc && Doc.isDocPinned(targetDoc);
         return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : "Pin to presentation"}</div></>}>
             <div className="propertiesButtons-linker"
-                style={{ backgroundColor: isPinned ? "black" : "white", color: isPinned ? "white" : "black" }}
+                style={{ backgroundColor: isPinned ? "white" : "#121721", color: isPinned ? "black" : "white" }}
                 onClick={e => DockedFrameRenderer.PinDoc(targetDoc, isPinned)}>
                 <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin"
                 />
@@ -261,10 +261,10 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             templates.set(template, views.reduce((checked, doc) => checked || doc?.props.Document["_show" + template.Name] ? true : false, false as boolean)));
         return !docView ? (null) :
             <Tooltip title={<><div className="dash-tooltip">Tap: Customize layout.  Drag: Create alias</div></>}>
-                <div className="documentButtonBar-linkFlyout" ref={this._dragRef}>
+                <div className="propertiesButtons-linkFlyout" ref={this._dragRef}>
                     <Flyout anchorPoint={anchorPoints.LEFT_TOP} onOpen={action(() => this._aliasDown = true)} onClose={action(() => this._aliasDown = false)}
                         content={!this._aliasDown ? (null) : <TemplateMenu docViews={views.filter(v => v).map(v => v as DocumentView)} templates={templates} />}>
-                        <div className={"documentButtonBar-linkButton-empty"} ref={this._dragRef} onPointerDown={this.onAliasButtonDown} >
+                        <div className={"propertiesButtons-linkButton-empty"} ref={this._dragRef} onPointerDown={this.onAliasButtonDown} >
                             {<FontAwesomeIcon className="documentdecorations-icon" icon="edit" size="sm" />}
                         </div>
                     </Flyout>
@@ -284,7 +284,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     get copyButton() {
         const targetDoc = this.selectedDoc;
         return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Create an Alias"}</div></>}>
-            <div className={"documentButtonBar-linkButton-empty"}
+            <div className={"propertiesButtons-linkButton-empty"}
                 onPointerDown={this.onCopy} >
                 {<FontAwesomeIcon className="documentdecorations-icon" icon="copy" size="sm" />}
             </div>
@@ -302,7 +302,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         return !targetDoc ? (null) : <Tooltip
             title={<><div className="dash-tooltip">{this.selectedDoc?.lockedPosition ?
                 "Unlock Position" : "Lock Position"}</div></>}>
-            <div className={"documentButtonBar-linkButton-empty"}
+            <div className={"propertiesButtons-linkButton-empty"}
                 onPointerDown={this.onLock} >
                 {<FontAwesomeIcon className="documentdecorations-icon"
                     icon={BoolCast(this.selectedDoc?.lockedPosition) ? "unlock" : "lock"} size="sm" />}
@@ -315,13 +315,13 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         const targetDoc = this.selectedDoc;
         return !targetDoc ? (null) : <Tooltip
             title={<><div className="dash-tooltip">{"Download Document"}</div></>}>
-            <div className={"documentButtonBar-linkButton-empty"}
+            <div className={"propertiesButtons-linkButton-empty"}
                 onPointerDown={async () => {
                     if (this.selectedDocumentView?.props.Document) {
                         Doc.Zip(this.selectedDocumentView?.props.Document);
                     }
                 }}>
-                {<FontAwesomeIcon className="documentdecorations-icon"
+                {<FontAwesomeIcon className="propertiesButtons-icon"
                     icon="download" size="sm" />}
             </div>
         </Tooltip>;
@@ -332,11 +332,11 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         const targetDoc = this.selectedDoc;
         return !targetDoc ? (null) : <Tooltip
             title={<><div className="dash-tooltip">{"Delete Document"}</div></>}>
-            <div className={"documentButtonBar-linkButton-empty"}
+            <div className={"propertiesButtons-linkButton-empty"}
                 onPointerDown={() => {
                     this.selectedDocumentView?.props.ContainingCollectionView?.removeDocument(this.selectedDocumentView?.props.Document);
                 }}>
-                {<FontAwesomeIcon className="documentdecorations-icon"
+                {<FontAwesomeIcon className="propertiesButtons-icon"
                     icon="trash-alt" size="sm" />}
             </div>
         </Tooltip>;
@@ -347,13 +347,13 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         const targetDoc = this.selectedDoc;
         return !targetDoc ? (null) : <Tooltip
             title={<><div className="dash-tooltip">{"Share Document"}</div></>}>
-            <div className={"documentButtonBar-linkButton-empty"}
+            <div className={"propertiesButtons-linkButton-empty"}
                 onPointerDown={() => {
                     if (this.selectedDocumentView) {
                         SharingManager.Instance.open(this.selectedDocumentView);
                     }
                 }}>
-                {<FontAwesomeIcon className="documentdecorations-icon"
+                {<FontAwesomeIcon className="propertiesButtons-icon"
                     icon="users" size="sm" />}
             </div>
         </Tooltip>;
@@ -379,21 +379,21 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     @action
     handleOptionChange = (e: any) => {
         const value = e.target.value;
-        this.selectedDoc?.onClickBehavior = e.target.value;
+        this.selectedDoc && (this.selectedDoc.onClickBehavior = e.target.value);
         if (value === "nothing") {
-            this.selectedDocumentView?.noOnClick;
+            this.selectedDocumentView?.noOnClick();
         } else if (value === "enterPortal") {
-            //this.selectedDocumentView?.noOnClick;
-            this.selectedDocumentView?.makeIntoPortal;
+            this.selectedDocumentView?.noOnClick();
+            this.selectedDocumentView?.makeIntoPortal();
         } else if (value === "toggleDetail") {
-            //this.selectedDocumentView?.noOnClick;
-            this.selectedDocumentView?.toggleDetail;
+            this.selectedDocumentView?.noOnClick();
+            this.selectedDocumentView?.toggleDetail();
         } else if (value === "linkInPlace") {
-            //this.selectedDocumentView?.noOnClick;
-            this.selectedDocumentView?.toggleFollowInPlace;
+            this.selectedDocumentView?.noOnClick();
+            this.selectedDocumentView?.toggleFollowInPlace();
         } else if (value === "linkOnRight") {
-            //this.selectedDocumentView?.noOnClick;
-            this.selectedDocumentView?.toggleFollowOnRight;
+            this.selectedDocumentView?.noOnClick();
+            this.selectedDocumentView?.toggleFollowOnRight();
         }
     }
 
@@ -457,7 +457,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         const targetDoc = this.selectedDoc;
         return !targetDoc ? (null) : <Tooltip
             title={<><div className="dash-tooltip">{"Export to Google Photos"}</div></>}>
-            <div className={"documentButtonBar-linkButton-empty"}
+            <div className={"propertiesButtons-linkButton-empty"}
                 onPointerDown={() => {
                     if (this.selectedDocumentView) {
                         GooglePhotos.Export.CollectionToAlbum({ collection: this.selectedDocumentView.Document }).then(console.log)
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index 8cc591875..0701f3b96 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -196,6 +196,16 @@
         }
     }
 
+    .field {
+        display: flex;
+        font-size: 7px;
+        background-color: #e8e8e8;
+        padding-right: 3px;
+        border: 0.5px solid grey;
+        border-radius: 5px;
+        padding-left: 3px;
+    }
+
     .propertiesView-layout {
         padding: 8.5px;
 
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index 3b8d782aa..0f59e2f79 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -113,6 +113,19 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     {contentElement}
                 </div>);
             }
+
+            rows.push(<div className="field" key={"newKeyValue"}>
+                <EditableView
+                    key="editableView"
+                    contents={"add key:value"}
+                    height={13}
+                    fontSize={12}
+                    GetValue={() => ""}
+                    SetValue={(value: string) => {
+                        value.indexOf(":") !== -1 && KeyValueBox.SetField(doc, value.substring(0, value.indexOf(":")), value.substring(value.indexOf(":") + 1, value.length), true);
+                        return true;
+                    }} />
+            </div>);
             return rows;
         }
     }
-- 
cgit v1.2.3-70-g09d2


From be70f604c9a0a9e623e34826de19455ab8855f5b Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Tue, 28 Jul 2020 11:34:13 -0500
Subject: button redo

---
 src/client/views/PropertiesButtons.scss            | 15 +++++++-----
 src/client/views/PropertiesButtons.tsx             | 28 ++++++++++++----------
 src/client/views/collections/CollectionMenu.tsx    | 17 +++++++++++--
 src/client/views/nodes/DocumentView.tsx            |  1 -
 .../views/nodes/formattedText/RichTextMenu.tsx     | 10 ++++----
 5 files changed, 44 insertions(+), 27 deletions(-)

(limited to 'src/client/views/PropertiesButtons.tsx')

diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss
index 037b6b155..11265b413 100644
--- a/src/client/views/PropertiesButtons.scss
+++ b/src/client/views/PropertiesButtons.scss
@@ -20,13 +20,13 @@ $linkGap : 3px;
 
 .propertiesButtons-linkButton-empty,
 .propertiesButtons-linkButton-nonempty {
-    height: 20px;
-    width: 20px;
+    height: 25px;
+    width: 25px;
     border-radius: 5px;
     opacity: 0.9;
     pointer-events: auto;
-    background-color: $dark-color;
-    color: $light-color;
+    background-color: #121721;
+    color: #fcfbf7;
     text-transform: uppercase;
     letter-spacing: 2px;
     font-size: 75%;
@@ -35,6 +35,7 @@ $linkGap : 3px;
     display: flex;
     justify-content: center;
     align-items: center;
+    margin-right: 5px;
 
     &:hover {
         background: $main-accent;
@@ -67,17 +68,19 @@ $linkGap : 3px;
     padding-right: 5px;
     width: 25px;
     border-radius: 5px;
+    margin-right: 8px;
 }
 
 .propertiesButtons-linker {
-    height: 20px;
-    width: 20px;
+    height: 25px;
+    width: 25px;
     text-align: center;
     border-radius: 5px;
     pointer-events: auto;
     color: $dark-color;
     border: $dark-color 1px solid;
     transition: 0.2s ease all;
+    margin-right: 5px;
 }
 
 .propertiesButtons-linker:hover {
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 336cd6ff9..95d0df14e 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -260,11 +260,11 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         Array.from(Object.values(Templates.TemplateList)).map(template =>
             templates.set(template, views.reduce((checked, doc) => checked || doc?.props.Document["_show" + template.Name] ? true : false, false as boolean)));
         return !docView ? (null) :
-            <Tooltip title={<><div className="dash-tooltip">Tap: Customize layout.  Drag: Create alias</div></>}>
-                <div className="propertiesButtons-linkFlyout" ref={this._dragRef}>
-                    <Flyout anchorPoint={anchorPoints.LEFT_TOP} onOpen={action(() => this._aliasDown = true)} onClose={action(() => this._aliasDown = false)}
-                        content={!this._aliasDown ? (null) : <TemplateMenu docViews={views.filter(v => v).map(v => v as DocumentView)} templates={templates} />}>
-                        <div className={"propertiesButtons-linkButton-empty"} ref={this._dragRef} onPointerDown={this.onAliasButtonDown} >
+            <Tooltip title={<><div className="dash-tooltip">Customize layout</div></>}>
+                <div className="propertiesButtons-linkFlyout">
+                    <Flyout anchorPoint={anchorPoints.LEFT_TOP} //onOpen={action(() => this._aliasDown = true)} onClose={action(() => this._aliasDown = false)}
+                        content={<TemplateMenu docViews={views.filter(v => v).map(v => v as DocumentView)} templates={templates} />}>
+                        <div className={"propertiesButtons-linkButton-empty"} >
                             {<FontAwesomeIcon className="documentdecorations-icon" icon="edit" size="sm" />}
                         </div>
                     </Flyout>
@@ -283,9 +283,11 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     @computed
     get copyButton() {
         const targetDoc = this.selectedDoc;
-        return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Create an Alias"}</div></>}>
+        return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Tap or Drag to create an alias"}</div></>}>
             <div className={"propertiesButtons-linkButton-empty"}
-                onPointerDown={this.onCopy} >
+                ref={this._dragRef}
+                onPointerDown={this.onAliasButtonDown}
+                onClick={this.onCopy}>
                 {<FontAwesomeIcon className="documentdecorations-icon" icon="copy" size="sm" />}
             </div>
         </Tooltip>;
@@ -496,14 +498,14 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             <div className="propertiesButtons-button">
                 {this.downloadButton}
             </div>
-            <div className="propertiesButtons-button">
-                {this.deleteButton}
-            </div>
-            <div className="propertiesButtons-button">
-                {this.onClickButton}
-            </div>
         </div>
             <div className="propertiesButtons">
+                <div className="propertiesButtons-button">
+                    {this.deleteButton}
+                </div>
+                <div className="propertiesButtons-button">
+                    {this.onClickButton}
+                </div>
                 <div className="propertiesButtons-button">
                     {this.sharingButton}
                 </div>
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 5a7c98f46..1fbaaa08a 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -268,13 +268,26 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
         </div>;
     }
 
+    @computed get selectedDocumentView() {
+        if (SelectionManager.SelectedDocuments().length) {
+            return SelectionManager.SelectedDocuments()[0];
+        } else { return undefined; }
+    }
+    @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; }
+    @computed get isText() {
+        if (this.selectedDoc) {
+            return this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof RichTextField;
+        }
+        else return false;
+    }
+
     render() {
         return (
             <div className="collectionMenu-cont" >
                 <div className="collectionMenu">
                     <div className="collectionViewBaseChrome">
-                        {this.viewModes}
-                        {this.templateChrome}
+                        {!(this.isText && this.props.type === CollectionViewType.Freeform) ? this.viewModes : null}
+                        {!(this.isText && this.props.type === CollectionViewType.Freeform) ? this.templateChrome : null}
                         <div className="collectionViewBaseChrome-viewSpecs" title="filter documents to show" style={{ display: "grid" }}>
                             <button className={"antimodeMenu-button"} onClick={this.toggleViewSpecs} >
                                 <FontAwesomeIcon icon="filter" size="lg" />
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 884104f62..266089a6d 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -847,7 +847,6 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         const helpItems: ContextMenuProps[] = help && "subitems" in help ? help.subitems : [];
         !Doc.UserDoc().novice && helpItems.push({ description: "Show Fields ", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "onRight"), icon: "layer-group" });
         helpItems.push({ description: "Text Shortcuts Ctrl+/", event: () => this.props.addDocTab(Docs.Create.PdfDocument(Utils.prepend("/assets/cheat-sheet.pdf"), { _width: 300, _height: 300 }), "onRight"), icon: "keyboard" });
-        helpItems.push({ description: "Show Fields ", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "onRight"), icon: "layer-group" });
         helpItems.push({ description: "Print Document in Console", event: () => console.log(this.props.Document), icon: "hand-point-right" });
         cm.addItem({ description: "Help...", noexpand: true, subitems: helpItems, icon: "question" });
 
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index 98c786566..9de2fc18b 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -937,16 +937,16 @@ export default class RichTextMenu extends AntimodeMenu {
             this.createButton("subscript", "Subscript", this.subscriptActive, toggleMark(schema.marks.subscript)),
             this.createColorButton(),
             this.createHighlighterButton(),
-            //this.createLinkButton(),
-            //this.createBrushButton(),
+            this.createLinkButton(),
+            this.createBrushButton(),
             <div className="richTextMenu-divider" key="divider 2" />,
             this.createButton("align-left", "Align Left", this.activeAlignment === "left", this.alignLeft),
             this.createButton("align-center", "Align Center", this.activeAlignment === "center", this.alignCenter),
             this.createButton("align-right", "Align Right", this.activeAlignment === "right", this.alignRight),
             this.createButton("indent", "Inset More", undefined, this.insetParagraph),
             this.createButton("outdent", "Inset Less", undefined, this.outsetParagraph),
-            //this.createButton("hand-point-left", "Hanging Indent", undefined, this.hangingIndentParagraph),
-            //this.createButton("hand-point-right", "Indent", undefined, this.indentParagraph),
+            this.createButton("hand-point-left", "Hanging Indent", undefined, this.hangingIndentParagraph),
+            this.createButton("hand-point-right", "Indent", undefined, this.indentParagraph),
         ]}</div>;
 
         const row2 = <div className="antimodeMenu-row row-2" key="row2">
@@ -957,7 +957,7 @@ export default class RichTextMenu extends AntimodeMenu {
                 this.createMarksDropdown(this.activeFontFamily, this.fontFamilyOptions, "font family", action((val: string) => this.activeFontFamily = val)),
                 <div className="richTextMenu-divider" key="divider 4" />,
                 this.createNodesDropdown(this.activeListType, this.listTypeOptions, "list type", action((val: string) => this.activeListType = val)),
-                //this.createButton("sort-amount-down", "Summarize", undefined, this.insertSummarizer),
+                this.createButton("sort-amount-down", "Summarize", undefined, this.insertSummarizer),
                 this.createButton("quote-left", "Blockquote", undefined, this.insertBlockquote),
                 this.createButton("minus", "Horizontal Rule", undefined, this.insertHorizontalRule),
                 <div className="richTextMenu-divider" key="divider 5" />,]}
-- 
cgit v1.2.3-70-g09d2


From 155407d902bac7a82a83ba2f60f05a6fddb0d6e6 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Tue, 28 Jul 2020 20:59:45 -0500
Subject: new UI for collapsing

---
 src/client/views/PropertiesButtons.tsx             |  2 +-
 .../collectionFreeForm/PropertiesView.scss         | 66 +++++++++++++++-------
 .../collectionFreeForm/PropertiesView.tsx          | 32 +++++------
 3 files changed, 64 insertions(+), 36 deletions(-)

(limited to 'src/client/views/PropertiesButtons.tsx')

diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 95d0df14e..eecf670e6 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -206,7 +206,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         const isPinned = targetDoc && Doc.isDocPinned(targetDoc);
         return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : "Pin to presentation"}</div></>}>
             <div className="propertiesButtons-linker"
-                style={{ backgroundColor: isPinned ? "white" : "#121721", color: isPinned ? "black" : "white" }}
+                style={{ backgroundColor: isPinned ? "white" : "rgb(37, 43, 51)", color: isPinned ? "black" : "white" }}
                 onClick={e => DockedFrameRenderer.PinDoc(targetDoc, isPinned)}>
                 <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin"
                 />
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index 1fda8e5a2..cb4b7375b 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -48,20 +48,26 @@
 
     .propertiesView-settings {
         border-bottom: 1px solid black;
-        padding: 8.5px;
+        //padding: 8.5px;
         font-size: 12.5px;
         font-weight: bold;
 
         .propertiesView-settings-title {
             font-weight: bold;
             font-size: 12.5px;
-            padding-bottom: 7px;
+            padding: 4px;
             display: flex;
             width: 200px;
+            color: white;
+            padding-left: 8px;
+            background-color: rgb(51, 51, 51);
 
             .propertiesView-settings-title-icon {
+                float: right;
+                right: 0;
+                position: absolute;
                 margin-left: 2px;
-                margin-right: 7px;
+                margin-right: 9px;
 
                 &:hover {
                     cursor: pointer;
@@ -70,25 +76,33 @@
         }
 
         .propertiesView-settings-content {
-            margin-left: 5px;
+            margin-left: 12px;
             padding-bottom: 10px;
+            padding-top: 8px;
         }
 
     }
 
     .propertiesView-sharing {
         border-bottom: 1px solid black;
-        padding: 8.5px;
+        //padding: 8.5px;
 
         .propertiesView-sharing-title {
-            font-size: 12.5px;
             font-weight: bold;
-            padding-bottom: 7px;
+            font-size: 12.5px;
+            padding: 4px;
             display: flex;
+            width: 200px;
+            color: white;
+            padding-left: 8px;
+            background-color: rgb(51, 51, 51);
 
             .propertiesView-sharing-title-icon {
+                float: right;
+                right: 0;
+                position: absolute;
                 margin-left: 2px;
-                margin-right: 7px;
+                margin-right: 9px;
 
                 &:hover {
                     cursor: pointer;
@@ -98,6 +112,7 @@
 
         .propertiesView-sharing-content {
             font-size: 10px;
+            padding: 10px;
             margin-left: 5px;
         }
     }
@@ -165,9 +180,6 @@
 
                 .permissions-select {
                     z-index: 1;
-                    //border: 0.5px solid grey;
-                    //border-radius: 4px;
-                    //outline: none;
                     border: none;
                     background-color: inherit;
                     width: 75px;
@@ -186,11 +198,17 @@
 
     .propertiesView-fields {
         border-bottom: 1px solid black;
-        padding: 8.5px;
+        //padding: 8.5px;
 
         .propertiesView-fields-title {
-            padding-bottom: 7px;
+            font-weight: bold;
+            font-size: 12.5px;
+            padding: 4px;
             display: flex;
+            width: 200px;
+            color: white;
+            padding-left: 8px;
+            background-color: rgb(51, 51, 51);
 
             .propertiesView-fields-title-name {
                 font-size: 12.5px;
@@ -201,8 +219,11 @@
             }
 
             .propertiesView-fields-title-icon {
+                float: right;
+                right: 0;
+                position: absolute;
                 margin-left: 2px;
-                margin-right: 7px;
+                margin-right: 9px;
 
                 &:hover {
                     cursor: pointer;
@@ -225,7 +246,8 @@
 
         .propertiesView-fields-content {
             font-size: 10px;
-            margin-left: 5px;
+            margin-left: 2px;
+            padding: 10px;
 
             &:hover {
                 cursor: pointer;
@@ -254,17 +276,23 @@
     }
 
     .propertiesView-layout {
-        padding: 8.5px;
 
         .propertiesView-layout-title {
             font-weight: bold;
             font-size: 12.5px;
-            padding-bottom: 7px;
+            padding: 4px;
             display: flex;
+            width: 200px;
+            color: white;
+            padding-left: 8px;
+            background-color: rgb(51, 51, 51);
 
             .propertiesView-layout-title-icon {
+                float: right;
+                right: 0;
+                position: absolute;
                 margin-left: 2px;
-                margin-right: 7px;
+                margin-right: 9px;
 
                 &:hover {
                     cursor: pointer;
@@ -273,8 +301,8 @@
         }
 
         .propertiesView-layout-content {
-            margin-left: 5px;
             overflow: hidden;
+            padding: 10px;
         }
 
     }
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index 91d407eea..d5317efcb 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -360,55 +360,55 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 {this.editableTitle}
             </div>
             <div className="propertiesView-settings">
-                <div className="propertiesView-settings-title">
+                <div className="propertiesView-settings-title" style={{ backgroundColor: this.openActions ? "black" : "" }}>
+                    Document Actions
                     <div className="propertiesView-settings-title-icon"
                         onPointerDown={() => runInAction(() => { this.openActions = !this.openActions; })}>
-                        <FontAwesomeIcon icon={this.openActions ? "caret-down" : "caret-right"} size="lg" color="black" />
+                        <FontAwesomeIcon icon={this.openActions ? "caret-down" : "caret-right"} size="lg" color="white" />
                     </div>
-                    Document Actions
                 </div>
                 {this.openActions ? <div className="propertiesView-settings-content">
                     <PropertiesButtons />
                 </div> : null}
             </div>
             <div className="propertiesView-sharing">
-                <div className="propertiesView-sharing-title">
+                <div className="propertiesView-sharing-title" style={{ backgroundColor: this.openSharing ? "black" : "" }}>
+                    Sharing {"&"} Permissions
                     <div className="propertiesView-sharing-title-icon"
                         onPointerDown={() => runInAction(() => { this.openSharing = !this.openSharing; })}>
-                        <FontAwesomeIcon icon={this.openSharing ? "caret-down" : "caret-right"} size="lg" color="black" />
+                        <FontAwesomeIcon icon={this.openSharing ? "caret-down" : "caret-right"} size="lg" color="white" />
                     </div>
-                    Sharing {"&"} Permissions
                 </div>
                 {this.openSharing ? <div className="propertiesView-sharing-content">
                     {this.sharingTable}
                 </div> : null}
             </div>
             <div className="propertiesView-fields">
-                <div className="propertiesView-fields-title">
+                <div className="propertiesView-fields-title" style={{ backgroundColor: this.openFields ? "black" : "" }}>
                     <div className="propertiesView-fields-title-name">
+                        Fields {"&"} Tags
                         <div className="propertiesView-fields-title-icon"
                             onPointerDown={() => runInAction(() => { this.openFields = !this.openFields; })}>
-                            <FontAwesomeIcon icon={this.openFields ? "caret-down" : "caret-right"} size="lg" color="black" />
+                            <FontAwesomeIcon icon={this.openFields ? "caret-down" : "caret-right"} size="lg" color="white" />
                         </div>
-                        Fields {"&"} Tags
                     </div>
-                    {!novice && this.openFields ? <div className="propertiesView-fields-title-checkbox">
-                        {this.fieldsCheckbox}
-                        <div className="propertiesView-fields-title-checkbox-text">Layout</div>
-                    </div> : null}
                 </div>
+                {!novice && this.openFields ? <div className="propertiesView-fields-title-checkbox">
+                    {this.fieldsCheckbox}
+                    <div className="propertiesView-fields-title-checkbox-text">Layout</div>
+                </div> : null}
                 {this.openFields ?
                     <div className="propertiesView-fields-content">
                         {novice ? this.noviceFields : this.expandedField}
                     </div> : null}
             </div>
             <div className="propertiesView-layout">
-                <div className="propertiesView-layout-title" >
+                <div className="propertiesView-layout-title" style={{ backgroundColor: this.openLayout ? "black" : "" }}>
+                    Layout
                     <div className="propertiesView-layout-title-icon"
                         onPointerDown={() => runInAction(() => { this.openLayout = !this.openLayout; })}>
-                        <FontAwesomeIcon icon={this.openLayout ? "caret-down" : "caret-right"} size="lg" color="black" />
+                        <FontAwesomeIcon icon={this.openLayout ? "caret-down" : "caret-right"} size="lg" color="white" />
                     </div>
-                    Layout
                 </div>
                 {this.openLayout ? <div className="propertiesView-layout-content">{this.layoutPreview}</div> : null}
             </div>
-- 
cgit v1.2.3-70-g09d2


From b10f96c6a8b3187707b6d7356e7b0fea9b8b6e72 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Wed, 29 Jul 2020 15:31:40 -0500
Subject: tried making documents into buttons

---
 src/client/documents/DocumentTypes.ts           |   1 +
 src/client/documents/Documents.ts               |   8 +
 src/client/util/CurrentUserUtils.ts             |  30 +--
 src/client/views/MainView.scss                  |  26 +--
 src/client/views/MainView.tsx                   | 253 +++++++++++++-----------
 src/client/views/PropertiesButtons.tsx          |   4 +-
 src/client/views/nodes/DocumentContentsView.tsx |   3 +-
 src/client/views/nodes/MenuIconBox.scss         |  49 +++++
 src/client/views/nodes/MenuIconBox.tsx          |  41 ++++
 9 files changed, 272 insertions(+), 143 deletions(-)
 create mode 100644 src/client/views/nodes/MenuIconBox.scss
 create mode 100644 src/client/views/nodes/MenuIconBox.tsx

(limited to 'src/client/views/PropertiesButtons.tsx')

diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts
index 7578b7df0..e98539498 100644
--- a/src/client/documents/DocumentTypes.ts
+++ b/src/client/documents/DocumentTypes.ts
@@ -13,6 +13,7 @@ export enum DocumentType {
     INK = "ink",        // ink stroke
     SCREENSHOT = "screenshot",  // view of a desktop application
     FONTICON = "fonticonbox",   // font icon
+    MENUICON = "menuiconbox",
     QUERY = "query",            // search query
     LABEL = "label",            // simple text label
     BUTTON = "button",          // onClick button
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 2cd781a53..1a5d4f3cb 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -31,6 +31,7 @@ import { ColorBox } from "../views/nodes/ColorBox";
 import { ComparisonBox } from "../views/nodes/ComparisonBox";
 import { DocHolderBox } from "../views/nodes/DocHolderBox";
 import { FontIconBox } from "../views/nodes/FontIconBox";
+import { MenuIconBox } from "../views/nodes/MenuIconBox";
 import { FormattedTextBox } from "../views/nodes/formattedText/FormattedTextBox";
 import { ImageBox } from "../views/nodes/ImageBox";
 import { KeyValueBox } from "../views/nodes/KeyValueBox";
@@ -301,6 +302,9 @@ export namespace Docs {
                 layout: { view: FontIconBox, dataField: defaultDataKey },
                 options: { _width: 40, _height: 40, borderRounding: "100%" },
             }],
+            [DocumentType.MENUICON, {
+                layout: { view: MenuIconBox, dataField: defaultDataKey },
+            }],
             [DocumentType.RECOMMENDATION, {
                 layout: { view: RecommendationsBox, dataField: defaultDataKey },
                 options: { _width: 200, _height: 200 },
@@ -791,6 +795,10 @@ export namespace Docs {
             return InstanceFromProto(Prototypes.get(DocumentType.FONTICON), undefined, { hideLinkButton: true, ...(options || {}) });
         }
 
+        export function MenuIconDocument(options?: DocumentOptions) {
+            return InstanceFromProto(Prototypes.get(DocumentType.MENUICON), undefined, { hideLinkButton: true, ...(options || {}) });
+        }
+
         export function PresElementBoxDocument(options?: DocumentOptions) {
             return InstanceFromProto(Prototypes.get(DocumentType.PRESELEMENT), undefined, { ...(options || {}) });
         }
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index e5582aa0a..442be98d2 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -48,6 +48,8 @@ export class CurrentUserUtils {
     @observable public static closedStack: any | undefined;
     @observable public static searchStack: any | undefined;
 
+    @observable public static panelContent: string = "none";
+
     // sets up the default User Templates - slideView, queryView, descriptionView
     static setupUserTemplateButtons(doc: Doc) {
         if (doc["template-button-query"] === undefined) {
@@ -503,17 +505,16 @@ export class CurrentUserUtils {
     }
 
     static menuBtnDescriptions(): {
-        title: string, icon: string, click: string, backgroundColor?: string,
+        title: string, icon: string, click: string,
     }[] {
         return [
-            { title: "Workspace", icon: "desktop", click: 'MainView.selectPanel("workspace")' },
-            { title: "Catalog", icon: "file", click: 'MainView.selectPanel("catalog")' },
-            { title: "Recently Deleted", icon: "trash-alt", click: 'MainView.selectPanel("deleted")' },
-            { title: "Import", icon: "upload", click: 'this.selectPanel("upload")' },
+            { title: "Workspace", icon: "desktop", click: 'scriptContext.selectMenu("workspace")' },
+            { title: "Catalog", icon: "file", click: 'scriptContext.selectMenu("catalog")' },
+            { title: "Archive", icon: "archive", click: 'scriptContext.selectMenu("deleted")' },
+            { title: "Import", icon: "upload", click: 'scriptContext.selectMenu("upload")' },
             { title: "Sharing", icon: "users", click: 'GroupManager.Instance.open()' },
-            { title: "Tools", icon: "wrench", click: 'MainView.selectPanel("tools")' },
-            { title: "Search", icon: "search", click: 'MainView.selectPanel("search")' },
-            { title: "Help", icon: "question-circle", click: 'MainView.selectPanel("help")' },
+            { title: "Tools", icon: "wrench", click: 'scriptContext.selectMenu("tools")' },
+            { title: "Help", icon: "question-circle", click: 'scriptContext.selectMenu("help")' },
             { title: "Settings", icon: "cog", click: 'SettingsManager.Instance.open()' },
         ];
     }
@@ -521,16 +522,17 @@ export class CurrentUserUtils {
     static setupMenuButtons(doc: Doc) {
         if (doc.menuStackBtns === undefined) {
             const buttons = CurrentUserUtils.menuBtnDescriptions();
-            const menuBtns = buttons.map(({ title, icon, click, backgroundColor }) => Docs.Create.FontIconDocument({
-                _width: 40, _height: 40,
+            const menuBtns = buttons.map(({ title, icon, click }) => Docs.Create.MenuIconDocument({
                 icon,
                 title,
-                onClick: click ? ScriptField.MakeScript(click) : undefined,
-                backgroundColor,
+                stayInCollection: true,
+                _width: 60,
+                _height: 70,
+                onClick: ScriptField.MakeScript(click),
             }));
 
             doc.menuStackBtns = new PrefetchProxy(Docs.Create.MasonryDocument(menuBtns, {
-                _xMargin: 0, _autoHeight: true, _width: 80, _columnWidth: 50, lockedPosition: true, _chromeStatus: "disabled",
+                _xMargin: 0, _autoHeight: false, _width: 60, _columnWidth: 60, lockedPosition: true, _chromeStatus: "disabled",
             }));
         }
         return doc.menuStackBtns as Doc;
@@ -542,7 +544,7 @@ export class CurrentUserUtils {
             const menuBtns = CurrentUserUtils.setupMenuButtons(doc);
             doc.menuStack = new PrefetchProxy(Docs.Create.StackingDocument([menuBtns], {
                 _yMargin: 0, _autoHeight: true, _xMargin: 0,
-                _width: 80, lockedPosition: true, _chromeStatus: "disabled",
+                _width: 60, lockedPosition: true, _chromeStatus: "disabled",
             })) as any as Doc;
         }
         return doc.menuStack;
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index 7318d451b..8bf38ebe9 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -155,8 +155,9 @@
 
 .mainView-menuPanel {
 
-    max-width: 60px;
+    width: 60px;
     background-color: black;
+    height: 100%;
     //overflow-y: scroll;
     //overflow-x: hidden;
 
@@ -165,22 +166,23 @@
         padding: 7px;
         padding-left: 7px;
         width: 100%;
+
         .mainView-menuPanel-button-wrap {
-        width: 45px;
-        /* padding: 5px; */
-        touch-action: none;
-        background: black;
-        transform-origin: top left;
-        /* margin-bottom: 5px; */
-        margin-top: 5px;
-        margin-right: 25px;
-        border-radius: 8px;
-    
+            width: 45px;
+            /* padding: 5px; */
+            touch-action: none;
+            background: black;
+            transform-origin: top left;
+            /* margin-bottom: 5px; */
+            margin-top: 5px;
+            margin-right: 25px;
+            border-radius: 8px;
+
             &:hover {
                 background: rgb(61, 61, 61);
                 cursor: pointer;
             }
-        }  
+        }
     }
 
     .mainView-menuPanel-button-label {
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 891d08214..5f7f7ca03 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -381,6 +381,7 @@ export class MainView extends React.Component {
     onPointerDown = (e: React.PointerEvent) => {
         if (this._flyoutTranslate) {
             this.panelContent = "none";
+            CurrentUserUtils.panelContent = "none";
             this._canClick = true;
             this._flyoutSizeOnDown = e.clientX;
             document.removeEventListener("pointermove", this.onPointerMove);
@@ -462,125 +463,125 @@ export class MainView extends React.Component {
             {this.docButtons}</div>;
     }
 
-    // @computed get menuPanel() {
-
-    //     return <div className="mainView-menuPanel">
-    //         <DocumentView
-    //             Document={Doc.UserDoc().menuStack as Doc}
-    //             DataDoc={undefined}
-    //             LibraryPath={emptyPath}
-    //             addDocument={undefined}
-    //             addDocTab={this.addDocTabFunc}
-    //             pinToPres={emptyFunction}
-    //             NativeHeight={returnZero}
-    //             NativeWidth={returnZero}
-    //             rootSelected={returnTrue}
-    //             removeDocument={returnFalse}
-    //             onClick={undefined}
-    //             ScreenToLocalTransform={this.mainContainerXf}
-    //             ContentScaling={returnOne}
-    //             PanelWidth={() => 80}
-    //             PanelHeight={this.getContentsHeight}
-    //             renderDepth={0}
-    //             focus={emptyFunction}
-    //             backgroundColor={this.defaultBackgroundColors}
-    //             parentActive={returnTrue}
-    //             whenActiveChanged={emptyFunction}
-    //             bringToFront={emptyFunction}
-    //             docFilters={returnEmptyFilter}
-    //             ContainingCollectionView={undefined}
-    //             ContainingCollectionDoc={undefined}
-    //             relative={true}
-    //             scriptContext={this}
-    //         />
-    //     </div>;
-    // }
-
     @computed get menuPanel() {
-        return <div className="mainView-menuPanel">
-            <div className="mainView-menuPanel-button" style={{ backgroundColor: this.panelContent === "workspace" ? "lightgrey" : "" }}>
-                <div className="mainView-menuPanel-button-wrap"
-                    style={{ backgroundColor: this.panelContent === "workspace" ? "lightgrey" : "" }}
-                    onPointerDown={e => this.selectPanel("workspace")}>
-                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="desktop"
-                        color={this.panelContent === "workspace" ? "black" : "white"} size="lg" />
-                    <div className="mainView-menuPanel-button-label"
-                        style={{ color: this.panelContent === "workspace" ? "black" : "white" }}> Workspace </div>
-                </div>
-            </div>
-
-            <div className="mainView-menuPanel-button" style={{ backgroundColor: this.panelContent === "catalog" ? "lightgrey" : "" }}>
-                <div className="mainView-menuPanel-button-wrap"
-                    style={{ backgroundColor: this.panelContent === "catalog" ? "lightgrey" : "" }}
-                    onPointerDown={e => this.selectPanel("catalog")}>
-                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="file"
-                        color={this.panelContent === "catalog" ? "black" : "white"} size="lg" />
-                    <div className="mainView-menuPanel-button-label"
-                        style={{ color: this.panelContent === "catalog" ? "black" : "white" }}> Catalog </div>
-                </div>
-            </div>
-
-            <div className="mainView-menuPanel-button" style={{ backgroundColor: this.panelContent === "deleted" ? "lightgrey" : "" }}>
-                <div className="mainView-menuPanel-button-wrap"
-                    style={{ backgroundColor: this.panelContent === "deleted" ? "lightgrey" : "" }}
-                    onPointerDown={e => this.selectPanel("deleted")}>
-                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="archive"
-                        color={this.panelContent === "deleted" ? "black" : "white"} size="lg" />
-                    <div className="mainView-menuPanel-button-label"
-                        style={{ color: this.panelContent === "deleted" ? "black" : "white" }}> Recently Used </div>
-                </div>
-            </div>
-
-            <div className="mainView-menuPanel-button">
-                <div className="mainView-menuPanel-button-wrap"
-                    onPointerDown={e => this.selectPanel("upload")}>
-                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="upload" color="white" size="lg" />
-                    <div className="mainView-menuPanel-button-label"> Import </div>
-                </div>
-            </div>
-
-            <div className="mainView-menuPanel-button">
-                <div className="mainView-menuPanel-button-wrap"
-                    //onPointerDown={e => this.selectPanel("sharing")}
-                    onClick={() => GroupManager.Instance.open()}>
-                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="users" color="white" size="lg" />
-                    <div className="mainView-menuPanel-button-label"> Sharing </div>
-                </div>
-            </div>
 
-            <div className="mainView-menuPanel-button" style={{ marginBottom: "110px", backgroundColor: this.panelContent === "tools" ? "lightgrey" : "", }}>
-                <div className="mainView-menuPanel-button-wrap"
-                    onPointerDown={e => this.selectPanel("tools")}
-                    style={{
-                        backgroundColor: this.panelContent === "tools" ? "lightgrey" : "",
-                    }}>
-                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="wrench"
-                        color={this.panelContent === "tools" ? "black" : "white"} size="lg" />
-                    <div className="mainView-menuPanel-button-label"
-                        style={{ color: this.panelContent === "tools" ? "black" : "white" }}> Tools </div>
-                </div>
-            </div>
-
-            <div className="mainView-menuPanel-button">
-                <div className="mainView-menuPanel-button-wrap"
-                    // style={{backgroundColor: this.panelContent= "help" ? "lightgrey" : "black"}}
-                    onPointerDown={e => this.selectPanel("help")} >
-                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="question-circle" color="white" size="lg" />
-                    <div className="mainView-menuPanel-button-label"> Help </div>
-                </div>
-            </div>
-
-            <div className="mainView-menuPanel-button">
-                <div className="mainView-menuPanel-button-wrap"
-                    // onPointerDown={e => this.selectPanel("settings")}
-                    onClick={() => SettingsManager.Instance.open()}>
-                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="cog" color="white" size="lg" />
-                    <div className="mainView-menuPanel-button-label"> Settings </div>
-                </div>
-            </div>
+        return <div className="mainView-menuPanel">
+            <DocumentView
+                Document={Doc.UserDoc().menuStack as Doc}
+                DataDoc={undefined}
+                LibraryPath={emptyPath}
+                addDocument={undefined}
+                addDocTab={this.addDocTabFunc}
+                pinToPres={emptyFunction}
+                NativeHeight={returnZero}
+                NativeWidth={returnZero}
+                rootSelected={returnTrue}
+                removeDocument={returnFalse}
+                onClick={undefined}
+                ScreenToLocalTransform={this.mainContainerXf}
+                ContentScaling={returnOne}
+                PanelWidth={() => 80}
+                PanelHeight={this.getContentsHeight}
+                renderDepth={0}
+                focus={emptyFunction}
+                backgroundColor={this.defaultBackgroundColors}
+                parentActive={returnTrue}
+                whenActiveChanged={emptyFunction}
+                bringToFront={emptyFunction}
+                docFilters={returnEmptyFilter}
+                ContainingCollectionView={undefined}
+                ContainingCollectionDoc={undefined}
+                relative={true}
+                scriptContext={this}
+            />
         </div>;
     }
 
+    // @computed get menuPanel() {
+    //     return <div className="mainView-menuPanel">
+    //         <div className="mainView-menuPanel-button" style={{ backgroundColor: this.panelContent === "workspace" ? "lightgrey" : "" }}>
+    //             <div className="mainView-menuPanel-button-wrap"
+    //                 style={{ backgroundColor: this.panelContent === "workspace" ? "lightgrey" : "" }}
+    //                 onPointerDown={e => this.selectPanel("workspace")}>
+    //                 <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="desktop"
+    //                     color={this.panelContent === "workspace" ? "black" : "white"} size="lg" />
+    //                 <div className="mainView-menuPanel-button-label"
+    //                     style={{ color: this.panelContent === "workspace" ? "black" : "white" }}> Workspace </div>
+    //             </div>
+    //         </div>
+
+    //         <div className="mainView-menuPanel-button" style={{ backgroundColor: this.panelContent === "catalog" ? "lightgrey" : "" }}>
+    //             <div className="mainView-menuPanel-button-wrap"
+    //                 style={{ backgroundColor: this.panelContent === "catalog" ? "lightgrey" : "" }}
+    //                 onPointerDown={e => this.selectPanel("catalog")}>
+    //                 <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="file"
+    //                     color={this.panelContent === "catalog" ? "black" : "white"} size="lg" />
+    //                 <div className="mainView-menuPanel-button-label"
+    //                     style={{ color: this.panelContent === "catalog" ? "black" : "white" }}> Catalog </div>
+    //             </div>
+    //         </div>
+
+    //         <div className="mainView-menuPanel-button" style={{ backgroundColor: this.panelContent === "deleted" ? "lightgrey" : "" }}>
+    //             <div className="mainView-menuPanel-button-wrap"
+    //                 style={{ backgroundColor: this.panelContent === "deleted" ? "lightgrey" : "" }}
+    //                 onPointerDown={e => this.selectPanel("deleted")}>
+    //                 <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="archive"
+    //                     color={this.panelContent === "deleted" ? "black" : "white"} size="lg" />
+    //                 <div className="mainView-menuPanel-button-label"
+    //                     style={{ color: this.panelContent === "deleted" ? "black" : "white" }}> Recently Used </div>
+    //             </div>
+    //         </div>
+
+    //         <div className="mainView-menuPanel-button">
+    //             <div className="mainView-menuPanel-button-wrap"
+    //                 onPointerDown={e => this.selectPanel("upload")}>
+    //                 <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="upload" color="white" size="lg" />
+    //                 <div className="mainView-menuPanel-button-label"> Import </div>
+    //             </div>
+    //         </div>
+
+    //         <div className="mainView-menuPanel-button">
+    //             <div className="mainView-menuPanel-button-wrap"
+    //                 //onPointerDown={e => this.selectPanel("sharing")}
+    //                 onClick={() => GroupManager.Instance.open()}>
+    //                 <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="users" color="white" size="lg" />
+    //                 <div className="mainView-menuPanel-button-label"> Sharing </div>
+    //             </div>
+    //         </div>
+
+    //         <div className="mainView-menuPanel-button" style={{ marginBottom: "110px", backgroundColor: this.panelContent === "tools" ? "lightgrey" : "", }}>
+    //             <div className="mainView-menuPanel-button-wrap"
+    //                 onPointerDown={e => this.selectPanel("tools")}
+    //                 style={{
+    //                     backgroundColor: this.panelContent === "tools" ? "lightgrey" : "",
+    //                 }}>
+    //                 <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="wrench"
+    //                     color={this.panelContent === "tools" ? "black" : "white"} size="lg" />
+    //                 <div className="mainView-menuPanel-button-label"
+    //                     style={{ color: this.panelContent === "tools" ? "black" : "white" }}> Tools </div>
+    //             </div>
+    //         </div>
+
+    //         <div className="mainView-menuPanel-button">
+    //             <div className="mainView-menuPanel-button-wrap"
+    //                 // style={{backgroundColor: this.panelContent= "help" ? "lightgrey" : "black"}}
+    //                 onPointerDown={e => this.selectPanel("help")} >
+    //                 <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="question-circle" color="white" size="lg" />
+    //                 <div className="mainView-menuPanel-button-label"> Help </div>
+    //             </div>
+    //         </div>
+
+    //         <div className="mainView-menuPanel-button">
+    //             <div className="mainView-menuPanel-button-wrap"
+    //                 // onPointerDown={e => this.selectPanel("settings")}
+    //                 onClick={() => SettingsManager.Instance.open()}>
+    //                 <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="cog" color="white" size="lg" />
+    //                 <div className="mainView-menuPanel-button-label"> Settings </div>
+    //             </div>
+    //         </div>
+    //     </div>;
+    // }
+
     @action
     selectPanel = (str: string) => {
         if (this.panelContent === str && this.flyoutWidth !== 0) {
@@ -605,6 +606,30 @@ export class MainView extends React.Component {
         return true;
     }
 
+    @action
+    selectMenu = (str: string) => {
+        if (CurrentUserUtils.panelContent === str && this.flyoutWidth !== 0) {
+            CurrentUserUtils.panelContent = "none";
+            this.flyoutWidth = 0;
+        } else {
+            CurrentUserUtils.panelContent = str;
+            MainView.expandFlyout();
+            if (str === "tools") {
+                CurrentUserUtils.toolsBtn;
+                this.sidebarContent.proto = CurrentUserUtils.toolsStack;
+            } else if (str === "workspace") {
+                this.sidebarContent.proto = CurrentUserUtils.workspaceStack;
+            } else if (str === "catalog") {
+                this.sidebarContent.proto = CurrentUserUtils.catalogStack;
+            } else if (str === "deleted") {
+                this.sidebarContent.proto = CurrentUserUtils.closedStack;
+            } else if (str === "search") {
+                this.sidebarContent.proto = CurrentUserUtils.searchStack;
+            }
+        }
+        return true;
+    }
+
     @action
     onDown = (e: React.PointerEvent) => {
         setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => {
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index eecf670e6..3113d8cb4 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -392,10 +392,10 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             this.selectedDocumentView?.toggleDetail();
         } else if (value === "linkInPlace") {
             this.selectedDocumentView?.noOnClick();
-            this.selectedDocumentView?.toggleFollowInPlace();
+            this.selectedDocumentView?.toggleFollowLink("inPlace", true, false);
         } else if (value === "linkOnRight") {
             this.selectedDocumentView?.noOnClick();
-            this.selectedDocumentView?.toggleFollowOnRight();
+            this.selectedDocumentView?.toggleFollowLink("onRight", false, false);
         }
     }
 
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index 47dc0a773..d72133cb9 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -18,6 +18,7 @@ import { DocHolderBox } from "./DocHolderBox";
 import { DocumentViewProps } from "./DocumentView";
 import "./DocumentView.scss";
 import { FontIconBox } from "./FontIconBox";
+import { MenuIconBox } from "./MenuIconBox";
 import { FieldView, FieldViewProps } from "./FieldView";
 import { FormattedTextBox } from "./formattedText/FormattedTextBox";
 import { ImageBox } from "./ImageBox";
@@ -190,7 +191,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & {
                 blacklistedAttrs={[]}
                 renderInWrapper={false}
                 components={{
-                    FormattedTextBox, ImageBox, DirectoryImportBox, FontIconBox, LabelBox, SliderBox, FieldView,
+                    FormattedTextBox, ImageBox, DirectoryImportBox, FontIconBox, MenuIconBox, LabelBox, SliderBox, FieldView,
                     CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox,
                     PDFBox, VideoBox, AudioBox, PresBox, YoutubeBox, PresElementBox, QueryBox,
                     ColorBox, DashWebRTCVideo, LinkAnchorBox, InkingStroke, DocHolderBox, LinkBox, ScriptingBox,
diff --git a/src/client/views/nodes/MenuIconBox.scss b/src/client/views/nodes/MenuIconBox.scss
new file mode 100644
index 000000000..1b72f5a8f
--- /dev/null
+++ b/src/client/views/nodes/MenuIconBox.scss
@@ -0,0 +1,49 @@
+.menuButton {
+    //padding: 7px;
+    padding-left: 7px;
+    width: 100%;
+    width: 60px;
+    height: 70px;
+
+    .menuButton-wrap {
+        width: 45px;
+        /* padding: 5px; */
+        touch-action: none;
+        background: black;
+        transform-origin: top left;
+        /* margin-bottom: 5px; */
+        margin-top: 5px;
+        margin-right: 25px;
+        border-radius: 8px;
+
+        &:hover {
+            background: rgb(61, 61, 61);
+            cursor: pointer;
+        }
+    }
+
+    .menuButton-label {
+        color: white;
+        margin-right: 4px;
+        border-radius: 8px;
+        width: 42px;
+        position: relative;
+        text-align: center;
+        font-size: 8px;
+        margin-top: 1px;
+        letter-spacing: normal;
+        padding: 3px;
+        background-color: inherit;
+    }
+
+    .menuButton-icon {
+        width: auto;
+        height: 35px;
+        padding: 5px;
+    }
+
+    svg {
+        width: 95% !important;
+        height: 95%;
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/MenuIconBox.tsx b/src/client/views/nodes/MenuIconBox.tsx
new file mode 100644
index 000000000..e1656fcba
--- /dev/null
+++ b/src/client/views/nodes/MenuIconBox.tsx
@@ -0,0 +1,41 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { createSchema, makeInterface } from '../../../fields/Schema';
+import { DocComponent } from '../DocComponent';
+import './MenuIconBox.scss';
+import { FieldView, FieldViewProps } from './FieldView';
+import { StrCast, Cast, NumCast } from '../../../fields/Types';
+import { Utils } from "../../../Utils";
+import { runInAction, observable, reaction, IReactionDisposer } from 'mobx';
+import { Doc } from '../../../fields/Doc';
+import { ScriptField } from '../../../fields/ScriptField';
+import { CurrentUserUtils } from '../../util/CurrentUserUtils';
+const MenuIconSchema = createSchema({
+    icon: "string"
+});
+
+type MenuIconDocument = makeInterface<[typeof MenuIconSchema]>;
+const MenuIconDocument = makeInterface(MenuIconSchema);
+@observer
+export class MenuIconBox extends DocComponent<FieldViewProps, MenuIconDocument>(MenuIconDocument) {
+    public static LayoutString(fieldKey: string) { return FieldView.LayoutString(MenuIconBox, fieldKey); }
+    _ref: React.RefObject<HTMLButtonElement> = React.createRef();
+
+    render() {
+
+        const menuBTN = <div className="menuButton" style={{ backgroundColor: CurrentUserUtils.panelContent === this.dataDoc.title ? "lightgrey" : "" }}>
+            <div className="menuButton-wrap"
+                style={{ backgroundColor: CurrentUserUtils.panelContent === this.dataDoc.title ? "lightgrey" : "" }}
+            //onPointerDown={this.dataDoc.click}
+            >
+                <FontAwesomeIcon className="menuButton-icon" icon={StrCast(this.dataDoc.icon, "user") as any}
+                    color={CurrentUserUtils.panelContent === this.dataDoc.title ? "black" : "white"} size="lg" />
+                <div className="menuButton-label"
+                    style={{ color: CurrentUserUtils.panelContent === this.dataDoc.title ? "black" : "white" }}> {this.dataDoc.title} </div>
+            </div>
+        </div>;
+
+        return menuBTN;
+    }
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 4224ebd13aec9e01f1fe73c935c40adb089dbc69 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Wed, 29 Jul 2020 23:11:35 -0500
Subject: sally UI changes

---
 src/client/views/ContextMenuItem.tsx               |   4 +-
 src/client/views/DocumentDecorations.tsx           |   4 +-
 src/client/views/MainView.scss                     |   9 +
 src/client/views/MainView.tsx                      | 251 +++++++++++----------
 src/client/views/PropertiesButtons.tsx             |  25 +-
 .../views/collections/CollectionSchemaView.tsx     |   2 +-
 src/client/views/collections/CollectionView.tsx    |   2 +-
 src/client/views/collections/SchemaTable.tsx       |   6 +-
 .../collectionFreeForm/CollectionFreeFormView.tsx  |   8 +-
 src/client/views/linking/LinkMenuItem.tsx          |   1 +
 src/client/views/nodes/DocumentView.tsx            |  17 +-
 11 files changed, 189 insertions(+), 140 deletions(-)

(limited to 'src/client/views/PropertiesButtons.tsx')

diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx
index 81432968d..7e233ec04 100644
--- a/src/client/views/ContextMenuItem.tsx
+++ b/src/client/views/ContextMenuItem.tsx
@@ -80,7 +80,7 @@ export class ContextMenuItem extends React.Component<ContextMenuProps & { select
     render() {
         if ("event" in this.props) {
             return (
-                <div className={"contextMenu-item" + (this.props.selected ? " contextMenu-itemSelected" : "")} onClick={this.handleEvent}>
+                <div className={"contextMenu-item" + (this.props.selected ? " contextMenu-itemSelected" : "")} onPointerDown={this.handleEvent}>
                     {this.props.icon ? (
                         <span className="icon-background">
                             <FontAwesomeIcon icon={this.props.icon} size="sm" />
@@ -95,7 +95,7 @@ export class ContextMenuItem extends React.Component<ContextMenuProps & { select
             const where = !this.overItem ? "" : this._overPosY < window.innerHeight / 3 ? "flex-start" : this._overPosY > window.innerHeight * 2 / 3 ? "flex-end" : "center";
             const marginTop = !this.overItem ? "" : this._overPosY < window.innerHeight / 3 ? "20px" : this._overPosY > window.innerHeight * 2 / 3 ? "-20px" : "";
             const submenu = !this.overItem ? (null) :
-                <div className="contextMenu-subMenu-cont" style={{ marginLeft: "25%", left: "0px", marginTop }}>
+                <div className="contextMenu-subMenu-cont" style={{ marginLeft: "90%", left: "0px", marginTop }}>
                     {this._items.map(prop => <ContextMenuItem {...prop} key={prop.description} closeMenu={this.props.closeMenu} />)}
                 </div>;
             if (!("noexpand" in this.props)) {
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index ff91e401f..85dd40173 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -577,9 +577,9 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
                 </div>}
             </> :
             <>
-                {minimal ? (null) : <Tooltip title={<><div className="dash-tooltip">Show context menu</div></>} placement="top"><div className="documentDecorations-contextMenu" key="menu" onPointerDown={this.onSettingsDown}>
+                {/* {minimal ? (null) : <Tooltip title={<><div className="dash-tooltip">Show context menu</div></>} placement="top"><div className="documentDecorations-contextMenu" key="menu" onPointerDown={this.onSettingsDown}>
                     <FontAwesomeIcon size="lg" icon="bars" />
-                </div></Tooltip>}
+                </div></Tooltip>} */}
                 <div className="documentDecorations-title" key="title" onPointerDown={this.onTitleDown} >
                     <span style={{ width: "100%", display: "inline-block", cursor: "move" }}>{`${this.selectionTitle}`}</span>
                 </div>
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index 8bf38ebe9..fe01c27a3 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -314,6 +314,15 @@
     display: flex;
     flex-direction: column;
     z-index: 2;
+
+    .mainView-libraryFlyout-close {
+        right: 6;
+        top: 5;
+        position: absolute;
+        margin-right: 6px;
+        z-index: 10;
+        margin-bottom: 10;
+    }
 }
 
 .mainView-expandFlyoutButton {
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 5f7f7ca03..326082927 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -63,6 +63,8 @@ import { SelectionManager } from '../util/SelectionManager';
 import { PrefetchProxy } from '../../fields/Proxy';
 import { DragManager } from '../util/DragManager';
 import { discovery_v1, dialogflow_v2beta1 } from 'googleapis';
+import { undo } from 'prosemirror-history';
+import { undoBatch } from '../util/UndoManager';
 
 @observer
 export class MainView extends React.Component {
@@ -426,12 +428,18 @@ export class MainView extends React.Component {
     //sidebarScreenToLocal = () => new Transform(0, (RichTextMenu.Instance.Pinned ? -35 : 0) + (CollectionMenu.Instance.Pinned ? -35 : 0), 1);
     mainContainerXf = () => this.sidebarScreenToLocal().translate(0, -this._buttonBarHeight);
 
+    @computed get closePosition() { return 55 + this.flyoutWidth }
     @computed get flyout() {
         if (!(this.sidebarContent instanceof Doc)) {
             return (null);
         }
         return <div className="mainView-libraryFlyout">
             <div className="mainView-contentArea" style={{ position: "relative", height: `100%`, width: "100%", overflow: "visible" }}>
+                {this.flyoutWidth > 0 ? <div className="mainView-libraryFlyout-close"
+                    onPointerDown={this.closeFlyout}>
+                    <FontAwesomeIcon icon="times" color="black" size="sm" />
+                </div> : null}
+
                 <DocumentView
                     Document={this.sidebarContent}
                     DataDoc={undefined}
@@ -463,130 +471,129 @@ export class MainView extends React.Component {
             {this.docButtons}</div>;
     }
 
-    @computed get menuPanel() {
-
-        return <div className="mainView-menuPanel">
-            <DocumentView
-                Document={Doc.UserDoc().menuStack as Doc}
-                DataDoc={undefined}
-                LibraryPath={emptyPath}
-                addDocument={undefined}
-                addDocTab={this.addDocTabFunc}
-                pinToPres={emptyFunction}
-                NativeHeight={returnZero}
-                NativeWidth={returnZero}
-                rootSelected={returnTrue}
-                removeDocument={returnFalse}
-                onClick={undefined}
-                ScreenToLocalTransform={this.mainContainerXf}
-                ContentScaling={returnOne}
-                PanelWidth={() => 80}
-                PanelHeight={this.getContentsHeight}
-                renderDepth={0}
-                focus={emptyFunction}
-                backgroundColor={this.defaultBackgroundColors}
-                parentActive={returnTrue}
-                whenActiveChanged={emptyFunction}
-                bringToFront={emptyFunction}
-                docFilters={returnEmptyFilter}
-                ContainingCollectionView={undefined}
-                ContainingCollectionDoc={undefined}
-                relative={true}
-                scriptContext={this}
-            />
-        </div>;
-    }
-
     // @computed get menuPanel() {
+
     //     return <div className="mainView-menuPanel">
-    //         <div className="mainView-menuPanel-button" style={{ backgroundColor: this.panelContent === "workspace" ? "lightgrey" : "" }}>
-    //             <div className="mainView-menuPanel-button-wrap"
-    //                 style={{ backgroundColor: this.panelContent === "workspace" ? "lightgrey" : "" }}
-    //                 onPointerDown={e => this.selectPanel("workspace")}>
-    //                 <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="desktop"
-    //                     color={this.panelContent === "workspace" ? "black" : "white"} size="lg" />
-    //                 <div className="mainView-menuPanel-button-label"
-    //                     style={{ color: this.panelContent === "workspace" ? "black" : "white" }}> Workspace </div>
-    //             </div>
-    //         </div>
-
-    //         <div className="mainView-menuPanel-button" style={{ backgroundColor: this.panelContent === "catalog" ? "lightgrey" : "" }}>
-    //             <div className="mainView-menuPanel-button-wrap"
-    //                 style={{ backgroundColor: this.panelContent === "catalog" ? "lightgrey" : "" }}
-    //                 onPointerDown={e => this.selectPanel("catalog")}>
-    //                 <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="file"
-    //                     color={this.panelContent === "catalog" ? "black" : "white"} size="lg" />
-    //                 <div className="mainView-menuPanel-button-label"
-    //                     style={{ color: this.panelContent === "catalog" ? "black" : "white" }}> Catalog </div>
-    //             </div>
-    //         </div>
-
-    //         <div className="mainView-menuPanel-button" style={{ backgroundColor: this.panelContent === "deleted" ? "lightgrey" : "" }}>
-    //             <div className="mainView-menuPanel-button-wrap"
-    //                 style={{ backgroundColor: this.panelContent === "deleted" ? "lightgrey" : "" }}
-    //                 onPointerDown={e => this.selectPanel("deleted")}>
-    //                 <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="archive"
-    //                     color={this.panelContent === "deleted" ? "black" : "white"} size="lg" />
-    //                 <div className="mainView-menuPanel-button-label"
-    //                     style={{ color: this.panelContent === "deleted" ? "black" : "white" }}> Recently Used </div>
-    //             </div>
-    //         </div>
-
-    //         <div className="mainView-menuPanel-button">
-    //             <div className="mainView-menuPanel-button-wrap"
-    //                 onPointerDown={e => this.selectPanel("upload")}>
-    //                 <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="upload" color="white" size="lg" />
-    //                 <div className="mainView-menuPanel-button-label"> Import </div>
-    //             </div>
-    //         </div>
-
-    //         <div className="mainView-menuPanel-button">
-    //             <div className="mainView-menuPanel-button-wrap"
-    //                 //onPointerDown={e => this.selectPanel("sharing")}
-    //                 onClick={() => GroupManager.Instance.open()}>
-    //                 <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="users" color="white" size="lg" />
-    //                 <div className="mainView-menuPanel-button-label"> Sharing </div>
-    //             </div>
-    //         </div>
-
-    //         <div className="mainView-menuPanel-button" style={{ marginBottom: "110px", backgroundColor: this.panelContent === "tools" ? "lightgrey" : "", }}>
-    //             <div className="mainView-menuPanel-button-wrap"
-    //                 onPointerDown={e => this.selectPanel("tools")}
-    //                 style={{
-    //                     backgroundColor: this.panelContent === "tools" ? "lightgrey" : "",
-    //                 }}>
-    //                 <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="wrench"
-    //                     color={this.panelContent === "tools" ? "black" : "white"} size="lg" />
-    //                 <div className="mainView-menuPanel-button-label"
-    //                     style={{ color: this.panelContent === "tools" ? "black" : "white" }}> Tools </div>
-    //             </div>
-    //         </div>
-
-    //         <div className="mainView-menuPanel-button">
-    //             <div className="mainView-menuPanel-button-wrap"
-    //                 // style={{backgroundColor: this.panelContent= "help" ? "lightgrey" : "black"}}
-    //                 onPointerDown={e => this.selectPanel("help")} >
-    //                 <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="question-circle" color="white" size="lg" />
-    //                 <div className="mainView-menuPanel-button-label"> Help </div>
-    //             </div>
-    //         </div>
-
-    //         <div className="mainView-menuPanel-button">
-    //             <div className="mainView-menuPanel-button-wrap"
-    //                 // onPointerDown={e => this.selectPanel("settings")}
-    //                 onClick={() => SettingsManager.Instance.open()}>
-    //                 <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="cog" color="white" size="lg" />
-    //                 <div className="mainView-menuPanel-button-label"> Settings </div>
-    //             </div>
-    //         </div>
+    //         <DocumentView
+    //             Document={Doc.UserDoc().menuStack as Doc}
+    //             DataDoc={undefined}
+    //             LibraryPath={emptyPath}
+    //             addDocument={undefined}
+    //             addDocTab={this.addDocTabFunc}
+    //             pinToPres={emptyFunction}
+    //             NativeHeight={returnZero}
+    //             NativeWidth={returnZero}
+    //             rootSelected={returnTrue}
+    //             removeDocument={returnFalse}
+    //             onClick={undefined}
+    //             ScreenToLocalTransform={this.mainContainerXf}
+    //             ContentScaling={returnOne}
+    //             PanelWidth={() => 80}
+    //             PanelHeight={this.getContentsHeight}
+    //             renderDepth={0}
+    //             focus={emptyFunction}
+    //             backgroundColor={this.defaultBackgroundColors}
+    //             parentActive={returnTrue}
+    //             whenActiveChanged={emptyFunction}
+    //             bringToFront={emptyFunction}
+    //             docFilters={returnEmptyFilter}
+    //             ContainingCollectionView={undefined}
+    //             ContainingCollectionDoc={undefined}
+    //             relative={true}
+    //             scriptContext={this}
+    //         />
     //     </div>;
     // }
 
-    @action
+    @computed get menuPanel() {
+        return <div className="mainView-menuPanel">
+            <div className="mainView-menuPanel-button" style={{ backgroundColor: this.panelContent === "workspace" ? "lightgrey" : "" }}>
+                <div className="mainView-menuPanel-button-wrap"
+                    style={{ backgroundColor: this.panelContent === "workspace" ? "lightgrey" : "" }}
+                    onPointerDown={e => this.selectPanel("workspace")}>
+                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="desktop"
+                        color={this.panelContent === "workspace" ? "black" : "white"} size="lg" />
+                    <div className="mainView-menuPanel-button-label"
+                        style={{ color: this.panelContent === "workspace" ? "black" : "white" }}> Workspace </div>
+                </div>
+            </div>
+
+            <div className="mainView-menuPanel-button" style={{ backgroundColor: this.panelContent === "catalog" ? "lightgrey" : "" }}>
+                <div className="mainView-menuPanel-button-wrap"
+                    style={{ backgroundColor: this.panelContent === "catalog" ? "lightgrey" : "" }}
+                    onPointerDown={e => this.selectPanel("catalog")}>
+                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="file"
+                        color={this.panelContent === "catalog" ? "black" : "white"} size="lg" />
+                    <div className="mainView-menuPanel-button-label"
+                        style={{ color: this.panelContent === "catalog" ? "black" : "white" }}> Catalog </div>
+                </div>
+            </div>
+
+            <div className="mainView-menuPanel-button" style={{ backgroundColor: this.panelContent === "deleted" ? "lightgrey" : "" }}>
+                <div className="mainView-menuPanel-button-wrap"
+                    style={{ backgroundColor: this.panelContent === "deleted" ? "lightgrey" : "" }}
+                    onPointerDown={e => this.selectPanel("deleted")}>
+                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="archive"
+                        color={this.panelContent === "deleted" ? "black" : "white"} size="lg" />
+                    <div className="mainView-menuPanel-button-label"
+                        style={{ color: this.panelContent === "deleted" ? "black" : "white" }}> Recently Used </div>
+                </div>
+            </div>
+
+            <div className="mainView-menuPanel-button">
+                <div className="mainView-menuPanel-button-wrap"
+                    onPointerDown={e => this.selectPanel("upload")}>
+                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="upload" color="white" size="lg" />
+                    <div className="mainView-menuPanel-button-label"> Import </div>
+                </div>
+            </div>
+
+            <div className="mainView-menuPanel-button">
+                <div className="mainView-menuPanel-button-wrap"
+                    //onPointerDown={e => this.selectPanel("sharing")}
+                    onClick={() => GroupManager.Instance.open()}>
+                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="users" color="white" size="lg" />
+                    <div className="mainView-menuPanel-button-label"> Sharing </div>
+                </div>
+            </div>
+
+            <div className="mainView-menuPanel-button" style={{ marginBottom: "110px", backgroundColor: this.panelContent === "tools" ? "lightgrey" : "", }}>
+                <div className="mainView-menuPanel-button-wrap"
+                    onPointerDown={e => this.selectPanel("tools")}
+                    style={{
+                        backgroundColor: this.panelContent === "tools" ? "lightgrey" : "",
+                    }}>
+                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="wrench"
+                        color={this.panelContent === "tools" ? "black" : "white"} size="lg" />
+                    <div className="mainView-menuPanel-button-label"
+                        style={{ color: this.panelContent === "tools" ? "black" : "white" }}> Tools </div>
+                </div>
+            </div>
+
+            <div className="mainView-menuPanel-button">
+                <div className="mainView-menuPanel-button-wrap"
+                    // style={{backgroundColor: this.panelContent= "help" ? "lightgrey" : "black"}}
+                    onPointerDown={e => this.selectPanel("help")} >
+                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="question-circle" color="white" size="lg" />
+                    <div className="mainView-menuPanel-button-label"> Help </div>
+                </div>
+            </div>
+
+            <div className="mainView-menuPanel-button">
+                <div className="mainView-menuPanel-button-wrap"
+                    // onPointerDown={e => this.selectPanel("settings")}
+                    onClick={() => SettingsManager.Instance.open()}>
+                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="cog" color="white" size="lg" />
+                    <div className="mainView-menuPanel-button-label"> Settings </div>
+                </div>
+            </div>
+        </div>;
+    }
+
+    @action @undoBatch
     selectPanel = (str: string) => {
         if (this.panelContent === str && this.flyoutWidth !== 0) {
-            this.panelContent = "none";
-            this.flyoutWidth = 0;
+            this.closeFlyout();
         } else {
             this.panelContent = str;
             MainView.expandFlyout();
@@ -606,7 +613,13 @@ export class MainView extends React.Component {
         return true;
     }
 
-    @action
+    @action @undoBatch
+    closeFlyout = () => {
+        this.panelContent = "none";
+        this.flyoutWidth = 0;
+    }
+
+    @action @undoBatch
     selectMenu = (str: string) => {
         if (CurrentUserUtils.panelContent === str && this.flyoutWidth !== 0) {
             CurrentUserUtils.panelContent = "none";
@@ -630,7 +643,7 @@ export class MainView extends React.Component {
         return true;
     }
 
-    @action
+    @action @undoBatch
     onDown = (e: React.PointerEvent) => {
         setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => {
             this._propertiesWidth = this._panelWidth - Math.max(Transform.Identity().transformPoint(e.clientX, 0)[0], 0);
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 3113d8cb4..cc15a8195 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -6,7 +6,7 @@ import { observer } from "mobx-react";
 import { Doc, DocListCast } from "../../fields/Doc";
 import { RichTextField } from '../../fields/RichTextField';
 import { Cast, NumCast, BoolCast } from "../../fields/Types";
-import { emptyFunction, setupMoveUpEvents } from "../../Utils";
+import { emptyFunction, setupMoveUpEvents, Utils } from "../../Utils";
 import GoogleAuthenticationManager from '../apis/GoogleAuthenticationManager';
 import { Pulls, Pushes } from '../apis/google_docs/GoogleApiClientUtils';
 import { Docs, DocUtils } from '../documents/Documents';
@@ -27,6 +27,8 @@ import SharingManager from '../util/SharingManager';
 import { GooglePhotos } from '../apis/google_docs/GooglePhotosClientUtils';
 import { ImageField } from '../../fields/URLField';
 import { undoBatch, UndoManager } from '../util/UndoManager';
+import { DocumentType } from '../documents/DocumentTypes';
+import { CollectionFreeFormView } from './collections/collectionFreeForm/CollectionFreeFormView';
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -471,6 +473,22 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         </Tooltip>;
     }
 
+    // @computed
+    // get importButton() {
+    //     const targetDoc = this.selectedDoc;
+    //     return !targetDoc ? (null) : <Tooltip
+    //         title={<><div className="dash-tooltip">{"Import a Document"}</div></>}>
+    //         <div className={"propertiesButtons-linkButton-empty"}
+    //             onPointerDown={() => {
+    //                 if (this.selectedDocumentView) {
+    //                     CollectionFreeFormView.importDocument(100, 100);
+    //                 }
+    //             }}>
+    //             {<FontAwesomeIcon className="documentdecorations-icon"
+    //                 icon="upload" size="sm" />}
+    //         </div>
+    //     </Tooltip>;
+    // }
 
     render() {
         if (!this.selectedDoc) return (null);
@@ -479,6 +497,8 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         const considerPull = isText && this.considerGoogleDocsPull;
         const considerPush = isText && this.considerGoogleDocsPush;
         const isImage = this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof ImageField;
+        const isCollection = this.selectedDoc.type === DocumentType.COL ? true : false;
+
         return <div><div className="propertiesButtons" style={{ paddingBottom: "5.5px" }}>
             <div className="propertiesButtons-button">
                 {this.templateButton}
@@ -518,6 +538,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                 <div className="propertiesButtons-button" style={{ display: !isImage ? "none" : "" }}>
                     {this.googlePhotosButton}
                 </div>
+                {/* <div className="propertiesButtons-button" style={{ display: !isCollection ? "none" : "" }}>
+                    {this.importButton}
+                </div> */}
             </div>
         </div>;
     }
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 5553bbbb7..f67e049fd 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -253,7 +253,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
             <div className="collectionSchema-headerMenu-group">
                 <div onClick={() => this.typesDropdownChange(!this._openTypes)}>
                     <label>Column type:</label>
-                    <FontAwesomeIcon icon={"caret-down"} size="sm" style={{ float: "right" }} />
+                    <FontAwesomeIcon icon={"caret-down"} size="lg" style={{ float: "right" }} />
                 </div>
                 {this._openTypes ? allColumnTypes : justColType}
             </div >
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index ae53f5ba0..5834e5542 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -308,7 +308,7 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
 
             const options = cm.findByDescription("Options...");
             const optionItems = options && "subitems" in options ? options.subitems : [];
-            optionItems.splice(0, 0, { description: `${this.props.Document.forceActive ? "Select" : "Force"} Contents Active`, event: () => this.props.Document.forceActive = !this.props.Document.forceActive, icon: "project-diagram" });
+            !Doc.UserDoc().noviceMode ? optionItems.splice(0, 0, { description: `${this.props.Document.forceActive ? "Select" : "Force"} Contents Active`, event: () => this.props.Document.forceActive = !this.props.Document.forceActive, icon: "project-diagram" }) : null;
             if (this.props.Document.childLayout instanceof Doc) {
                 optionItems.push({ description: "View Child Layout", event: () => this.props.addDocTab(this.props.Document.childLayout as Doc, "onRight"), icon: "project-diagram" });
             }
diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx
index cde795098..75e693f96 100644
--- a/src/client/views/collections/SchemaTable.tsx
+++ b/src/client/views/collections/SchemaTable.tsx
@@ -208,7 +208,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
                 }}>
                 {col.heading}</div>;
 
-            const sortIcon = col.desc === undefined ? "circle" : col.desc === true ? "caret-down" : "caret-up";
+            const sortIcon = col.desc === undefined ? "caret-right" : col.desc === true ? "caret-down" : "caret-up";
 
             const header =
                 <div //className="collectionSchemaView-header"
@@ -224,12 +224,12 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
                         {keysDropdown}
                     </div>
                     <div onClick={e => this.changeSorting(col)}
-                        style={{ paddingRight: "6px", display: "inline" }}>
+                        style={{ paddingRight: "6px", marginLeft: "4px", display: "inline" }}>
                         <FontAwesomeIcon icon={sortIcon} size="sm" />
                     </div>
                     <div onClick={e => this.props.openHeader(col, e.clientX, e.clientY)}
                         style={{ float: "right", paddingRight: "6px" }}>
-                        <FontAwesomeIcon icon={"compass"} size="sm" />
+                        <FontAwesomeIcon icon={"cog"} size="sm" />
                     </div>
                 </div>;
 
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 57336131a..e0981d797 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1239,13 +1239,15 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
         const appearanceItems = appearance && "subitems" in appearance ? appearance.subitems : [];
         appearanceItems.push({ description: "Reset View", event: () => { this.props.Document._panX = this.props.Document._panY = 0; this.props.Document[this.scaleFieldKey] = 1; }, icon: "compress-arrows-alt" });
         appearanceItems.push({ description: `${this.fitToContent ? "Make Zoomable" : "Scale to Window"}`, event: () => this.Document._fitToBox = !this.fitToContent, icon: !this.fitToContent ? "expand-arrows-alt" : "compress-arrows-alt" });
-        appearanceItems.push({ description: "Arrange contents in grid", event: this.layoutDocsInGrid, icon: "table" });
+        !Doc.UserDoc().noviceMode ? appearanceItems.push({ description: "Arrange contents in grid", event: this.layoutDocsInGrid, icon: "table" }) : null;
         !appearance && ContextMenu.Instance.addItem({ description: "Appearance...", subitems: appearanceItems, icon: "eye" });
 
         const viewctrls = ContextMenu.Instance.findByDescription("UI Controls...");
         const viewCtrlItems = viewctrls && "subitems" in viewctrls ? viewctrls.subitems : [];
-        viewCtrlItems.push({ description: (Doc.UserDoc().showSnapLines ? "Hide" : "Show") + " Snap Lines", event: () => Doc.UserDoc().showSnapLines = !Doc.UserDoc().showSnapLines, icon: "compress-arrows-alt" });
-        viewCtrlItems.push({ description: (this.Document.useClusters ? "Hide" : "Show") + " Clusters", event: () => this.updateClusters(!this.Document.useClusters), icon: "braille" });
+
+
+        !Doc.UserDoc().noviceMode ? viewCtrlItems.push({ description: (Doc.UserDoc().showSnapLines ? "Hide" : "Show") + " Snap Lines", event: () => Doc.UserDoc().showSnapLines = !Doc.UserDoc().showSnapLines, icon: "compress-arrows-alt" }) : null;
+        !Doc.UserDoc().noviceMode ? viewCtrlItems.push({ description: (this.Document.useClusters ? "Hide" : "Show") + " Clusters", event: () => this.updateClusters(!this.Document.useClusters), icon: "braille" }) : null;
         !viewctrls && ContextMenu.Instance.addItem({ description: "UI Controls...", subitems: viewCtrlItems, icon: "eye" });
 
         const options = ContextMenu.Instance.findByDescription("Options...");
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index 8084d96ae..0aabf5319 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -196,6 +196,7 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
             case DocumentType.DOCHOLDER: destinationIcon = "expand"; break;
             case DocumentType.VID: destinationIcon = "video"; break;
             case DocumentType.INK: destinationIcon = "pen-nib"; break;
+            case DocumentType.PDF: destinationIcon = "file"; break;
             default: destinationIcon = "question"; break;
         }
 
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 856eb7246..f5ae9349a 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -712,21 +712,21 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
 
         const options = cm.findByDescription("Options...");
         const optionItems: ContextMenuProps[] = options && "subitems" in options ? options.subitems : [];
-        optionItems.push({ description: this.Document.lockedPosition ? "Unlock Position" : "Lock Position", event: this.toggleLockPosition, icon: BoolCast(this.Document.lockedPosition) ? "unlock" : "lock" });
+        //optionItems.push({ description: this.Document.lockedPosition ? "Unlock Position" : "Lock Position", event: this.toggleLockPosition, icon: BoolCast(this.Document.lockedPosition) ? "unlock" : "lock" });
         !options && cm.addItem({ description: "Options...", subitems: optionItems, icon: "compass" });
 
 
         const existingOnClick = cm.findByDescription("OnClick...");
         const onClicks: ContextMenuProps[] = existingOnClick && "subitems" in existingOnClick ? existingOnClick.subitems : [];
         onClicks.push({ description: "Enter Portal", event: this.makeIntoPortal, icon: "window-restore" });
-        onClicks.push({ description: "Toggle Detail", event: () => this.Document.onClick = ScriptField.MakeScript(`toggleDetail(self, "${this.Document.layoutKey}")`), icon: "window-restore" });
+        onClicks.push({ description: "Toggle Detail", event: () => this.Document.onClick = ScriptField.MakeScript(`toggleDetail(self, "${this.Document.layoutKey}")`), icon: "concierge-bell" });
         onClicks.push({ description: this.Document.ignoreClick ? "Select" : "Do Nothing", event: () => this.Document.ignoreClick = !this.Document.ignoreClick, icon: this.Document.ignoreClick ? "unlock" : "lock" });
-        onClicks.push({ description: this.Document.isLinkButton ? "Remove Follow Behavior" : "Follow Link in Place", event: () => this.toggleFollowLink("inPlace", true, false), icon: "concierge-bell" });
-        !this.Document.isLinkButton && onClicks.push({ description: "Follow Link on Right", event: () => this.toggleFollowLink("onRight", false, false), icon: "concierge-bell" });
-        onClicks.push({ description: this.Document.isLinkButton || this.onClickHandler ? "Remove Click Behavior" : "Follow Link", event: () => this.toggleFollowLink(undefined, false, false), icon: "concierge-bell" });
-        onClicks.push({ description: (this.Document.isPushpin ? "Remove" : "Make") + " Pushpin", event: () => this.toggleFollowLink(undefined, false, true), icon: "snowflake" });
-        onClicks.push({ description: "Edit onClick Script", event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.props.Document, undefined, "onClick"), "edit onClick"), icon: "edit" });
-        !existingOnClick && cm.addItem({ description: "OnClick...", noexpand: true, addDivider: true, subitems: onClicks, icon: "hand-point-right" });
+        onClicks.push({ description: this.Document.isLinkButton ? "Remove Follow Behavior" : "Follow Link in Place", event: () => this.toggleFollowLink("inPlace", true, false), icon: "link" });
+        !this.Document.isLinkButton && onClicks.push({ description: "Follow Link on Right", event: () => this.toggleFollowLink("onRight", false, false), icon: "link" });
+        onClicks.push({ description: this.Document.isLinkButton || this.onClickHandler ? "Remove Click Behavior" : "Follow Link", event: () => this.toggleFollowLink(undefined, false, false), icon: "link" });
+        onClicks.push({ description: (this.Document.isPushpin ? "Remove" : "Make") + " Pushpin", event: () => this.toggleFollowLink(undefined, false, true), icon: "map-pin" });
+        onClicks.push({ description: "Edit onClick Script", event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.props.Document, undefined, "onClick"), "edit onClick"), icon: "terminal" });
+        !existingOnClick && cm.addItem({ description: "OnClick...", noexpand: true, addDivider: true, subitems: onClicks, icon: "mouse-pointer" });
 
         const funcs: ContextMenuProps[] = [];
         if (this.layoutDoc.onDragStart) {
@@ -739,6 +739,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         const more = cm.findByDescription("More...");
         const moreItems = more && "subitems" in more ? more.subitems : [];
         moreItems.push({ description: "Share", event: () => SharingManager.Instance.open(this), icon: "users" });
+        moreItems.push({ description: this.Document.lockedPosition ? "Unlock Position" : "Lock Position", event: this.toggleLockPosition, icon: BoolCast(this.Document.lockedPosition) ? "unlock" : "lock" });
         moreItems.push({ description: "Create an Alias", event: () => this.onCopy(), icon: "copy" });
         moreItems.push({ description: "Download document", icon: "download", event: async () => Doc.Zip(this.props.Document) });
         if (!Doc.UserDoc().noviceMode) {
-- 
cgit v1.2.3-70-g09d2


From da018ee4a1aa1b6f7f5e7c6cc13cb3d445033350 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Thu, 30 Jul 2020 16:16:27 -0500
Subject: collection menu and properties adjustments

---
 src/client/views/MainView.tsx                   | 13 +++++--
 src/client/views/PropertiesButtons.tsx          | 51 +++++++++++++++++++++++++
 src/client/views/collections/CollectionMenu.tsx |  3 +-
 3 files changed, 62 insertions(+), 5 deletions(-)

(limited to 'src/client/views/PropertiesButtons.tsx')

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 825a75afa..a485d533c 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -172,7 +172,7 @@ export class MainView extends React.Component {
             fa.faFillDrip, fa.faLink, fa.faUnlink, fa.faBold, fa.faItalic, fa.faChevronLeft, fa.faUnderline, fa.faStrikethrough, fa.faSuperscript, fa.faSubscript,
             fa.faIndent, fa.faEyeDropper, fa.faPaintRoller, fa.faBars, fa.faBrush, fa.faShapes, fa.faEllipsisH, fa.faHandPaper, fa.faMap, fa.faUser, faHireAHelper,
             fa.faDesktop, fa.faTrashRestore, fa.faUsers, fa.faWrench, fa.faCog, fa.faMap, fa.faBellSlash, fa.faExpandAlt, fa.faArchive, fa.faBezierCurve, fa.faCircle,
-            fa.faLongArrowAltRight, fa.faPenFancy, fa.faAngleDoubleRight);
+            fa.faLongArrowAltRight, fa.faPenFancy, fa.faAngleDoubleRight, fa.faExpand);
         this.initEventListeners();
         this.initAuthenticationRouters();
     }
@@ -420,7 +420,7 @@ export class MainView extends React.Component {
     @action
     onPointerMove = (e: PointerEvent) => {
         if (this.propertiesDownX) {
-            this._propertiesWidth = this._propertiesWidth + (this.propertiesDownX - e.screenX) * .5;
+            this._propertiesWidth = this._propertiesWidth + (this.propertiesDownX - e.screenX);
             if (this._propertiesWidth < 150) {
                 this._propertiesWidth = 0;
                 this.propertiesDownX = undefined;
@@ -446,7 +446,7 @@ export class MainView extends React.Component {
                     this._propertiesWidth = 0;
                 }
             } else {
-                this._propertiesWidth = this._propertiesWidth + (this.propertiesDownX - e.screenX) * .5;
+                this._propertiesWidth = this._propertiesWidth + (this.propertiesDownX - e.screenX);
                 if (this._propertiesWidth < 150) {
                     this._propertiesWidth = 0;
                 } else if (this._propertiesWidth > 400) {
@@ -573,7 +573,12 @@ export class MainView extends React.Component {
                 case "Settings": this.sidebarContent.proto = SettingsManager.Instance.open(); break;
                 case "Sharing": this.sidebarContent.proto = GroupManager.Instance.open(); break;
             }
-            MainView.expandFlyout();
+            if (str === "Settings" || str === "Sharing" || str === "Help") {
+                this.panelContent = "none";
+                this.flyoutWidth = 0;
+            } else {
+                MainView.expandFlyout();
+            }
         }
         return true;
     }
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index cc15a8195..bd5301629 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -473,6 +473,46 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         </Tooltip>;
     }
 
+    @computed
+    get clustersButton() {
+        const targetDoc = this.selectedDoc;
+        return !targetDoc ? (null) : <Tooltip
+            title={<><div className="dash-tooltip">{this.selectedDoc?.useClusters ? "Stop Showing Clusters" : "Show Clusters"}</div></>}>
+            <div className={"propertiesButtons-linkButton-empty"}
+                style={{ backgroundColor: this.selectedDoc?.useClusters ? "#a0a0a0" : "" }}
+                onPointerDown={this.changeClusters}>
+                {<FontAwesomeIcon className="documentdecorations-icon"
+                    color={this.selectedDoc?.useClusters ? "black" : "white"}
+                    icon="braille" size="sm" />}
+            </div>
+        </Tooltip>;
+    }
+
+    @action @undoBatch
+    changeFitToBox = () => {
+        this.selectedDoc && (this.selectedDoc._fitToBox = !this.selectedDoc._fitToBox);
+    }
+
+    @action @undoBatch
+    changeClusters = () => {
+        this.selectedDoc && (this.selectedDoc.useClusters = !this.selectedDoc.useClusters);
+    }
+
+    @computed
+    get fitContentButton() {
+        const targetDoc = this.selectedDoc;
+        return !targetDoc ? (null) : <Tooltip
+            title={<><div className="dash-tooltip">{this.selectedDoc?._fitToBox ? "Stop Fitting Content" : "Fit Content"}</div></>}>
+            <div className={"propertiesButtons-linkButton-empty"}
+                style={{ backgroundColor: this.selectedDoc?._fitToBox ? "#a0a0a0" : "" }}
+                onPointerDown={this.changeFitToBox}>
+                {<FontAwesomeIcon className="documentdecorations-icon"
+                    color={this.selectedDoc?._fitToBox ? "black" : "white"}
+                    icon="expand" size="sm" />}
+            </div>
+        </Tooltip>;
+    }
+
     // @computed
     // get importButton() {
     //     const targetDoc = this.selectedDoc;
@@ -490,6 +530,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     //     </Tooltip>;
     // }
 
+
     render() {
         if (!this.selectedDoc) return (null);
 
@@ -498,6 +539,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         const considerPush = isText && this.considerGoogleDocsPush;
         const isImage = this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof ImageField;
         const isCollection = this.selectedDoc.type === DocumentType.COL ? true : false;
+        const isFreeForm = this.selectedDoc._viewType === "freeform" ? true : false;
 
         return <div><div className="propertiesButtons" style={{ paddingBottom: "5.5px" }}>
             <div className="propertiesButtons-button">
@@ -541,6 +583,15 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                 {/* <div className="propertiesButtons-button" style={{ display: !isCollection ? "none" : "" }}>
                     {this.importButton}
                 </div> */}
+
+                <div className="propertiesButtons-button" style={{ display: !isFreeForm ? "none" : "" }}>
+                    {this.clustersButton}
+                </div>
+
+                <div className="propertiesButtons-button" style={{ display: !isFreeForm ? "none" : "" }}>
+                    {this.fitContentButton}
+                </div>
+
             </div>
         </div>;
     }
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index e7c0ad6e6..14ab35a63 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -161,7 +161,8 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
         initialize: (button: Doc) => { button['target-docFilters'] = this.target._docFilters instanceof ObjectField ? ObjectField.MakeCopy(this.target._docFilters as any as ObjectField) : ""; },
     };
 
-    _freeform_commands = [this._viewCommand, this._saveFilterCommand, this._fitContentCommand, this._clusterCommand, this._contentCommand, this._templateCommand, this._narrativeCommand];
+    @computed get _freeform_commands() { return Doc.UserDoc().noviceMode ? [this._viewCommand, this._saveFilterCommand] : [this._viewCommand, this._saveFilterCommand, this._contentCommand, this._templateCommand, this._narrativeCommand] };
+
     _stacking_commands = [this._contentCommand, this._templateCommand];
     _masonry_commands = [this._contentCommand, this._templateCommand];
     _schema_commands = [this._templateCommand, this._narrativeCommand];
-- 
cgit v1.2.3-70-g09d2


From b33e31e369aef6e0675219c96ba4b8a058a69b0c Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Sat, 1 Aug 2020 09:39:38 -0400
Subject: fixed warnings

---
 src/client/views/DocumentDecorations.tsx           |  8 +++----
 src/client/views/MainView.tsx                      |  4 ++--
 src/client/views/PreviewCursor.tsx                 |  6 +++---
 src/client/views/PropertiesButtons.tsx             |  2 +-
 .../views/collections/CollectionDockingView.tsx    |  6 +++---
 src/client/views/collections/CollectionMenu.tsx    |  4 ++--
 src/client/views/collections/CollectionSubView.tsx |  2 +-
 .../views/collections/CollectionTreeView.tsx       |  2 +-
 .../views/collections/ParentDocumentSelector.tsx   |  6 +++---
 src/client/views/collections/SchemaTable.tsx       |  2 +-
 .../collectionFreeForm/CollectionFreeFormView.tsx  |  4 ++--
 .../collectionFreeForm/FormatShapePane.tsx         | 25 +++++++++++-----------
 .../collectionFreeForm/PropertiesView.tsx          | 14 +++++-------
 src/client/views/nodes/DocumentView.tsx            |  2 +-
 .../views/nodes/formattedText/RichTextMenu.tsx     |  4 ++--
 src/client/views/nodes/formattedText/nodes_rts.ts  |  8 +++----
 src/fields/Doc.ts                                  |  6 +++---
 src/server/ApiManagers/UtilManager.ts              |  1 -
 18 files changed, 50 insertions(+), 56 deletions(-)

(limited to 'src/client/views/PropertiesButtons.tsx')

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index bdb25d460..ec6e2be7c 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -528,12 +528,12 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
                 const ink = Cast(doc.data, InkField)?.inkData;
                 if (ink) {
                     const newPoints: { X: number, Y: number }[] = [];
-                    for (var i = 0; i < ink.length; i++) {
+                    ink.forEach(i => {
                         // (new x — oldx) + (oldxpoint * newWidt)/oldWidth 
-                        const newX = (doc.x - this._inkDocs[index].x) + (ink[i].X * doc._width) / this._inkDocs[index].width;
-                        const newY = (doc.y - this._inkDocs[index].y) + (ink[i].Y * doc._height) / this._inkDocs[index].height;
+                        const newX = ((doc.x || 0) - this._inkDocs[index].x) + (i.X * (doc._width || 0)) / this._inkDocs[index].width;
+                        const newY = ((doc.y || 0) - this._inkDocs[index].y) + (i.Y * (doc._height || 0)) / this._inkDocs[index].height;
                         newPoints.push({ X: newX, Y: newY });
-                    }
+                    });
                     doc.data = new InkField(newPoints);
 
                 }
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 85f695b85..67f1f5592 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -305,7 +305,7 @@ export class MainView extends React.Component {
     }
 
     @action
-    getPWidth = () => this._panelWidth - this.propertiesWidth();
+    getPWidth = () => this._panelWidth - this.propertiesWidth()
 
     getPHeight = () => this._panelHeight;
     getContentsHeight = () => this._panelHeight - this._buttonBarHeight;
@@ -406,7 +406,7 @@ export class MainView extends React.Component {
     //sidebarScreenToLocal = () => new Transform(0, (RichTextMenu.Instance.Pinned ? -35 : 0) + (CollectionMenu.Instance.Pinned ? -35 : 0), 1);
     mainContainerXf = () => this.sidebarScreenToLocal().translate(0, -this._buttonBarHeight);
 
-    @computed get closePosition() { return 55 + this.flyoutWidth }
+    @computed get closePosition() { return 55 + this.flyoutWidth; }
     @computed get flyout() {
         if (!this.sidebarContent) return null;
         return <div className="mainView-libraryFlyout">
diff --git a/src/client/views/PreviewCursor.tsx b/src/client/views/PreviewCursor.tsx
index b4116e980..d7034fcfb 100644
--- a/src/client/views/PreviewCursor.tsx
+++ b/src/client/views/PreviewCursor.tsx
@@ -112,10 +112,10 @@ export class PreviewCursor extends React.Component<{}> {
                 } else if (e.clipboardData.items.length) {
                     const batch = UndoManager.StartBatch("collection view drop");
                     const files: File[] = [];
-                    for (let i = 0; i < e.clipboardData.items.length; i++) {
-                        const file = e.clipboardData.items[i].getAsFile();
+                    Array.from(e.clipboardData.items).forEach(item => {
+                        const file = item.getAsFile();
                         file && files.push(file);
-                    }
+                    });
                     const generatedDocuments = await DocUtils.uploadFilesToDocs(files, { x: newPoint[0], y: newPoint[1] });
                     generatedDocuments.forEach(PreviewCursor._addDocument);
                     batch.end();
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index bd5301629..59e7cc7c8 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -464,7 +464,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             <div className={"propertiesButtons-linkButton-empty"}
                 onPointerDown={() => {
                     if (this.selectedDocumentView) {
-                        GooglePhotos.Export.CollectionToAlbum({ collection: this.selectedDocumentView.Document }).then(console.log)
+                        GooglePhotos.Export.CollectionToAlbum({ collection: this.selectedDocumentView.Document }).then(console.log);
                     }
                 }}>
                 {<FontAwesomeIcon className="documentdecorations-icon"
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 9ce5cb03b..7a0a06069 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -521,7 +521,7 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
                 tab.element[0].onpointerdown = (e: any) => {
                     const view = DocumentManager.Instance.getDocumentView(doc);
                     view && SelectionManager.SelectDoc(view, false);
-                }
+                };
                 // shifts the focus to this tab when another tab is dragged over it
                 tab.element[0].onmouseenter = (e: any) => {
                     if (!this._isPointerDown || !SnappingManager.GetIsDragging()) return;
@@ -747,10 +747,10 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
         this.onActiveContentItemChanged();
         this._tabReaction = reaction(() => ({ views: SelectionManager.SelectedDocuments(), color: StrCast(this._document?._backgroundColor, "white") }),
             (data) => {
-                const selected = data.views.some(v => Doc.AreProtosEqual(v.props.Document, this._document))
+                const selected = data.views.some(v => Doc.AreProtosEqual(v.props.Document, this._document));
                 this._tab.style.backgroundColor = selected ? data.color : "";
             }
-        )
+        );
     }
 
     componentWillUnmount() {
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index e70a16da9..01374cfbb 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -49,7 +49,7 @@ export default class CollectionMenu extends AntimodeMenu {
 
     componentDidMount() {
         reaction(() => SelectionManager.SelectedDocuments().length && SelectionManager.SelectedDocuments()[0],
-            (doc) => doc && this.SetSelection(doc))
+            (doc) => doc && this.SetSelection(doc));
     }
 
     @action
@@ -162,7 +162,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
         initialize: (button: Doc) => { button['target-docFilters'] = this.target._docFilters instanceof ObjectField ? ObjectField.MakeCopy(this.target._docFilters as any as ObjectField) : ""; },
     };
 
-    @computed get _freeform_commands() { return Doc.UserDoc().noviceMode ? [this._viewCommand, this._saveFilterCommand] : [this._viewCommand, this._saveFilterCommand, this._contentCommand, this._templateCommand, this._narrativeCommand] };
+    @computed get _freeform_commands() { return Doc.UserDoc().noviceMode ? [this._viewCommand, this._saveFilterCommand] : [this._viewCommand, this._saveFilterCommand, this._contentCommand, this._templateCommand, this._narrativeCommand]; }
 
     _stacking_commands = [this._contentCommand, this._templateCommand];
     _masonry_commands = [this._contentCommand, this._templateCommand];
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index 9f78c15eb..c90e85271 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -296,7 +296,7 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?:
                             const reg = new RegExp(Utils.prepend(""), "g");
                             const modHtml = srcUrl ? html.replace(reg, srcUrl) : html;
                             const htmlDoc = Docs.Create.HtmlDocument(modHtml, { ...options, title: "-web page-", _width: 300, _height: 300 });
-                            Doc.GetProto(htmlDoc)["data-text"] = Doc.GetProto(htmlDoc)["text"] = text;
+                            Doc.GetProto(htmlDoc)["data-text"] = Doc.GetProto(htmlDoc).text = text;
                             this.props.addDocument(htmlDoc);
                             if (srcWeb) {
                                 const focusNode = (SelectionManager.SelectedDocuments()[0].ContentDiv?.getElementsByTagName("iframe")[0].contentDocument?.getSelection()?.focusNode as any);
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index d6203e7da..ca3ab8866 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -104,7 +104,7 @@ class TreeView extends React.Component<TreeViewProps> {
         const layout = Doc.LayoutField(this.doc) instanceof Doc ? Doc.LayoutField(this.doc) as Doc : undefined;
         return ((this.props.dataDoc ? DocListCast(this.props.dataDoc[field]) : undefined) || // if there's a data doc for an expanded template, use it's data field
             (layout ? DocListCast(layout[field]) : undefined) || // else if there's a layout doc, display it's fields
-            DocListCast(this.doc[field])) as Doc[]; // otherwise use the document's data field
+            DocListCast(this.doc[field])); // otherwise use the document's data field
     }
     @computed get childDocs() { return this.childDocList(this.fieldKey); }
     @computed get childLinks() { return this.childDocList("links"); }
diff --git a/src/client/views/collections/ParentDocumentSelector.tsx b/src/client/views/collections/ParentDocumentSelector.tsx
index 8c0b8de9d..532dd6abc 100644
--- a/src/client/views/collections/ParentDocumentSelector.tsx
+++ b/src/client/views/collections/ParentDocumentSelector.tsx
@@ -42,14 +42,14 @@ export class SelectorContextMenu extends React.Component<SelectorProps> {
     async fetchDocuments() {
         const aliases = (await SearchUtil.GetAliasesOfDocument(this.props.Document));
         const containerProtoSets = await Promise.all(aliases.map(async alias =>
-            await Promise.all((await SearchUtil.Search("", true, { fq: `data_l:"${alias[Id]}"` })).docs)));
+            ((await SearchUtil.Search("", true, { fq: `data_l:"${alias[Id]}"` })).docs)));
         const containerProtos = containerProtoSets.reduce((p, set) => { set.map(s => p.add(s)); return p; }, new Set<Doc>());
         const containerSets = await Promise.all(Array.from(containerProtos.keys()).map(async container => {
-            return (await SearchUtil.GetAliasesOfDocument(container));
+            return (SearchUtil.GetAliasesOfDocument(container));
         }));
         const containers = containerSets.reduce((p, set) => { set.map(s => p.add(s)); return p; }, new Set<Doc>());
         const doclayoutSets = await Promise.all(Array.from(containers.keys()).map(async (dp) => {
-            return (await SearchUtil.GetAliasesOfDocument(dp));
+            return (SearchUtil.GetAliasesOfDocument(dp));
         }));
         const doclayouts = Array.from(doclayoutSets.reduce((p, set) => { set.map(s => p.add(s)); return p; }, new Set<Doc>()).keys());
         runInAction(() => {
diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx
index 75e693f96..7e2840c2c 100644
--- a/src/client/views/collections/SchemaTable.tsx
+++ b/src/client/views/collections/SchemaTable.tsx
@@ -148,7 +148,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> {
     }
 
     @action
-    changeTitleMode = () => this._showTitleDropdown = !this._showTitleDropdown;
+    changeTitleMode = () => this._showTitleDropdown = !this._showTitleDropdown
 
     @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); }
     @computed get tableColumns(): Column<Doc>[] {
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index e0981d797..badbc48a1 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1144,7 +1144,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
     @action
     componentDidMount() {
         super.componentDidMount?.();
-        this._layoutComputeReaction = reaction(() => { TraceMobx(); return this.doLayoutComputation },
+        this._layoutComputeReaction = reaction(() => this.doLayoutComputation,
             (elements) => this._layoutElements = elements || [],
             { fireImmediately: true, name: "doLayout" });
 
@@ -1292,7 +1292,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
                         setTimeout(() => {
                             SearchUtil.Search(`{!join from=id to=proto_i}id:link*`, true, {}).then(docs => {
                                 docs.docs.forEach(d => LinkManager.Instance.addLink(d));
-                            })
+                            });
                         }, 2000); // need to give solr some time to update so that this query will find any link docs we've added.
                     }
                 }
diff --git a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
index eb6097acf..6263be261 100644
--- a/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
+++ b/src/client/views/collections/collectionFreeForm/FormatShapePane.tsx
@@ -13,7 +13,6 @@ import AntimodeMenu from "../../AntimodeMenu";
 import "./FormatShapePane.scss";
 import { undoBatch } from "../../../util/UndoManager";
 import { ColorState, SketchPicker } from 'react-color';
-import { DocumentView } from "../../../views/nodes/DocumentView"
 
 @observer
 export default class FormatShapePane extends AntimodeMenu {
@@ -124,12 +123,12 @@ export default class FormatShapePane extends AntimodeMenu {
                     console.log(ink);
                     if (ink) {
                         const newPoints: { X: number, Y: number }[] = [];
-                        for (var j = 0; j < ink.length; j++) {
+                        ink.forEach(i => {
                             // (new x — oldx) + (oldxpoint * newWidt)/oldWidth 
-                            const newX = (doc.x - oldX) + (ink[j].X * doc._width) / oldWidth;
-                            const newY = (doc.y - oldY) + (ink[j].Y * doc._height) / oldHeight;
+                            const newX = ((doc.x || 0) - oldX) + (i.X * (doc._width || 0)) / oldWidth;
+                            const newY = ((doc.y || 0) - oldY) + (i.Y * (doc._height || 0)) / oldHeight;
                             newPoints.push({ X: newX, Y: newY });
-                        }
+                        });
                         doc.data = new InkField(newPoints);
                     }
                 }
@@ -148,12 +147,12 @@ export default class FormatShapePane extends AntimodeMenu {
                     console.log(ink);
                     if (ink) {
                         const newPoints: { X: number, Y: number }[] = [];
-                        for (var j = 0; j < ink.length; j++) {
+                        ink.forEach(i => {
                             // (new x — oldx) + (oldxpoint * newWidt)/oldWidth 
-                            const newX = (doc.x - oldX) + (ink[j].X * doc._width) / oldWidth;
-                            const newY = (doc.y - oldY) + (ink[j].Y * doc._height) / oldHeight;
+                            const newX = ((doc.x || 0) - oldX) + (i.X * (doc._width || 0)) / oldWidth;
+                            const newY = ((doc.y || 0) - oldY) + (i.Y * (doc._height || 0)) / oldHeight;
                             newPoints.push({ X: newX, Y: newY });
-                        }
+                        });
                         doc.data = new InkField(newPoints);
                     }
                 }
@@ -191,11 +190,11 @@ export default class FormatShapePane extends AntimodeMenu {
                 if (ink) {
 
                     const newPoints: { X: number, Y: number }[] = [];
-                    for (var i = 0; i < ink.length; i++) {
-                        const newX = Math.cos(angle) * (ink[i].X - _centerPoints[index].X) - Math.sin(angle) * (ink[i].Y - _centerPoints[index].Y) + _centerPoints[index].X;
-                        const newY = Math.sin(angle) * (ink[i].X - _centerPoints[index].X) + Math.cos(angle) * (ink[i].Y - _centerPoints[index].Y) + _centerPoints[index].Y;
+                    ink.forEach(i => {
+                        const newX = Math.cos(angle) * (i.X - _centerPoints[index].X) - Math.sin(angle) * (i.Y - _centerPoints[index].Y) + _centerPoints[index].X;
+                        const newY = Math.sin(angle) * (i.X - _centerPoints[index].X) + Math.cos(angle) * (i.Y - _centerPoints[index].Y) + _centerPoints[index].Y;
                         newPoints.push({ X: newX, Y: newY });
-                    }
+                    });
                     doc.data = new InkField(newPoints);
                     const xs = newPoints.map(p => p.X);
                     const ys = newPoints.map(p => p.Y);
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index a3c9516e1..ca81bf131 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -399,11 +399,11 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 if (ink) {
 
                     const newPoints: { X: number, Y: number }[] = [];
-                    for (var i = 0; i < ink.length; i++) {
-                        const newX = Math.cos(angle) * (ink[i].X - _centerPoints[index].X) - Math.sin(angle) * (ink[i].Y - _centerPoints[index].Y) + _centerPoints[index].X;
-                        const newY = Math.sin(angle) * (ink[i].X - _centerPoints[index].X) + Math.cos(angle) * (ink[i].Y - _centerPoints[index].Y) + _centerPoints[index].Y;
+                    ink.forEach(i => {
+                        const newX = Math.cos(angle) * (i.X - _centerPoints[index].X) - Math.sin(angle) * (i.Y - _centerPoints[index].Y) + _centerPoints[index].X;
+                        const newY = Math.sin(angle) * (i.X - _centerPoints[index].X) + Math.cos(angle) * (i.Y - _centerPoints[index].Y) + _centerPoints[index].Y;
                         newPoints.push({ X: newX, Y: newY });
-                    }
+                    });
                     doc.data = new InkField(newPoints);
                     const xs = newPoints.map(p => p.X);
                     const ys = newPoints.map(p => p.Y);
@@ -534,11 +534,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     }
 
     getField(key: string) {
-        //if (this.selectedDoc) {
-        return Field.toString(this.selectedDoc[key] as Field);
-        // } else {
-        //     return undefined as Opt<string>;
-        // }
+        return Field.toString(this.selectedDoc?.[key] as Field);
     }
 
     @computed get shapeXps() { return this.getField("x"); }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 62a786a03..80db0e6db 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -325,7 +325,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                     thisContainer: this.props.ContainingCollectionDoc,
                     shiftKey: e.shiftKey
                 }, console.log);
-                if (this.props.Document !== Doc.UserDoc()["dockedBtn-undo"] && this.props.Document !== Doc.UserDoc()["dockedBtn-redo"]) {
+                if (!Doc.AreProtosEqual(this.props.Document, Doc.UserDoc()["dockedBtn-undo"] as Doc) && !Doc.AreProtosEqual(this.props.Document, Doc.UserDoc()["dockedBtn-redo"] as Doc)) {
                     UndoManager.RunInBatch(func, "on click");
                 } else func();
             } else if (this.Document["onClick-rawScript"] && !StrCast(Doc.LayoutField(this.layoutDoc))?.includes("ScriptingBox")) {// bcz: hack? don't edit a script if you're clicking on a scripting box itself
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index be8d3faeb..f76707a79 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -530,7 +530,7 @@ export default class RichTextMenu extends AntimodeMenu {
 
     indentParagraph(state: EditorState<any>, dispatch: any) {
         var tr = state.tr;
-        let headin = false;
+        const heading = false;
         state.doc.nodesBetween(state.selection.from, state.selection.to, (node, pos, parent, index) => {
             if (node.type === schema.nodes.paragraph || node.type === schema.nodes.heading) {
                 const nodeval = node.attrs.indent ? Number(node.attrs.indent) : undefined;
@@ -540,7 +540,7 @@ export default class RichTextMenu extends AntimodeMenu {
             }
             return true;
         });
-        !headin && dispatch?.(tr);
+        !heading && dispatch?.(tr);
         return true;
     }
 
diff --git a/src/client/views/nodes/formattedText/nodes_rts.ts b/src/client/views/nodes/formattedText/nodes_rts.ts
index 0eca6d753..1616500f6 100644
--- a/src/client/views/nodes/formattedText/nodes_rts.ts
+++ b/src/client/views/nodes/formattedText/nodes_rts.ts
@@ -79,14 +79,14 @@ export const nodes: { [index: string]: NodeSpec } = {
         { tag: "h5", attrs: { level: 5 } },
         { tag: "h6", attrs: { level: 6 } }],
         toDOM(node) {
-            var dom = toParagraphDOM(node) as any;
-            var level = node.attrs.level || 1;
+            const dom = toParagraphDOM(node) as any;
+            const level = node.attrs.level || 1;
             dom[0] = 'h' + level;
             return dom;
         },
         getAttrs(dom: any) {
-            var attrs = getParagraphNodeAttrs(dom) as any;
-            var level = Number(dom.nodeName.substring(1)) || 1;
+            const attrs = getParagraphNodeAttrs(dom) as any;
+            const level = Number(dom.nodeName.substring(1)) || 1;
             attrs.level = level;
             return attrs;
         }
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index 267defa4b..383adccdc 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -524,10 +524,10 @@ export namespace Doc {
             const cfield = ComputedField.WithoutComputed(() => FieldValue(doc[key]));
             const field = ProxyField.WithoutProxy(() => doc[key]);
             const copyObjectField = async (field: ObjectField) => {
-                const list = await Cast(doc[key], listSpec(Doc));
+                const list = Cast(doc[key], listSpec(Doc));
                 const docs = list && (await DocListCastAsync(list))?.filter(d => d instanceof Doc);
                 if (docs !== undefined && docs.length) {
-                    const clones = await Promise.all(docs.map(async d => await Doc.makeClone(d as Doc, cloneMap, rtfs, exclusions, dontCreate)));
+                    const clones = await Promise.all(docs.map(async d => Doc.makeClone(d, cloneMap, rtfs, exclusions, dontCreate)));
                     !dontCreate && assignKey(new List<Doc>(clones));
                 } else if (doc[key] instanceof Doc) {
                     assignKey(key.includes("layout[") ? undefined : key.startsWith("layout") ? doc[key] as Doc : await Doc.makeClone(doc[key] as Doc, cloneMap, rtfs, exclusions, dontCreate)); // reference documents except copy documents that are expanded teplate fields 
@@ -621,7 +621,7 @@ export namespace Doc {
         Array.from(map.entries()).forEach(f => docs[f[0]] = f[1]);
         const docString = JSON.stringify({ id: doc[Id], docs }, replacer);
 
-        var zip = new JSZip();
+        const zip = new JSZip();
 
         zip.file("doc.json", docString);
 
diff --git a/src/server/ApiManagers/UtilManager.ts b/src/server/ApiManagers/UtilManager.ts
index e2cd88726..e657866ce 100644
--- a/src/server/ApiManagers/UtilManager.ts
+++ b/src/server/ApiManagers/UtilManager.ts
@@ -6,7 +6,6 @@ import { exec } from 'child_process';
 
 // const recommender = new Recommender();
 // recommender.testModel();
-import executeImport from "../../scraping/buxton/final/BuxtonImporter";
 
 export default class UtilManager extends ApiManager {
 
-- 
cgit v1.2.3-70-g09d2


From ac177d7b9a01075fbf1ad1c327c7625d95569afb Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Sun, 2 Aug 2020 18:20:59 -0500
Subject: bug fixes found with sally

---
 src/client/views/PropertiesButtons.scss            | 13 +++++++--
 src/client/views/PropertiesButtons.tsx             | 29 +++++++++++++------
 src/client/views/collections/CollectionMenu.scss   | 19 ++++++++-----
 .../views/collections/CollectionTreeView.tsx       |  2 +-
 src/client/views/collections/CollectionView.tsx    |  2 +-
 .../collectionFreeForm/PropertiesView.scss         | 24 ++++++++++++++++
 .../collectionFreeForm/PropertiesView.tsx          | 33 ++++++++++------------
 src/client/views/nodes/DocumentView.tsx            |  8 +++---
 src/client/views/nodes/FontIconBox.scss            |  2 +-
 src/client/views/nodes/FontIconBox.tsx             | 23 ++++++++-------
 src/client/views/nodes/LabelBox.tsx                |  2 +-
 11 files changed, 103 insertions(+), 54 deletions(-)

(limited to 'src/client/views/PropertiesButtons.tsx')

diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss
index e099122c4..b3a317a6b 100644
--- a/src/client/views/PropertiesButtons.scss
+++ b/src/client/views/PropertiesButtons.scss
@@ -77,10 +77,19 @@ $linkGap : 3px;
     text-align: center;
     border-radius: 5px;
     pointer-events: auto;
-    color: $dark-color;
-    border: $dark-color 1px solid;
+    // color: $dark-color;
+    // border: $dark-color 1px solid;
+    background-color: #252b33;
+    color: #fcfbf7;
     transition: 0.2s ease all;
     margin-right: 5px;
+    padding-top: 5px;
+
+    &:hover {
+        background: $main-accent;
+        transform: scale(1.05);
+        cursor: pointer;
+    }
 }
 
 .propertiesButtons-linker:hover {
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 59e7cc7c8..d3f056a34 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -208,7 +208,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         const isPinned = targetDoc && Doc.isDocPinned(targetDoc);
         return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : "Pin to presentation"}</div></>}>
             <div className="propertiesButtons-linker"
-                style={{ backgroundColor: isPinned ? "white" : "rgb(37, 43, 51)", color: isPinned ? "black" : "white" }}
+                style={{ backgroundColor: isPinned ? "white" : "", color: isPinned ? "black" : "white" }}
                 onClick={e => DockedFrameRenderer.PinDoc(targetDoc, isPinned)}>
                 <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin"
                 />
@@ -238,6 +238,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     onAliasButtonDown = (e: React.PointerEvent): void => {
         setupMoveUpEvents(this, e, this.onAliasButtonMoved, emptyFunction, emptyFunction);
     }
+    @undoBatch
     onAliasButtonMoved = () => {
         if (this._dragRef.current) {
             const dragDocView = this.selectedDocumentView!;
@@ -273,12 +274,17 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                 </div></Tooltip>;
     }
 
+    @undoBatch
     onCopy = () => {
         if (this.selectedDoc && this.selectedDocumentView) {
-            const copy = Doc.MakeCopy(this.selectedDocumentView.props.Document, true);
-            copy.x = NumCast(this.selectedDoc.x) + NumCast(this.selectedDoc._width);
-            copy.y = NumCast(this.selectedDoc.y) + 30;
-            this.selectedDocumentView.props.addDocument?.(copy);
+            // const copy = Doc.MakeCopy(this.selectedDocumentView.props.Document, true);
+            // copy.x = NumCast(this.selectedDoc.x) + NumCast(this.selectedDoc._width);
+            // copy.y = NumCast(this.selectedDoc.y) + 30;
+            // this.selectedDocumentView.props.addDocument?.(copy);
+            const alias = Doc.MakeAlias(this.selectedDoc);
+            alias.x = NumCast(this.selectedDoc.x) + NumCast(this.selectedDoc._width);
+            alias.y = NumCast(this.selectedDoc.y) + 30;
+            this.selectedDocumentView.props.addDocument?.(alias);
         }
     }
 
@@ -295,7 +301,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         </Tooltip>;
     }
 
-    @action
+    @action @undoBatch
     onLock = () => {
         this.selectedDocumentView?.toggleLockPosition();
     }
@@ -337,15 +343,19 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         return !targetDoc ? (null) : <Tooltip
             title={<><div className="dash-tooltip">{"Delete Document"}</div></>}>
             <div className={"propertiesButtons-linkButton-empty"}
-                onPointerDown={() => {
-                    this.selectedDocumentView?.props.ContainingCollectionView?.removeDocument(this.selectedDocumentView?.props.Document);
-                }}>
+                onPointerDown={this.deleteDocument}>
                 {<FontAwesomeIcon className="propertiesButtons-icon"
                     icon="trash-alt" size="sm" />}
             </div>
         </Tooltip>;
     }
 
+    @undoBatch
+    @action
+    deleteDocument = () => {
+        this.selectedDocumentView?.props.ContainingCollectionView?.removeDocument(this.selectedDocumentView?.props.Document);
+    }
+
     @computed
     get sharingButton() {
         const targetDoc = this.selectedDoc;
@@ -380,6 +390,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         }
     }
 
+    @undoBatch
     @action
     handleOptionChange = (e: any) => {
         const value = e.target.value;
diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss
index 9da204787..0a316317f 100644
--- a/src/client/views/collections/CollectionMenu.scss
+++ b/src/client/views/collections/CollectionMenu.scss
@@ -2,8 +2,8 @@
 
 
 .collectionMenu-cont {
-    position:relative;
-    display:inline-flex;
+    position: relative;
+    display: inline-flex;
     width: 100%;
     opacity: 0.9;
     z-index: 9001;
@@ -12,14 +12,15 @@
     color: white;
     transform-origin: top left;
     top: 0;
-    width:100%;
+    width: 100%;
 
     .antimodeMenu-button {
         padding: 0;
         width: 30px;
         display: flex;
+
         svg {
-            margin:auto;
+            margin: auto;
         }
     }
 
@@ -108,6 +109,7 @@
                 margin-top: auto;
                 margin-bottom: auto;
             }
+
             .collectionViewBaseChrome-viewSpecs {
                 margin-left: 5px;
                 display: grid;
@@ -318,12 +320,14 @@
         text-align: center;
         display: block;
     }
+
     .color-previewI {
         width: 80%;
         height: 20%;
         bottom: 0;
         position: absolute;
     }
+
     .color-previewII {
         width: 80%;
         height: 80%;
@@ -336,7 +340,7 @@
         margin: auto;
         /* Make the buttons appear below each other */
     }
-    
+
     .btn-draw {
         display: inline-flex;
         margin: auto;
@@ -374,6 +378,7 @@
             display: block;
             margin: auto;
         }
+
         border-right: solid gray 1px;
     }
 }
@@ -398,14 +403,14 @@
 
     .collectionSchemaViewChrome-toggler {
         width: 100px;
-        height: 41px;
+        height: 35px;
         background-color: black;
         position: relative;
     }
 
     .collectionSchemaViewChrome-togglerButton {
         width: 47px;
-        height: 35px;
+        height: 30px;
         background-color: $light-color-secondary;
         // position: absolute;
         transition: all 0.5s ease;
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 7787a8b38..3c7471d7c 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -785,7 +785,7 @@ export class CollectionTreeView extends CollectionSubView<Document, Partial<coll
         onClicks.push({
             description: "Edit onChecked Script", event: () => UndoManager.RunInBatch(() => DocUtils.makeCustomViewClicked(this.doc, undefined, "onCheckedClick"), "edit onCheckedClick"), icon: "edit"
         });
-        !existingOnClick && ContextMenu.Instance.addItem({ description: "OnClick...", noexpand: true, subitems: onClicks, icon: "hand-point-right" });
+        !existingOnClick && ContextMenu.Instance.addItem({ description: "OnClick...", noexpand: true, subitems: onClicks, icon: "mouse-pointer" });
     }
     outerXf = () => Utils.GetScreenTransform(this._mainEle!);
     onTreeDrop = (e: React.DragEvent) => this.onExternalDrop(e, {});
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index c2b55d38e..89034a0c0 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -339,7 +339,7 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
                     icon: "edit",
                     event: () => Doc.GetProto(this.props.Document)[StrCast(childClick.targetScriptKey)] = ObjectField.MakeCopy(ScriptCast(childClick.data)),
                 }));
-            !existingOnClick && cm.addItem({ description: "OnClick...", noexpand: true, subitems: onClicks, icon: "hand-point-right" });
+            !existingOnClick && cm.addItem({ description: "OnClick...", noexpand: true, subitems: onClicks, icon: "mouse-pointer" });
 
             if (!Doc.UserDoc().noviceMode) {
                 const more = cm.findByDescription("More...");
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index a96716659..7df56115f 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -60,6 +60,10 @@
             padding-left: 8px;
             background-color: rgb(51, 51, 51);
 
+            &:hover {
+                cursor: pointer;
+            }
+
             .propertiesView-settings-title-icon {
                 float: right;
                 right: 0;
@@ -94,6 +98,10 @@
             padding-left: 8px;
             background-color: rgb(51, 51, 51);
 
+            &:hover {
+                cursor: pointer;
+            }
+
             .propertiesView-sharing-title-icon {
                 float: right;
                 right: 0;
@@ -127,6 +135,10 @@
             padding-left: 8px;
             background-color: rgb(51, 51, 51);
 
+            &:hover {
+                cursor: pointer;
+            }
+
             .propertiesView-appearance-title-icon {
                 float: right;
                 right: 0;
@@ -160,6 +172,10 @@
             padding-left: 8px;
             background-color: rgb(51, 51, 51);
 
+            &:hover {
+                cursor: pointer;
+            }
+
             .propertiesView-transform-title-icon {
                 float: right;
                 right: 0;
@@ -287,6 +303,10 @@
             padding-left: 8px;
             background-color: rgb(51, 51, 51);
 
+            &:hover {
+                cursor: pointer;
+            }
+
             .propertiesView-fields-title-name {
                 font-size: 12.5px;
                 font-weight: bold;
@@ -362,6 +382,10 @@
             padding-left: 8px;
             background-color: rgb(51, 51, 51);
 
+            &:hover {
+                cursor: pointer;
+            }
+
             .propertiesView-layout-title-icon {
                 float: right;
                 right: 0;
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index 73f0f1bdd..0168c825f 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -205,7 +205,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         }
     }
 
-
+    @undoBatch
     setKeyValue = (value: string) => {
         if (this.selectedDoc && this.dataDoc) {
             const doc = this.layoutFields ? Doc.Layout(this.selectedDoc) : this.dataDoc;
@@ -266,9 +266,14 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         }
     }
 
+    @undoBatch
+    changePermissions = (e: any, user: string) => {
+        SharingManager.Instance.shareFromPropertiesSidebar(user, e.currentTarget.value as SharingPermissions, this.selectedDoc!);
+    }
+
     getPermissionsSelect(user: string) {
         return <select className="permissions-select"
-            onChange={e => SharingManager.Instance.shareFromPropertiesSidebar(user, e.currentTarget.value as SharingPermissions, this.selectedDoc!)}>
+            onChange={e => this.changePermissions(e, user)}>
             {Object.values(SharingPermissions).map(permission => {
                 return (
                     <option key={permission} value={permission} selected={this.selectedDoc![`ACL-${user.replace(".", "_")}`] === permission}>
@@ -344,6 +349,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         />;
     }
 
+    @undoBatch
     @action
     toggleCheckbox = () => {
         this.layoutFields = !this.layoutFields;
@@ -359,6 +365,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             SetValue={this.setTitle} />;
     }
 
+    @undoBatch
     @action
     setTitle = (value: string) => {
         if (this.dataDoc) {
@@ -370,13 +377,6 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     }
 
 
-
-
-
-
-
-
-
     @undoBatch
     @action
     rotate = (angle: number) => {
@@ -739,9 +739,13 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
 
         if (!this.selectedDoc) {
             return <div className="propertiesView" style={{ width: this.props.width }}>
-                <div className="propertiesView-title" style={{ width: this.props.width, paddingLeft: 6 }}>
+                <div className="propertiesView-title" style={{ width: this.props.width }}>
                     No Document Selected
-            </div> </div>;
+                <div className="propertiesView-title-icon" onPointerDown={this.props.onDown}>
+                        <FontAwesomeIcon icon="times" color="black" size="xs" />
+                    </div>
+                </div>
+            </div>;
         }
 
         const novice = Doc.UserDoc().noviceMode;
@@ -783,9 +787,6 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 </div> : null}
             </div>
 
-
-
-
             {this.isInk ? <div className="propertiesView-appearance">
                 <div className="propertiesView-appearance-title"
                     onPointerDown={() => runInAction(() => { this.openAppearance = !this.openAppearance; })}
@@ -814,10 +815,6 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 </div> : null}
             </div> : null}
 
-
-
-
-
             <div className="propertiesView-fields">
                 <div className="propertiesView-fields-title"
                     onPointerDown={() => runInAction(() => { this.openFields = !this.openFields; })}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 30382a4ef..ec0a5f3ac 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -677,10 +677,10 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
 
     @action
     onCopy = () => {
-        const copy = Doc.MakeCopy(this.props.Document, true);
-        copy.x = NumCast(this.props.Document.x) + NumCast(this.props.Document._width);
-        copy.y = NumCast(this.props.Document.y) + 30;
-        this.props.addDocument?.(copy);
+        const alias = Doc.MakeAlias(this.props.Document);
+        alias.x = NumCast(this.props.Document.x) + NumCast(this.props.Document._width);
+        alias.y = NumCast(this.props.Document.y) + 30;
+        this.props.addDocument?.(alias);
     }
 
     @action
diff --git a/src/client/views/nodes/FontIconBox.scss b/src/client/views/nodes/FontIconBox.scss
index 13af511a6..a142d873a 100644
--- a/src/client/views/nodes/FontIconBox.scss
+++ b/src/client/views/nodes/FontIconBox.scss
@@ -33,7 +33,7 @@
     padding-left: 5px;
     width: 100%;
     width: 60px;
-    height: 70px;
+    height: 60px;
     padding-top: 3px;
     padding-bottom: 3px;
 
diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx
index 720d6a15d..7c538df92 100644
--- a/src/client/views/nodes/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox.tsx
@@ -66,18 +66,21 @@ export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>(
 
         if (this.layoutDoc.menuIcon) {
 
-            let backgroundColor = "black";
-            if (this.dataDoc.title === "Sharing" || this.dataDoc.title === "Help" || this.dataDoc.title === "Settings" || this.dataDoc.title === "Import") {
-                backgroundColor = "black";
-            } else {
-                backgroundColor = CurrentUserUtils.selectedPanel === this.dataDoc.title ? "lightgrey" : "black";
-            }
+            // let backgroundColor = "black";
+            // if (this.dataDoc.title === "Sharing" || this.dataDoc.title === "Help" || this.dataDoc.title === "Settings" || this.dataDoc.title === "Import") {
+            //     backgroundColor = "black";
+            // } else {
+            //     backgroundColor = CurrentUserUtils.selectedPanel === this.dataDoc.title ? "lightgrey" : "";
+            // }
 
-            const color = backgroundColor === "lightgrey" ? "black" : "white";
-            const menuBTN = <div className="menuButton" style={{ backgroundColor: backgroundColor }}>
+            const color = CurrentUserUtils.selectedPanel === this.dataDoc.title ? "black" : "white";
+            const menuBTN = <div className="menuButton"
+                style={{ backgroundColor: CurrentUserUtils.selectedPanel === this.dataDoc.title ? "lightgrey" : "" }}>
 
-                <div className="menuButton-wrap" style={{ backgroundColor: backgroundColor }}>
-                    <FontAwesomeIcon className="menuButton-icon" icon={StrCast(this.dataDoc.icon, "user") as any} color={color} size="lg" />
+                <div className="menuButton-wrap"
+                    style={{ backgroundColor: CurrentUserUtils.selectedPanel === this.dataDoc.title ? "lightgrey" : "" }}>
+                    <FontAwesomeIcon className="menuButton-icon"
+                        icon={StrCast(this.dataDoc.icon, "user") as any} color={color} size="lg" />
                     <div className="menuButton-label" style={{ color: color }}> {this.dataDoc.title} </div>
                 </div>
             </div>;
diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx
index 0dfbdc5cf..05ba6628c 100644
--- a/src/client/views/nodes/LabelBox.tsx
+++ b/src/client/views/nodes/LabelBox.tsx
@@ -41,7 +41,7 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps, LabelDocument
             }, icon: "trash"
         });
 
-        ContextMenu.Instance.addItem({ description: "OnClick...", noexpand: true, subitems: funcs, icon: "asterisk" });
+        ContextMenu.Instance.addItem({ description: "OnClick...", noexpand: true, subitems: funcs, icon: "mouse-pointer" });
     }
 
     @undoBatch
-- 
cgit v1.2.3-70-g09d2


From 8d1f4cdf924a4002f132886230eb85a40dfcae3f Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Mon, 3 Aug 2020 00:33:37 -0500
Subject: several UI changes to tooltips, menu, properties, buttons, and ink

---
 src/client/util/CurrentUserUtils.ts                |   1 +
 src/client/util/SettingsManager.scss               |  15 +-
 src/client/util/SettingsManager.tsx                |   2 +-
 src/client/views/DocumentDecorations.tsx           |   6 +-
 src/client/views/InkingStroke.tsx                  |   2 +-
 src/client/views/MainView.scss                     |   6 +-
 src/client/views/MainView.tsx                      |  20 +-
 src/client/views/PropertiesButtons.scss            |   7 +-
 src/client/views/PropertiesButtons.tsx             |  83 +++++---
 src/client/views/collections/CollectionMenu.tsx    | 227 ++++++++++++---------
 src/client/views/globalCssVariables.scss           |   4 +-
 .../views/nodes/formattedText/RichTextMenu.tsx     |  39 ++--
 12 files changed, 243 insertions(+), 169 deletions(-)

(limited to 'src/client/views/PropertiesButtons.tsx')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index a094ac5a6..c27290e74 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -49,6 +49,7 @@ export class CurrentUserUtils {
     @observable public static searchStack: any | undefined;
 
     @observable public static selectedPanel: string = "none";
+    @observable public static propertiesWidth: number = 0;
 
     // sets up the default User Templates - slideView, queryView, descriptionView
     static setupUserTemplateButtons(doc: Doc) {
diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
index c1627e69f..6923fe879 100644
--- a/src/client/util/SettingsManager.scss
+++ b/src/client/util/SettingsManager.scss
@@ -7,7 +7,7 @@
     height: 300px;
 
     button {
-        background: $lighter-alt-accent;
+        background: #315a96;
         outline: none;
         border-radius: 5px;
         border: 0px;
@@ -29,8 +29,12 @@
     button {
         width: 100%;
         align-self: center;
-        background: $darker-alt-accent;
+        background: #252b33;
         margin-top: 4px;
+
+        &:hover {
+            background: $main-accent;
+        }
     }
 
     .delete-button {
@@ -102,11 +106,12 @@
     }
 
     h1 {
-        color: $dark-color;
+        color: #121721;
         text-transform: uppercase;
         letter-spacing: 2px;
-        font-size: 120%;
+        font-size: 19;
         margin-top: 0;
+        font-weight: bold;
     }
 
     .container {
@@ -151,7 +156,7 @@
     .settings-interface button {
         width: 100%;
         font-size: 30px;
-        background: #b2cef8;
+        background: #315a96;
     }
 
     .settings-interface .settings-heading {
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 207c78964..6276fae96 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -136,7 +136,7 @@ export default class SettingsManager extends React.Component<{}> {
                             {this.errorText ? <div className="error-text">{this.errorText}</div> : undefined}
                             {this.successText ? <div className="success-text">{this.successText}</div> : undefined}
                             <button onClick={this.dispatchRequest}>submit</button>
-                            <a href="/forgotPassword">forgot password?</a>
+                            <a style={{ marginLeft: 65, marginTop: -20 }} href="/forgotPassword">forgot password?</a>
 
                         </div>
                         : undefined}
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index b8670a1af..f16cb273b 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -619,9 +619,9 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
                 </div>}
             </> :
             <>
-                {/* {minimal ? (null) : <Tooltip title={<><div className="dash-tooltip">Show context menu</div></>} placement="top"><div className="documentDecorations-contextMenu" key="menu" onPointerDown={this.onSettingsDown}>
-                    <FontAwesomeIcon size="lg" icon="bars" />
-                </div></Tooltip>} */}
+                {minimal ? (null) : <Tooltip title={<><div className="dash-tooltip">Show context menu</div></>} placement="top"><div className="documentDecorations-contextMenu" key="menu" onPointerDown={this.onSettingsDown}>
+                    <FontAwesomeIcon size="lg" icon="cog" />
+                </div></Tooltip>}
                 <div className="documentDecorations-title" key="title" onPointerDown={this.onTitleDown} >
                     <span style={{ width: "100%", display: "inline-block", cursor: "move" }}>{`${this.selectionTitle}`}</span>
                 </div>
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index 5892e8346..8e3f72cee 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -178,7 +178,7 @@ export class InkingStroke extends ViewBoxBaseComponent<FieldViewProps, InkDocume
                     if (cm) {
                         !Doc.UserDoc().noviceMode && cm.addItem({ description: "Recognize Writing", event: this.analyzeStrokes, icon: "paint-brush" });
                         cm.addItem({ description: "Make Mask", event: this.makeMask, icon: "paint-brush" });
-                        cm.addItem({ description: "Format Shape...", event: this.formatShape, icon: "paint-brush" });
+                        //cm.addItem({ description: "Format Shape...", event: this.formatShape, icon: "paint-brush" });
                     }
                 }}
             ><defs>
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index 054a409df..a57d22afd 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -105,7 +105,7 @@
 .mainView-propertiesDragger {
     background-color: rgb(140, 139, 139);
     height: 55px;
-    width: 15.5px;
+    width: 17px;
     position: absolute;
     top: 55%;
     border: 1px black solid;
@@ -119,7 +119,7 @@
         width: 10px;
         height: 10px;
         float: left;
-        margin-left: 3px;
+        margin-left: 5.5px;
         padding-top: 19px;
     }
 
@@ -297,7 +297,7 @@
     position: absolute;
     z-index: 2;
     touch-action: none;
-    cursor: ew-resize;
+    cursor: grab;
 
     .mainView-libraryHandle-icon {
         width: 10px;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index c83aeee25..fdf4c1626 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -91,8 +91,7 @@ export class MainView extends React.Component {
         } else { return undefined; }
     }
 
-    @observable _propertiesWidth: number = 0;
-    propertiesWidth = () => Math.max(0, Math.min(this._panelWidth - 50, this._propertiesWidth));
+    propertiesWidth = () => Math.max(0, Math.min(this._panelWidth - 50, CurrentUserUtils.propertiesWidth));
 
     @computed get propertiesIcon() {
         if (this.propertiesWidth() < 10) {
@@ -141,6 +140,9 @@ export class MainView extends React.Component {
         MainView.Instance = this;
         this._urlState = HistoryUtil.parseUrl(window.location) || {} as any;
         // causes errors to be generated when modifying an observable outside of an action
+
+        CurrentUserUtils.propertiesWidth = 0;
+
         configure({ enforceActions: "observed" });
         if (window.location.pathname !== "/home") {
             const pathname = window.location.pathname.substr(1).split("/");
@@ -172,7 +174,7 @@ export class MainView extends React.Component {
             fa.faFillDrip, fa.faLink, fa.faUnlink, fa.faBold, fa.faItalic, fa.faChevronLeft, fa.faUnderline, fa.faStrikethrough, fa.faSuperscript, fa.faSubscript,
             fa.faIndent, fa.faEyeDropper, fa.faPaintRoller, fa.faBars, fa.faBrush, fa.faShapes, fa.faEllipsisH, fa.faHandPaper, fa.faMap, fa.faUser, faHireAHelper,
             fa.faDesktop, fa.faTrashRestore, fa.faUsers, fa.faWrench, fa.faCog, fa.faMap, fa.faBellSlash, fa.faExpandAlt, fa.faArchive, fa.faBezierCurve, fa.faCircle,
-            fa.faLongArrowAltRight, fa.faPenFancy, fa.faAngleDoubleRight, faBuffer, fa.faExpand, fa.faUndo, fa.faSlidersH);
+            fa.faLongArrowAltRight, fa.faPenFancy, fa.faAngleDoubleRight, faBuffer, fa.faExpand, fa.faUndo, fa.faSlidersH, fa.faAngleDoubleLeft);
         this.initEventListeners();
         this.initAuthenticationRouters();
     }
@@ -376,9 +378,9 @@ export class MainView extends React.Component {
     @action
     onPropertiesPointerDown = (e: React.PointerEvent) => {
         setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => {
-            this._propertiesWidth = this._panelWidth - e.clientX;
+            CurrentUserUtils.propertiesWidth = this._panelWidth - e.clientX;
             return false;
-        }), returnFalse, action(() => this._propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._panelWidth - 50, 250) : 0), false);
+        }), returnFalse, action(() => CurrentUserUtils.propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._panelWidth - 50, 250) : 0), false);
     }
 
     @action
@@ -419,7 +421,7 @@ export class MainView extends React.Component {
             <div className="mainView-contentArea" style={{ position: "relative", height: `100%`, width: "100%", overflow: "visible" }}>
                 {this.flyoutWidth > 0 ? <div className="mainView-libraryFlyout-close"
                     onPointerDown={this.closeFlyout}>
-                    <FontAwesomeIcon icon="times" color="black" size="sm" />
+                    <FontAwesomeIcon icon="times" color="black" size="lg" />
                 </div> : null}
 
                 <DocumentView
@@ -527,7 +529,7 @@ export class MainView extends React.Component {
 
     @action @undoBatch
     closeProperties = () => {
-        this._propertiesWidth = 0;
+        CurrentUserUtils.propertiesWidth = 0;
     }
 
     @computed get propertiesView() {
@@ -553,7 +555,7 @@ export class MainView extends React.Component {
                 <div className="mainView-flyoutContainer" style={{ width: this.flyoutWidth }}>
                     {this.flyoutWidth !== 0 ? <div className="mainView-libraryHandle"
                         onPointerDown={this.onFlyoutPointerDown}
-                        style={{ backgroundColor: this.defaultBackgroundColors(undefined) }}>
+                        style={{ backgroundColor: 'lightgrey' }}>
                         <span title="library View Dragger" style={{
                             width: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "3vw",
                             //height: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "100vh",
@@ -576,7 +578,7 @@ export class MainView extends React.Component {
                 {this.dockingContent}
                 {this.showProperties ? (null) :
                     <div className="mainView-propertiesDragger" title="Properties View Dragger" onPointerDown={this.onPropertiesPointerDown}
-                        style={{ right: rightFlyout, top: "45%" }}>
+                        style={{ right: rightFlyout, top: "50%" }}>
                         <div className="mainView-propertiesDragger-icon">
                             <FontAwesomeIcon icon={this.propertiesIcon} color="white" size="sm" /> </div>
                     </div>
diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss
index b3a317a6b..1cba252de 100644
--- a/src/client/views/PropertiesButtons.scss
+++ b/src/client/views/PropertiesButtons.scss
@@ -45,13 +45,13 @@ $linkGap : 3px;
 }
 
 .propertiesButtons {
-    margin-top: $linkGap;
+    margin-top: 3px;
     grid-column: 1/4;
-    width: max-content;
+    width: 100%;
     height: auto;
     display: flex;
     flex-direction: row;
-    overflow-x: visible;
+    flex-wrap: wrap;
 }
 
 .onClickFlyout-editScript {
@@ -69,6 +69,7 @@ $linkGap : 3px;
     width: 25px;
     border-radius: 5px;
     margin-right: 18px;
+    margin-bottom: 8px;
 }
 
 .propertiesButtons-linker {
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index d3f056a34..68969b413 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -29,6 +29,7 @@ import { ImageField } from '../../fields/URLField';
 import { undoBatch, UndoManager } from '../util/UndoManager';
 import { DocumentType } from '../documents/DocumentTypes';
 import { CollectionFreeFormView } from './collections/collectionFreeForm/CollectionFreeFormView';
+import { InkField } from '../../fields/InkField';
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -524,6 +525,32 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         </Tooltip>;
     }
 
+    @undoBatch
+    @action
+    private makeMask = () => {
+        if (this.selectedDoc) {
+            this.selectedDoc._backgroundColor = "rgba(0,0,0,0.7)";
+            this.selectedDoc.mixBlendMode = "hard-light";
+            this.selectedDoc.color = "#9b9b9bff";
+            this.selectedDoc.stayInCollection = true;
+            this.selectedDoc.isInkMask = true;
+        }
+    }
+
+    @computed
+    get maskButton() {
+        const targetDoc = this.selectedDoc;
+        return !targetDoc ? (null) : <Tooltip
+            title={<><div className="dash-tooltip">Make Mask</div></>}>
+            <div className={"propertiesButtons-linkButton-empty"}
+                onPointerDown={this.makeMask}>
+                {<FontAwesomeIcon className="documentdecorations-icon"
+                    color="white" icon="paint-brush" size="sm" />}
+            </div>
+        </Tooltip>;
+    }
+
+
     // @computed
     // get importButton() {
     //     const targetDoc = this.selectedDoc;
@@ -549,6 +576,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         const considerPull = isText && this.considerGoogleDocsPull;
         const considerPush = isText && this.considerGoogleDocsPush;
         const isImage = this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof ImageField;
+        const isInk = this.selectedDoc[Doc.LayoutFieldKey(this.selectedDoc)] instanceof InkField;
         const isCollection = this.selectedDoc.type === DocumentType.COL ? true : false;
         const isFreeForm = this.selectedDoc._viewType === "freeform" ? true : false;
 
@@ -571,39 +599,40 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             <div className="propertiesButtons-button">
                 {this.downloadButton}
             </div>
-        </div>
-            <div className="propertiesButtons">
-                <div className="propertiesButtons-button">
-                    {this.deleteButton}
-                </div>
-                <div className="propertiesButtons-button">
-                    {this.onClickButton}
-                </div>
-                <div className="propertiesButtons-button">
-                    {this.sharingButton}
-                </div>
-                <div className="propertiesButtons-button" style={{ display: !considerPush ? "none" : "" }}>
-                    {this.considerGoogleDocsPush}
-                </div>
-                <div className="propertiesButtons-button" style={{ display: !considerPull ? "none" : "" }}>
-                    {this.considerGoogleDocsPull}
-                </div>
-                <div className="propertiesButtons-button" style={{ display: !isImage ? "none" : "" }}>
-                    {this.googlePhotosButton}
-                </div>
-                {/* <div className="propertiesButtons-button" style={{ display: !isCollection ? "none" : "" }}>
+            <div className="propertiesButtons-button">
+                {this.deleteButton}
+            </div>
+            <div className="propertiesButtons-button">
+                {this.onClickButton}
+            </div>
+            <div className="propertiesButtons-button">
+                {this.sharingButton}
+            </div>
+            <div className="propertiesButtons-button" style={{ display: !considerPush ? "none" : "" }}>
+                {this.considerGoogleDocsPush}
+            </div>
+            <div className="propertiesButtons-button" style={{ display: !considerPull ? "none" : "" }}>
+                {this.considerGoogleDocsPull}
+            </div>
+            <div className="propertiesButtons-button" style={{ display: !isImage ? "none" : "" }}>
+                {this.googlePhotosButton}
+            </div>
+            {/* <div className="propertiesButtons-button" style={{ display: !isCollection ? "none" : "" }}>
                     {this.importButton}
                 </div> */}
 
-                <div className="propertiesButtons-button" style={{ display: !isFreeForm ? "none" : "" }}>
-                    {this.clustersButton}
-                </div>
+            <div className="propertiesButtons-button" style={{ display: !isFreeForm ? "none" : "" }}>
+                {this.clustersButton}
+            </div>
 
-                <div className="propertiesButtons-button" style={{ display: !isFreeForm ? "none" : "" }}>
-                    {this.fitContentButton}
-                </div>
+            <div className="propertiesButtons-button" style={{ display: !isFreeForm ? "none" : "" }}>
+                {this.fitContentButton}
+            </div>
 
+            <div className="propertiesButtons-button" style={{ display: !isInk ? "none" : "" }}>
+                {this.maskButton}
             </div>
+        </div>
         </div>;
     }
 }
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 59e6ac7ff..0a3f77888 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -30,6 +30,8 @@ import { RichTextField } from "../../../fields/RichTextField";
 import { ScriptField } from "../../../fields/ScriptField";
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { DocUtils } from "../../documents/Documents";
+import { Tooltip } from "@material-ui/core";
+import { CurrentUserUtils } from "../../util/CurrentUserUtils";
 
 @observer
 export default class CollectionMenu extends AntimodeMenu {
@@ -65,16 +67,38 @@ export default class CollectionMenu extends AntimodeMenu {
         }
     }
 
+    @action
+    toggleProperties = () => {
+        if (CurrentUserUtils.propertiesWidth > 0) {
+            CurrentUserUtils.propertiesWidth = 0;
+        } else {
+            CurrentUserUtils.propertiesWidth = 250;
+        }
+    }
+
     render() {
-        const button = <button className="antimodeMenu-button" key="pin menu" title="Pin menu" onClick={this.toggleMenuPin} style={{ backgroundColor: "#121721" }}>
-            <FontAwesomeIcon icon="thumbtack" size="lg" style={{ transitionProperty: "transform", transitionDuration: "0.1s", transform: `rotate(${this.Pinned ? 45 : 0}deg)` }} />
-        </button>;
+        const button = <Tooltip title={<div className="dash-tooltip">Pin Menu</div>} placement="bottom">
+            <button className="antimodeMenu-button" key="pin menu" onClick={this.toggleMenuPin} style={{ backgroundColor: "#121721" }}>
+                <FontAwesomeIcon icon="thumbtack" size="lg" style={{ transitionProperty: "transform", transitionDuration: "0.1s", transform: `rotate(${this.Pinned ? 45 : 0}deg)` }} />
+            </button>
+        </Tooltip>;
+
+        const propIcon = CurrentUserUtils.propertiesWidth > 0 ? "angle-double-right" : "angle-double-left";
+        const propTitle = CurrentUserUtils.propertiesWidth > 0 ? "Close Properties Panel" : "Open Properties Panel";
+
+        const prop = <Tooltip title={<div className="dash-tooltip">{propTitle}</div>} placement="bottom">
+            <button className="antimodeMenu-button" key="properties"
+                onPointerDown={this.toggleProperties}>
+                <FontAwesomeIcon icon={propIcon} size="lg" />
+            </button>
+        </Tooltip>;
 
         return this.getElement(!this.SelectedCollection ? [button] :
             [<CollectionViewBaseChrome key="chrome"
                 docView={this.SelectedCollection}
                 fieldKey={Doc.LayoutFieldKey(this.SelectedCollection?.props.Document)}
                 type={StrCast(this.SelectedCollection?.props.Document._viewType, CollectionViewType.Invalid) as CollectionViewType} />,
+                prop,
                 button]);
     }
 }
@@ -271,43 +295,47 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
 
     @computed get templateChrome() {
         return <div className="collectionViewBaseChrome-template" ref={this.createDropTarget} >
-            <div className="commandEntry-outerDiv" title="drop document to apply or drag to create button" ref={this._commandRef} onPointerDown={this.dragCommandDown}>
-                <button className={"antimodeMenu-button"} >
-                    <FontAwesomeIcon icon="bullseye" size="lg" />
-                </button>
-                <select
-                    className="collectionViewBaseChrome-cmdPicker" onPointerDown={stopPropagation} onChange={this.commandChanged} value={this._currentKey}>
-                    <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} key={"empty"} value={""} />
-                    {this._buttonizableCommands.map(cmd =>
-                        <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} key={cmd.title} value={cmd.title}>{cmd.title}</option>
-                    )}
-                </select>
-            </div>
+            <Tooltip title={<div className="dash-tooltip">drop document to apply or drag to create button</div>} placement="bottom">
+                <div className="commandEntry-outerDiv" ref={this._commandRef} onPointerDown={this.dragCommandDown}>
+                    <button className={"antimodeMenu-button"} >
+                        <FontAwesomeIcon icon="bullseye" size="lg" />
+                    </button>
+                    <select
+                        className="collectionViewBaseChrome-cmdPicker" onPointerDown={stopPropagation} onChange={this.commandChanged} value={this._currentKey}>
+                        <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} key={"empty"} value={""} />
+                        {this._buttonizableCommands.map(cmd =>
+                            <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} key={cmd.title} value={cmd.title}>{cmd.title}</option>
+                        )}
+                    </select>
+                </div>
+            </Tooltip>
         </div>;
     }
 
     @computed get viewModes() {
         return <div className="collectionViewBaseChrome-viewModes" >
-            <div className="commandEntry-outerDiv" title="drop document to apply or drag to create button" ref={this._viewRef} onPointerDown={this.dragViewDown}>
-                <button className={"antimodeMenu-button"}>
-                    <FontAwesomeIcon icon="bullseye" size="lg" />
-                </button>
-                <select
-                    className="collectionViewBaseChrome-viewPicker"
-                    onPointerDown={stopPropagation}
-                    onChange={this.viewChanged}
-                    value={StrCast(this.props.type)}>
-                    {Object.values(CollectionViewType).map(type => [CollectionViewType.Invalid, CollectionViewType.Docking].includes(type) ? (null) : (
-                        <option
-                            key={Utils.GenerateGuid()}
-                            className="collectionViewBaseChrome-viewOption"
-                            onPointerDown={stopPropagation}
-                            value={type}>
-                            {type[0].toUpperCase() + type.substring(1)}
-                        </option>
-                    ))}
-                </select>
-            </div>
+            <Tooltip title={<div className="dash-tooltip">drop document to apply or drag to create button</div>} placement="bottom">
+                <div className="commandEntry-outerDiv" ref={this._viewRef} onPointerDown={this.dragViewDown}>
+                    <button className={"antimodeMenu-button"}>
+                        <FontAwesomeIcon icon="bullseye" size="lg" />
+                    </button>
+                    <select
+                        className="collectionViewBaseChrome-viewPicker"
+                        onPointerDown={stopPropagation}
+                        onChange={this.viewChanged}
+                        value={StrCast(this.props.type)}>
+                        {Object.values(CollectionViewType).map(type => [CollectionViewType.Invalid, CollectionViewType.Docking].includes(type) ? (null) : (
+                            <option
+                                key={Utils.GenerateGuid()}
+                                className="collectionViewBaseChrome-viewOption"
+                                onPointerDown={stopPropagation}
+                                value={type}>
+                                {type[0].toUpperCase() + type.substring(1)}
+                            </option>
+                        ))}
+                    </select>
+                </div>
+            </Tooltip>
         </div>;
     }
 
@@ -332,18 +360,23 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
                         {this.props.type === CollectionViewType.Invalid ||
                             this.props.type === CollectionViewType.Docking || this.isText ? (null) : this.viewModes}
                         {this.props.type === CollectionViewType.Docking || this.isText ? (null) : this.templateChrome}
-                        {Doc.UserDoc().noviceMode ? (null) : <div className="collectionViewBaseChrome-viewSpecs" title="filter documents to show" style={{ display: "grid" }}>
-                            <button className={"antimodeMenu-button"} onClick={this.toggleViewSpecs} >
-                                <FontAwesomeIcon icon="filter" size="lg" />
-                            </button>
-                        </div>}
-
-                        {this.props.docView.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Freeform ? (null) : <button className={"antimodeMenu-button"} key="float"
-                            style={{ backgroundColor: !this.props.docView.layoutDoc.isAnnotating ? "121212" : undefined, borderRight: "1px solid gray" }}
-                            title="Toggle Overlay Layer"
-                            onClick={() => DocumentView.FloatDoc(this.props.docView)}>
-                            <FontAwesomeIcon icon={["fab", "buffer"]} size={"lg"} />
-                        </button>}
+                        {Doc.UserDoc().noviceMode ? (null) :
+                            <Tooltip title={<div className="dash-tooltip">filter documents to show</div>} placement="bottom">
+                                <div className="collectionViewBaseChrome-viewSpecs" style={{ display: "grid" }}>
+                                    <button className={"antimodeMenu-button"} onClick={this.toggleViewSpecs} >
+                                        <FontAwesomeIcon icon="filter" size="lg" />
+                                    </button>
+                                </div>
+                            </Tooltip>}
+
+                        {this.props.docView.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Freeform ? (null) :
+                            <Tooltip title={<div className="dash-tooltip">Toggle Overlay Layer</div>} placement="bottom">
+                                <button className={"antimodeMenu-button"} key="float"
+                                    style={{ backgroundColor: !this.props.docView.layoutDoc.isAnnotating ? "121212" : undefined, borderRight: "1px solid gray" }}
+                                    onClick={() => DocumentView.FloatDoc(this.props.docView)}>
+                                    <FontAwesomeIcon icon={["fab", "buffer"]} size={"lg"} />
+                                </button>
+                            </Tooltip>}
                     </div>
                     {this.subChrome}
                 </div>
@@ -491,22 +524,26 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
         });
         return <div className="btn-draw" key="draw">
             {this._draw.map((icon, i) =>
-                <button className="antimodeMenu-button" title={this._title[i]} key={icon} onPointerDown={() => func(i, false)} onDoubleClick={() => func(i, true)}
-                    style={{ backgroundColor: i === this._selected ? "121212" : "", fontSize: "20" }}>
-                    {/* {this._draw[i]} */}
-                    <FontAwesomeIcon icon={this._faName[i] as IconProp} size="sm" />
-
-                </button>)}
+                <Tooltip title={<div className="dash-tooltip">{this._title[i]}</div>} placement="bottom">
+                    <button className="antimodeMenu-button" key={icon} onPointerDown={() => func(i, false)} onDoubleClick={() => func(i, true)}
+                        style={{ backgroundColor: i === this._selected ? "121212" : "", fontSize: "20" }}>
+                        {/* {this._draw[i]} */}
+                        <FontAwesomeIcon icon={this._faName[i] as IconProp} size="sm" />
+
+                    </button>
+                </Tooltip>)}
         </div>;
     }
 
     toggleButton = (key: string, value: boolean, setter: () => {}, icon: FontAwesomeIconProps["icon"], ele: JSX.Element | null) => {
-        return <button className="antimodeMenu-button" key={key} title={key}
-            onPointerDown={action(e => setter())}
-            style={{ backgroundColor: value ? "121212" : "" }}>
-            <FontAwesomeIcon icon={icon} size="lg" />
-            {ele}
-        </button>;
+        return <Tooltip title={<div className="dash-tooltip">{key}</div>} placement="bottom">
+            <button className="antimodeMenu-button" key={key}
+                onPointerDown={action(e => setter())}
+                style={{ backgroundColor: value ? "121212" : "" }}>
+                <FontAwesomeIcon icon={icon} size="lg" />
+                {ele}
+            </button>
+        </Tooltip>;
     }
 
     @computed get widthPicker() {
@@ -515,11 +552,13 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
             <div className="btn2-group" key="width">
                 {widthPicker}
                 {this._width.map((wid, i) =>
-                    <button className="antimodeMenu-button" key={wid} title="change width"
-                        onPointerDown={action(() => { SetActiveInkWidth(wid); this._widthBtn = false; this.editProperties(wid, "width"); })}
-                        style={{ backgroundColor: this._widthBtn ? "121212" : "", zIndex: 1001, fontSize: this._dotsize[i], padding: 0, textAlign: "center" }}>
-                        •
-                    </button>)}
+                    <Tooltip title={<div className="dash-tooltip">change width</div>} placement="bottom">
+                        <button className="antimodeMenu-button" key={wid}
+                            onPointerDown={action(() => { SetActiveInkWidth(wid); this._widthBtn = false; this.editProperties(wid, "width"); })}
+                            style={{ backgroundColor: this._widthBtn ? "121212" : "", zIndex: 1001, fontSize: this._dotsize[i], padding: 0, textAlign: "center" }}>
+                            •
+                    </button>
+                    </Tooltip>)}
             </div>;
     }
 
@@ -554,43 +593,42 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
             </div>;
     }
 
-    @computed get formatPane() {
-        // return <button className="antimodeMenu-button" key="format" title="toggle foramatting pane"
-        //     onPointerDown={action(e => FormatShapePane.Instance.Pinned = !FormatShapePane.Instance.Pinned)}
-        //     style={{ backgroundColor: this._fillBtn ? "121212" : "" }}>
-        //     <FontAwesomeIcon icon="angle-double-right" size="lg" />
-        // </button>;
-        return null;
-    }
-
     render() {
         return !this.props.docView.layoutDoc ? (null) : <div className="collectionFreeFormMenu-cont">
-            {this.props.docView.props.renderDepth !== 0 || this.isText ? (null) :
-                <div key="map" title="mini map" className="backKeyframe" onClick={this.miniMap}>
+            {this.props.docView.props.renderDepth !== 0 || this.isText ? (null) : <Tooltip title={<div className="dash-tooltip">Toggle Mini Map</div>} placement="bottom">
+                <div key="map" className="backKeyframe" onClick={this.miniMap}>
                     <FontAwesomeIcon icon={"map"} size={"lg"} />
                 </div>
+            </Tooltip>
             }
-            {!!!this.isText ? <div key="back" title="back frame" className="backKeyframe" onClick={this.prevKeyframe}>
-                <FontAwesomeIcon icon={"caret-left"} size={"lg"} />
-            </div> : null}
-            {!!!this.isText ? <div key="num" title="toggle view all" className="numKeyframe" style={{ backgroundColor: this.document.editing ? "#759c75" : "#c56565" }}
-                onClick={action(() => this.document.editing = !this.document.editing)} >
-                {NumCast(this.document.currentFrame)}
-            </div> : null}
-            {!!!this.isText ? <div key="fwd" title="forward frame" className="fwdKeyframe" onClick={this.nextKeyframe}>
-                <FontAwesomeIcon icon={"caret-right"} size={"lg"} />
-            </div> : null}
+            {!!!this.isText ? <Tooltip title={<div className="dash-tooltip">Back Frame</div>} placement="bottom">
+                <div key="back" className="backKeyframe" onClick={this.prevKeyframe}>
+                    <FontAwesomeIcon icon={"caret-left"} size={"lg"} />
+                </div>
+            </Tooltip> : null}
+            {!!!this.isText ? <Tooltip title={<div className="dash-tooltip">Toggle View All</div>} placement="bottom">
+                <div key="num" className="numKeyframe" style={{ backgroundColor: this.document.editing ? "#759c75" : "#c56565" }}
+                    onClick={action(() => this.document.editing = !this.document.editing)} >
+                    {NumCast(this.document.currentFrame)}
+                </div>
+            </Tooltip> : null}
+            {!!!this.isText ? <Tooltip title={<div className="dash-tooltip">Forward Frame</div>} placement="bottom">
+                <div key="fwd" className="fwdKeyframe" onClick={this.nextKeyframe}>
+                    <FontAwesomeIcon icon={"caret-right"} size={"lg"} />
+                </div>
+            </Tooltip> : null}
 
             {!this.props.isOverlay || this.document.type !== DocumentType.WEB || this.isText ? (null) :
-                <button className={"antimodeMenu-button"} key="hypothesis"
-                    style={{
-                        backgroundColor: !this.props.docView.layoutDoc.isAnnotating ? "121212" : undefined,
-                        borderRight: "1px solid gray"
-                    }}
-                    title="Use Hypothesis"
-                    onClick={() => this.props.docView.layoutDoc.isAnnotating = !this.props.docView.layoutDoc.isAnnotating}>
-                    <FontAwesomeIcon icon={["fab", "hire-a-helper"]} size={"lg"} />
-                </button>
+                <Tooltip title={<div className="dash-tooltip">Use Hypothesis</div>} placement="bottom">
+                    <button className={"antimodeMenu-button"} key="hypothesis"
+                        style={{
+                            backgroundColor: !this.props.docView.layoutDoc.isAnnotating ? "121212" : undefined,
+                            borderRight: "1px solid gray"
+                        }}
+                        onClick={() => this.props.docView.layoutDoc.isAnnotating = !this.props.docView.layoutDoc.isAnnotating}>
+                        <FontAwesomeIcon icon={["fab", "hire-a-helper"]} size={"lg"} />
+                    </button>
+                </Tooltip>
             }
             {(!this.props.isOverlay || this.props.docView.layoutDoc.isAnnotating) && !this.isText ?
                 <>
@@ -598,7 +636,6 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
                     {this.widthPicker}
                     {this.colorPicker}
                     {this.fillPicker}
-                    {this.formatPane}
                 </> :
                 (null)
             }
diff --git a/src/client/views/globalCssVariables.scss b/src/client/views/globalCssVariables.scss
index 3e54d001b..4c79a7c2f 100644
--- a/src/client/views/globalCssVariables.scss
+++ b/src/client/views/globalCssVariables.scss
@@ -9,10 +9,10 @@ $main-accent: #aaaaa3;
 //$alt-accent: #59dff7;
 $alt-accent: #c2c2c5;
 $lighter-alt-accent: rgb(207, 220, 240);
-$darker-alt-accent: rgb(178, 206, 248);
+$darker-alt-accent: #b2cef8;
 $intermediate-color: #9c9396;
 $dark-color: #121721;
-$link-color: lightBlue;
+$link-color: #add8e6;
 $antimodemenu-height: 35px;
 // fonts
 $sans-serif: "Noto Sans",
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index 85cc5c1a1..d7eb73bb4 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -617,8 +617,11 @@ export default class RichTextMenu extends AntimodeMenu {
             label = "No marks are currently stored";
         }
 
+        //onPointerDown={onBrushClick}
+
         const button = <Tooltip title={<div className="dash-tooltip">style brush</div>} placement="bottom">
-            <button className="antimodeMenu-button" onPointerDown={onBrushClick} style={this.brushMarks?.size > 0 ? { backgroundColor: "121212" } : {}}>
+
+            <button className="antimodeMenu-button" style={this.brushMarks?.size > 0 ? { backgroundColor: "121212" } : {}}>
                 <FontAwesomeIcon icon="paint-roller" size="lg" style={{ transitionProperty: "transform", transitionDuration: "0.1s", transform: `rotate(${this.brushMarks?.size > 0 ? 45 : 0}deg)` }} />
             </button>
         </Tooltip>;
@@ -631,7 +634,7 @@ export default class RichTextMenu extends AntimodeMenu {
             </div>;
 
         return (
-            <ButtonDropdown view={this.view} key={"brush dropdown"} button={button} dropdownContent={dropdownContent} />
+            <ButtonDropdown view={this.view} key={"brush dropdown"} button={button} dropdownContent={dropdownContent} openDropdownOnButton={true} />
         );
     }
 
@@ -690,8 +693,9 @@ export default class RichTextMenu extends AntimodeMenu {
             self.TextView.EditorView!.focus();
         }
 
+        // onPointerDown={onColorClick}
         const button = <Tooltip title={<div className="dash-tooltip">set font color</div>} placement="bottom">
-            <button className="antimodeMenu-button color-preview-button" onPointerDown={onColorClick}>
+            <button className="antimodeMenu-button color-preview-button">
                 <FontAwesomeIcon icon="palette" size="lg" />
                 <div className="color-preview" style={{ backgroundColor: this.activeFontColor }}></div>
             </button>
@@ -712,7 +716,7 @@ export default class RichTextMenu extends AntimodeMenu {
             </div>;
 
         return (
-            <ButtonDropdown view={this.view} key={"color dropdown"} button={button} dropdownContent={dropdownContent} />
+            <ButtonDropdown view={this.view} key={"color dropdown"} button={button} dropdownContent={dropdownContent} openDropdownOnButton={true} />
         );
     }
 
@@ -744,8 +748,9 @@ export default class RichTextMenu extends AntimodeMenu {
             UndoManager.RunInBatch(() => self.view && self.insertHighlight(self.activeHighlightColor, self.view.state, self.view.dispatch), "rt highlighter");
         }
 
+        //onPointerDown={onHighlightClick}
         const button = <Tooltip title={<div className="dash-tooltip">set highlight color</div>} placement="bottom">
-            <button className="antimodeMenu-button color-preview-button" key="highilghter-button" onPointerDown={onHighlightClick}>
+            <button className="antimodeMenu-button color-preview-button" key="highilghter-button" >
                 <FontAwesomeIcon icon="highlighter" size="lg" />
                 <div className="color-preview" style={{ backgroundColor: this.activeHighlightColor }}></div>
             </button>
@@ -766,7 +771,7 @@ export default class RichTextMenu extends AntimodeMenu {
             </div>;
 
         return (
-            <ButtonDropdown view={this.view} key={"highlighter"} button={button} dropdownContent={dropdownContent} />
+            <ButtonDropdown view={this.view} key={"highlighter"} button={button} dropdownContent={dropdownContent} openDropdownOnButton={true} />
         );
     }
 
@@ -789,7 +794,7 @@ export default class RichTextMenu extends AntimodeMenu {
         const link = this.currentLink ? this.currentLink : "";
 
         const button = <Tooltip title={<div className="dash-tooltip">set hyperlink</div>} placement="bottom">
-            <div><FontAwesomeIcon icon="link" size="lg" /> </div>
+            <div style={{ marginTop: 8 }}><FontAwesomeIcon icon="link" size="lg" /> </div>
         </Tooltip>;
 
         const dropdownContent =
@@ -801,7 +806,8 @@ export default class RichTextMenu extends AntimodeMenu {
                 <button className="remove-button" onPointerDown={e => this.deleteLink()}>Remove link</button>
             </div>;
 
-        return <ButtonDropdown view={this.view} key={"link button"} button={button} dropdownContent={dropdownContent} openDropdownOnButton={true} />;
+        return <ButtonDropdown view={this.view} key={"link button"} button={button} dropdownContent={dropdownContent}
+            openDropdownOnButton={true} link={true} />;
     }
 
     async getTextLinkTargetTitle() {
@@ -1001,6 +1007,7 @@ interface ButtonDropdownProps {
     button: JSX.Element;
     dropdownContent: JSX.Element;
     openDropdownOnButton?: boolean;
+    link?: boolean;
 }
 
 @observer
@@ -1043,18 +1050,10 @@ export class ButtonDropdown extends React.Component<ButtonDropdownProps> {
     render() {
         return (
             <div className="button-dropdown-wrapper" ref={node => this.ref = node}>
-                {this.props.openDropdownOnButton ?
-                    <button className="antimodeMenu-button dropdown-button-combined" onPointerDown={this.onDropdownClick}>
-                        {this.props.button}
-                        <FontAwesomeIcon icon="caret-down" size="sm" />
-                    </button> :
-                    <>
-                        {this.props.button}
-                        <button className="dropdown-button antimodeMenu-button" key="antimodebutton" onPointerDown={this.onDropdownClick}>
-                            <FontAwesomeIcon icon="caret-down" size="sm" />
-                        </button>
-                    </>}
-
+                <button className="antimodeMenu-button dropdown-button-combined" onPointerDown={this.onDropdownClick}>
+                    {this.props.button}
+                    <div style={{ marginTop: this.props.link ? "4.5" : "-8.5" }}><FontAwesomeIcon icon="caret-down" size="sm" /></div>
+                </button>
                 {this.showDropdown ? this.props.dropdownContent : (null)}
             </div>
         );
-- 
cgit v1.2.3-70-g09d2


From f4940b063a512e15723d62671b8e11619b1bfcd7 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Mon, 3 Aug 2020 10:19:39 -0500
Subject: fix double click on left pane

---
 src/client/util/CurrentUserUtils.ts                  |  1 +
 src/client/views/PropertiesButtons.tsx               | 20 ++++++++++++++++++++
 .../views/collections/CollectionDockingView.scss     |  2 --
 .../views/collections/ParentDocumentSelector.scss    | 15 +++++++++++----
 src/client/views/nodes/FontIconBox.tsx               |  3 ++-
 5 files changed, 34 insertions(+), 7 deletions(-)

(limited to 'src/client/views/PropertiesButtons.tsx')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index c27290e74..3aa13d535 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -531,6 +531,7 @@ export class CurrentUserUtils {
                 stayInCollection: true,
                 _width: 60,
                 _height: 60,
+                onDoubleClick: ScriptField.MakeScript('console.log("hi")', { scriptContext: "any" }),
                 onClick: ScriptField.MakeScript(click, { scriptContext: "any" }),
             }));
 
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 68969b413..d46c03470 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -550,6 +550,23 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         </Tooltip>;
     }
 
+    @computed
+    get contextButton() {
+        if (this.selectedDoc) {
+            return <Tooltip title={<><div className="dash-tooltip">Show Context</div></>}>
+                <div className={"propertiesButtons-linkButton-empty"}>
+                    <ParentDocSelector Document={this.selectedDoc} addDocTab={(doc, where) => {
+                        where === "onRight" ? CollectionDockingView.AddRightSplit(doc) :
+                            this.selectedDocumentView?.props.addDocTab(doc, "onRight");
+                        return true;
+                    }} />
+                </div>
+            </Tooltip>;
+        } else {
+            return false;
+        }
+
+    }
 
     // @computed
     // get importButton() {
@@ -605,6 +622,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             <div className="propertiesButtons-button">
                 {this.onClickButton}
             </div>
+            {/* <div className="propertiesButtons-button">
+                {this.contextButton}
+            </div> */}
             <div className="propertiesButtons-button">
                 {this.sharingButton}
             </div>
diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
index 27d66f796..4ec1c51cf 100644
--- a/src/client/views/collections/CollectionDockingView.scss
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -86,8 +86,6 @@
         width: 18px;
         display: inline-block;
         margin: auto;
-
-        display: none;
     }
 
     .collectionDockingView-dragAsDocument {
diff --git a/src/client/views/collections/ParentDocumentSelector.scss b/src/client/views/collections/ParentDocumentSelector.scss
index 4e704b58f..bc9cf4848 100644
--- a/src/client/views/collections/ParentDocumentSelector.scss
+++ b/src/client/views/collections/ParentDocumentSelector.scss
@@ -2,11 +2,13 @@
     div {
         overflow: visible !important;
     }
+
     .metadataEntry-outerDiv {
         overflow: hidden !important;
         pointer-events: all;
     }
 }
+
 .parentDocumentSelector-flyout {
     position: relative;
     z-index: 9999;
@@ -31,26 +33,31 @@
         border-left: 0px;
     }
 }
+
 .parentDocumentSelector-button {
-    pointer-events: all; 
+    pointer-events: all;
     position: relative;
     display: inline-block;
+
     svg {
-        width:20px !important;
-        height:20px;
+        // width:20px !important;
+        //height:20px;
     }
 }
+
 .parentDocumentSelector-metadata {
     pointer-events: auto;
     padding-right: 5px;
     width: 25px;
     display: inline-block;
 }
+
 .buttonSelector {
     div {
         overflow: visible !important;
     }
-    display: inline-block; 
+
+    display: inline-block;
     width:100%;
     height:100%;
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx
index 7c538df92..48f9d7cc6 100644
--- a/src/client/views/nodes/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox.tsx
@@ -6,7 +6,7 @@ import { DocComponent } from '../DocComponent';
 import './FontIconBox.scss';
 import { FieldView, FieldViewProps } from './FieldView';
 import { StrCast, Cast, NumCast } from '../../../fields/Types';
-import { Utils } from "../../../Utils";
+import { Utils, emptyFunction } from "../../../Utils";
 import { runInAction, observable, reaction, IReactionDisposer } from 'mobx';
 import { Doc } from '../../../fields/Doc';
 import { ContextMenu } from '../ContextMenu';
@@ -75,6 +75,7 @@ export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>(
 
             const color = CurrentUserUtils.selectedPanel === this.dataDoc.title ? "black" : "white";
             const menuBTN = <div className="menuButton"
+                onDoubleClick={emptyFunction}
                 style={{ backgroundColor: CurrentUserUtils.selectedPanel === this.dataDoc.title ? "lightgrey" : "" }}>
 
                 <div className="menuButton-wrap"
-- 
cgit v1.2.3-70-g09d2


From 8019926f41d0be85a21dfa9ad0d1a0d9e7160935 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Mon, 3 Aug 2020 18:10:55 -0500
Subject: menu buttons and other UI changes

---
 src/client/views/MainView.scss                     |   3 +-
 src/client/views/MainView.tsx                      |   4 +-
 src/client/views/PropertiesButtons.scss            |  30 +-
 src/client/views/PropertiesButtons.tsx             | 351 ++++++++++++---------
 .../collectionFreeForm/PropertiesView.scss         |   2 +-
 .../collectionFreeForm/PropertiesView.tsx          | 176 ++++++-----
 6 files changed, 320 insertions(+), 246 deletions(-)

(limited to 'src/client/views/PropertiesButtons.tsx')

diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index a57d22afd..e9e700ba8 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -155,7 +155,7 @@
 .mainView-menuPanel {
 
     width: 60px;
-    background-color: black;
+    background-color: #121721;
     height: 100%;
     //overflow-y: scroll;
     //overflow-x: hidden;
@@ -165,6 +165,7 @@
         padding: 7px;
         padding-left: 7px;
         width: 100%;
+        background: black;
 
         .mainView-menuPanel-button-wrap {
             width: 45px;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index ca5154ef7..93cc95ba4 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -415,10 +415,10 @@ export class MainView extends React.Component {
         if (!this.sidebarContent) return null;
         return <div className="mainView-libraryFlyout">
             <div className="mainView-contentArea" style={{ position: "relative", height: `100%`, width: "100%", overflow: "visible" }}>
-                {this.flyoutWidth > 0 ? <div className="mainView-libraryFlyout-close"
+                {/* {this.flyoutWidth > 0 ? <div className="mainView-libraryFlyout-close"
                     onPointerDown={this.closeFlyout}>
                     <FontAwesomeIcon icon="times" color="black" size="lg" />
-                </div> : null}
+                </div> : null} */}
 
                 <DocumentView
                     Document={this.sidebarContent}
diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss
index 1cba252de..5edaa2168 100644
--- a/src/client/views/PropertiesButtons.scss
+++ b/src/client/views/PropertiesButtons.scss
@@ -21,9 +21,8 @@ $linkGap : 3px;
 .propertiesButtons-linkButton-empty,
 .propertiesButtons-linkButton-nonempty {
     height: 30px;
-    width: 30px;
-    border-radius: 5px;
-    opacity: 0.9;
+    width: 32px;
+    border-radius: 6px;
     pointer-events: auto;
     background-color: #121721;
     color: #fcfbf7;
@@ -36,6 +35,7 @@ $linkGap : 3px;
     justify-content: center;
     align-items: center;
     margin-right: 10px;
+    margin-left: 3.5px;
 
     &:hover {
         background: $main-accent;
@@ -68,23 +68,35 @@ $linkGap : 3px;
     padding-right: 5px;
     width: 25px;
     border-radius: 5px;
-    margin-right: 18px;
+    margin-right: 22px;
     margin-bottom: 8px;
 }
 
+.propertiesButtons-title {
+    background: #121721;
+    color: white;
+    font-size: 6px;
+    width: 40px;
+    padding: 5px;
+    height: 16px;
+    border-radius: 7px;
+    text-transform: uppercase;
+    text-align: center;
+    margin-top: -4px;
+}
+
 .propertiesButtons-linker {
     height: 30px;
-    width: 30px;
+    width: 32px;
     text-align: center;
-    border-radius: 5px;
+    border-radius: 6px;
     pointer-events: auto;
-    // color: $dark-color;
-    // border: $dark-color 1px solid;
-    background-color: #252b33;
+    background-color: #121721;
     color: #fcfbf7;
     transition: 0.2s ease all;
     margin-right: 5px;
     padding-top: 5px;
+    margin-left: 3.5px;
 
     &:hover {
         background: $main-accent;
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index d46c03470..37ee3d9e0 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -128,18 +128,22 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         const targetDoc = this.selectedDoc;
         const published = targetDoc && Doc.GetProto(targetDoc)[GoogleRef] !== undefined;
         const animation = this.isAnimatingPulse ? "shadow-pulse 1s linear infinite" : "none";
-        return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{`${published ? "Push" : "Publish"} to Google Docs`}</div></>}>
-            <div
-                className="propertiesButtons-linker"
-                style={{ animation }}
-                onClick={async () => {
-                    await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken();
-                    !published && runInAction(() => this.isAnimatingPulse = true);
-                    PropertiesButtons.hasPushedHack = false;
-                    targetDoc[Pushes] = NumCast(targetDoc[Pushes]) + 1;
-                }}>
-                <FontAwesomeIcon className="documentdecorations-icon" icon={published ? (this.pushIcon as any) : cloud} size={published ? "sm" : "xs"} />
-            </div></Tooltip>;
+        return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{`${published ? "Push" : "Publish"} to Google Docs`}</div></>} placement="top">
+            <div>
+                <div
+                    className="propertiesButtons-linker"
+                    style={{ animation }}
+                    onClick={async () => {
+                        await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken();
+                        !published && runInAction(() => this.isAnimatingPulse = true);
+                        PropertiesButtons.hasPushedHack = false;
+                        targetDoc[Pushes] = NumCast(targetDoc[Pushes]) + 1;
+                    }}>
+                    <FontAwesomeIcon className="documentdecorations-icon" icon={published ? (this.pushIcon as any) : cloud} size={published ? "lg" : "sm"} />
+                </div>
+                <div className="propertiesButtons-title">Google</div>
+            </div>
+        </Tooltip>;
     }
 
     @computed
@@ -158,74 +162,88 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         })();
 
         return !targetDoc || !dataDoc || !dataDoc[GoogleRef] ? (null) : <Tooltip
-            title={<><div className="dash-tooltip">{title}</div></>}>
-            <div className="propertiesButtons-linker"
-                style={{ backgroundColor: this.pullColor }}
-                onPointerEnter={action(e => {
-                    if (e.altKey) {
-                        this.openHover = UtilityButtonState.OpenExternally;
-                    } else if (e.shiftKey) {
-                        this.openHover = UtilityButtonState.OpenRight;
-                    }
-                })}
-                onPointerLeave={action(() => this.openHover = UtilityButtonState.Default)}
-                onClick={async e => {
-                    const googleDocUrl = `https://docs.google.com/document/d/${dataDoc[GoogleRef]}/edit`;
-                    if (e.shiftKey) {
-                        e.preventDefault();
-                        let googleDoc = await Cast(dataDoc.googleDoc, Doc);
-                        if (!googleDoc) {
-                            const options = { _width: 600, _nativeWidth: 960, _nativeHeight: 800, isAnnotating: false, UseCors: false };
-                            googleDoc = Docs.Create.WebDocument(googleDocUrl, options);
-                            dataDoc.googleDoc = googleDoc;
+            title={<><div className="dash-tooltip">{title}</div></>} placement="top">
+            <div>
+                <div className="propertiesButtons-linker"
+                    style={{ backgroundColor: this.pullColor }}
+                    onPointerEnter={action(e => {
+                        if (e.altKey) {
+                            this.openHover = UtilityButtonState.OpenExternally;
+                        } else if (e.shiftKey) {
+                            this.openHover = UtilityButtonState.OpenRight;
                         }
-                        CollectionDockingView.AddRightSplit(googleDoc);
-                    } else if (e.altKey) {
-                        e.preventDefault();
-                        window.open(googleDocUrl);
-                    } else {
-                        this.clearPullColor();
-                        PropertiesButtons.hasPulledHack = false;
-                        targetDoc[Pulls] = NumCast(targetDoc[Pulls]) + 1;
-                        dataDoc.unchanged && runInAction(() => this.isAnimatingFetch = true);
-                    }
-                }}>
-                <FontAwesomeIcon className="documentdecorations-icon" size="sm"
-                    style={{ WebkitAnimation: animation, MozAnimation: animation }}
-                    icon={(() => {
-                        switch (this.openHover) {
-                            default:
-                            case UtilityButtonState.Default: return dataDoc.unchanged === false ? (this.pullIcon as any) : fetch;
-                            case UtilityButtonState.OpenRight: return "arrow-alt-circle-right";
-                            case UtilityButtonState.OpenExternally: return "share";
+                    })}
+                    onPointerLeave={action(() => this.openHover = UtilityButtonState.Default)}
+                    onClick={async e => {
+                        const googleDocUrl = `https://docs.google.com/document/d/${dataDoc[GoogleRef]}/edit`;
+                        if (e.shiftKey) {
+                            e.preventDefault();
+                            let googleDoc = await Cast(dataDoc.googleDoc, Doc);
+                            if (!googleDoc) {
+                                const options = { _width: 600, _nativeWidth: 960, _nativeHeight: 800, isAnnotating: false, UseCors: false };
+                                googleDoc = Docs.Create.WebDocument(googleDocUrl, options);
+                                dataDoc.googleDoc = googleDoc;
+                            }
+                            CollectionDockingView.AddRightSplit(googleDoc);
+                        } else if (e.altKey) {
+                            e.preventDefault();
+                            window.open(googleDocUrl);
+                        } else {
+                            this.clearPullColor();
+                            PropertiesButtons.hasPulledHack = false;
+                            targetDoc[Pulls] = NumCast(targetDoc[Pulls]) + 1;
+                            dataDoc.unchanged && runInAction(() => this.isAnimatingFetch = true);
                         }
-                    })()}
-                />
-            </div></Tooltip>;
+                    }}>
+                    <FontAwesomeIcon className="documentdecorations-icon" size="lg"
+                        style={{ WebkitAnimation: animation, MozAnimation: animation }}
+                        icon={(() => {
+                            switch (this.openHover) {
+                                default:
+                                case UtilityButtonState.Default: return dataDoc.unchanged === false ? (this.pullIcon as any) : fetch;
+                                case UtilityButtonState.OpenRight: return "arrow-alt-circle-right";
+                                case UtilityButtonState.OpenExternally: return "share";
+                            }
+                        })()}
+                    />
+                </div>
+                <div className="propertiesButtons-title">Fetch</div>
+            </div>
+        </Tooltip>;
     }
     @computed
     get pinButton() {
         const targetDoc = this.selectedDoc;
         const isPinned = targetDoc && Doc.isDocPinned(targetDoc);
-        return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : "Pin to presentation"}</div></>}>
-            <div className="propertiesButtons-linker"
-                style={{ backgroundColor: isPinned ? "white" : "", color: isPinned ? "black" : "white" }}
-                onClick={e => DockedFrameRenderer.PinDoc(targetDoc, isPinned)}>
-                <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin"
-                />
-            </div></Tooltip>;
+        return !targetDoc ? (null) : <Tooltip
+            title={<><div className="dash-tooltip">{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" :
+                "Pin to presentation"}</div></>} placement="top">
+            <div>
+                <div className="propertiesButtons-linker"
+                    style={{ backgroundColor: isPinned ? "white" : "", color: isPinned ? "black" : "white" }}
+                    onClick={e => DockedFrameRenderer.PinDoc(targetDoc, isPinned)}>
+                    <FontAwesomeIcon className="documentdecorations-icon" size="lg" icon="map-pin"
+                    />
+                </div>
+
+                <div className="propertiesButtons-title">{Doc.isDocPinned(targetDoc) ? "Unpin" : "Pin"}</div>
+            </div>
+        </Tooltip>;
     }
 
     @computed
     get metadataButton() {
         //const view0 = this.view0;
         if (this.selectedDoc) {
-            return <Tooltip title={<><div className="dash-tooltip">Show metadata panel</div></>}>
+            return <Tooltip title={<><div className="dash-tooltip">Show metadata panel</div></>} placement="top">
                 <div className="propertiesButtons-linkFlyout">
                     <Flyout anchorPoint={anchorPoints.LEFT_TOP}
                         content={<MetadataEntryMenu docs={[this.selectedDoc]} suggestWithFunction />  /* tfs: @bcz This might need to be the data document? */}>
-                        <div className={"propertiesButtons-linkButton-" + "empty"} onPointerDown={e => e.stopPropagation()} >
-                            {<FontAwesomeIcon className="documentdecorations-icon" icon="tag" size="sm" />}
+                        <div>
+                            <div className={"propertiesButtons-linkButton-" + "empty"} onPointerDown={e => e.stopPropagation()} >
+                                {<FontAwesomeIcon className="documentdecorations-icon" icon="tag" size="lg" />}
+                            </div>
+                            <div className="propertiesButtons-title">Metadata</div>
                         </div>
                     </Flyout>
                 </div></Tooltip>;
@@ -264,12 +282,15 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         Array.from(Object.values(Templates.TemplateList)).map(template =>
             templates.set(template, views.reduce((checked, doc) => checked || doc?.props.Document["_show" + template.Name] ? true : false, false as boolean)));
         return !docView ? (null) :
-            <Tooltip title={<><div className="dash-tooltip">Customize layout</div></>}>
+            <Tooltip title={<><div className="dash-tooltip">Customize layout</div></>} placement="top">
                 <div className="propertiesButtons-linkFlyout">
                     <Flyout anchorPoint={anchorPoints.LEFT_TOP} //onOpen={action(() => this._aliasDown = true)} onClose={action(() => this._aliasDown = false)}
                         content={<TemplateMenu docViews={views.filter(v => v).map(v => v as DocumentView)} templates={templates} />}>
-                        <div className={"propertiesButtons-linkButton-empty"} >
-                            {<FontAwesomeIcon className="documentdecorations-icon" icon="edit" size="sm" />}
+                        <div>
+                            <div className={"propertiesButtons-linkButton-empty"} >
+                                {<FontAwesomeIcon className="documentdecorations-icon" icon="edit" size="lg" />}
+                            </div>
+                            <div className="propertiesButtons-title">Layout</div>
                         </div>
                     </Flyout>
                 </div></Tooltip>;
@@ -292,12 +313,15 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     @computed
     get copyButton() {
         const targetDoc = this.selectedDoc;
-        return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Tap or Drag to create an alias"}</div></>}>
-            <div className={"propertiesButtons-linkButton-empty"}
-                ref={this._dragRef}
-                onPointerDown={this.onAliasButtonDown}
-                onClick={this.onCopy}>
-                {<FontAwesomeIcon className="documentdecorations-icon" icon="copy" size="sm" />}
+        return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Tap or Drag to create an alias"}</div></>} placement="top">
+            <div>
+                <div className={"propertiesButtons-linkButton-empty"}
+                    ref={this._dragRef}
+                    onPointerDown={this.onAliasButtonDown}
+                    onClick={this.onCopy}>
+                    {<FontAwesomeIcon className="documentdecorations-icon" icon="copy" size="lg" />}
+                </div>
+                <div className="propertiesButtons-title">Alias</div>
             </div>
         </Tooltip>;
     }
@@ -312,11 +336,14 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         const targetDoc = this.selectedDoc;
         return !targetDoc ? (null) : <Tooltip
             title={<><div className="dash-tooltip">{this.selectedDoc?.lockedPosition ?
-                "Unlock Position" : "Lock Position"}</div></>}>
-            <div className={"propertiesButtons-linkButton-empty"}
-                onPointerDown={this.onLock} >
-                {<FontAwesomeIcon className="documentdecorations-icon"
-                    icon={BoolCast(this.selectedDoc?.lockedPosition) ? "unlock" : "lock"} size="sm" />}
+                "Unlock Position" : "Lock Position"}</div></>} placement="top">
+            <div>
+                <div className={"propertiesButtons-linkButton-empty"}
+                    onPointerDown={this.onLock} >
+                    {<FontAwesomeIcon className="documentdecorations-icon"
+                        icon={BoolCast(this.selectedDoc?.lockedPosition) ? "unlock" : "lock"} size="lg" />}
+                </div>
+                <div className="propertiesButtons-title">Position </div>
             </div>
         </Tooltip>;
     }
@@ -325,15 +352,18 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     get downloadButton() {
         const targetDoc = this.selectedDoc;
         return !targetDoc ? (null) : <Tooltip
-            title={<><div className="dash-tooltip">{"Download Document"}</div></>}>
-            <div className={"propertiesButtons-linkButton-empty"}
-                onPointerDown={async () => {
-                    if (this.selectedDocumentView?.props.Document) {
-                        Doc.Zip(this.selectedDocumentView?.props.Document);
-                    }
-                }}>
-                {<FontAwesomeIcon className="propertiesButtons-icon"
-                    icon="download" size="sm" />}
+            title={<><div className="dash-tooltip">{"Download Document"}</div></>} placement="top">
+            <div>
+                <div className={"propertiesButtons-linkButton-empty"}
+                    onPointerDown={async () => {
+                        if (this.selectedDocumentView?.props.Document) {
+                            Doc.Zip(this.selectedDocumentView?.props.Document);
+                        }
+                    }}>
+                    {<FontAwesomeIcon className="propertiesButtons-icon"
+                        icon="download" size="lg" />}
+                </div>
+                <div className="propertiesButtons-title"> downld </div>
             </div>
         </Tooltip>;
     }
@@ -342,11 +372,14 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     get deleteButton() {
         const targetDoc = this.selectedDoc;
         return !targetDoc ? (null) : <Tooltip
-            title={<><div className="dash-tooltip">{"Delete Document"}</div></>}>
-            <div className={"propertiesButtons-linkButton-empty"}
-                onPointerDown={this.deleteDocument}>
-                {<FontAwesomeIcon className="propertiesButtons-icon"
-                    icon="trash-alt" size="sm" />}
+            title={<><div className="dash-tooltip">{"Delete Document"}</div></>} placement="top">
+            <div>
+                <div className={"propertiesButtons-linkButton-empty"}
+                    onPointerDown={this.deleteDocument}>
+                    {<FontAwesomeIcon className="propertiesButtons-icon"
+                        icon="trash-alt" size="lg" />}
+                </div>
+                <div className="propertiesButtons-title"> delete </div>
             </div>
         </Tooltip>;
     }
@@ -361,15 +394,18 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     get sharingButton() {
         const targetDoc = this.selectedDoc;
         return !targetDoc ? (null) : <Tooltip
-            title={<><div className="dash-tooltip">{"Share Document"}</div></>}>
-            <div className={"propertiesButtons-linkButton-empty"}
-                onPointerDown={() => {
-                    if (this.selectedDocumentView) {
-                        SharingManager.Instance.open(this.selectedDocumentView);
-                    }
-                }}>
-                {<FontAwesomeIcon className="propertiesButtons-icon"
-                    icon="users" size="sm" />}
+            title={<><div className="dash-tooltip">{"Share Document"}</div></>} placement="top">
+            <div>
+                <div className={"propertiesButtons-linkButton-empty"}
+                    onPointerDown={() => {
+                        if (this.selectedDocumentView) {
+                            SharingManager.Instance.open(this.selectedDocumentView);
+                        }
+                    }}>
+                    {<FontAwesomeIcon className="propertiesButtons-icon"
+                        icon="users" size="lg" />}
+                </div>
+                <div className="propertiesButtons-title"> share </div>
             </div>
         </Tooltip>;
     }
@@ -377,15 +413,19 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     @computed
     get onClickButton() {
         if (this.selectedDoc) {
-            return <Tooltip title={<><div className="dash-tooltip">Choose onClick behavior</div></>}>
-                <div className="propertiesButtons-linkFlyout">
-                    <Flyout anchorPoint={anchorPoints.LEFT_TOP}
-                        content={this.onClickFlyout}>
-                        <div className={"propertiesButtons-linkButton-" + "empty"} onPointerDown={e => e.stopPropagation()} >
-                            {<FontAwesomeIcon className="documentdecorations-icon" icon="mouse-pointer" size="sm" />}
-                        </div>
-                    </Flyout>
-                </div></Tooltip>;
+            return <Tooltip title={<><div className="dash-tooltip">Choose onClick behavior</div></>} placement="top">
+                <div>
+                    <div className="propertiesButtons-linkFlyout">
+                        <Flyout anchorPoint={anchorPoints.LEFT_TOP}
+                            content={this.onClickFlyout}>
+                            <div className={"propertiesButtons-linkButton-" + "empty"} onPointerDown={e => e.stopPropagation()} >
+                                {<FontAwesomeIcon className="documentdecorations-icon" icon="mouse-pointer" size="lg" />}
+                            </div>
+                        </Flyout>
+                    </div>
+                    <div className="propertiesButtons-title"> onclick </div>
+                </div>
+            </Tooltip>;
         } else {
             return null;
         }
@@ -472,15 +512,18 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     get googlePhotosButton() {
         const targetDoc = this.selectedDoc;
         return !targetDoc ? (null) : <Tooltip
-            title={<><div className="dash-tooltip">{"Export to Google Photos"}</div></>}>
-            <div className={"propertiesButtons-linkButton-empty"}
-                onPointerDown={() => {
-                    if (this.selectedDocumentView) {
-                        GooglePhotos.Export.CollectionToAlbum({ collection: this.selectedDocumentView.Document }).then(console.log);
-                    }
-                }}>
-                {<FontAwesomeIcon className="documentdecorations-icon"
-                    icon="cloud-upload-alt" size="sm" />}
+            title={<><div className="dash-tooltip">{"Export to Google Photos"}</div></>} placement="top">
+            <div>
+                <div className={"propertiesButtons-linkButton-empty"}
+                    onPointerDown={() => {
+                        if (this.selectedDocumentView) {
+                            GooglePhotos.Export.CollectionToAlbum({ collection: this.selectedDocumentView.Document }).then(console.log);
+                        }
+                    }}>
+                    {<FontAwesomeIcon className="documentdecorations-icon"
+                        icon="cloud-upload-alt" size="lg" />}
+                </div>
+                <div className="propertiesButtons-title"> google </div>
             </div>
         </Tooltip>;
     }
@@ -489,13 +532,16 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     get clustersButton() {
         const targetDoc = this.selectedDoc;
         return !targetDoc ? (null) : <Tooltip
-            title={<><div className="dash-tooltip">{this.selectedDoc?.useClusters ? "Stop Showing Clusters" : "Show Clusters"}</div></>}>
-            <div className={"propertiesButtons-linkButton-empty"}
-                style={{ backgroundColor: this.selectedDoc?.useClusters ? "#a0a0a0" : "" }}
-                onPointerDown={this.changeClusters}>
-                {<FontAwesomeIcon className="documentdecorations-icon"
-                    color={this.selectedDoc?.useClusters ? "black" : "white"}
-                    icon="braille" size="sm" />}
+            title={<><div className="dash-tooltip">{this.selectedDoc?.useClusters ? "Stop Showing Clusters" : "Show Clusters"}</div></>} placement="top">
+            <div>
+                <div className={"propertiesButtons-linkButton-empty"}
+                    style={{ backgroundColor: this.selectedDoc?.useClusters ? "#a0a0a0" : "" }}
+                    onPointerDown={this.changeClusters}>
+                    {<FontAwesomeIcon className="documentdecorations-icon"
+                        color={this.selectedDoc?.useClusters ? "black" : "white"}
+                        icon="braille" size="lg" />}
+                </div>
+                <div className="propertiesButtons-title"> clusters </div>
             </div>
         </Tooltip>;
     }
@@ -514,13 +560,16 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     get fitContentButton() {
         const targetDoc = this.selectedDoc;
         return !targetDoc ? (null) : <Tooltip
-            title={<><div className="dash-tooltip">{this.selectedDoc?._fitToBox ? "Stop Fitting Content" : "Fit Content"}</div></>}>
-            <div className={"propertiesButtons-linkButton-empty"}
-                style={{ backgroundColor: this.selectedDoc?._fitToBox ? "#a0a0a0" : "" }}
-                onPointerDown={this.changeFitToBox}>
-                {<FontAwesomeIcon className="documentdecorations-icon"
-                    color={this.selectedDoc?._fitToBox ? "black" : "white"}
-                    icon="expand" size="sm" />}
+            title={<><div className="dash-tooltip">{this.selectedDoc?._fitToBox ? "Stop Fitting Content" : "Fit Content"}</div></>} placement="top">
+            <div>
+                <div className={"propertiesButtons-linkButton-empty"}
+                    style={{ backgroundColor: this.selectedDoc?._fitToBox ? "#a0a0a0" : "" }}
+                    onPointerDown={this.changeFitToBox}>
+                    {<FontAwesomeIcon className="documentdecorations-icon"
+                        color={this.selectedDoc?._fitToBox ? "black" : "white"}
+                        icon="expand" size="lg" />}
+                </div>
+                <div className="propertiesButtons-title"> {this.selectedDoc?._fitToBox ? "unfit" : "fit"} </div>
             </div>
         </Tooltip>;
     }
@@ -541,11 +590,14 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     get maskButton() {
         const targetDoc = this.selectedDoc;
         return !targetDoc ? (null) : <Tooltip
-            title={<><div className="dash-tooltip">Make Mask</div></>}>
-            <div className={"propertiesButtons-linkButton-empty"}
-                onPointerDown={this.makeMask}>
-                {<FontAwesomeIcon className="documentdecorations-icon"
-                    color="white" icon="paint-brush" size="sm" />}
+            title={<><div className="dash-tooltip">Make Mask</div></>} placement="top">
+            <div>
+                <div className={"propertiesButtons-linkButton-empty"}
+                    onPointerDown={this.makeMask}>
+                    {<FontAwesomeIcon className="documentdecorations-icon"
+                        color="white" icon="paint-brush" size="lg" />}
+                </div>
+                <div className="propertiesButtons-title"> mask </div>
             </div>
         </Tooltip>;
     }
@@ -553,13 +605,16 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     @computed
     get contextButton() {
         if (this.selectedDoc) {
-            return <Tooltip title={<><div className="dash-tooltip">Show Context</div></>}>
-                <div className={"propertiesButtons-linkButton-empty"}>
-                    <ParentDocSelector Document={this.selectedDoc} addDocTab={(doc, where) => {
-                        where === "onRight" ? CollectionDockingView.AddRightSplit(doc) :
-                            this.selectedDocumentView?.props.addDocTab(doc, "onRight");
-                        return true;
-                    }} />
+            return <Tooltip title={<><div className="dash-tooltip">Show Context</div></>} placement="top">
+                <div>
+                    <div className={"propertiesButtons-linkButton-empty"}>
+                        <ParentDocSelector Document={this.selectedDoc} addDocTab={(doc, where) => {
+                            where === "onRight" ? CollectionDockingView.AddRightSplit(doc) :
+                                this.selectedDocumentView?.props.addDocTab(doc, "onRight");
+                            return true;
+                        }} />
+                    </div>
+                    <div className="propertiesButtons-title"> context </div>
                 </div>
             </Tooltip>;
         } else {
@@ -622,9 +677,6 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             <div className="propertiesButtons-button">
                 {this.onClickButton}
             </div>
-            {/* <div className="propertiesButtons-button">
-                {this.contextButton}
-            </div> */}
             <div className="propertiesButtons-button">
                 {this.sharingButton}
             </div>
@@ -652,6 +704,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             <div className="propertiesButtons-button" style={{ display: !isInk ? "none" : "" }}>
                 {this.maskButton}
             </div>
+            <div className="propertiesButtons-button">
+                {this.contextButton}
+            </div>
         </div>
         </div>;
     }
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index 7df56115f..aede3842e 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -41,7 +41,7 @@
         font-size: 12.5px;
 
         &:hover {
-            cursor: pointer;
+            cursor: text;
         }
     }
 
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index f5e0cd077..9c5b8f81d 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -59,6 +59,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     @observable openAppearance: boolean = true;
     @observable openTransform: boolean = true;
 
+    @observable inActions: boolean = false;
+
     @computed get isInk() { return this.selectedDoc?.type === DocumentType.INK; }
 
     @action
@@ -736,115 +738,119 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             return <div className="propertiesView" style={{ width: this.props.width }}>
                 <div className="propertiesView-title" style={{ width: this.props.width }}>
                     No Document Selected
-                <div className="propertiesView-title-icon" onPointerDown={this.props.onDown}>
-                        <FontAwesomeIcon icon="times" color="black" size="xs" />
-                    </div>
-                </div>
+            </div>
             </div>;
-        }
 
-        const novice = Doc.UserDoc().noviceMode;
+        } else {
+
+            const novice = Doc.UserDoc().noviceMode;
 
-        return <div className="propertiesView" style={{ width: this.props.width }} >
-            <div className="propertiesView-title" style={{ width: this.props.width }}>
-                Properties
-                <div className="propertiesView-title-icon" onPointerDown={this.props.onDown}>
+            return <div className="propertiesView" style={{
+                width: this.props.width,
+                // overflowY: this.inActions ? "visible" : "scroll"
+            }} >
+                <div className="propertiesView-title" style={{ width: this.props.width }}>
+                    Properties
+                {/* <div className="propertiesView-title-icon" onPointerDown={this.props.onDown}>
                     <FontAwesomeIcon icon="times" color="black" size="sm" />
+                </div> */}
                 </div>
-            </div>
-            <div className="propertiesView-name">
-                {this.editableTitle}
-            </div>
-            <div className="propertiesView-settings">
-                <div className="propertiesView-settings-title"
-                    onPointerDown={() => runInAction(() => { this.openActions = !this.openActions; })}
-                    style={{ backgroundColor: this.openActions ? "black" : "" }}>
-                    Actions
+                <div className="propertiesView-name">
+                    {this.editableTitle}
+                </div>
+                <div className="propertiesView-settings" onPointerEnter={() => runInAction(() => { this.inActions = true; })}
+                    onPointerLeave={() => runInAction(() => { this.inActions = false; })}>
+                    <div className="propertiesView-settings-title"
+                        onPointerDown={() => runInAction(() => { this.openActions = !this.openActions; })}
+                        style={{ backgroundColor: this.openActions ? "black" : "" }}>
+                        Actions
                     <div className="propertiesView-settings-title-icon">
-                        <FontAwesomeIcon icon={this.openActions ? "caret-down" : "caret-right"} size="lg" color="white" />
+                            <FontAwesomeIcon icon={this.openActions ? "caret-down" : "caret-right"} size="lg" color="white" />
+                        </div>
                     </div>
+                    {!this.openActions ? (null) :
+                        <div className="propertiesView-settings-content">
+                            <PropertiesButtons />
+                        </div>}
                 </div>
-                {!this.openActions ? (null) :
-                    <div className="propertiesView-settings-content">
-                        <PropertiesButtons />
-                    </div>}
-            </div>
-            <div className="propertiesView-sharing">
-                <div className="propertiesView-sharing-title"
-                    onPointerDown={() => runInAction(() => { this.openSharing = !this.openSharing; })}
-                    style={{ backgroundColor: this.openSharing ? "black" : "" }}>
-                    Sharing {"&"} Permissions
+                <div className="propertiesView-sharing">
+                    <div className="propertiesView-sharing-title"
+                        onPointerDown={() => runInAction(() => { this.openSharing = !this.openSharing; })}
+                        style={{ backgroundColor: this.openSharing ? "black" : "" }}>
+                        Sharing {"&"} Permissions
                     <div className="propertiesView-sharing-title-icon">
-                        <FontAwesomeIcon icon={this.openSharing ? "caret-down" : "caret-right"} size="lg" color="white" />
+                            <FontAwesomeIcon icon={this.openSharing ? "caret-down" : "caret-right"} size="lg" color="white" />
+                        </div>
                     </div>
+                    {!this.openSharing ? (null) :
+                        <div className="propertiesView-sharing-content">
+                            {this.sharingTable}
+                        </div>}
                 </div>
-                {!this.openSharing ? (null) :
-                    <div className="propertiesView-sharing-content">
-                        {this.sharingTable}
-                    </div>}
-            </div>
 
-            {!this.isInk ? (null) :
-                <div className="propertiesView-appearance">
-                    <div className="propertiesView-appearance-title"
-                        onPointerDown={() => runInAction(() => { this.openAppearance = !this.openAppearance; })}
-                        style={{ backgroundColor: this.openAppearance ? "black" : "" }}>
-                        Appearance
+                {!this.isInk ? (null) :
+                    <div className="propertiesView-appearance">
+                        <div className="propertiesView-appearance-title"
+                            onPointerDown={() => runInAction(() => { this.openAppearance = !this.openAppearance; })}
+                            style={{ backgroundColor: this.openAppearance ? "black" : "" }}>
+                            Appearance
                         <div className="propertiesView-appearance-title-icon">
-                            <FontAwesomeIcon icon={this.openAppearance ? "caret-down" : "caret-right"} size="lg" color="white" />
+                                <FontAwesomeIcon icon={this.openAppearance ? "caret-down" : "caret-right"} size="lg" color="white" />
+                            </div>
                         </div>
-                    </div>
-                    {!this.openAppearance ? (null) :
-                        <div className="propertiesView-appearance-content">
-                            {this.appearanceEditor}
-                        </div>}
-                </div>}
+                        {!this.openAppearance ? (null) :
+                            <div className="propertiesView-appearance-content">
+                                {this.appearanceEditor}
+                            </div>}
+                    </div>}
 
-            {this.isInk ? <div className="propertiesView-transform">
-                <div className="propertiesView-transform-title"
-                    onPointerDown={() => runInAction(() => { this.openTransform = !this.openTransform; })}
-                    style={{ backgroundColor: this.openTransform ? "black" : "" }}>
-                    Transform
+                {this.isInk ? <div className="propertiesView-transform">
+                    <div className="propertiesView-transform-title"
+                        onPointerDown={() => runInAction(() => { this.openTransform = !this.openTransform; })}
+                        style={{ backgroundColor: this.openTransform ? "black" : "" }}>
+                        Transform
                     <div className="propertiesView-transform-title-icon">
-                        <FontAwesomeIcon icon={this.openTransform ? "caret-down" : "caret-right"} size="lg" color="white" />
+                            <FontAwesomeIcon icon={this.openTransform ? "caret-down" : "caret-right"} size="lg" color="white" />
+                        </div>
                     </div>
-                </div>
-                {this.openTransform ? <div className="propertiesView-transform-content">
-                    {this.transformEditor}
+                    {this.openTransform ? <div className="propertiesView-transform-content">
+                        {this.transformEditor}
+                    </div> : null}
                 </div> : null}
-            </div> : null}
-
-            <div className="propertiesView-fields">
-                <div className="propertiesView-fields-title"
-                    onPointerDown={() => runInAction(() => { this.openFields = !this.openFields; })}
-                    style={{ backgroundColor: this.openFields ? "black" : "" }}>
-                    <div className="propertiesView-fields-title-name">
-                        Fields {"&"} Tags
+
+                <div className="propertiesView-fields">
+                    <div className="propertiesView-fields-title"
+                        onPointerDown={() => runInAction(() => { this.openFields = !this.openFields; })}
+                        style={{ backgroundColor: this.openFields ? "black" : "" }}>
+                        <div className="propertiesView-fields-title-name">
+                            Fields {"&"} Tags
                         <div className="propertiesView-fields-title-icon">
-                            <FontAwesomeIcon icon={this.openFields ? "caret-down" : "caret-right"} size="lg" color="white" />
+                                <FontAwesomeIcon icon={this.openFields ? "caret-down" : "caret-right"} size="lg" color="white" />
+                            </div>
                         </div>
                     </div>
+                    {!novice && this.openFields ? <div className="propertiesView-fields-checkbox">
+                        {this.fieldsCheckbox}
+                        <div className="propertiesView-fields-checkbox-text">Layout</div>
+                    </div> : null}
+                    {!this.openFields ? (null) :
+                        <div className="propertiesView-fields-content">
+                            {novice ? this.noviceFields : this.expandedField}
+                        </div>}
                 </div>
-                {!novice && this.openFields ? <div className="propertiesView-fields-checkbox">
-                    {this.fieldsCheckbox}
-                    <div className="propertiesView-fields-checkbox-text">Layout</div>
-                </div> : null}
-                {!this.openFields ? (null) :
-                    <div className="propertiesView-fields-content">
-                        {novice ? this.noviceFields : this.expandedField}
-                    </div>}
-            </div>
-            <div className="propertiesView-layout">
-                <div className="propertiesView-layout-title"
-                    onPointerDown={() => runInAction(() => { this.openLayout = !this.openLayout; })}
-                    style={{ backgroundColor: this.openLayout ? "black" : "" }}>
-                    Layout
+                <div className="propertiesView-layout">
+                    <div className="propertiesView-layout-title"
+                        onPointerDown={() => runInAction(() => { this.openLayout = !this.openLayout; })}
+                        style={{ backgroundColor: this.openLayout ? "black" : "" }}>
+                        Layout
                     <div className="propertiesView-layout-title-icon" onPointerDown={() => runInAction(() => { this.openLayout = !this.openLayout; })}>
-                        <FontAwesomeIcon icon={this.openLayout ? "caret-down" : "caret-right"} size="lg" color="white" />
+                            <FontAwesomeIcon icon={this.openLayout ? "caret-down" : "caret-right"} size="lg" color="white" />
+                        </div>
                     </div>
+                    {this.openLayout ? <div className="propertiesView-layout-content">{this.layoutPreview}</div> : null}
                 </div>
-                {this.openLayout ? <div className="propertiesView-layout-content">{this.layoutPreview}</div> : null}
-            </div>
-        </div>;
+            </div>;
+
+        }
     }
 } 
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 4051758f3cef5e353cb24c699f4594fa4be81758 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Tue, 4 Aug 2020 13:10:13 -0500
Subject: several UI changes and consistency updates around the system

---
 src/client/views/ContextMenu.scss                      |  5 ++++-
 src/client/views/DocumentButtonBar.scss                |  8 ++++++--
 src/client/views/DocumentButtonBar.tsx                 |  2 +-
 src/client/views/MainView.tsx                          |  4 ++--
 src/client/views/PropertiesButtons.tsx                 |  2 +-
 src/client/views/collections/CollectionLinearView.scss |  2 +-
 src/client/views/collections/CollectionMenu.tsx        |  2 +-
 src/client/views/collections/CollectionTreeView.scss   | 15 +++++++++++----
 .../collections/collectionFreeForm/PropertiesView.scss | 11 +++++++++++
 .../collections/collectionFreeForm/PropertiesView.tsx  |  4 ++--
 src/client/views/linking/LinkEditor.scss               |  3 ++-
 src/client/views/linking/LinkEditor.tsx                |  6 +++---
 src/client/views/nodes/DocumentLinksButton.scss        |  8 +++++++-
 src/client/views/nodes/DocumentLinksButton.tsx         |  8 ++++----
 src/client/views/nodes/FontIconBox.scss                |  5 +++++
 src/client/views/nodes/FontIconBox.tsx                 | 18 ++++++++----------
 16 files changed, 69 insertions(+), 34 deletions(-)

(limited to 'src/client/views/PropertiesButtons.tsx')

diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss
index 86e0a568a..7467bc043 100644
--- a/src/client/views/ContextMenu.scss
+++ b/src/client/views/ContextMenu.scss
@@ -7,7 +7,7 @@
     box-shadow: $intermediate-color 0.2vw 0.2vw 0.4vw;
     flex-direction: column;
     background: whitesmoke;
-    padding-top: 10px; 
+    padding-top: 10px;
     padding-bottom: 10px;
     border-radius: 15px;
     border: solid #BBBBBBBB 1px;
@@ -72,6 +72,7 @@
         margin-left: 5px;
     }
 }
+
 .contextMenu-description {
     // width: 11vw; //10vw
     background: whitesmoke;
@@ -100,6 +101,8 @@
     border-color: $intermediate-color; //  rgb(187, 186, 186);
     border-bottom-style: solid;
     border-top-style: solid;
+
+    cursor: pointer;
 }
 
 .contextMenu-itemSelected {
diff --git a/src/client/views/DocumentButtonBar.scss b/src/client/views/DocumentButtonBar.scss
index c2ca93900..09ae14016 100644
--- a/src/client/views/DocumentButtonBar.scss
+++ b/src/client/views/DocumentButtonBar.scss
@@ -64,9 +64,13 @@ $linkGap : 3px;
     text-align: center;
     border-radius: 50%;
     pointer-events: auto;
-    color: $dark-color;
-    border: $dark-color 1px solid;
+    background-color: $dark-color;
+    border: none;
     transition: 0.2s ease all;
+
+    &:hover {
+        background-color: $main-accent;
+    }
 }
 
 .documentButtonBar-linker:hover {
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index d45531b76..8748b1880 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -198,7 +198,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
         const isPinned = targetDoc && Doc.isDocPinned(targetDoc);
         return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : "Pin to presentation"}</div></>}>
             <div className="documentButtonBar-linker"
-                style={{ backgroundColor: isPinned ? "black" : "white", color: isPinned ? "white" : "black" }}
+                style={{ backgroundColor: isPinned ? "white" : "", color: isPinned ? "black" : "white", border: isPinned ? "black 1px solid " : "" }}
                 onClick={e => DockedFrameRenderer.PinDoc(targetDoc, isPinned)}>
                 <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin"
                 />
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index a544c52d2..e9b9be49d 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -553,7 +553,7 @@ export class MainView extends React.Component {
                 <div className="mainView-flyoutContainer" style={{ width: this.flyoutWidth }}>
                     {this.flyoutWidth !== 0 ? <div className="mainView-libraryHandle"
                         onPointerDown={this.onFlyoutPointerDown}
-                        style={{ backgroundColor: 'lightgrey' }}>
+                        style={{ backgroundColor: '#8c8b8b' }}>
                         <span title="library View Dragger" style={{
                             width: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "3vw",
                             //height: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "100vh",
@@ -561,7 +561,7 @@ export class MainView extends React.Component {
                             top: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "" : "0"
                         }} />
                         <div className="mainview-libraryHandle-icon">
-                            <FontAwesomeIcon icon="chevron-left" color="black" size="sm" />
+                            <FontAwesomeIcon icon="chevron-left" color="white" size="sm" />
                         </div>
                     </div> : null}
                     <div className="mainView-libraryFlyout" style={{
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 37ee3d9e0..c25d58c60 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -563,7 +563,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             title={<><div className="dash-tooltip">{this.selectedDoc?._fitToBox ? "Stop Fitting Content" : "Fit Content"}</div></>} placement="top">
             <div>
                 <div className={"propertiesButtons-linkButton-empty"}
-                    style={{ backgroundColor: this.selectedDoc?._fitToBox ? "#a0a0a0" : "" }}
+                    style={{ backgroundColor: this.selectedDoc?._fitToBox ? "white" : "" }}
                     onPointerDown={this.changeFitToBox}>
                     {<FontAwesomeIcon className="documentdecorations-icon"
                         color={this.selectedDoc?._fitToBox ? "black" : "white"}
diff --git a/src/client/views/collections/CollectionLinearView.scss b/src/client/views/collections/CollectionLinearView.scss
index b8b72e756..f5c4299a9 100644
--- a/src/client/views/collections/CollectionLinearView.scss
+++ b/src/client/views/collections/CollectionLinearView.scss
@@ -2,7 +2,7 @@
 @import "../_nodeModuleOverrides";
 
 .collectionLinearView-outer {
-    overflow: hidden;
+    overflow: visible;
     height: 100%;
 
     .collectionLinearView {
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 20df22846..53c2495d0 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -185,7 +185,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
         initialize: (button: Doc) => { button['target-docFilters'] = this.target._docFilters instanceof ObjectField ? ObjectField.MakeCopy(this.target._docFilters as any as ObjectField) : ""; },
     };
 
-    @computed get _freeform_commands() { return Doc.UserDoc().noviceMode ? [this._viewCommand, this._saveFilterCommand] : [this._viewCommand, this._saveFilterCommand, this._contentCommand, this._templateCommand, this._narrativeCommand]; }
+    @computed get _freeform_commands() { return Doc.UserDoc().noviceMode ? [this._viewCommand] : [this._viewCommand, this._saveFilterCommand, this._contentCommand, this._templateCommand, this._narrativeCommand]; }
     @computed get _stacking_commands() { return Doc.UserDoc().noviceMode ? undefined : [this._contentCommand, this._templateCommand]; }
     @computed get _masonry_commands() { return Doc.UserDoc().noviceMode ? undefined : [this._contentCommand, this._templateCommand]; }
     @computed get _schema_commands() { return Doc.UserDoc().noviceMode ? undefined : [this._templateCommand, this._narrativeCommand]; }
diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss
index 50f0534bd..c9bf82406 100644
--- a/src/client/views/collections/CollectionTreeView.scss
+++ b/src/client/views/collections/CollectionTreeView.scss
@@ -22,7 +22,7 @@
     ul {
         list-style: none;
         padding-left: 20px;
-        margin-bottom: 1px;// otherwise vertical scrollbars may pop up for no apparent reason....
+        margin-bottom: 1px; // otherwise vertical scrollbars may pop up for no apparent reason....
     }
 
 
@@ -35,7 +35,7 @@
         width: 15px;
         color: $intermediate-color;
         margin-top: 3px;
-        transform: scale(1.3, 1.3); 
+        transform: scale(1.3, 1.3);
         border: #80808030 1px solid;
         border-radius: 4px;
     }
@@ -67,8 +67,10 @@
     margin-left: 3px;
     display: none;
 }
+
 .collectionTreeView-keyHeader:hover {
     background: #797777;
+    cursor: pointer;
 }
 
 .collectionTreeView-subtitle {
@@ -89,8 +91,10 @@
     height: 17px;
     width: 15px;
 }
+
 .treeViewItem-openRight:hover {
     background: #797777;
+    cursor: pointer;
 }
 
 .treeViewItem-border {
@@ -106,10 +110,12 @@
     .editableView-container-editing-oneLine {
         min-width: 15px;
     }
+
     .documentView-node-topmost {
         width: unset;
     }
-    > svg {
+
+    >svg {
         display: none;
     }
 
@@ -119,7 +125,8 @@
     .collectionTreeView-keyHeader {
         display: inherit;
     }
-    > svg {
+
+    >svg {
         display: inherit;
     }
 
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index aede3842e..9560de2f5 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -641,4 +641,15 @@
             margin-top: 2px;
         }
     }
+}
+
+.editable-title {
+    border: none;
+    padding: 6px;
+    padding-bottom: 2px;
+
+
+    &:hover {
+        border: 0.75px solid rgb(122, 28, 28);
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index f04c5159c..e2e026ca2 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -358,13 +358,13 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     }
 
     @computed get editableTitle() {
-        return <EditableView
+        return <div className="editable-title"><EditableView
             key="editableView"
             contents={StrCast(this.selectedDoc?.title)}
             height={25}
             fontSize={14}
             GetValue={() => StrCast(this.selectedDoc?.title)}
-            SetValue={this.setTitle} />;
+            SetValue={this.setTitle} /> </div>;
     }
 
     @undoBatch
diff --git a/src/client/views/linking/LinkEditor.scss b/src/client/views/linking/LinkEditor.scss
index d26b7920a..7e6999cdc 100644
--- a/src/client/views/linking/LinkEditor.scss
+++ b/src/client/views/linking/LinkEditor.scss
@@ -89,7 +89,7 @@
             /* float: right; */
             border-radius: 7px;
             font-size: 9px;
-            background-color: black;
+            background: black;
             /* padding: 3px; */
             padding-top: 4px;
             padding-left: 7px;
@@ -100,6 +100,7 @@
 
             &:hover {
                 cursor: pointer;
+                background: grey;
             }
         }
     }
diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx
index 660afd4b9..75fc8bf85 100644
--- a/src/client/views/linking/LinkEditor.tsx
+++ b/src/client/views/linking/LinkEditor.tsx
@@ -287,7 +287,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
     @observable openDropdown: boolean = false;
     @observable showInfo: boolean = false;
     @computed get infoIcon() { if (this.showInfo) { return "chevron-up"; } return "chevron-down"; }
-    @observable private buttonColor: string = "black";
+    @observable private buttonColor: string = "";
 
 
     //@observable description = this.props.linkDoc.description ? StrCast(this.props.linkDoc.description) : "DESCRIPTION";
@@ -303,7 +303,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
         if (LinkManager.currentLink) {
             LinkManager.currentLink.description = value;
             this.buttonColor = "rgb(62, 133, 55)";
-            setTimeout(action(() => this.buttonColor = "black"), 750);
+            setTimeout(action(() => this.buttonColor = ""), 750);
             return true;
         }
     }
@@ -345,7 +345,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
                     ></input>
                 </div>
                 <div className="linkEditor-description-add-button"
-                    style={{ backgroundColor: this.buttonColor }}
+                    style={{ background: this.buttonColor }}
                     onPointerDown={this.onDown}>Set</div>
             </div></div>;
     }
diff --git a/src/client/views/nodes/DocumentLinksButton.scss b/src/client/views/nodes/DocumentLinksButton.scss
index 97e714cd5..9328fb96b 100644
--- a/src/client/views/nodes/DocumentLinksButton.scss
+++ b/src/client/views/nodes/DocumentLinksButton.scss
@@ -28,7 +28,13 @@
 }
 
 .documentLinksButton {
-    background-color: $link-color;
+    background-color: black;
+
+    &:hover {
+        background: $main-accent;
+        transform: scale(1.05);
+        cursor: pointer;
+    }
 }
 
 .documentLinksButton-endLink {
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index 4713ce447..7899ff0f0 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -181,7 +181,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
 
         const linkButton = <div ref={this._linkButton} style={{ minWidth: 20, minHeight: 20, position: "absolute", left: this.props.Offset?.[0] }}>
             <div className={"documentLinksButton"} style={{
-                backgroundColor: this.props.InMenu ? "black" : "",
+                backgroundColor: this.props.InMenu ? "" : "#add8e6",
                 color: this.props.InMenu ? "white" : "black",
                 width: this.props.InMenu ? "20px" : "30px", height: this.props.InMenu ? "20px" : "30px", fontWeight: "bold"
             }}
@@ -202,8 +202,8 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
                     link : links.length}
 
             </div>
-            {DocumentLinksButton.StartLink && this.props.InMenu && !this.props.StartLink &&
-                DocumentLinksButton.StartLink !== this.props.View ? <div className={"documentLinksButton-endLink"}
+            {this.props.InMenu && !this.props.StartLink && DocumentLinksButton.StartLink !== this.props.View ?
+                <div className={"documentLinksButton-endLink"}
                     style={{
                         width: this.props.InMenu ? "20px" : "30px", height: this.props.InMenu ? "20px" : "30px",
                         backgroundColor: DocumentLinksButton.StartLink ? "" : "grey",
@@ -218,7 +218,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
         </div>;
 
         return (!links.length) && !this.props.AlwaysOn ? (null) :
-            this.props.InMenu ?
+            this.props.InMenu && (DocumentLinksButton.StartLink || this.props.StartLink) ?
                 <Tooltip title={<><div className="dash-tooltip">{title}</div></>}>
                     {linkButton}
                 </Tooltip> : !!!DocumentLinksButton.EditLink && !this.props.InMenu ?
diff --git a/src/client/views/nodes/FontIconBox.scss b/src/client/views/nodes/FontIconBox.scss
index 5bdafd857..9709e1dbd 100644
--- a/src/client/views/nodes/FontIconBox.scss
+++ b/src/client/views/nodes/FontIconBox.scss
@@ -15,12 +15,17 @@
 
 .menuButton-round {
     border-radius: 100%;
+    background-color: black;
 
     .fontIconBox-label {
         margin-left: -10px; // button padding is 10px;
         bottom: 0;
         position: absolute;
     }
+
+    &:hover {
+        background-color: #aaaaa3;
+    }
 }
 
 .menuButton-square {
diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx
index eff5a4160..c0eb78d98 100644
--- a/src/client/views/nodes/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox.tsx
@@ -63,16 +63,14 @@ export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>(
         const color = StrCast(this.layoutDoc.color, this._foregroundColor);
         const backgroundColor = StrCast(this.layoutDoc._backgroundColor, StrCast(this.rootDoc.backgroundColor, this.props.backgroundColor?.(this.rootDoc)));
         const shape = StrCast(this.layoutDoc.iconShape, "round");
-        const button = <>
-            <button className={`menuButton-${shape}`} ref={this._ref} onContextMenu={this.specificContextMenu}
-                style={{ boxShadow: this.layoutDoc.ischecked ? `4px 4px 12px black` : undefined, backgroundColor }}>
-                <div className="menuButton-wrap">
-                    {<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>}
-                </div>
-            </button>
-        </>;
+        const button = <button className={`menuButton-${shape}`} ref={this._ref} onContextMenu={this.specificContextMenu}
+            style={{ boxShadow: this.layoutDoc.ischecked ? `4px 4px 12px black` : undefined, backgroundColor: this.layoutDoc.iconShape === "square" ? backgroundColor : "" }}>
+            <div className="menuButton-wrap">
+                {<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>}
+            </div>
+        </button>;
         return !this.layoutDoc.toolTip ? button :
             <Tooltip title={<div className="dash-tooltip">{StrCast(this.layoutDoc.toolTip)}</div>}>
                 {button}
-- 
cgit v1.2.3-70-g09d2


From 217bb86beceed8f48ffe81cea0dbc578cb57a431 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 5 Aug 2020 10:31:11 -0400
Subject: fixed some warnings/errors.  added tooltip for filter icon.

---
 .../apis/HypothesisAuthenticationManager.tsx       |  2 +-
 src/client/views/PropertiesButtons.tsx             | 28 +++----
 src/client/views/collections/CollectionMenu.tsx    | 48 ++++++------
 .../collectionGrid/CollectionGridView.tsx          |  2 +-
 src/client/views/nodes/WebBox.tsx                  |  2 +-
 src/client/views/search/SearchBox.tsx              | 85 +++++++++-------------
 src/server/websocket.ts                            |  3 +-
 7 files changed, 77 insertions(+), 93 deletions(-)

(limited to 'src/client/views/PropertiesButtons.tsx')

diff --git a/src/client/apis/HypothesisAuthenticationManager.tsx b/src/client/apis/HypothesisAuthenticationManager.tsx
index c3e8d2fff..bc95b5f9a 100644
--- a/src/client/apis/HypothesisAuthenticationManager.tsx
+++ b/src/client/apis/HypothesisAuthenticationManager.tsx
@@ -18,7 +18,7 @@ export default class HypothesisAuthenticationManager extends React.Component<{}>
     @observable private showPasteTargetState = false;
     @observable private success: Opt<boolean> = undefined;
     @observable private displayLauncher = true;
-    @observable private credentials: string;
+    @observable private credentials: string = "";
     private disposer: Opt<IReactionDisposer>;
 
     private set isOpen(value: boolean) {
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index d46c03470..033bd7791 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -28,7 +28,6 @@ import { GooglePhotos } from '../apis/google_docs/GooglePhotosClientUtils';
 import { ImageField } from '../../fields/URLField';
 import { undoBatch, UndoManager } from '../util/UndoManager';
 import { DocumentType } from '../documents/DocumentTypes';
-import { CollectionFreeFormView } from './collections/collectionFreeForm/CollectionFreeFormView';
 import { InkField } from '../../fields/InkField';
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
@@ -128,18 +127,19 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         const targetDoc = this.selectedDoc;
         const published = targetDoc && Doc.GetProto(targetDoc)[GoogleRef] !== undefined;
         const animation = this.isAnimatingPulse ? "shadow-pulse 1s linear infinite" : "none";
-        return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{`${published ? "Push" : "Publish"} to Google Docs`}</div></>}>
-            <div
-                className="propertiesButtons-linker"
-                style={{ animation }}
-                onClick={async () => {
-                    await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken();
-                    !published && runInAction(() => this.isAnimatingPulse = true);
-                    PropertiesButtons.hasPushedHack = false;
-                    targetDoc[Pushes] = NumCast(targetDoc[Pushes]) + 1;
-                }}>
-                <FontAwesomeIcon className="documentdecorations-icon" icon={published ? (this.pushIcon as any) : cloud} size={published ? "sm" : "xs"} />
-            </div></Tooltip>;
+        return !targetDoc ? (null) :
+            <Tooltip title={<><div className="dash-tooltip">{`${published ? "Push" : "Publish"} to Google Docs`}</div></>}>
+                <div className="propertiesButtons-linker"
+                    style={{ animation }}
+                    onClick={async () => {
+                        await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken();
+                        !published && runInAction(() => this.isAnimatingPulse = true);
+                        PropertiesButtons.hasPushedHack = false;
+                        targetDoc[Pushes] = NumCast(targetDoc[Pushes]) + 1;
+                    }}>
+                    <FontAwesomeIcon className="documentdecorations-icon" icon={published ? (this.pushIcon as any) : cloud} size={published ? "sm" : "xs"} />
+                </div>
+            </Tooltip>;
     }
 
     @computed
@@ -377,7 +377,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     @computed
     get onClickButton() {
         if (this.selectedDoc) {
-            return <Tooltip title={<><div className="dash-tooltip">Choose onClick behavior</div></>}>
+            return <Tooltip title={<div className="dash-tooltip">Choose onClick behavior</div>}>
                 <div className="propertiesButtons-linkFlyout">
                     <Flyout anchorPoint={anchorPoints.LEFT_TOP}
                         content={this.onClickFlyout}>
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index a7d2c07fa..4eb0088f6 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -1,37 +1,35 @@
 import React = require("react");
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon, FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
-import { action, computed, observable, reaction, runInAction, Lambda } from "mobx";
+import { Tooltip } from "@material-ui/core";
+import { action, computed, Lambda, observable, reaction, runInAction } from "mobx";
 import { observer } from "mobx-react";
-import { Doc, DocListCast, Opt, Field } from "../../../fields/Doc";
-import { BoolCast, Cast, StrCast, NumCast } from "../../../fields/Types";
-import AntimodeMenu from "../AntimodeMenu";
-import "./CollectionMenu.scss";
-import { undoBatch } from "../../util/UndoManager";
-import { CollectionViewType, CollectionView, COLLECTION_BORDER_WIDTH } from "./CollectionView";
-import { emptyFunction, setupMoveUpEvents, Utils } from "../../../Utils";
-import { DragManager } from "../../util/DragManager";
-import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
-import { List } from "../../../fields/List";
-import { EditableView } from "../EditableView";
+import { ColorState } from "react-color";
+import { Doc, DocListCast, Opt } from "../../../fields/Doc";
+import { Document } from "../../../fields/documentSchemas";
 import { Id } from "../../../fields/FieldSymbols";
-import { listSpec } from "../../../fields/Schema";
-import FormatShapePane from "./collectionFreeForm/FormatShapePane";
-import { ActiveFillColor, SetActiveInkWidth, ActiveInkColor, SetActiveBezierApprox, SetActiveArrowEnd, SetActiveArrowStart, SetActiveFillColor, SetActiveInkColor } from "../InkingStroke";
-import GestureOverlay from "../GestureOverlay";
 import { InkTool } from "../../../fields/InkField";
-import { DocumentType } from "../../documents/DocumentTypes";
-import { Document } from "../../../fields/documentSchemas";
-import { SelectionManager } from "../../util/SelectionManager";
-import { DocumentView } from "../nodes/DocumentView";
-import { ColorState } from "react-color";
+import { List } from "../../../fields/List";
 import { ObjectField } from "../../../fields/ObjectField";
-import RichTextMenu from "../nodes/formattedText/RichTextMenu";
 import { RichTextField } from "../../../fields/RichTextField";
+import { listSpec } from "../../../fields/Schema";
 import { ScriptField } from "../../../fields/ScriptField";
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { DocUtils } from "../../documents/Documents";
-import { Tooltip } from "@material-ui/core";
+import { BoolCast, Cast, NumCast, StrCast } from "../../../fields/Types";
+import { emptyFunction, setupMoveUpEvents, Utils } from "../../../Utils";
+import { DocumentType } from "../../documents/DocumentTypes";
 import { CurrentUserUtils } from "../../util/CurrentUserUtils";
+import { DragManager } from "../../util/DragManager";
+import { SelectionManager } from "../../util/SelectionManager";
+import { undoBatch } from "../../util/UndoManager";
+import AntimodeMenu from "../AntimodeMenu";
+import { EditableView } from "../EditableView";
+import GestureOverlay from "../GestureOverlay";
+import { ActiveFillColor, ActiveInkColor, SetActiveArrowEnd, SetActiveArrowStart, SetActiveBezierApprox, SetActiveFillColor, SetActiveInkColor, SetActiveInkWidth } from "../InkingStroke";
+import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView";
+import { DocumentView } from "../nodes/DocumentView";
+import RichTextMenu from "../nodes/formattedText/RichTextMenu";
+import "./CollectionMenu.scss";
+import { CollectionViewType, COLLECTION_BORDER_WIDTH } from "./CollectionView";
 
 @observer
 export default class CollectionMenu extends AntimodeMenu {
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
index 21f77e47b..e6ac7021a 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -240,7 +240,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
                 w: Math.min(w, this.numCols), // reduces width if greater than numCols
                 static: BoolCast(this.childLayoutPairs.find(({ layout }) => layout[Id] === i)?.layout.lockedPosition, false) // checks if the lock position item has been selected in the context menu
             })) :
-            this.savedLayoutList.map((layout, index) => Object.assign(layout, this.unflexedPosition(index)));
+            this.savedLayoutList.map((layout, index) => { Object.assign(layout, this.unflexedPosition(index)); return layout; });
     }
 
     /**
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 646a94aa7..3283f568a 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -536,7 +536,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
     highlight = (color: string) => {
         // creates annotation documents for current highlights
         const effectiveAcl = GetEffectiveAcl(this.props.Document);
-        const annotationDoc = [AclAddonly, AclEdit, AclAdmin].includes(effectiveAcl) && this.makeAnnotationDocument(color);
+        const annotationDoc = [AclAddonly, AclEdit, AclAdmin].includes(effectiveAcl) ? this.makeAnnotationDocument(color) : undefined;
         annotationDoc && this.addDocument?.(annotationDoc);
         return annotationDoc ?? undefined;
     }
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 097e6c4d9..812658b32 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -1,4 +1,5 @@
-import * as _ from "lodash";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Tooltip } from '@material-ui/core';
 import { action, computed, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -15,7 +16,6 @@ import { Docs } from '../../documents/Documents';
 import { DocumentType } from "../../documents/DocumentTypes";
 import { CurrentUserUtils } from '../../util/CurrentUserUtils';
 import { SetupDrag } from '../../util/DragManager';
-import { Scripting, _scriptingGlobals } from '../../util/Scripting';
 import { SearchUtil } from '../../util/SearchUtil';
 import { SelectionManager } from '../../util/SelectionManager';
 import { Transform } from '../../util/Transform';
@@ -24,7 +24,6 @@ import { ViewBoxBaseComponent } from "../DocComponent";
 import { DocumentView } from '../nodes/DocumentView';
 import { FieldView, FieldViewProps } from '../nodes/FieldView';
 import "./SearchBox.scss";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export const searchSchema = createSchema({
     id: "string",
@@ -771,57 +770,43 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                         <FontAwesomeIcon onPointerDown={SetupDrag(this.collectionRef, () => StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined)} icon={"search"} size="lg"
                             style={{ color: "black", padding: 1, left: 35, position: "relative" }} />
 
-                        <FontAwesomeIcon icon={"filter"} size="lg"
-                            style={{ cursor: "default", right: 20, padding: 1, left: 250, position: "relative", backgroundColor: this.filter ? "white" : "lightgray", color: this.filter ? "black" : "white" }}
-                            onPointerDown={e => { e.stopPropagation(); SetupDrag(this.collectionRef, () => StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined); }}
-                            onClick={action(() => {
-                                this.filter = !this.filter && !this.searchFullDB;
-                                if (this.filter === true && this.currentSelectedCollection !== undefined) {
-                                    this.currentSelectedCollection.props.Document._searchDocs = new List<Doc>(this.docsforfilter);
-                                    let newarray: Doc[] = [];
-                                    let docs: Doc[] = [];
-                                    docs = DocListCast(this.currentSelectedCollection.dataDoc[Doc.LayoutFieldKey(this.currentSelectedCollection.dataDoc)]);
-                                    while (docs.length > 0) {
-                                        newarray = [];
-                                        docs.forEach((d) => {
-                                            if (d.data !== undefined) {
-                                                d._searchDocs = new List<Doc>(this.docsforfilter);
-                                                const newdocs = DocListCast(d.data);
-                                                newdocs.forEach((newdoc) => {
-                                                    newarray.push(newdoc);
+                        <div style={{ cursor: "default", left: 250, position: "relative", }}>
+                            <Tooltip title={<div className="dash-tooltip" >only display documents matching search</div>} ><div>
+                                <FontAwesomeIcon icon={"filter"} size="lg"
+                                    style={{ padding: 1, backgroundColor: this.filter ? "white" : "lightgray", color: this.filter ? "black" : "white" }}
+                                    onPointerDown={e => { e.stopPropagation(); SetupDrag(this.collectionRef, () => StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined); }}
+                                    onClick={action(() => {
+                                        const dofilter = (currentSelectedCollection: DocumentView) => {
+                                            let docs = DocListCast(currentSelectedCollection.dataDoc[Doc.LayoutFieldKey(currentSelectedCollection.dataDoc)]);
+                                            while (docs.length > 0) {
+                                                const newarray: Doc[] = [];
+                                                docs.filter(d => d.data !== undefined).forEach((d) => {
+                                                    d._searchDocs = new List<Doc>(this.docsforfilter);
+                                                    newarray.push(...DocListCast(d.data));
                                                 });
+                                                docs = newarray;
                                             }
-                                        });
-                                        docs = newarray;
-                                    }
+                                        };
+                                        this.filter = !this.filter && !this.searchFullDB;
+                                        if (this.filter === true && this.currentSelectedCollection !== undefined) {
+                                            this.currentSelectedCollection.props.Document._searchDocs = new List<Doc>(this.docsforfilter);
 
-                                    this.currentSelectedCollection.props.Document._docFilters = new List<string>(Cast(this.props.Document._docFilters, listSpec("string"), []));
-                                    this.props.Document.selectedDoc = this.currentSelectedCollection.props.Document;
-                                }
-                                else if (this.filter === false && this.currentSelectedCollection !== undefined) {
-                                    let newarray: Doc[] = [];
-                                    let docs: Doc[] = [];
-                                    docs = DocListCast(this.currentSelectedCollection.dataDoc[Doc.LayoutFieldKey(this.currentSelectedCollection.dataDoc)]);
-                                    while (docs.length > 0) {
-                                        newarray = [];
-                                        docs.forEach((d) => {
-                                            if (d.data !== undefined) {
-                                                d._searchDocs = new List<Doc>();
-                                                const newdocs = DocListCast(d.data);
-                                                newdocs.forEach((newdoc) => {
-                                                    newarray.push(newdoc);
-                                                });
-                                            }
-                                        });
-                                        docs = newarray;
-                                    }
+                                            dofilter(this.currentSelectedCollection);
 
-                                    this.currentSelectedCollection.props.Document._searchDocs = new List<Doc>([]);
-                                    this.currentSelectedCollection.props.Document._docFilters = undefined;
-                                    this.props.Document.selectedDoc = undefined;
-                                }
-                            }
-                            )} />
+                                            this.currentSelectedCollection.props.Document._docFilters = new List<string>(Cast(this.props.Document._docFilters, listSpec("string"), []));
+                                            this.props.Document.selectedDoc = this.currentSelectedCollection.props.Document;
+                                        }
+                                        else if (this.filter === false && this.currentSelectedCollection !== undefined) {
+
+                                            dofilter(this.currentSelectedCollection);
+
+                                            this.currentSelectedCollection.props.Document._searchDocs = new List<Doc>([]);
+                                            this.currentSelectedCollection.props.Document._docFilters = undefined;
+                                            this.props.Document.selectedDoc = undefined;
+                                        }
+                                    }
+                                    )} />
+                            </div></Tooltip></div>
                         <input value={this.newsearchstring} autoComplete="off" onChange={this.onChange} type="text" placeholder="Search..." id="search-input" ref={this.inputRef}
                             className="searchBox-barChild searchBox-input" onPointerDown={this.openSearch} onKeyPress={this.enter} onFocus={this.openSearch}
                             style={{ padding: 1, paddingLeft: 20, paddingRight: 20, color: "black", height: 20, width: 250 }} />
diff --git a/src/server/websocket.ts b/src/server/websocket.ts
index 2c8ec090a..24371a997 100644
--- a/src/server/websocket.ts
+++ b/src/server/websocket.ts
@@ -16,6 +16,7 @@ import { DocumentsCollection } from "./IDatabase";
 import { Diff, GestureContent, MessageStore, MobileDocumentUploadContent, MobileInkOverlayContent, Transferable, Types, UpdateMobileInkOverlayPositionContent, YoutubeQueryInput, YoutubeQueryTypes } from "./Message";
 import { Search } from "./Search";
 import { resolvedPorts } from './server_Initialization';
+import { Opt } from "../fields/Doc";
 
 export namespace WebSocket {
 
@@ -31,7 +32,7 @@ export namespace WebSocket {
             if (socketPort) {
                 resolvedPorts.socket = Number(socketPort);
             }
-            let socketEndpoint: Server;
+            let socketEndpoint: Opt<Server>;
             await new Promise<void>(resolve => socketEndpoint = createServer(SSL.Credentials, app).listen(resolvedPorts.socket, resolve));
             io = sio(socketEndpoint!, SSL.Credentials as any);
         } else {
-- 
cgit v1.2.3-70-g09d2


From 0d6a6991ae39406f80530bcaaa6e5b328bd64b67 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Wed, 5 Aug 2020 12:59:07 -0500
Subject: UI changes and bug fixes found with UV

---
 src/client/util/CurrentUserUtils.ts                |  3 ++-
 src/client/util/SettingsManager.scss               | 20 ++++++++++++----
 src/client/util/SettingsManager.tsx                | 13 +++++-----
 src/client/views/MainView.tsx                      |  7 ++++++
 src/client/views/MainViewModal.tsx                 |  6 +----
 src/client/views/PropertiesButtons.tsx             | 28 +++++++++++++++++-----
 src/client/views/collections/CollectionMenu.tsx    |  9 +++----
 .../collectionFreeForm/PropertiesView.tsx          |  3 +--
 8 files changed, 60 insertions(+), 29 deletions(-)

(limited to 'src/client/views/PropertiesButtons.tsx')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 95e02b5fd..630952ccf 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -8,7 +8,7 @@ import { Doc, DocListCast, DocListCastAsync, DataSym } from "../../fields/Doc";
 import { List } from "../../fields/List";
 import { listSpec } from "../../fields/Schema";
 import { ScriptField, ComputedField } from "../../fields/ScriptField";
-import { Cast, PromiseValue, StrCast, NumCast } from "../../fields/Types";
+import { Cast, PromiseValue, StrCast, NumCast, BoolCast } from "../../fields/Types";
 import { nullAudio } from "../../fields/URLField";
 import { DragManager } from "./DragManager";
 import { Scripting } from "./Scripting";
@@ -891,6 +891,7 @@ export class CurrentUserUtils {
         doc.fontColor = StrCast(doc.fontColor, "black");
         doc.fontHighlight = StrCast(doc.fontHighlight, "");
         doc.defaultColor = StrCast(doc.defaultColor, "white");
+        doc.noviceMode = BoolCast(doc.noviceMode, true);
         doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); //
         doc["constants-dragThreshold"] = NumCast(doc["constants-dragThreshold"], 4); //
         Utils.DRAG_THRESHOLD = NumCast(doc["constants-dragThreshold"]);
diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
index 2a4a4241c..41bce8a1b 100644
--- a/src/client/util/SettingsManager.scss
+++ b/src/client/util/SettingsManager.scss
@@ -25,8 +25,15 @@
 .settings-title {
     font-size: 25px;
     font-weight: bold;
+    padding-right: 10px;
+    color: black;
+}
+
+.settings-username {
+    font-size: 14px;
     padding-right: 15px;
     color: black;
+    margin-top: 10px;
 }
 
 .settings-section {
@@ -94,7 +101,7 @@
         color: black;
         border-radius: 5px;
 
-        &:hover{
+        &:hover {
             cursor: pointer;
         }
     }
@@ -104,7 +111,8 @@
 
         .playground-check {
             margin-right: 5px;
-            &:hover{
+
+            &:hover {
                 cursor: pointer;
             }
         }
@@ -119,7 +127,7 @@
     margin-top: 2px;
     margin-right: 25px;
 
-    &:hover{
+    &:hover {
         cursor: pointer;
     }
 
@@ -162,7 +170,8 @@
             font-size: 9;
             margin-right: 6;
             border-radius: 5px;
-            &:hover{
+
+            &:hover {
                 cursor: pointer;
             }
         }
@@ -172,7 +181,8 @@
             color: black;
             font-size: 9;
             border-radius: 5px;
-            &:hover{
+
+            &:hover {
                 cursor: pointer;
             }
         }
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index a12cc2cb6..fce28a466 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -147,9 +147,9 @@ export default class SettingsManager extends React.Component<{}> {
 
         const passwordContent = <div className="password-content">
             <div className="password-content-inputs">
-                <input className="password-inputs" placeholder="current password" ref={this.curr_password_ref} />
-                <input className="password-inputs" placeholder="new password" ref={this.new_password_ref} />
-                <input className="password-inputs" placeholder="confirm new password" ref={this.new_confirm_ref} />
+                <input className="password-inputs" type="password" placeholder="current password" ref={this.curr_password_ref} />
+                <input className="password-inputs" type="password" placeholder="new password" ref={this.new_password_ref} />
+                <input className="password-inputs" type="password" placeholder="confirm new password" ref={this.new_confirm_ref} />
             </div>
             <div className="password-content-buttons">
                 {this.errorText ? <div className="error-text">{this.errorText}</div> : undefined}
@@ -233,7 +233,9 @@ export default class SettingsManager extends React.Component<{}> {
         return (<div className="settings-interface">
             <div className="settings-top">
                 <div className="settings-title">Settings</div>
-                <button onClick={() => window.location.assign(Utils.prepend("/logout"))}>
+                <div className="settings-username">{Doc.CurrentUserEmail}</div>
+                <button onClick={() => window.location.assign(Utils.prepend("/logout"))}
+                    style={{ right: 35, position: "absolute" }} >
                     {CurrentUserUtils.GuestWorkspace ? "Exit" : "Log Out"}
                 </button>
                 <div className="close-button" onClick={this.close}>
@@ -268,8 +270,7 @@ export default class SettingsManager extends React.Component<{}> {
                 isDisplayed={this.isOpen}
                 interactive={true}
                 closeOnExternalClick={this.close}
-                width={600}
-                height={340}
+                dialogueBoxStyle={{ width: "600px", height: "340px" }}
             />
         );
     }
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index bbf36a04f..4bbcddd79 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -315,6 +315,12 @@ export class MainView extends React.Component {
         if (this.panelContent === doc?.title) return "lightgrey";
 
         if (doc?.type === DocumentType.COL) {
+            if (doc.title === "Basic Item Creators" || doc.title === "sidebar-tools"
+                || doc.title === "sidebar-recentlyClosed" || doc.title === "sidebar-catalog"
+                || doc.title === "Mobile Uploads" || doc.title === "COLLECTION_PROTO"
+                || doc.title === "Advanced Item Prototypes" || doc.title === "all Creators") {
+                return "lightgrey";
+            }
             return StrCast(Doc.UserDoc().defaultColor);
         }
         if (this.darkScheme) {
@@ -450,6 +456,7 @@ export class MainView extends React.Component {
                     ContainingCollectionView={undefined}
                     ContainingCollectionDoc={undefined}
                     relative={true}
+                    forcedBackgroundColor={() => "lightgrey"}
                 />
             </div>
             {this.docButtons}</div>;
diff --git a/src/client/views/MainViewModal.tsx b/src/client/views/MainViewModal.tsx
index c7b752b60..19387f619 100644
--- a/src/client/views/MainViewModal.tsx
+++ b/src/client/views/MainViewModal.tsx
@@ -10,8 +10,6 @@ export interface MainViewOverlayProps {
     overlayStyle?: React.CSSProperties;
     dialogueBoxDisplayedOpacity?: number;
     overlayDisplayedOpacity?: number;
-    width?: number;
-    height?: number;
     closeOnExternalClick?: () => void; // the close method of a MainViewModal, triggered if there is a click on the overlay (closing the modal)
 }
 
@@ -31,9 +29,7 @@ export default class MainViewModal extends React.Component<MainViewOverlayProps>
                     style={{
                         borderColor: "black",
                         ...(p.dialogueBoxStyle || {}),
-                        opacity: p.isDisplayed ? dialogueOpacity : 0,
-                        width: this.props.width ? this.props.width : "auto",
-                        height: this.props.height ? this.props.height : "auto"
+                        opacity: p.isDisplayed ? dialogueOpacity : 0
                     }}
                 >{p.contents}</div>
                 <div
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index c25d58c60..14ea36dde 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -196,6 +196,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                         }
                     }}>
                     <FontAwesomeIcon className="documentdecorations-icon" size="lg"
+                        color="black"
                         style={{ WebkitAnimation: animation, MozAnimation: animation }}
                         icon={(() => {
                             switch (this.openHover) {
@@ -207,7 +208,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                         })()}
                     />
                 </div>
-                <div className="propertiesButtons-title">Fetch</div>
+                <div className="propertiesButtons-title" style={{ backgroundColor: "white", color: "black" }}>Fetch</div>
             </div>
         </Tooltip>;
     }
@@ -226,7 +227,11 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                     />
                 </div>
 
-                <div className="propertiesButtons-title">{Doc.isDocPinned(targetDoc) ? "Unpin" : "Pin"}</div>
+                <div className="propertiesButtons-title" style={{
+                    backgroundColor: Doc.isDocPinned(targetDoc) ? "white" : "black",
+                    color: Doc.isDocPinned(targetDoc) ? "black" : "white"
+                }}
+                >{Doc.isDocPinned(targetDoc) ? "Unpin" : "Pin"}</div>
             </div>
         </Tooltip>;
     }
@@ -339,11 +344,16 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                 "Unlock Position" : "Lock Position"}</div></>} placement="top">
             <div>
                 <div className={"propertiesButtons-linkButton-empty"}
+                    style={{ backgroundColor: BoolCast(this.selectedDoc?.lockedPosition) ? "white" : "" }}
                     onPointerDown={this.onLock} >
                     {<FontAwesomeIcon className="documentdecorations-icon"
+                        color={BoolCast(this.selectedDoc?.lockedPosition) ? "black" : "white"}
                         icon={BoolCast(this.selectedDoc?.lockedPosition) ? "unlock" : "lock"} size="lg" />}
                 </div>
-                <div className="propertiesButtons-title">Position </div>
+                <div className="propertiesButtons-title" style={{
+                    backgroundColor: BoolCast(this.selectedDoc?.lockedPosition) ? "white" : "black",
+                    color: BoolCast(this.selectedDoc?.lockedPosition) ? "black" : "white"
+                }}>Position </div>
             </div>
         </Tooltip>;
     }
@@ -535,13 +545,16 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             title={<><div className="dash-tooltip">{this.selectedDoc?.useClusters ? "Stop Showing Clusters" : "Show Clusters"}</div></>} placement="top">
             <div>
                 <div className={"propertiesButtons-linkButton-empty"}
-                    style={{ backgroundColor: this.selectedDoc?.useClusters ? "#a0a0a0" : "" }}
+                    style={{ backgroundColor: this.selectedDoc?.useClusters ? "white" : "" }}
                     onPointerDown={this.changeClusters}>
                     {<FontAwesomeIcon className="documentdecorations-icon"
                         color={this.selectedDoc?.useClusters ? "black" : "white"}
                         icon="braille" size="lg" />}
                 </div>
-                <div className="propertiesButtons-title"> clusters </div>
+                <div className="propertiesButtons-title" style={{
+                    backgroundColor: this.selectedDoc?.useClusters ? "white" : "black",
+                    color: this.selectedDoc?.useClusters ? "black" : "white"
+                }}> clusters </div>
             </div>
         </Tooltip>;
     }
@@ -569,7 +582,10 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                         color={this.selectedDoc?._fitToBox ? "black" : "white"}
                         icon="expand" size="lg" />}
                 </div>
-                <div className="propertiesButtons-title"> {this.selectedDoc?._fitToBox ? "unfit" : "fit"} </div>
+                <div className="propertiesButtons-title" style={{
+                    backgroundColor: this.selectedDoc?._fitToBox ? "white" : "black",
+                    color: this.selectedDoc?._fitToBox ? "black" : "white"
+                }}> {this.selectedDoc?._fitToBox ? "unfit" : "fit"} </div>
             </div>
         </Tooltip>;
     }
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 511735f2d..6eed4eba1 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -673,15 +673,16 @@ export class CollectionStackingViewChrome extends React.Component<CollectionMenu
             if (docs instanceof Doc) {
                 const keys = Object.keys(docs).filter(key => key.indexOf("title") >= 0 || key.indexOf("author") >= 0 ||
                     key.indexOf("creationDate") >= 0 || key.indexOf("lastModified") >= 0 ||
-                    (key[0].toUpperCase() === key[0] && key.substring(0, 3) !== "ACL"));
-                return keys.filter(key => key.toLowerCase().startsWith(value));
+                    (key[0].toUpperCase() === key[0] && key.substring(0, 3) !== "ACL" && key !== "UseCors" && key[0] !== "_"));
+                return keys.filter(key => key.toLowerCase().indexOf(value.toLowerCase()) > -1);
             } else {
                 const keys = new Set<string>();
                 docs.forEach(doc => Doc.allKeys(doc).forEach(key => keys.add(key)));
                 const noviceKeys = Array.from(keys).filter(key => key.indexOf("title") >= 0 ||
                     key.indexOf("author") >= 0 || key.indexOf("creationDate") >= 0 ||
-                    key.indexOf("lastModified") >= 0 || (key[0].toUpperCase() === key[0] && key.substring(0, 3) !== "ACL"));
-                return noviceKeys.filter(key => key.toLowerCase().startsWith(value));
+                    key.indexOf("lastModified") >= 0 || (key[0].toUpperCase() === key[0] &&
+                        key.substring(0, 3) !== "ACL" && key !== "UseCors" && key[0] !== "_"));
+                return noviceKeys.filter(key => key.toLowerCase().indexOf(value.toLowerCase()) > -1);
             }
         }
 
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index a6b1849b1..7f21c63da 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -161,7 +161,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             doc && Object.keys(doc).forEach(key => !(key in ids) && doc[key] !== ComputedField.undefined && (ids[key] = key));
             const rows: JSX.Element[] = [];
             for (const key of Object.keys(ids).slice().sort()) {
-                if ((key[0] === key[0].toUpperCase() && key.substring(0, 3) !== "ACL")
+                if ((key[0] === key[0].toUpperCase() && key.substring(0, 3) !== "ACL" && key !== "UseCors")
                     || key[0] === "#" || key === "author" ||
                     key === "creationDate" || key.indexOf("lastModified") !== -1) {
 
@@ -354,7 +354,6 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         />;
     }
 
-    @undoBatch
     @action
     toggleCheckbox = () => {
         this.layoutFields = !this.layoutFields;
-- 
cgit v1.2.3-70-g09d2


From fa0b28c300416621dec25407484fc2606a736e2a Mon Sep 17 00:00:00 2001
From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com>
Date: Thu, 6 Aug 2020 05:11:18 +0800
Subject: automatic text progressivize, ui changes, bug fixes

---
 src/client/documents/Documents.ts                  |   2 +
 src/client/views/PropertiesButtons.tsx             |  37 ++-
 .../views/collections/CollectionDockingView.scss   |   8 +-
 .../views/collections/CollectionDockingView.tsx    |   2 +-
 .../views/collections/CollectionStackingView.tsx   |  12 +-
 .../collectionFreeForm/CollectionFreeFormView.tsx  |   4 +-
 .../collectionFreeForm/PropertiesView.tsx          |   4 +-
 .../views/nodes/CollectionFreeFormDocumentView.tsx |  20 +-
 src/client/views/nodes/PresBox.scss                |  56 +++-
 src/client/views/nodes/PresBox.tsx                 | 337 ++++++++-------------
 .../views/nodes/formattedText/FormattedTextBox.tsx |  65 ++++
 .../views/presentationview/PresElementBox.scss     |  35 ++-
 .../views/presentationview/PresElementBox.tsx      |  49 ++-
 13 files changed, 386 insertions(+), 245 deletions(-)

(limited to 'src/client/views/PropertiesButtons.tsx')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 539341b62..57fcf3a00 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -129,6 +129,7 @@ export interface DocumentOptions {
     isLinkButton?: boolean;
     _columnWidth?: number;
     _fontSize?: string;
+    _fontWeight?: number;
     _fontFamily?: string;
     curPage?: number;
     currentTimecode?: number; // the current timecode of a time-based document (e.g., current time of a video)  value is in seconds
@@ -139,6 +140,7 @@ export interface DocumentOptions {
     appearFrame?: number; // the frame in which the document appears
     presTransition?: number; //the time taken for the transition TO a document
     presDuration?: number; //the duration of the slide in presentation view
+    presProgressivize?: boolean;
     // xArray?: number[];
     // yArray?: number[];
     borderRounding?: string;
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index d46c03470..7d8a75dda 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -30,6 +30,7 @@ import { undoBatch, UndoManager } from '../util/UndoManager';
 import { DocumentType } from '../documents/DocumentTypes';
 import { CollectionFreeFormView } from './collections/collectionFreeForm/CollectionFreeFormView';
 import { InkField } from '../../fields/InkField';
+import { PresBox } from './nodes/PresBox';
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -209,13 +210,44 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         const isPinned = targetDoc && Doc.isDocPinned(targetDoc);
         return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : "Pin to presentation"}</div></>}>
             <div className="propertiesButtons-linker"
-                style={{ backgroundColor: isPinned ? "white" : "", color: isPinned ? "black" : "white" }}
+                style={{ backgroundColor: isPinned ? "" : "white", color: isPinned ? "white" : "black" }}
                 onClick={e => DockedFrameRenderer.PinDoc(targetDoc, isPinned)}>
                 <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin"
                 />
             </div></Tooltip>;
     }
 
+    @computed
+    get pinWithViewButton() {
+        const targetDoc = this.selectedDoc;
+        const isPinned = targetDoc && Doc.isDocPinned(targetDoc);
+        if (targetDoc) {
+            const x = targetDoc._panX;
+            const y = targetDoc._panY;
+            const scale = targetDoc._viewScale;
+        }
+        return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Pin with this view"}</div></>}>
+            <div className="propertiesButtons-linker"
+                style={{ backgroundColor: "white", color: "black" }}
+                onClick={e => {
+                    if (targetDoc) {
+                        DockedFrameRenderer.PinDoc(targetDoc, false);
+                        const activeDoc = PresBox.Instance.childDocs[PresBox.Instance.childDocs.length - 1];
+                        const x = targetDoc._panX;
+                        const y = targetDoc._panY;
+                        const scale = targetDoc._viewScale;
+                        activeDoc.presPinView = true;
+                        activeDoc.presPinViewX = x;
+                        activeDoc.presPinViewY = y;
+                        activeDoc.presPinViewScale = scale;
+                    }
+                }}>
+                <div style={{ position: 'absolute', fontSize: 25, fontWeight: 700, transform: 'translate(42%, -7px)', color: 'rgba(0,0,0,0.2)' }}>V</div>
+                <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin" />
+            </div></Tooltip>;
+    }
+
+
     @computed
     get metadataButton() {
         //const view0 = this.view0;
@@ -607,6 +639,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             <div className="propertiesButtons-button">
                 {this.pinButton}
             </div>
+            <div className="propertiesButtons-button">
+                {this.pinWithViewButton}
+            </div>
             <div className="propertiesButtons-button">
                 {this.copyButton}
             </div>
diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
index 857f751d3..98babc3d2 100644
--- a/src/client/views/collections/CollectionDockingView.scss
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -45,7 +45,7 @@
 
         .miniPres-button-text {
             display: flex;
-            height: 30;
+            height: 20;
             font-weight: 400;
             min-width: 100%;
             border-radius: 5px;
@@ -55,15 +55,15 @@
         }
 
         .miniPres-divider {
-            width: 1px;
+            width: 0.5px;
             height: 80%;
             border-right: solid 2px #5a5a5a;
         }
 
         .miniPres-button {
             display: flex;
-            height: 30;
-            min-width: 30;
+            height: 20;
+            min-width: 20;
             border-radius: 100%;
             align-items: center;
             justify-content: center;
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 9c85bd0a2..bc88236dd 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -871,7 +871,7 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
     }
     renderMiniPres() {
         return <div className="miniPres" style={{
-            width: 400, height: 50, background: '#323232'
+            width: 250, height: 30, background: '#323232'
         }}>
             <div className="miniPresOverlay" >
                 <div className="miniPres-button" onClick={PresBox.Instance.back}><FontAwesomeIcon icon={"arrow-left"} /></div>
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index e00bdb065..fe3d57bdb 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -184,7 +184,7 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument)
         if (found) {
             const top = found.getBoundingClientRect().top;
             const localTop = this.props.ScreenToLocalTransform().transformPoint(0, top);
-            smoothScroll(doc.presTransition ? Number(doc.presTransition) : 500, this._mainCont!, localTop[1] + this._mainCont!.scrollTop);
+            smoothScroll(doc.presTransition || doc.presTransition === 0 ? NumCast(doc.presTransition) : 500, this._mainCont!, localTop[1] + this._mainCont!.scrollTop);
         }
         afterFocus && setTimeout(() => {
             if (afterFocus?.()) { }
@@ -291,20 +291,19 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument)
                 const docs = this.childDocList;
                 if (docs) {
                     newDocs.map((doc, i) => {
+                        console.log(doc.title);
                         if (i === 0) {
                             if (targInd === -1) targInd = docs.length;
                             else targInd = docs.indexOf(this.filteredChildren[targInd]);
                             const srcInd = docs.indexOf(doc);
                             docs.splice(srcInd, 1);
                             docs.splice((targInd > srcInd ? targInd - 1 : targInd) + plusOne, 0, doc);
-                        } else {
+                        } else if (i < (newDocs.length / 2)) { //glr: for some reason dragged documents are duplicated
                             if (targInd === -1) targInd = docs.length;
-                            else targInd = docs.indexOf(this.filteredChildren[targInd]);
+                            else targInd = docs.indexOf(newDocs[0]) + 1;
                             const srcInd = docs.indexOf(doc);
-                            const firstInd = docs.indexOf(newDocs[0]);
                             docs.splice(srcInd, 1);
-                            // docs.splice((targInd > srcInd ? targInd - 1 : targInd) + plusOne, 0, doc);
-                            docs.splice(firstInd + 1, 0, doc);
+                            docs.splice((targInd > srcInd ? targInd - 1 : targInd) + plusOne, 0, doc);
                         }
                     });
                 }
@@ -312,6 +311,7 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument)
         }
         return false;
     }
+
     @undoBatch
     @action
     onExternalDrop = async (e: React.DragEvent): Promise<void> => {
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 109808956..65cd28742 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -911,8 +911,8 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
             //     !doc.z && NumCast(this.layoutDoc.scale) < 1 && this.scaleAtPt(DocumentView._focusHack, 1); // [NumCast(doc.x), NumCast(doc.y)], 1);
             // } else {
             if (DocListCast(this.dataDoc[this.props.fieldKey]).includes(doc)) {
-                // glr: freeform transform speed can be set through user by adjusting for presentation transform
-                if (!doc.z) this.setPan(newPanX, newPanY, doc.presTransition ? `transform ${doc.presTransition}ms` : "transform 500ms", true); // docs that are floating in their collection can't be panned to from their collection -- need to propagate the pan to a parent freeform somehow
+                // glr: freeform transform speed can be set by adjusting presTransition field - needs a way of knowing when presentation is not active...
+                if (!doc.z) this.setPan(newPanX, newPanY, doc.presTransition || doc.presTransition === 0 ? `transform ${doc.presTransition}ms` : "transform 500ms", true); // docs that are floating in their collection can't be panned to from their collection -- need to propagate the pan to a parent freeform somehow
             }
             Doc.BrushDoc(this.props.Document);
             this.props.focus(this.props.Document);
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index 1f66d4144..035cd938e 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -865,7 +865,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         if (this.isPres) {
             return <div className="propertiesView" style={{ width: this.props.width }} >
                 <div className="propertiesView-title" style={{ width: this.props.width }}>
-                    Presentation Toolbar
+                    Presentation
                 <div className="propertiesView-title-icon" onPointerDown={this.props.onDown}>
                         <FontAwesomeIcon icon="times" color="black" size="sm" />
                     </div>
@@ -922,7 +922,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     <div className="propertiesView-sharing-title"
                         onPointerDown={() => runInAction(() => { this.openSlideOptions = !this.openSlideOptions; })}
                         style={{ backgroundColor: this.openSlideOptions ? "black" : "" }}>
-                        <FontAwesomeIcon icon={"cog"} /> &nbsp; {PresBox.Instance.stringType} options
+                        &nbsp; <FontAwesomeIcon icon={"cog"} /> &nbsp; {PresBox.Instance.stringType} options
                     <div className="propertiesView-sharing-title-icon">
                             <FontAwesomeIcon icon={this.openSlideOptions ? "caret-down" : "caret-right"} size="lg" color="white" />
                         </div>
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index c29547eac..35ed6c5a5 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -107,6 +107,15 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
         d["w-indexed"] = new List<number>(windexed);
         d["opacity-indexed"] = new List<number>(oindexed);
         d["scroll-indexed"] = new List<number>(scrollIndexed);
+        if (d.appearFrame) {
+            if (d.appearFrame === timecode + 1) {
+                d["text-color"] = "red";
+            } else if (d.appearFrame < timecode + 1) {
+                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) {
@@ -139,6 +148,15 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
             xindexed?.length <= timecode + 1 && xindexed.push(undefined as any as number);
             yindexed?.length <= timecode + 1 && yindexed.push(undefined as any as number);
             opacityindexed?.length <= timecode + 1 && opacityindexed.push(undefined as any as number);
+            if (doc.appearFrame) {
+                if (doc.appearFrame === timecode + 1) {
+                    doc["text-color"] = "red";
+                } else if (doc.appearFrame < timecode + 1) {
+                    doc["text-color"] = "grey";
+                } else { doc["text-color"] = "black"; }
+            } else if (doc.appearFrame === 0) {
+                doc["text-color"] = "black";
+            }
             doc.dataTransition = "all 1s";
         });
         setTimeout(() => docs.forEach(doc => doc.dataTransition = "inherit"), 1010);
@@ -166,7 +184,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
 
     public static setupKeyframes(docs: Doc[], timecode: number, progressivize: boolean = false) {
         docs.forEach((doc, i) => {
-            if (!doc.appearFrame) doc.appearFrame = i;
+            if (doc.appearFrame === undefined) doc.appearFrame = i;
             const curTimecode = progressivize ? i : timecode;
             const xlist = new List<number>(numberRange(timecode + 1).map(i => undefined) as any as number[]);
             const ylist = new List<number>(numberRange(timecode + 1).map(i => undefined) as any as number[]);
diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index 089f69873..16821f5bc 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -754,8 +754,6 @@
     }
 
     .presBox-button {
-        margin-right: 2.5px;
-        margin-left: 2.5px;
         height: 25px;
         border-radius: 5px;
         display: none;
@@ -787,13 +785,65 @@
         min-width: 100px;
         width: 100px;
         position: absolute;
-        right: 8px;
+        right: 10px;
 
         .present-icon {
             margin-right: 7px;
         }
     }
 
+        
+    .miniPresOverlay {
+        background-color: #323232;
+        color: white;
+        border-radius: 5px;
+        grid-template-rows: 100%;
+        height: 25;
+        width: 200;
+        justify-content: space-evenly;
+        align-items: center;
+        display: flex;
+        position: absolute;
+        right: 10px;
+
+        .miniPres-button-text {
+            display: flex;
+            height: 20;
+            width: max-content;
+            font-family: Roboto;
+            font-weight: 400;
+            letter-spacing: normal;
+            border-radius: 5px;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s;
+        }
+
+        .miniPres-divider {
+            width: 0.5px;
+            height: 80%;
+            border-right: solid 1px #5a5a5a;
+        }
+
+        .miniPres-button {
+            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;
+        }
+    }
+
 
 
     .collectionViewBaseChrome-viewPicker {
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index 2389d3875..1caefdc57 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -97,7 +97,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     @action
     next = () => {
         this.updateCurrentPresentation();
+        const activeNext = Cast(this.childDocs[this.itemIndex + 1], Doc, null);
         const presTargetDoc = Cast(this.childDocs[this.itemIndex].presentationTargetDoc, Doc, null);
+        const childDocs = DocListCast(presTargetDoc[Doc.LayoutFieldKey(presTargetDoc)]);
+        const currentFrame = Cast(presTargetDoc.currentFrame, "number", null);
         const lastFrame = Cast(presTargetDoc.lastFrame, "number", null);
         const curFrame = NumCast(presTargetDoc.currentFrame);
         let internalFrames: boolean = false;
@@ -107,8 +110,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             presTargetDoc._viewTransition = "all 1s";
             setTimeout(() => presTargetDoc._viewTransition = undefined, 1010);
             presTargetDoc.currentFrame = curFrame + 1;
+            if (presTargetDoc.scrollProgressivize) CollectionFreeFormDocumentView.updateScrollframe(presTargetDoc, currentFrame);
+            if (presTargetDoc.presProgressivize) CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0);
             if (presTargetDoc.zoomProgressivize) this.zoomProgressivizeNext(presTargetDoc);
-            // Case 2: No more frames in current doc and next slide is defined, therefore move to next slide
+            // Case 2: Audio or video therefore wait to play the audio or video before moving on
         } else if ((presTargetDoc.type === DocumentType.VID || presTargetDoc.type === DocumentType.AUDIO) && !this._moveOnFromAudio) {
             if (presTargetDoc.type === DocumentType.AUDIO) {
                 AudioBox.Instance.playFrom(0);
@@ -117,7 +122,15 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             if (presTargetDoc.type === DocumentType.VID) {
                 this._moveOnFromAudio = true;
             }
-        } else if (this.childDocs[this.itemIndex + 1] !== undefined) {
+            // Case 3: No more frames in current doc and next slide is defined, therefore move to next slide
+        } else if (activeNext !== undefined) {
+            if (!presTargetDoc.presProgressivize) {
+                const nextTagDoc = Cast(this.childDocs[this.itemIndex + 1].presentationTargetDoc, Doc, null);
+                const nextChildDocs = DocListCast(nextTagDoc[Doc.LayoutFieldKey(presTargetDoc)]);
+                nextChildDocs.forEach((doc, i) => {
+                    doc.opacity = 1;
+                })
+            }
             const nextSelected = this.itemIndex + 1;
             this.gotoDocument(nextSelected, this.itemIndex);
             this._moveOnFromAudio = false;
@@ -130,15 +143,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         this.updateCurrentPresentation();
         const docAtCurrent = this.childDocs[this.itemIndex];
         if (docAtCurrent) {
-            //check if any of the group members had used zooming in including the current document
-            //If so making sure to zoom out, which goes back to state before zooming action
             let prevSelected = this.itemIndex;
-            let didZoom = docAtCurrent.zoomButton;
-            // for (; !didZoom && prevSelected > 0 && this.childDocs[prevSelected].groupButton; prevSelected--) {
-            //     didZoom = this.childDocs[prevSelected].zoomButton;
-            // }
             prevSelected = Math.max(0, prevSelected - 1);
-
             this.gotoDocument(prevSelected, this.itemIndex);
         }
     }
@@ -159,19 +165,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                 const panelWidth: number = srcDocView.props.PanelWidth();
                 const panelHeight: number = srcDocView.props.PanelHeight();
                 console.log("srcDocView: " + srcDocView.props.PanelWidth());
-                // console.log("layoutdoc._width: " + layoutdoc._width);
-                // console.log("srcContext._width: " + srcContext._width);
                 const newPanX = NumCast(presTargetDoc.x) + NumCast(layoutdoc._width) / 2;
                 const newPanY = NumCast(presTargetDoc.y) + NumCast(layoutdoc._height) / 2;
-                // const newPanX = NumCast(presTargetDoc.x) + panelWidth / 2;
-                // const newPanY = NumCast(presTargetDoc.y) + panelHeight / 2;
                 let newScale = 0.9 * Math.min(Number(panelWidth) / vfWidth, Number(panelHeight) / vfHeight);
-                // srcContext._panX = newPanX + (NumCast(presTargetDoc._viewScale) * this.checkList(presTargetDoc, presTargetDoc["viewfinder-left-indexed"]) + NumCast(presTargetDoc._panX) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-width-indexed"]) / 2));
-                // srcContext._panY = newPanY + (NumCast(presTargetDoc._viewScale) * this.checkList(presTargetDoc, presTargetDoc["viewfinder-top-indexed"]) + NumCast(presTargetDoc._panY) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-height-indexed"]) / 2));
                 srcContext._panX = newPanX + (vfLeft + (vfWidth / 2));
                 srcContext._panY = newPanY + (vfTop + (vfHeight / 2));
-                // srcContext._panX = newPanX
-                // srcContext._panY = newPanY
                 srcContext._viewScale = newScale;
                 console.log("X: " + srcContext._panX + ", Y: " + srcContext._panY + ", Scale: " + srcContext._viewScale);
             }
@@ -203,9 +201,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             const tagDoc = Cast(curDoc.presentationTargetDoc, Doc, null);
             if (tagDoc) tagDoc.opacity = 1;
             if (curDoc.presHideTillShownButton) {
-                console.log("-------------hide before---------------");
-                console.log("this.itemIndex: " + this.itemIndex);
-                console.log("index: " + index)
                 if (index > this.itemIndex) {
                     tagDoc.opacity = 0;
                 } else if (!curDoc.presHideAfterButton) {
@@ -213,9 +208,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                 }
             }
             if (curDoc.presHideAfterButton) {
-                console.log("-------------hide after---------------");
-                console.log("this.itemIndex: " + (this.itemIndex + 1));
-                console.log("index: " + (index + 1))
                 if (index < this.itemIndex) {
                     tagDoc.opacity = 0;
                 } else if (!curDoc.presHideTillShownButton) {
@@ -225,73 +217,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         });
     }
 
-    @action
-    onHideAfterPresClick = () => {
-        this.childDocs.forEach((doc, index) => {
-            const curDoc = Cast(doc, Doc, null);
-            const tagDoc = Cast(curDoc.presentationTargetDoc, Doc, null);
-            if (curDoc.presHideAfterButton) {
-                if (index < this.itemIndex) {
-                    tagDoc.opacity = 0;
-                } else if (index = this.itemIndex) {
-                    tagDoc.opacity = 1;
-                }
-            }
-        });
-    }
-
-    /**
-     * This is the method that checks for the actions that need to be performed
-     * before the document has been presented, which involves 3 button options:
-     * Hide Until Presented, Hide After Presented, Fade After Presented
-     */
-    // @action
-    // hideDocumentInPres = () => {
-    //     this.updateCurrentPresentation();
-    //     this.childDocs.forEach((doc, i) => {
-    //         const tagDoc = Cast(doc.presentationTargetDoc, Doc, null);
-    //         console.log("HB: " + doc.presHideTillShownButton);
-    //         console.log("HA: " + doc.presHideAfterButton);
-    //         if (doc.presHideTillShownButton) {
-    //             if (i < this.itemIndex) {
-    //                 console.log(i + 1 + "hide before");
-    //                 tagDoc.opacity = 0;
-    //                 console.log(tagDoc.opacity);
-    //             } else {
-    //                 tagDoc.opacity = 1;
-    //             }
-    //         }
-    //         if (doc.presHideAfterButton) {
-    //             if (i > this.itemIndex) {
-    //                 console.log(i + 1 + "hide after");
-    //                 tagDoc.opacity = 0;
-    //                 console.log(tagDoc.opacity);
-    //             } else {
-    //                 tagDoc.opacity = 1;
-    //             }
-    //         }
-    //     });
-    // }
-
-    /**
-     * This is the method that checks for the actions that need to be performed
-     * after the document has been presented, which involves 3 button options:
-     * Hide Until Presented, Hide After Presented, Fade After Presented
-     */
-    // showAfterPresented = (index: number) => {
-    //     this.updateCurrentPresentation();
-    //     this.childDocs.forEach((doc, ind) => {
-    //         const presTargetDoc = doc.presentationTargetDoc as Doc;
-    //         //the order of cases is aligned based on priority
-    //         if (doc.presHideTillShownButton && ind <= index) {
-    //             presTargetDoc.opacity = 1;
-    //         }
-    //         if (doc.presHideAfterButton && ind < index) {
-    //             presTargetDoc.opacity = 0;
-    //         }
-    //     });
-    // }
-
     /**
      * This method makes sure that cursor navigates to the element that
      * has the option open and last in the group. If not in the group, and it has
@@ -310,24 +235,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                 if (srcContext) this.layoutDoc.presCollection = srcContext;
             } else if (targetDoc) this.layoutDoc.presCollection = targetDoc;
         }
-        if (srcContext) console.log("NC: " + srcContext.title);
-        if (presCollection) console.log("PC: " + presCollection.title);
         if (collectionDocView) {
-            if (activeItem.openDocument) {
-                collectionDocView.props.addDocTab(activeItem, "inPlace");
-            } else if (srcContext && srcContext !== presCollection) {
-                if (activeItem.openDocument) {
-                    collectionDocView.props.addDocTab(activeItem, "inPlace");
-                } else {
-                    console.log("Case 1: new srcContext inside of current collection so add a new tab to the current pres collection");
-                    console.log(collectionDocView);
-                    collectionDocView.props.addDocTab(srcContext, "inPlace");
-                }
+            if (srcContext && srcContext !== presCollection) {
+                // Case 1: new srcContext inside of current collection so add a new tab to the current pres collection
+                collectionDocView.props.addDocTab(srcContext, "inPlace");
             }
         }
-        if (targetDoc.presWebsiteData) {
-            targetDoc.data = targetDoc.presWebsiteData;
-        }
         // else if (srcContext) {
         //     console.log("Case 2: srcContext - not open and collection containing this document exists, so open collection that contains it and then await zooming in on document");
         //     this.props.addDocTab(srcContext, "onRight");
@@ -354,6 +267,17 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             //awaiting jump so that new scale can be found, since jumping is async
             targetDoc && await DocumentManager.Instance.jumpToDocument(targetDoc, willZoom, undefined, srcContext);
         }
+        if (activeItem.presPinView) {
+            targetDoc._panX = activeItem.presPinViewX;
+            targetDoc._panY = activeItem.presPinViewY;
+            targetDoc._viewScale = activeItem.presPinViewScale;
+        }
+        if (collectionDocView && activeItem.openDocument) {
+            collectionDocView.props.addDocTab(activeItem, "inPlace");
+        }
+        if (targetDoc.presWebsiteData) {
+            targetDoc.data = targetDoc.presWebsiteData;
+        }
     }
 
     //The function that is called when a document is clicked or reached through next or back.
@@ -381,6 +305,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     @observable _presTimer!: NodeJS.Timeout;
 
     //The function that starts or resets presentaton functionally, depending on status flag.
+    @undoBatch
     @action
     startOrResetPres = (startSlide: number) => {
         this.updateCurrentPresentation();
@@ -432,31 +357,15 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         this.turnOffEdit();
         if (srcContext) {
             if (srcContext.miniPres) {
-                document.removeEventListener("keydown", this.keyEvents, false);
+                document.removeEventListener("keydown", this.minimizeEvents, false);
                 srcContext.miniPres = false;
-                // Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc);
                 CollectionDockingView.AddRightSplit(this.rootDoc);
-                // this.layoutDoc.inOverlay = false;
             } else {
-                document.addEventListener("keydown", this.keyEvents, false);
+                document.addEventListener("keydown", this.minimizeEvents, false);
                 srcContext.miniPres = true;
                 this.props.addDocTab?.(this.rootDoc, "close");
-                // Doc.AddDocToList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc);
             }
         }
-        // if (srcContext) {
-        //     Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc);
-        //     CollectionDockingView.AddRightSplit(this.rootDoc);
-        //     this.layoutDoc.inOverlay = false;
-        // }
-        // else {
-        //         const pt = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0);
-        //         this.rootDoc.x = pt[0];// 500;//e.clientX + 25;
-        //         this.rootDoc.y = pt[1];////e.clientY - 25;
-        //         this.props.addDocTab?.(this.rootDoc, "close");
-        //         Doc.AddDocToList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc);
-        //     }
-        // }
     }
 
     @undoBatch
@@ -464,7 +373,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         //@ts-ignore
         const viewType = e.target.selectedOptions[0].value as CollectionViewType;
         viewType === CollectionViewType.Stacking && (this.rootDoc._pivotField = undefined); // pivot field may be set by the user in timeline view (or some other way) -- need to reset it here
-        // this.updateMinimize(this.rootDoc._viewType = viewType);
+        this.rootDoc._viewType = viewType;
         if (viewType === CollectionViewType.Stacking) this.layoutDoc._gridGap = 5;
     });
 
@@ -485,7 +394,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         } else if (movement === 'switch') {
             targetDoc.presTransition = 0;
             activeItem.presSwitchButton = !activeItem.presSwitchButton;
-            if (activeItem.presSwitchButton) activeItem.presMovement = 'Switch';
+            if (activeItem.presSwitchButton) activeItem.presMovement = 'Jump cut';
             else activeItem.presMovement = 'None';
         } else {
             activeItem.presMovement = 'None';
@@ -496,12 +405,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     });
 
     whenActiveChanged = action((isActive: boolean) => this.props.whenActiveChanged(this._isChildActive = isActive));
+    // For dragging documents into the presentation trail
     addDocumentFilter = (doc: Doc | Doc[]) => {
         const docs = doc instanceof Doc ? [doc] : doc;
         docs.forEach((doc, i) => {
             if (this.childDocs.includes(doc)) {
-                console.log(docs.length);
-                console.log(i + 1);
                 if (docs.length === i + 1) return false;
             } else {
                 doc.aliasOf instanceof Doc && (doc.presentationTargetDoc = doc.aliasOf);
@@ -574,33 +482,45 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         }
     }
 
+    @action
+    minimizeEvents = (e: KeyboardEvent) => {
+        e.stopPropagation();
+        e.preventDefault();
+        if (e.keyCode === 27) { // Escape key
+            this.layoutDoc.presStatus = "edit";
+        } if (e.keyCode === 37) { // left(37) / a(65) / up(38) to go back
+            this.back();
+        } if (e.keyCode === 39) { // right (39) / d(68) / down(40) to go to next
+            this.next();
+        }
+    }
+
     //Esc click
     @action
     keyEvents = (e: KeyboardEvent) => {
         e.stopPropagation();
         e.preventDefault();
-        // switch(e.keyCode) {
-        //     case 27: console.log("escape");
-        //     case 65 && (e.metaKey || e.altKey):
-        // }
-        // Escape key
-        if (e.keyCode === 27) {
+
+        if (e.keyCode === 27) { // Escape key
             if (this.layoutDoc.presStatus === "edit") this._selectedArray = [];
             else this.layoutDoc.presStatus = "edit";
-            // Ctrl-A to select all
-        } if ((e.metaKey || e.altKey) && e.keyCode === 65) {
+        } if ((e.metaKey || e.altKey) && e.keyCode === 65) { // Ctrl-A to select all
             if (this.layoutDoc.presStatus === "edit") this._selectedArray = this.childDocs;
-            // left(37) / a(65) / up(38) to go back
-        } if (e.keyCode === 37) {
+        } if (e.keyCode === 37) { // left(37) / a(65) / up(38) to go back
             if (this.layoutDoc.presStatus !== "edit") this.back();
-            // right (39) / d(68) / down(40) to go to next
-        } if (e.keyCode === 39) {
-            if (this.layoutDoc.presStatus !== "edit") this.next();
-            // spacebar to 'present' or go to next slide
-        } if (e.keyCode === 32) {
+        } if (e.keyCode === 39) { // right (39) / d(68) / down(40) to go to next
             if (this.layoutDoc.presStatus !== "edit") this.next();
+        } if (e.keyCode === 32) { // spacebar to 'present' or autoplay
+            if (this.layoutDoc.presStatus !== "edit") this.startOrResetPres(0);
             else this.layoutDoc.presStatus = "manual";
         }
+        if (e.keyCode === 8) { // delete selected items
+            if (this.layoutDoc.presStatus === "edit") {
+                this._selectedArray.forEach((doc, i) => {
+                    this.removeDocument(doc);
+                });
+            }
+        }
     }
 
     @observable private transitionTools: boolean = false;
@@ -617,7 +537,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     viewPaths = async () => {
         const srcContext = Cast(this.rootDoc.presCollection, Doc, null);
         if (this.pathBoolean) {
-            console.log("true");
             if (srcContext) {
                 this.togglePath();
                 srcContext._fitToBox = false;
@@ -625,7 +544,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                 srcContext.presPathView = false;
             }
         } else {
-            console.log("false");
             if (srcContext) {
                 this.togglePath();
                 srcContext._fitToBox = true;
@@ -633,13 +551,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                 srcContext.presPathView = true;
             }
         }
-        console.log("view paths");
         const viewType = srcContext?._viewType;
         const fit = srcContext?._fitToBox;
-
-        // if (!DocumentManager.Instance.getDocumentView(curPres)) {
-        //     CollectionDockingView.AddRightSplit(curPres);
-        // }
     }
 
     @computed get order() {
@@ -664,7 +577,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
 
     @computed get paths() {
         let pathPoints = "";
-        console.log(this.childDocs.length - 1);
         this.childDocs.forEach((doc, index) => {
             const targetDoc = Cast(doc.presentationTargetDoc, Doc, null);
             const srcContext = Cast(targetDoc.context, Doc, null);
@@ -678,7 +590,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                 else pathPoints = pathPoints + " " + 0 + "," + 0;
             }
         });
-        console.log(pathPoints);
         return (<polyline
             points={pathPoints}
             style={{
@@ -720,12 +631,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         }
     }
 
+    // WHAT IS THIS?
     @action
     dropdownToggle = (menu: string) => {
-        console.log('presBox' + menu + 'Dropdown');
         const dropMenu = document.getElementById('presBox' + menu + 'Dropdown');
-        console.log(dropMenu);
-        console.log(dropMenu?.style.display);
         if (dropMenu) dropMenu.style.display === 'none' ? dropMenu.style.display = 'block' : dropMenu.style.display = 'none';
     }
 
@@ -749,8 +658,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         if (activeItem && targetDoc) {
             const transitionSpeed = targetDoc.presTransition ? String(Number(targetDoc.presTransition) / 1000) : 0.5;
             const duration = targetDoc.presDuration ? String(Number(targetDoc.presDuration) / 1000) : 2;
-            const transitionThumbLocation = String(-9.48 * Number(transitionSpeed) + 93);
-            const durationThumbLocation = String(9.48 * Number(duration));
             const effect = targetDoc.presEffect ? targetDoc.presEffect : 'None';
             activeItem.presMovement = activeItem.presMovement ? activeItem.presMovement : 'Zoom';
             return (
@@ -767,7 +674,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                                 <div className={`presBox-dropdownOption ${activeItem.presMovement === 'None' ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.movementChanged('none')}>None</div>
                                 <div className={`presBox-dropdownOption ${activeItem.presMovement === 'Zoom' ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.movementChanged('zoom')}>Pan and Zoom</div>
                                 <div className={`presBox-dropdownOption ${activeItem.presMovement === 'Pan' ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.movementChanged('nav')}>Pan</div>
-                                <div className={`presBox-dropdownOption ${activeItem.presMovement === 'Switch' ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.movementChanged('switch')}>Switch</div>
+                                <div className={`presBox-dropdownOption ${activeItem.presMovement === 'Jump cut' ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.movementChanged('switch')}>Jump cut</div>
                             </div>
                         </div>
                         <div className="ribbon-doubleButton" style={{ display: activeItem.presMovement === 'Pan' || activeItem.presMovement === 'Zoom' ? "inline-flex" : "none" }}>
@@ -985,7 +892,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     }
 
     createNewSlide = (layout?: string, title?: string, freeform?: boolean) => {
-        console.log("whats going on?");
         let doc = undefined;
         if (layout) doc = this.createTemplate(layout);
         if (freeform && layout) doc = this.createTemplate(layout, title);
@@ -1019,7 +925,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         const content2 = Docs.Create.TextDocument("Click to change text", { title: "Column 2", _width: 185, _height: 140, x: 205, y: 80, _fontSize: "14pt" });
         switch (layout) {
             case 'blank':
-                doc = Docs.Create.FreeformDocument([], { title: input ? input : "Blank slide", _width: 400, _height: 225, _fitToBox: true, x: x, y: y });
+                doc = Docs.Create.FreeformDocument([], { title: input ? input : "Blank slide", _width: 400, _height: 225, x: x, y: y });
                 break;
             case 'title':
                 doc = Docs.Create.FreeformDocument([title, subtitle], { title: input ? input : "Title slide", _width: 400, _height: 225, _fitToBox: true, x: x, y: y });
@@ -1084,14 +990,14 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             CollectionFreeFormDocumentView.setupScroll(tagDoc, 0);
             CollectionFreeFormDocumentView.setupKeyframes(childDocs, 0);
         }
-        let lastFrame: number = 0;
-        childDocs.forEach((doc) => {
-            if (NumCast(doc.appearFrame) > lastFrame) lastFrame = NumCast(doc.appearFrame);
-        });
+        // let lastFrame: number = 0;
+        // childDocs.forEach((doc) => {
+        //     if (NumCast(doc.appearFrame) > lastFrame) lastFrame = NumCast(doc.appearFrame);
+        // });
         CollectionFreeFormDocumentView.updateScrollframe(tagDoc, currentFrame);
         CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0);
         tagDoc.currentFrame = Math.max(0, (currentFrame || 0) + 1);
-        tagDoc.lastFrame = Math.max(NumCast(tagDoc.currentFrame), lastFrame);
+        tagDoc.lastFrame = Math.max(NumCast(tagDoc.currentFrame), NumCast(tagDoc.lastFrame));
         if (tagDoc.zoomProgressivize) {
             const resize = document.getElementById('resizable');
             if (resize) {
@@ -1153,20 +1059,20 @@ 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={{ display: targetDoc.type === DocumentType.COL ? "inline-flex" : "none" }}>
+                            <div className="ribbon-doubleButton" style={{ display: targetDoc.type === DocumentType.COL && targetDoc._viewType === 'freeform' ? "inline-flex" : "none" }}>
                                 <div className="ribbon-button" style={{ backgroundColor: activeItem.presProgressivize ? "#aedef8" : "" }} onClick={this.progressivizeChild}>Child documents</div>
                                 <div className="ribbon-button" style={{ display: activeItem.presProgressivize ? "flex" : "none", backgroundColor: targetDoc.editProgressivize ? "#aedef8" : "" }} onClick={this.editProgressivize}>Edit</div>
                             </div>
-                            <div className="ribbon-doubleButton" style={{ display: targetDoc.type === DocumentType.COL || targetDoc.type === DocumentType.IMG ? "inline-flex" : "none" }}>
+                            <div className="ribbon-doubleButton" style={{ display: (targetDoc.type === DocumentType.COL && targetDoc._viewType === 'freeform') || targetDoc.type === DocumentType.IMG ? "inline-flex" : "none" }}>
                                 <div className="ribbon-button" style={{ backgroundColor: activeItem.zoomProgressivize ? "#aedef8" : "" }} onClick={this.progressivizeZoom}>Internal zoom</div>
                                 <div className="ribbon-button" style={{ display: activeItem.zoomProgressivize ? "flex" : "none", backgroundColor: targetDoc.editZoomProgressivize ? "#aedef8" : "" }} onClick={this.editZoomProgressivize}>Viewfinder</div>
                                 {/* <div className="ribbon-button" style={{ display: activeItem.zoomProgressivize ? "flex" : "none", backgroundColor: targetDoc.editSnapZoomProgressivize ? "#aedef8" : "" }} onClick={this.editSnapZoomProgressivize}>Snapshot</div> */}
                             </div>
-                            <div className="ribbon-doubleButton" style={{ display: targetDoc.type === DocumentType.RTF ? "inline-flex" : "none" }}>
+                            <div className="ribbon-doubleButton" style={{ display: targetDoc.type === DocumentType.COL && targetDoc._viewType === 'freeform' ? "inline-flex" : "none" }}>
                                 <div className="ribbon-button" onClick={this.progressivizeText}>Text progressivize</div>
                                 <div className="ribbon-button" style={{ display: activeItem.textProgressivize ? "flex" : "none", backgroundColor: targetDoc.editTextProgressivize ? "#aedef8" : "" }} onClick={this.editTextProgressivize}>Edit</div>
                             </div>
-                            <div className="ribbon-doubleButton" style={{ display: targetDoc.type === DocumentType.PDF ? "inline-flex" : "none" }}>
+                            <div className="ribbon-doubleButton" style={{ display: targetDoc._viewType === "stacking" || targetDoc.type === DocumentType.PDF || targetDoc.type === DocumentType.WEB || targetDoc.type === DocumentType.RTF ? "inline-flex" : "none" }}>
                                 <div className="ribbon-button" style={{ backgroundColor: activeItem.scrollProgressivize ? "#aedef8" : "" }} onClick={this.progressivizeScroll}>Scroll progressivize</div>
                                 <div className="ribbon-button" style={{ display: activeItem.scrollProgressivize ? "flex" : "none", backgroundColor: targetDoc.editScrollProgressivize ? "#aedef8" : "" }} onClick={this.editScrollProgressivize}>Edit</div>
                             </div>
@@ -1188,7 +1094,7 @@ 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-button" style={{ height: 20, backgroundColor: "#5a9edd" }} onClick={() => console.log("play frames")}>Play</div>
+                            <div className="ribbon-button" style={{ height: 20, backgroundColor: "#5a9edd" }} onClick={() => console.log(" TODO: play frames")}>Play</div>
                         </div>
                     </div>
                 </div>
@@ -1298,9 +1204,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
         const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]);
         targetDoc.presProgressivize = !targetDoc.presProgressivize;
-        console.log(targetDoc.presProgressivize);
         if (activeItem.presProgressivize) {
-            console.log("progressivize");
             targetDoc.currentFrame = 0;
             CollectionFreeFormDocumentView.setupKeyframes(docs, docs.length, true);
             targetDoc.lastFrame = docs.length - 1;
@@ -1350,9 +1254,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         const y: List<number> = ylist;
         const tags: JSX.Element[] = [];
         let pathPoints = ""; //List of all of the pathpoints that need to be added
-        // console.log(x);
-        // console.log(x.length);
-        // console.log(x[0]);
         for (let i = 0; i < x.length - 1; i++) {
             if (y[i] || x[i]) {
                 if (i === 0) pathPoints = (x[i] - 11) + "," + (y[i] + 33);
@@ -1630,7 +1531,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     @undoBatch
     @action
     nextAppearFrame = (doc: Doc, i: number): void => {
-        console.log("next");
         const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
         const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
         const appearFrame = Cast(doc.appearFrame, "number", null);
@@ -1638,9 +1538,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             doc.appearFrame = 0;
         }
         doc.appearFrame = appearFrame + 1;
-        const olist = new List<number>(numberRange(NumCast(targetDoc.lastFrame)).map(t => targetDoc.presProgressivize && t < (doc.appearFrame ? doc.appearFrame : i) ? 0 : 1));
-        doc["opacity-indexed"] = olist;
-        console.log(doc.appearFrame);
+        this.updateOpacityList(doc["opacity-indexed"], NumCast(doc.appearFrame));
     }
 
     @undoBatch
@@ -1654,9 +1552,32 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             doc.appearFrame = 0;
         }
         doc.appearFrame = Math.max(0, appearFrame - 1);
-        const olist = new List<number>(numberRange(NumCast(targetDoc.lastFrame)).map(t => targetDoc.presProgressivize && t < (doc.appearFrame ? doc.appearFrame : i) ? 0 : 1));
-        doc["opacity-indexed"] = olist;
-        console.log(doc.appearFrame);
+        this.updateOpacityList(doc["opacity-indexed"], NumCast(doc.appearFrame));
+    }
+
+    @action
+    updateOpacityList = (list: any, frame: number) => {
+        const x: List<number> = list;
+        if (x && x.length >= frame) {
+            for (let i = 0; i < x.length; i++) {
+                if (i < frame) {
+                    x[i] = 0;
+                } else if (i >= frame) {
+                    x[i] = 1;
+                }
+            }
+            list = x;
+        } else {
+            x.length = frame + 1;
+            for (let i = 0; i < x.length; i++) {
+                if (i < frame) {
+                    x[i] = 0;
+                } else if (i >= frame) {
+                    x[i] = 1;
+                }
+            }
+            list = x;
+        }
     }
 
     @computed get moreInfoDropdown() {
@@ -1746,37 +1667,37 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                     onPointerDown={e => e.stopPropagation()}
                     onChange={this.viewChanged}
                     value={mode}>
-                    {/* <option onPointerDown={e => e.stopPropagation()} value={CollectionViewType.Invalid}>Min</option> */}
                     <option onPointerDown={e => e.stopPropagation()} value={CollectionViewType.Stacking}>List</option>
-                    {/* <option onPointerDown={e => e.stopPropagation()} value={CollectionViewType.Time}>Time</option> */}
                     <option onPointerDown={e => e.stopPropagation()} value={CollectionViewType.Carousel}>Slides</option>
                 </select>
                 <div className="presBox-presentPanel">
-                    <span className={`presBox-button ${this.layoutDoc.presStatus !== "edit" ? "active" : ""}`} title={"Reset Presentation" + this.layoutDoc.presStatus ? "" : " From Start"} style={{ minWidth: 60, gridColumn: 2 }}>
-                        <div className="presBox-button-left" onClick={() => this.startOrResetPres(0)}>
-                            <FontAwesomeIcon icon={"clock"} /> &nbsp;
-                            <FontAwesomeIcon icon={this.layoutDoc.presStatus === "auto" ? "pause" : "play"} />
-                        </div>
-                        <div className={`presBox-button-right ${this.playTools ? "active" : ""}`} onClick={e => { e.stopPropagation; this.togglePlay(); }}>
-                            <FontAwesomeIcon className="dropdown" style={{ margin: 0, transform: this.playTools ? 'rotate(180deg)' : 'rotate(0deg)' }} icon={"angle-down"} />
-                            {this.playDropdown}
-                        </div>
-                    </span>
-                    <span className={`presBox-button ${this.layoutDoc.presStatus === "edit" ? "present" : ""}`} title="Present">
+                    <span className={`presBox-button ${this.layoutDoc.presStatus === "edit" ? "present" : ""}`}>
                         <div className="presBox-button-left" onClick={() => this.layoutDoc.presStatus = "manual"}><FontAwesomeIcon icon={"play-circle"} /> &nbsp; Present </div>
                         <div className={`presBox-button-right ${this.presentTools ? "active" : ""}`} onClick={e => { e.stopPropagation; this.togglePresent(); }}>
                             <FontAwesomeIcon className="dropdown" style={{ margin: 0, transform: this.presentTools ? 'rotate(180deg)' : 'rotate(0deg)' }} icon={"angle-down"} />
                             {this.presentDropdown}
                         </div>
                     </span>
-                    <div className={`presBox-button ${this.layoutDoc.presStatus !== "edit" ? "active" : ""}`} title="Back" onClick={this.back}>
-                        <FontAwesomeIcon icon={"arrow-left"} />
-                    </div>
-                    <div className={`presBox-button ${this.layoutDoc.presStatus !== "edit" ? "active" : ""}`} title="Next" onClick={this.next}>
-                        <FontAwesomeIcon icon={"arrow-right"} />
-                    </div>
-                    <div className={`presBox-button ${this.layoutDoc.presStatus !== "edit" ? "edit" : ""}`} title="Next" onClick={() => this.layoutDoc.presStatus = "edit"}>
-                        <FontAwesomeIcon icon={"times"} />
+                    <div className="miniPresOverlay" style={{ display: this.layoutDoc.presStatus !== "edit" ? "inline-flex" : "none" }}>
+                        {/* <span className={`presBox-button ${this.layoutDoc.presStatus !== "edit" ? "active" : ""}`}>
+                            <div className="presBox-button-left" onClick={() => this.startOrResetPres(0)}>
+                                <FontAwesomeIcon icon={"clock"} /> &nbsp;
+                                <FontAwesomeIcon icon={this.layoutDoc.presStatus === "auto" ? "pause" : "play"} />
+                            </div>
+                            <div className={`presBox-button-right ${this.playTools ? "active" : ""}`} onClick={e => { e.stopPropagation; this.togglePlay(); }}>
+                                <FontAwesomeIcon className="dropdown" style={{ margin: 0, transform: this.playTools ? 'rotate(180deg)' : 'rotate(0deg)' }} icon={"angle-down"} />
+                                {this.playDropdown}
+                            </div>
+                        </span> */}
+                        <div className="miniPres-button" onClick={this.back}><FontAwesomeIcon icon={"arrow-left"} /></div>
+                        <div className="miniPres-button" onClick={() => this.startOrResetPres(this.itemIndex)}><FontAwesomeIcon icon={PresBox.Instance.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}</div>
+                        <div className="miniPres-divider"></div>
+                        <div className="miniPres-button" onClick={() => this.layoutDoc.presStatus = "edit"}>
+                            <FontAwesomeIcon icon={"times"} />
+                        </div>
                     </div>
                 </div>
             </div>
@@ -1809,14 +1730,4 @@ Scripting.addGlobal(function lookupPresBoxField(container: Doc, field: string, d
     if (field === '_itemIndex') return container._itemIndex;
     if (field === 'presBox') return container;
     return undefined;
-});
-
-
-
-// console.log("render = " + this.layoutDoc.title + " " + this.layoutDoc.presStatus);
-// const presOrderedDocs = DocListCast(activeItem.presOrderedDocs);
-// if (presOrderedDocs.length != this.childDocs.length || presOrderedDocs.some((pd, i) => pd !== this.childDocs[i])) {
-//     this.rootDoc.presOrderedDocs = new List<Doc>(this.childDocs.slice());
-// }
-
-
+});
\ No newline at end of file
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index fc65f34eb..76d23ddfe 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -536,6 +536,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
                 Doc.AddDocToList(Cast(Doc.UserDoc()["template-notes"], Doc, null), "data", this.rootDoc);
             }, icon: "eye"
         });
+        appearanceItems.push({ description: "Create progressivized slide...", event: this.progressivizeText, icon: "desktop" });
         cm.addItem({ description: "Appearance...", subitems: appearanceItems, icon: "eye" });
 
         const options = cm.findByDescription("Options...");
@@ -547,6 +548,69 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
         this._downX = this._downY = Number.NaN;
     }
 
+    progressivizeText = () => {
+        const list = this.ProseRef?.getElementsByTagName("li");
+        const mainBulletText: string[] = [];
+        const mainBulletList: Doc[] = [];
+        if (list) {
+            const newBullets: Doc[] = this.recursiveProgressivize(1, list);
+            mainBulletList.push.apply(mainBulletList, newBullets);
+        }
+        console.log(mainBulletList.length);
+        const title = Docs.Create.TextDocument(StrCast(this.rootDoc.title), { title: "Title", _width: 800, _height: 70, x: 20, y: -10, _fontSize: '20pt', backgroundColor: "rgba(0,0,0,0)", appearFrame: 0, _fontWeight: 700 });
+        mainBulletList.push(title);
+        const doc = Docs.Create.FreeformDocument(mainBulletList, {
+            title: StrCast(this.rootDoc.title),
+            x: NumCast(this.props.Document.x), y: NumCast(this.props.Document.y) + NumCast(this.props.Document._height) + 10,
+            _width: 400, _height: 225, _fitToBox: true,
+        });
+        this.props.addDocument?.(doc);
+    }
+
+    recursiveProgressivize = (nestDepth: number, list: HTMLCollectionOf<HTMLLIElement>, d?: number, y?: number, before?: string): Doc[] => {
+        const mainBulletList: Doc[] = [];
+        let b = d ? d : 0;
+        let yLoc = y ? y : 0;
+        let nestCount = 0;
+        let count: string = before ? before : '';
+        const fontSize: string = (16 - (nestDepth * 2)) + 'pt';
+        const xLoc: number = (nestDepth * 20);
+        const width: number = 390 - xLoc;
+        const height: number = 55 - (nestDepth * 5);
+        for (let i = 0; i < list.length; i++) {
+            const mainBullets: number = Number(list[i].getAttribute("data-bulletstyle"));
+            if (mainBullets === nestDepth) {
+                if (list[i].childElementCount > 1) {
+                    b++;
+                    nestCount++;
+                    count = before ? count + nestCount + "." : nestCount + ".";
+                    yLoc += height;
+                    const text = list[i].getElementsByTagName("p")[0].innerText;
+                    const length = text.length;
+                    console.log(yLoc);
+                    const bullet1 = Docs.Create.TextDocument(count + " " + text, { title: "Slide text", _width: width, _height: height, x: xLoc, y: 10 + (yLoc), _fontSize: fontSize, backgroundColor: "rgba(0,0,0,0)", appearFrame: d ? d : b });
+                    mainBulletList.push(bullet1);
+                    const newList = this.recursiveProgressivize(nestDepth + 1, list[i].getElementsByTagName("li"), b, yLoc, count);
+                    mainBulletList.push.apply(mainBulletList, newList);
+                    b += newList.length;
+                    yLoc += newList.length * (55 - ((nestDepth + 1) * 5));
+                } else {
+                    b++;
+                    nestCount++;
+                    count = before ? count + nestCount + "." : nestCount + ".";
+                    yLoc += height;
+                    const text = list[i].innerText;
+                    const length = text.length;
+                    console.log(yLoc);
+                    const bullet1 = Docs.Create.TextDocument(count + " " + text, { title: "Slide text", _width: width, _height: height, x: xLoc, y: 10 + (yLoc), _fontSize: fontSize, backgroundColor: "rgba(0,0,0,0)", appearFrame: d ? d : b });
+                    mainBulletList.push(bullet1);
+                }
+            }
+        }
+        console.log("b: " + b);
+        return mainBulletList;
+    }
+
     recordDictation = () => {
         DictationManager.Controls.listen({
             interimHandler: this.setCurrentBulletContent,
@@ -1374,6 +1438,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
                         color: this.props.color ? this.props.color : StrCast(this.layoutDoc[this.props.fieldKey + "-color"], this.props.hideOnLeave ? "white" : "inherit"),
                         pointerEvents: interactive ? undefined : "none",
                         fontSize: Cast(this.layoutDoc._fontSize, "string", null),
+                        fontWeight: Cast(this.layoutDoc._fontWeight, "number", null),
                         fontFamily: StrCast(this.layoutDoc._fontFamily, "inherit"),
                         transition: "opacity 1s"
                     }}
diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss
index 159cb5f8a..fa70b2a41 100644
--- a/src/client/views/presentationview/PresElementBox.scss
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -2,7 +2,8 @@
     display: grid;
     grid-template-columns: max-content max-content max-content;
     background-color: #d5dce2;
-    // box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
+    font-family: Roboto;
+    letter-spacing: normal;
     position: relative;
     pointer-events: all;
     width: 100%;
@@ -21,13 +22,30 @@
 
     .presElementBox-highlight {
         position: absolute;
-        transform: translate(-100px, -6px);
+        transform: translate(-100px, -4px);
         z-index: -1;
         width: calc(100% + 200px);
-        height: calc(100% + 12px);
+        height: calc(100% + 8px);
         background-color: #AEDDF8;
     }
 
+    .presElementBox-highlightTop {
+        position: absolute;
+        transform: translate(-100px, -4px);
+        z-index: -1;
+        width: calc(100% + 200px);
+        height: calc(50% + 4px);
+    }
+
+    .presElementBox-highlightBottom {
+        position: absolute;
+        transform: translate(-100px, 0px);
+        z-index: -1;
+        top: 50%;
+        width: calc(100% + 200px);
+        height: calc(50% + 4px);
+    }
+
     .documentView-node {
         position: absolute;
         z-index: 1;
@@ -79,8 +97,12 @@
 
 .presElementBox-number {
     font-size: 12px;
+    width: 20;
     font-weight: 700;
-    left: -15;
+    text-align: right;
+    justify-content: center;
+    align-content: center;
+    left: -20;
     position: absolute;
     display: inline-block;
     overflow: hidden;
@@ -110,9 +132,8 @@
     font-size: 10;
     font-weight: 300;
     font-family: Roboto;
-    /* font-style: italic; */
+    z-index: 300;
     letter-spacing: normal;
-    /* left: 10px; */
 }
 
 .presElementBox-embedded {
@@ -174,7 +195,7 @@
     bottom: 3px;
     width: 20px;
     height: 20px;
-    z-index: 200;
+    z-index: 300;
     display: flex;
     background-color: black;
     color: white;
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index b3d8cca98..e035ed0b8 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -220,7 +220,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
         let durationInS: number;
         if (this.targetDoc.presDuration) durationInS = NumCast(this.targetDoc.presDuration) / 1000;
         else durationInS = 2;
-        return "V: " + durationInS + "s";
+        return "D: " + durationInS + "s";
     }
 
     @computed get transition() {
@@ -245,25 +245,61 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
         }
     }
 
+    headerUp = (e: React.PointerEvent<HTMLDivElement>) => {
+        e.stopPropagation();
+        e.preventDefault();
+        DragManager.docsBeingDragged = [];
+        this._highlightTopRef.current!.style.borderBottom = "0px";
+        this._highlightBottomRef.current!.style.borderBottom = "0px";
+    }
+
     startDrag = (e: PointerEvent, down: number[], delta: number[]) => {
         // const ele: HTMLElement[] = PresBox.Instance._eleArray.map(doc => doc);
         const activeItem = this.rootDoc;
         const dragData = new DragManager.DocumentDragData(PresBox.Instance.sortArray().map(doc => doc));
         // let value = this.getValue(this._heading);
         // value = typeof value === "string" ? `"${value}"` : value;
+        let dragItem: HTMLElement[] = [];
+        PresBox.Instance._dragArray.map(ele => {
+            const drag = ele;
+            drag.style.backgroundColor = "#d5dce2";
+            drag.style.borderRadius = '5px';
+            dragItem.push(drag);
+        });
         if (activeItem) {
-            DragManager.StartDocumentDrag(PresBox.Instance._dragArray.map(ele => ele), dragData, e.clientX, e.clientY);
+            DragManager.StartDocumentDrag(dragItem.map(ele => ele), dragData, e.clientX, e.clientY);
             activeItem.dragging = true;
             return true;
         }
         return false;
     }
 
+    private _highlightTopRef: React.RefObject<HTMLDivElement> = React.createRef();
+    private _highlightBottomRef: React.RefObject<HTMLDivElement> = React.createRef();
 
 
+    onPointerTop = (e: React.PointerEvent<HTMLDivElement>) => {
+        if (DragManager.docsBeingDragged.length > 0) {
+            this._highlightTopRef.current!.style.borderTop = "solid 2px #5B9FDD";
+        }
+    }
+
+    onPointerBottom = (e: React.PointerEvent<HTMLDivElement>) => {
+        if (DragManager.docsBeingDragged.length > 0) {
+            this._highlightBottomRef.current!.style.borderBottom = "solid 2px #5B9FDD";
+        }
+    }
+
+    onPointerLeave = (e: React.PointerEvent<HTMLDivElement>) => {
+        if (DragManager.docsBeingDragged.length > 0) {
+            this._highlightBottomRef.current!.style.borderBottom = "0px";
+            this._highlightTopRef.current!.style.borderTop = "0px";
+        }
+    }
+
     render() {
         const treecontainer = this.props.ContainingCollectionDoc?._viewType === CollectionViewType.Tree;
-        const className = "presElementBox-item" + (this.itemIndex === this.indexInPres ? " presElementBox-active" : "");
+        const className = "presElementBox-item" + (PresBox.Instance._selectedArray.includes(this.rootDoc) ? " presElementBox-active" : "");
         const pbi = "presElementBox-interaction";
         return !(this.rootDoc instanceof Doc) || this.targetDoc instanceof Promise ? (null) : (
             <div className={className} key={this.props.Document[Id] + this.indexInPres}
@@ -288,6 +324,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                     }
                 }}
                 onPointerDown={this.headerDown}
+                onPointerUp={this.headerUp}
             >
                 <>
                     <div className="presElementBox-number">
@@ -297,7 +334,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                         {`${this.targetDoc?.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 of visibility"}</div></>}><div className="presElementBox-time" style={{ display: PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>{this.duration}</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">{"Remove from presentation"}</div></>}><div
                         className="presElementBox-closeIcon"
                         // onPointerDown={e => e.stopPropagation()}
@@ -311,7 +348,9 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                         <FontAwesomeIcon icon={(this.rootDoc.presExpandInlineButton ? "angle-up" : "angle-down")} onPointerDown={e => e.stopPropagation()} />
                     </div></Tooltip>
                 </>
-                <div className="presElementBox-highlight" style={{ display: PresBox.Instance._selectedArray.includes(this.rootDoc) ? "block" : "none" }} />
+                <div ref={this._highlightTopRef} onPointerOver={this.onPointerTop} onPointerLeave={this.onPointerLeave} className="presElementBox-highlightTop" style={{ zIndex: 299, backgroundColor: "rgba(0,0,0,0)" }} />
+                <div ref={this._highlightBottomRef} onPointerOver={this.onPointerBottom} onPointerLeave={this.onPointerLeave} className="presElementBox-highlightBottom" style={{ zIndex: 299, backgroundColor: "rgba(0,0,0,0)" }} />
+                <div className="presElementBox-highlight" style={{ backgroundColor: PresBox.Instance._selectedArray.includes(this.rootDoc) ? "#AEDDF8" : "rgba(0,0,0,0)" }} />
                 <div className="presElementBox-buttons" style={{ display: this.rootDoc.presExpandInlineButton ? "grid" : "none" }}>
                     <button title="Zoom" className={pbi + (this.rootDoc.presZoomButton ? "-selected" : "")} onClick={this.onZoomDocumentClick}><FontAwesomeIcon icon={"search"} onPointerDown={e => e.stopPropagation()} /></button>
                     <button title="Navigate" className={pbi + (this.rootDoc.presNavButton ? "-selected" : "")} onClick={this.onNavigateDocumentClick}><FontAwesomeIcon icon={"location-arrow"} onPointerDown={e => e.stopPropagation()} /></button>
-- 
cgit v1.2.3-70-g09d2


From 6d788ba96d611d580605b87d0e3658f61c57f46e Mon Sep 17 00:00:00 2001
From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com>
Date: Thu, 6 Aug 2020 14:36:48 +0800
Subject: small ui updates for uniformity

---
 src/client/views/PropertiesButtons.tsx                 | 9 +++++++--
 src/client/views/collections/CollectionDockingView.tsx | 3 +--
 2 files changed, 8 insertions(+), 4 deletions(-)

(limited to 'src/client/views/PropertiesButtons.tsx')

diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 29afd447f..642476bc3 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -245,7 +245,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
         }
         return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Pin with this view"}</div></>}>
             <div className="propertiesButtons-linker"
-                style={{ backgroundColor: "white", color: "black" }}
+                style={{ backgroundColor: "black", color: "white" }}
                 onClick={e => {
                     if (targetDoc) {
                         DockedFrameRenderer.PinDoc(targetDoc, false);
@@ -259,8 +259,13 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                         activeDoc.presPinViewScale = scale;
                     }
                 }}>
-                <div style={{ position: 'absolute', fontSize: 25, fontWeight: 700, transform: 'translate(42%, -7px)', color: 'rgba(0,0,0,0.2)' }}>V</div>
                 <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin" />
+                <div style={{ position: 'relative', fontSize: 25, fontWeight: 700, transform: 'translate(42%, -7px)', color: 'rgba(0,0,0,0.2)' }}>V</div>
+                <div className="propertiesButtons-title" style={{
+                    backgroundColor: "black",
+                    color: "white"
+                }}
+                >{"Pin with view"}</div>
             </div></Tooltip>;
     }
 
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 6d4a7f311..af701bfdd 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -873,13 +873,12 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
         return <div className="miniPres" style={{
             width: 250, height: 30, background: '#323232'
         }}>
-            <div className="miniPresOverlay" >
+            <div className="miniPresOverlay" onClick={() => document.addEventListener("keydown", PresBox.Instance.minimizeEvents, false)}>
                 <div className="miniPres-button" onClick={PresBox.Instance.back}><FontAwesomeIcon icon={"arrow-left"} /></div>
                 <div className="miniPres-button" onClick={() => PresBox.Instance.startOrResetPres(PresBox.Instance.itemIndex)}><FontAwesomeIcon icon={PresBox.Instance.layoutDoc.presStatus === "auto" ? "pause" : "play"} /></div>
                 <div className="miniPres-button" onClick={PresBox.Instance.next}><FontAwesomeIcon icon={"arrow-right"} /></div>
                 <div className="miniPres-divider"></div>
                 <div className="miniPres-button-text">Slide {PresBox.Instance.itemIndex + 1} / {PresBox.Instance.childDocs.length}</div>
-                {/* <div className="miniPres-button-text">{this.getCurrentFrame}</div> */}
                 <div className="miniPres-divider"></div>
                 <div className="miniPres-button-text" onClick={PresBox.Instance.updateMinimize}>EXIT</div>
             </div>
-- 
cgit v1.2.3-70-g09d2


From 0bd77219c2f470f5b2a8680cf9712f5947f22bd1 Mon Sep 17 00:00:00 2001
From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com>
Date: Thu, 6 Aug 2020 15:13:43 +0800
Subject: pin with view button UI and other small changes

---
 src/client/views/PropertiesButtons.tsx | 46 ++++++++++++++++------------------
 src/client/views/nodes/PresBox.scss    | 10 +++++---
 src/client/views/nodes/PresBox.tsx     |  7 +++---
 3 files changed, 33 insertions(+), 30 deletions(-)

(limited to 'src/client/views/PropertiesButtons.tsx')

diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 642476bc3..002abc5a3 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -237,36 +237,34 @@ export class PropertiesButtons extends React.Component<{}, {}> {
     @computed
     get pinWithViewButton() {
         const targetDoc = this.selectedDoc;
-        const isPinned = targetDoc && Doc.isDocPinned(targetDoc);
         if (targetDoc) {
             const x = targetDoc._panX;
             const y = targetDoc._panY;
             const scale = targetDoc._viewScale;
         }
         return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Pin with this view"}</div></>}>
-            <div className="propertiesButtons-linker"
-                style={{ backgroundColor: "black", color: "white" }}
-                onClick={e => {
-                    if (targetDoc) {
-                        DockedFrameRenderer.PinDoc(targetDoc, false);
-                        const activeDoc = PresBox.Instance.childDocs[PresBox.Instance.childDocs.length - 1];
-                        const x = targetDoc._panX;
-                        const y = targetDoc._panY;
-                        const scale = targetDoc._viewScale;
-                        activeDoc.presPinView = true;
-                        activeDoc.presPinViewX = x;
-                        activeDoc.presPinViewY = y;
-                        activeDoc.presPinViewScale = scale;
-                    }
-                }}>
-                <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin" />
-                <div style={{ position: 'relative', fontSize: 25, fontWeight: 700, transform: 'translate(42%, -7px)', color: 'rgba(0,0,0,0.2)' }}>V</div>
-                <div className="propertiesButtons-title" style={{
-                    backgroundColor: "black",
-                    color: "white"
-                }}
-                >{"Pin with view"}</div>
-            </div></Tooltip>;
+            <>
+                <div className="propertiesButtons-linker"
+                    style={{ backgroundColor: "black", color: "white" }}
+                    onClick={e => {
+                        if (targetDoc) {
+                            DockedFrameRenderer.PinDoc(targetDoc, false);
+                            const activeDoc = PresBox.Instance.childDocs[PresBox.Instance.childDocs.length - 1];
+                            const x = targetDoc._panX;
+                            const y = targetDoc._panY;
+                            const scale = targetDoc._viewScale;
+                            activeDoc.presPinView = true;
+                            activeDoc.presPinViewX = x;
+                            activeDoc.presPinViewY = y;
+                            activeDoc.presPinViewScale = scale;
+                        }
+                    }}>
+                    <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin" />
+                    <div style={{ position: 'relative', fontSize: 25, fontWeight: 700, transform: 'translate(0, -20px)', color: 'rgba(250,250,250,0.5)' }}>V</div>
+                </div>
+                <div className="propertiesButtons-title" style={{ backgroundColor: "black", color: "white" }}>{"View"}</div>
+            </>
+        </Tooltip>;
     }
 
 
diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index 16821f5bc..8ce71935c 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -30,7 +30,7 @@
         transform: translate(8px, -5px);
         box-shadow: 1px 1px 4px 4px rgba(0, 0, 0, 0.25);
         z-index: 1000;
-        width: 315;
+        width: calc(100% - 50px);
         height: max-content;
         justify-self: center;
         letter-spacing: normal;
@@ -583,6 +583,8 @@
     align-items: center;
     justify-content: center;
     border-radius: 4px;
+    padding-left: 7px;
+    padding-right: 7px;
     border-bottom-right-radius: 0;
     border-top-right-radius: 0;
 }
@@ -597,6 +599,8 @@
     align-items: center;
     justify-content: center;
     border-radius: 4px;
+    padding-left: 7px;
+    padding-right: 7px;
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
 }
@@ -722,6 +726,7 @@
     position: relative;
     width: 100%;
     background: gray;
+    min-height: 35px;
     padding-top: 5px;
     padding-bottom: 5px;
     display: grid;
@@ -782,8 +787,7 @@
 
     .presBox-button.present {
         display: flex;
-        min-width: 100px;
-        width: 100px;
+        width: max-content;
         position: absolute;
         right: 10px;
 
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index ccf1fb8e3..c3b920b26 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -1064,10 +1064,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                                 <div className="ribbon-button" style={{ display: activeItem.zoomProgressivize ? "flex" : "none", backgroundColor: targetDoc.editZoomProgressivize ? "#aedef8" : "" }} onClick={this.editZoomProgressivize}>Viewfinder</div>
                                 {/* <div className="ribbon-button" style={{ display: activeItem.zoomProgressivize ? "flex" : "none", backgroundColor: targetDoc.editSnapZoomProgressivize ? "#aedef8" : "" }} onClick={this.editSnapZoomProgressivize}>Snapshot</div> */}
                             </div>
-                            <div className="ribbon-doubleButton" style={{ display: targetDoc.type === DocumentType.COL && targetDoc._viewType === 'freeform' ? "inline-flex" : "none" }}>
+                            {/* <div className="ribbon-doubleButton" style={{ display: targetDoc.type === DocumentType.COL && targetDoc._viewType === 'freeform' ? "inline-flex" : "none" }}>
                                 <div className="ribbon-button" onClick={this.progressivizeText}>Text progressivize</div>
                                 <div className="ribbon-button" style={{ display: activeItem.textProgressivize ? "flex" : "none", backgroundColor: targetDoc.editTextProgressivize ? "#aedef8" : "" }} onClick={this.editTextProgressivize}>Edit</div>
-                            </div>
+                            </div> */}
                             <div className="ribbon-doubleButton" style={{ display: targetDoc._viewType === "stacking" || targetDoc.type === DocumentType.PDF || targetDoc.type === DocumentType.WEB || targetDoc.type === DocumentType.RTF ? "inline-flex" : "none" }}>
                                 <div className="ribbon-button" style={{ backgroundColor: activeItem.scrollProgressivize ? "#aedef8" : "" }} onClick={this.progressivizeScroll}>Scroll progressivize</div>
                                 <div className="ribbon-button" style={{ display: activeItem.scrollProgressivize ? "flex" : "none", backgroundColor: targetDoc.editScrollProgressivize ? "#aedef8" : "" }} onClick={this.editScrollProgressivize}>Edit</div>
@@ -1657,6 +1657,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         return <div onPointerOver={this.onPointerOver} onPointerLeave={this.onPointerLeave} className="presBox-cont" style={{ minWidth: this.layoutDoc.inOverlay ? 240 : undefined }} >
             <div className="presBox-buttons" style={{ display: this.rootDoc._chromeStatus === "disabled" ? "none" : undefined }}>
                 <select className="presBox-viewPicker"
+                    style={{ display: this.layoutDoc.presStatus === "edit" ? "block" : "none" }}
                     onPointerDown={e => e.stopPropagation()}
                     onChange={this.viewChanged}
                     value={mode}>
@@ -1665,7 +1666,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                 </select>
                 <div className="presBox-presentPanel">
                     <span className={`presBox-button ${this.layoutDoc.presStatus === "edit" ? "present" : ""}`}>
-                        <div className="presBox-button-left" onClick={() => this.layoutDoc.presStatus = "manual"}><FontAwesomeIcon icon={"play-circle"} /> &nbsp; Present </div>
+                        <div className="presBox-button-left" onClick={() => this.layoutDoc.presStatus = "manual"}><FontAwesomeIcon icon={"play-circle"} /> <div style={{ display: this.props.PanelWidth() > 200 ? "inline-flex" : "none" }}>&nbsp; Present </div></div>
                         <div className={`presBox-button-right ${this.presentTools ? "active" : ""}`} onClick={e => { e.stopPropagation; this.togglePresent(); }}>
                             <FontAwesomeIcon className="dropdown" style={{ margin: 0, transform: this.presentTools ? 'rotate(180deg)' : 'rotate(0deg)' }} icon={"angle-down"} />
                             {this.presentDropdown}
-- 
cgit v1.2.3-70-g09d2


From 557bcff59aaec470b045a01600b0c2a6e785c730 Mon Sep 17 00:00:00 2001
From: geireann <60007097+geireann@users.noreply.github.com>
Date: Thu, 6 Aug 2020 18:05:24 +0800
Subject: ui changes and commenting code

also removed _viewTransition and backgroundColor...
---
 src/client/util/DocumentManager.ts                 |   6 +-
 src/client/views/.DS_Store                         | Bin 6148 -> 6148 bytes
 src/client/views/PropertiesButtons.tsx             |   4 +-
 src/client/views/nodes/PresBox.scss                |  47 +-
 src/client/views/nodes/PresBox.tsx                 | 485 +++++++++++----------
 .../views/presentationview/PresElementBox.scss     |   8 +-
 .../views/presentationview/PresElementBox.tsx      |  10 +-
 7 files changed, 292 insertions(+), 268 deletions(-)

(limited to 'src/client/views/PropertiesButtons.tsx')

diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index d18eac374..523dbfca0 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -127,10 +127,6 @@ export class DocumentManager {
         CollectionDockingView.AddRightSplit(doc);
         finished?.();
     }
-    // static openInPlace = (doc: Doc, finished?: () => void) => {
-    //     CollectionDockingView.AddTab(doc);
-    //     finished?.();
-    // }
     public jumpToDocument = async (
         targetDoc: Doc,        // document to display
         willZoom: boolean,     // whether to zoom doc to take up most of screen
@@ -180,7 +176,7 @@ export class DocumentManager {
                 const targetDocContextView = getFirstDocView(targetDocContext);
                 targetDocContext._scrollY = 0;  // this will force PDFs to activate and load their annotations / allow scrolling
                 if (targetDocContextView) { // we found a context view and aren't forced to create a new one ... focus on the context first..
-                    targetDocContext._viewTransition = "transform 10000ms";
+                    targetDocContext._viewTransition = "transform 500ms";
                     targetDocContextView.props.focus(targetDocContextView.props.Document, willZoom);
 
                     // now find the target document within the context
diff --git a/src/client/views/.DS_Store b/src/client/views/.DS_Store
index 3ce88292c..7a8c419ee 100644
Binary files a/src/client/views/.DS_Store and b/src/client/views/.DS_Store differ
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 002abc5a3..3392371de 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -242,7 +242,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             const y = targetDoc._panY;
             const scale = targetDoc._viewScale;
         }
-        return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Pin with this view"}</div></>}>
+        return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Pin with this view"}</div></>} placement="top">
             <>
                 <div className="propertiesButtons-linker"
                     style={{ backgroundColor: "black", color: "white" }}
@@ -259,7 +259,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                             activeDoc.presPinViewScale = scale;
                         }
                     }}>
-                    <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin" />
+                    <FontAwesomeIcon className="documentdecorations-icon" size="lg" icon="map-pin" />
                     <div style={{ position: 'relative', fontSize: 25, fontWeight: 700, transform: 'translate(0, -20px)', color: 'rgba(250,250,250,0.5)' }}>V</div>
                 </div>
                 <div className="propertiesButtons-title" style={{ backgroundColor: "black", color: "white" }}>{"View"}</div>
diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index 8ce71935c..d5389da35 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -1,3 +1,7 @@
+$light-blue: #AEDDF8;
+$dark-blue: #5B9FDD;
+$light-background: #ececec;
+
 .presBox-cont {
     position: absolute;
     display: block;
@@ -20,10 +24,6 @@
         margin-top: 3px;
     }
 
-    .presBox-toolbar {
-        display: none;
-    }
-
     .presBox-toolbar-dropdown {
         border-radius: 5px;
         background-color: white;
@@ -40,7 +40,7 @@
         font-size: 13;
     }
 
-    .presBox-toolbar.active {
+    .presBox-toolbar {
         position: relative;
         display: inline-flex;
         align-items: center;
@@ -59,7 +59,7 @@
         }
 
         .toolbar-button.active {
-            color: #AEDDF8;
+            color: $light-blue;
         }
 
         .toolbar-transitionButtons {
@@ -85,7 +85,6 @@
         display: flex;
         width: max-content;
         height: 25px;
-        /* background-color: pink; */
         justify-content: center;
         transform: rotate(90deg);
         align-items: center;
@@ -120,7 +119,7 @@
 
 .dropdown.active {
     transform: rotate(180deg);
-    color: #AEDDF8;
+    color: $light-blue;
     opacity: 0.8;
 }
 
@@ -128,10 +127,7 @@
     position: relative;
     display: inline;
     font-family: Roboto;
-    /* background-color: white; */
     color: black;
-    width: 100%;
-    height: max-content;
     z-index: 100;
     transition: 0.7s;
 
@@ -157,7 +153,6 @@
         margin-left: 5px;
         margin-top: 5px;
         margin-bottom: 5px;
-        /* border-radius: 5px; */
         margin-right: 5px;
         width: max-content;
         justify-content: center;
@@ -176,7 +171,7 @@
     //     margin-top: 5px;
     //     width: 100%;
     //     max-width: 200px;
-        
+
     // }
 
     // .toolbar-slider:focus {
@@ -235,20 +230,20 @@
         .toolbar-slider:focus {
             outline: none;
         }
-        
+
         .toolbar-slider::-webkit-slider-runnable-track {
-          height: 10px;
-          -webkit-appearance: none;
-          margin-top: -1px;
+            height: 10px;
+            -webkit-appearance: none;
+            margin-top: -1px;
         }
-        
+
         .toolbar-slider::-webkit-slider-thumb {
-          width: 10px;
-          -webkit-appearance: none;
-          height: 10px;
-          cursor: ew-resize;
-          background: #5b9ddd;
-          box-shadow: -100vw 0 0 100vw #aedef8;
+            width: 10px;
+            -webkit-appearance: none;
+            height: 10px;
+            cursor: ew-resize;
+            background: #5b9ddd;
+            box-shadow: -100vw 0 0 100vw #aedef8;
         }
     }
 
@@ -751,7 +746,7 @@
         min-width: 150px;
     }
 
-    
+
 
     select {
         background: #323232;
@@ -796,7 +791,7 @@
         }
     }
 
-        
+
     .miniPresOverlay {
         background-color: #323232;
         color: white;
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index c3b920b26..5d4cde382 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -20,17 +20,10 @@ import { Docs, DocUtils } from "../../documents/Documents";
 import { PrefetchProxy } from "../../../fields/Proxy";
 import { ScriptField } from "../../../fields/ScriptField";
 import { Scripting } from "../../util/Scripting";
-import { InkingStroke } from "../InkingStroke";
-import { HighlightSpanKind } from "typescript";
-import { SearchUtil } from "../../util/SearchUtil";
 import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView";
-import { child } from "serializr";
 import { List } from "../../../fields/List";
 import { Tooltip } from "@material-ui/core";
 import { CollectionFreeFormViewChrome } from "../collections/CollectionMenu";
-import { conformsTo } from "lodash";
-import { translate } from "googleapis/build/src/apis/translate";
-import { DragManager, dropActionType } from "../../util/DragManager";
 import { actionAsync } from "mobx-utils";
 import { SelectionManager } from "../../util/SelectionManager";
 import { AudioBox } from "./AudioBox";
@@ -41,9 +34,26 @@ const PresBoxDocument = makeInterface(documentSchema);
 @observer
 export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>(PresBoxDocument) {
     public static LayoutString(fieldKey: string) { return FieldView.LayoutString(PresBox, fieldKey); }
-    private treedropDisposer?: DragManager.DragDropDisposer;
     static Instance: PresBox;
+
     @observable _isChildActive = false;
+    @observable _moveOnFromAudio: boolean = false;
+    @observable _presTimer!: NodeJS.Timeout;
+
+    @observable _selectedArray: Doc[] = [];
+    @observable _sortedSelectedArray: Doc[] = [];
+    @observable _eleArray: HTMLElement[] = [];
+    @observable _dragArray: HTMLElement[] = [];
+
+    @observable private transitionTools: boolean = false;
+    @observable private newDocumentTools: boolean = false;
+    @observable private progressivizeTools: boolean = false;
+    @observable private moreInfoTools: boolean = false;
+    @observable private playTools: boolean = false;
+    @observable private presentTools: boolean = false;
+    @observable private pathBoolean: boolean = false;
+    @observable private expandBoolean: boolean = false;
+
     @computed get childDocs() { return DocListCast(this.dataDoc[this.fieldKey]); }
     @computed get itemIndex() { return NumCast(this.rootDoc._itemIndex); }
     @computed get presElement() { return Cast(Doc.UserDoc().presElement, Doc, null); }
@@ -65,18 +75,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     }
 
 
-
     componentDidMount() {
         this.rootDoc.presBox = this.rootDoc;
         this.rootDoc._forceRenderEngine = "timeline";
         this.rootDoc._replacedChrome = "replaced";
         this.layoutDoc.presStatus = "edit";
         this.layoutDoc._gridGap = 5;
-        // document.addEventListener("keydown", this.keyEvents, false);
-    }
-
-    componentWillUnmount() {
-        this.treedropDisposer?.();
     }
 
     onPointerOver = () => {
@@ -91,8 +95,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         Doc.UserDoc().activePresentation = this.rootDoc;
     }
 
-    @observable _moveOnFromAudio: boolean = false;
-
+    /**
+     * Called when the user moves to the next slide in the presentation trail.
+     */
     @undoBatch
     @action
     next = () => {
@@ -137,6 +142,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         }
     }
 
+    /**
+     * Called when the user moves back
+     * Design choice: If there are frames within the presentation, moving back will not
+     * got back through the frames but instead directly to the next point in the presentation.
+     */
     @undoBatch
     @action
     back = () => {
@@ -149,6 +159,93 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         }
     }
 
+    //The function that is called when a document is clicked or reached through next or back.
+    //it'll also execute the necessary actions if presentation is playing.
+    public gotoDocument = action((index: number, fromDoc: number) => {
+        this.updateCurrentPresentation();
+        Doc.UnBrushAllDocs();
+        if (index >= 0 && index < this.childDocs.length) {
+            this.rootDoc._itemIndex = index;
+            const presTargetDoc = Cast(this.childDocs[this.itemIndex].presentationTargetDoc, Doc, null);
+            if (presTargetDoc?.lastFrame !== undefined) {
+                presTargetDoc.currentFrame = 0;
+            }
+            this.navigateToElement(this.childDocs[index]); //Handles movement to element
+            this._selectedArray = [this.childDocs[index]]; //Update selected array
+            this.onHideDocument(); //Handles hide after/before
+        }
+    });
+
+    /**
+     * This method makes sure that cursor navigates to the element that
+     * has the option open and last in the group. 
+     * Design choice: If the next document is not in presCollection or 
+     * presCollection itself then if there is a presCollection it will add
+     * a new tab. If presCollection is undefined it will open the document
+     * on the right. 
+     */
+    navigateToElement = async (curDoc: Doc) => {
+        const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
+        const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
+        const srcContext = await DocCastAsync(targetDoc.context);
+        const presCollection = Cast(this.layoutDoc.presCollection, Doc, null);
+        const collectionDocView = presCollection ? await DocumentManager.Instance.getDocumentView(presCollection) : undefined;
+        this.turnOffEdit();
+
+        if (this.itemIndex >= 0) {
+            if (targetDoc) {
+                if (srcContext) this.layoutDoc.presCollection = srcContext;
+            } else if (targetDoc) this.layoutDoc.presCollection = targetDoc;
+        }
+        if (collectionDocView) {
+            if (srcContext && srcContext !== presCollection) {
+                // Case 1: new srcContext inside of current collection so add a new tab to the current pres collection
+                collectionDocView.props.addDocTab(srcContext, "inPlace");
+            }
+        }
+        this.updateCurrentPresentation();
+        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 (targetDoc.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
+            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 
+        if (activeItem.presPinView) {
+            targetDoc._panX = activeItem.presPinViewX;
+            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)
+        if (targetDoc.presWebsiteData) {
+            targetDoc.data = targetDoc.presWebsiteData;
+        }
+    }
+
+    /**
+     * Uses the viewfinder to progressivize through the different views of a single collection.
+     * @param presTargetDoc: document for which internal zoom is used
+     */
     zoomProgressivizeNext = (presTargetDoc: Doc) => {
         const srcContext = Cast(presTargetDoc.context, Doc, null);
         const docView = DocumentManager.Instance.getDocumentView(presTargetDoc);
@@ -190,6 +287,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     }
 
 
+    /**
+     * For 'Hide Before' and 'Hide After' buttons making sure that
+     * they are hidden each time the presentation is updated.
+     */
     @action
     onHideDocument = () => {
         this.childDocs.forEach((doc, index) => {
@@ -213,97 +314,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         });
     }
 
-    /**
-     * This method makes sure that cursor navigates to the element that
-     * has the option open and last in the group. If not in the group, and it has
-     * the option open, navigates to that element.
-     */
-    navigateToElement = async (curDoc: Doc) => {
-        const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
-        const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
-        const srcContext = await DocCastAsync(targetDoc.context);
-        const presCollection = Cast(this.layoutDoc.presCollection, Doc, null);
-        const collectionDocView = presCollection ? await DocumentManager.Instance.getDocumentView(presCollection) : undefined;
-        this.turnOffEdit();
-
-        if (this.itemIndex >= 0) {
-            if (targetDoc) {
-                if (srcContext) this.layoutDoc.presCollection = srcContext;
-            } else if (targetDoc) this.layoutDoc.presCollection = targetDoc;
-        }
-        if (collectionDocView) {
-            if (srcContext && srcContext !== presCollection) {
-                // Case 1: new srcContext inside of current collection so add a new tab to the current pres collection
-                collectionDocView.props.addDocTab(srcContext, "inPlace");
-            }
-        }
-        // else if (srcContext) {
-        //     console.log("Case 2: srcContext - not open and collection containing this document exists, so open collection that contains it and then await zooming in on document");
-        //     this.props.addDocTab(srcContext, "onRight");
-        // } else if (!srcContext) {
-        //     console.log("Case 3: !srcContext - no collection containing this document, therefore open document itself on right");
-        //     this.props.addDocTab(targetDoc, "onRight");
-        // }
-        this.updateCurrentPresentation();
-        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 (targetDoc.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
-            targetDoc && await DocumentManager.Instance.jumpToDocument(targetDoc, willZoom, undefined, srcContext);
-        }
-        if (activeItem.presPinView) {
-            targetDoc._panX = activeItem.presPinViewX;
-            targetDoc._panY = activeItem.presPinViewY;
-            targetDoc._viewScale = activeItem.presPinViewScale;
-        }
-        if (collectionDocView && activeItem.openDocument) {
-            collectionDocView.props.addDocTab(activeItem, "inPlace");
-        }
-        if (targetDoc.presWebsiteData) {
-            targetDoc.data = targetDoc.presWebsiteData;
-        }
-    }
-
-    //The function that is called when a document is clicked or reached through next or back.
-    //it'll also execute the necessary actions if presentation is playing.
-    public gotoDocument = action((index: number, fromDoc: number) => {
-        this.updateCurrentPresentation();
-        Doc.UnBrushAllDocs();
-        if (index >= 0 && index < this.childDocs.length) {
-            this.rootDoc._itemIndex = index;
-            const presTargetDoc = Cast(this.childDocs[this.itemIndex].presentationTargetDoc, Doc, null);
-            if (presTargetDoc?.lastFrame !== undefined) {
-                presTargetDoc.currentFrame = 0;
-            }
-            this.navigateToElement(this.childDocs[index]);
-            this._selectedArray = [this.childDocs[index]];
-            // this.hideIfNotPresented(index);
-            // this.showAfterPresented(index);
-            // this.hideDocumentInPres();
-            this.onHideDocument();
-            // this.onHideAfterPresClick();
-        }
-    });
-
-
-    @observable _presTimer!: NodeJS.Timeout;
 
-    //The function that starts or resets presentaton functionally, depending on status flag.
+    //The function that starts or resets presentaton functionally, depending on presStatus of the layoutDoc
     @undoBatch
     @action
-    startOrResetPres = (startSlide: number) => {
+    startPres = (startSlide: number) => {
         this.updateCurrentPresentation();
         const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
         const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
@@ -326,15 +341,20 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
 
     //The function that resets the presentation by removing every action done by it. It also
     //stops the presentaton.
+    // TODO: Ensure resetPresentation is called when the presentation is closed
     resetPresentation = () => {
         this.updateCurrentPresentation();
-        this.childDocs.forEach(doc => (doc.presentationTargetDoc as Doc).opacity = 1);
         this.rootDoc._itemIndex = 0;
-        // this.layoutDoc.presStatus = false;
     }
 
-    //The function that starts the presentation, also checking if actions should be applied
-    //directly at start.
+    @action togglePath = () => this.pathBoolean = !this.pathBoolean;
+    @action toggleExpand = () => this.expandBoolean = !this.expandBoolean;
+
+    /**
+     * The function that starts the presentation at the given index, also checking if actions should be applied
+     * directly at start.
+     * @param startIndex: index that the presentation will start at
+     */
     startPresentation = (startIndex: number) => {
         this.updateCurrentPresentation();
         this.childDocs.map(doc => {
@@ -348,6 +368,10 @@ 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...
+     */
     updateMinimize = () => {
         const srcContext = Cast(this.rootDoc.presCollection, Doc, null);
         this.turnOffEdit();
@@ -364,39 +388,52 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         }
     }
 
+    /**
+     * Called when the user changes the view type
+     * Either 'List' (stacking) or 'Slides' (carousel)
+     */
     @undoBatch
     viewChanged = action((e: React.ChangeEvent) => {
         //@ts-ignore
         const viewType = e.target.selectedOptions[0].value as CollectionViewType;
-        viewType === CollectionViewType.Stacking && (this.rootDoc._pivotField = undefined); // pivot field may be set by the user in timeline view (or some other way) -- need to reset it here
+        // 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;
     });
 
+    /**
+     * When the movement dropdown is changes
+     */
     @undoBatch
     movementChanged = action((movement: string) => {
         const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
         const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
-        if (movement === 'zoom') {
-            activeItem.presZoomButton = !activeItem.presZoomButton;
-            if (activeItem.presZoomButton) activeItem.presMovement = 'Zoom';
-            else activeItem.presMovement = 'None';
-            activeItem.presNavButton = false;
-        } else if (movement === 'nav') {
-            activeItem.presZoomButton = false;
-            activeItem.presNavButton = !activeItem.presNavButton;
-            if (activeItem.presNavButton) activeItem.presMovement = 'Pan';
-            else activeItem.presMovement = 'None';
-        } else if (movement === 'switch') {
-            targetDoc.presTransition = 0;
-            activeItem.presSwitchButton = !activeItem.presSwitchButton;
-            if (activeItem.presSwitchButton) activeItem.presMovement = 'Jump cut';
-            else activeItem.presMovement = 'None';
-        } else {
-            activeItem.presMovement = 'None';
-            activeItem.presZoomButton = false;
-            activeItem.presNavButton = false;
-            activeItem.presSwitchButton = false;
+        switch (movement) {
+            case 'zoom': //Pan and zoom
+                activeItem.presZoomButton = !activeItem.presZoomButton;
+                if (activeItem.presZoomButton) activeItem.presMovement = 'Zoom';
+                else activeItem.presMovement = 'None';
+                activeItem.presNavButton = false;
+                break;
+            case 'pan': //Pan
+                activeItem.presZoomButton = false;
+                activeItem.presNavButton = !activeItem.presNavButton;
+                if (activeItem.presNavButton) activeItem.presMovement = 'Pan';
+                else activeItem.presMovement = 'None';
+                break;
+            case 'jump': //Jump Cut
+                targetDoc.presTransition = 0;
+                activeItem.presSwitchButton = !activeItem.presSwitchButton;
+                if (activeItem.presSwitchButton) activeItem.presMovement = 'Jump cut';
+                else activeItem.presMovement = 'None';
+                break;
+            case 'none': default:
+                activeItem.presMovement = 'None';
+                activeItem.presZoomButton = false;
+                activeItem.presNavButton = false;
+                activeItem.presSwitchButton = false;
+                break;
         }
     });
 
@@ -421,13 +458,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     active = (outsideReaction?: boolean) => ((Doc.GetSelectedTool() === InkTool.None && !this.layoutDoc.isBackground) &&
         (this.layoutDoc.forceActive || this.props.isSelected(outsideReaction) || this._isChildActive || this.props.renderDepth === 0) ? true : false)
 
-    // KEYS
-    @observable _selectedArray: Doc[] = [];
-    @observable _sortedSelectedArray: Doc[] = [];
-    @observable _eleArray: HTMLElement[] = [];
-    @observable _dragArray: HTMLElement[] = [];
-
-    //TODO: Update to radix / quick sort
+    /**
+     * For sorting the array so that the order is maintained when it is dropped.
+     */
     @action
     sortArray = (): Doc[] => {
         const sort: Doc[] = this._selectedArray;
@@ -439,6 +472,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         return sort;
     }
 
+    /**
+     * Method to get the list of selected items in the order in which they have been selected
+     */
     @computed get listOfSelected() {
         const list = this._selectedArray.map((doc: Doc, index: any) => {
             const activeItem = Cast(doc, Doc, null);
@@ -478,6 +514,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         }
     }
 
+    // Key events when the minimized player is active
     @action
     minimizeEvents = (e: KeyboardEvent) => {
         e.stopPropagation();
@@ -491,7 +528,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         }
     }
 
-    //Esc click
+    // Key for when the presentaiton is active (according to Selection Manager)
     @action
     keyEvents = (e: KeyboardEvent) => {
         e.stopPropagation();
@@ -507,7 +544,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         } if (e.keyCode === 39) { // right (39) / d(68) / down(40) to go to next
             if (this.layoutDoc.presStatus !== "edit") this.next();
         } if (e.keyCode === 32) { // spacebar to 'present' or autoplay
-            if (this.layoutDoc.presStatus !== "edit") this.startOrResetPres(0);
+            if (this.layoutDoc.presStatus !== "edit") this.startPres(0);
             else this.layoutDoc.presStatus = "manual";
         }
         if (e.keyCode === 8) { // delete selected items
@@ -519,15 +556,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         }
     }
 
-    @observable private transitionTools: boolean = false;
-    @observable private newDocumentTools: boolean = false;
-    @observable private progressivizeTools: boolean = false;
-    @observable private moreInfoTools: boolean = false;
-    @observable private playTools: boolean = false;
-    @observable private presentTools: boolean = false;
-    @observable private pathBoolean: boolean = false;
-    @observable private expandBoolean: boolean = false;
-
+    /**
+     * 
+     */
     @undoBatch
     @action
     viewPaths = async () => {
@@ -551,16 +582,19 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         const fit = srcContext?._fitToBox;
     }
 
+    // Adds the index in the pres path graphically
     @computed get order() {
         const order: JSX.Element[] = [];
         this.childDocs.forEach((doc, index) => {
             const targetDoc = Cast(doc.presentationTargetDoc, Doc, null);
             const srcContext = Cast(targetDoc.context, Doc, null);
+            // Case A: Document is contained within the colleciton
             if (this.rootDoc.presCollection === srcContext) {
                 order.push(
                     <div className="pathOrder" style={{ top: NumCast(targetDoc.y), left: NumCast(targetDoc.x) }}>
                         <div className="pathOrder-frame">{index + 1}</div>
                     </div>);
+                // Case B: Document is not inside of the collection
             } else {
                 order.push(
                     <div className="pathOrder" style={{ top: 0, left: 0 }}>
@@ -571,6 +605,14 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         return order;
     }
 
+    /**
+     * Method called for viewing paths which adds a single line with
+     * points at the center of each document added.
+     * Design choice: When this is called it sets _fitToBox as true so the
+     * user can have an overview of all of the documents in the collection.
+     * (Design needed for when documents in presentation trail are in another
+     * collection)
+     */
     @computed get paths() {
         let pathPoints = "";
         this.childDocs.forEach((doc, index) => {
@@ -601,9 +643,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         />);
     }
 
-    @action togglePath = () => this.pathBoolean = !this.pathBoolean;
-    @action toggleExpand = () => this.expandBoolean = !this.expandBoolean;
-
     /**
      * The function that is called on click to turn fading document after presented option on/off.
      * It also makes sure that the option swithches from hide-after to this one, since both
@@ -627,13 +666,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         }
     }
 
-    // WHAT IS THIS?
-    @action
-    dropdownToggle = (menu: string) => {
-        const dropMenu = document.getElementById('presBox' + menu + 'Dropdown');
-        if (dropMenu) dropMenu.style.display === 'none' ? dropMenu.style.display = 'block' : dropMenu.style.display = 'none';
-    }
-
+    // Converts seconds to ms and updates presTransition
     setTransitionTime = (number: String) => {
         const timeInMS = Number(number) * 1000;
         const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
@@ -641,6 +674,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         if (targetDoc) targetDoc.presTransition = timeInMS;
     }
 
+    // Converts seconds to ms and updates presDuration
     setDurationTime = (number: String) => {
         const timeInMS = Number(number) * 1000;
         const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
@@ -648,6 +682,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         if (targetDoc) targetDoc.presDuration = timeInMS;
     }
 
+
     @computed get transitionDropdown() {
         const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
         const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
@@ -660,17 +695,14 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                 <div className={`presBox-ribbon ${this.transitionTools && this.layoutDoc.presStatus === "edit" ? "active" : ""}`} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
                     <div className="ribbon-box">
                         Movement
-                        <div className="presBox-dropdown"
-                            onPointerDown={e => e.stopPropagation()}
-                        // onClick={() => this.dropdownToggle('Movement')}
-                        >
+                        <div className="presBox-dropdown" onPointerDown={e => e.stopPropagation()}>
                             {activeItem.presMovement}
                             <FontAwesomeIcon className='presBox-dropdownIcon' style={{ gridColumn: 2 }} icon={"angle-down"} />
                             <div className={'presBox-dropdownOptions'} id={'presBoxMovementDropdown'} onClick={e => e.stopPropagation()}>
                                 <div className={`presBox-dropdownOption ${activeItem.presMovement === 'None' ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.movementChanged('none')}>None</div>
                                 <div className={`presBox-dropdownOption ${activeItem.presMovement === 'Zoom' ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.movementChanged('zoom')}>Pan and Zoom</div>
-                                <div className={`presBox-dropdownOption ${activeItem.presMovement === 'Pan' ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.movementChanged('nav')}>Pan</div>
-                                <div className={`presBox-dropdownOption ${activeItem.presMovement === 'Jump cut' ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.movementChanged('switch')}>Jump cut</div>
+                                <div className={`presBox-dropdownOption ${activeItem.presMovement === 'Pan' ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.movementChanged('pan')}>Pan</div>
+                                <div className={`presBox-dropdownOption ${activeItem.presMovement === 'Jump cut' ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.movementChanged('jump')}>Jump cut</div>
                             </div>
                         </div>
                         <div className="ribbon-doubleButton" style={{ display: activeItem.presMovement === 'Pan' || activeItem.presMovement === 'Zoom' ? "inline-flex" : "none" }}>
@@ -783,8 +815,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                     <div className={'presBox-ribbon'} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
                         <div className="ribbon-box">
                             <div className="ribbon-doubleButton" style={{ display: targetDoc.type === DocumentType.VID || targetDoc.type === DocumentType.AUDIO ? "inline-flex" : "none" }}>
-                                <div className="ribbon-button" style={{ backgroundColor: activeItem.presProgressivize ? "#aedef8" : "" }} onClick={this.progressivizeChild}>Start automatically</div>
-                                <div className="ribbon-button" style={{ display: "flex", backgroundColor: targetDoc.editProgressivize ? "#aedef8" : "" }} onClick={this.editProgressivize}>Start manually</div>
+                                <div className="ribbon-button" style={{ backgroundColor: activeItem.playAuto ? "#aedef8" : "" }} onClick={() => activeItem.playAuto = !activeItem.playAuto}>Play automatically</div>
+                                <div className="ribbon-button" style={{ display: "flex", backgroundColor: targetDoc.playAuto ? "" : "#aedef8" }} onClick={() => activeItem.playAuto = !activeItem.playAuto}>Play on next</div>
                             </div>
                             <div className="ribbon-doubleButton" style={{ display: "flex" }}>
                                 <div className="ribbon-button" style={{ backgroundColor: activeItem.openDocument ? "#aedef8" : "" }} onClick={() => activeItem.openDocument = !activeItem.openDocument}>Open document</div>
@@ -838,12 +870,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                 <div className={"presBox-ribbon"} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
                     <div className="ribbon-box">
                         Slide Title: <br></br>
-                        {/* <div className="dropdown-textInput"> */}
                         <input className="ribbon-textInput" placeholder="..." type="text" name="fname" ref={this.inputRef} onChange={(e) => {
                             e.stopPropagation();
                             runInAction(() => this.title = e.target.value);
                         }}></input>
-                        {/* </div> */}
                     </div>
                     <div className="ribbon-box">
                         Choose type:
@@ -941,40 +971,20 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         return doc;
     }
 
-    // Dropdown that appears for autoplay
-    @computed get playDropdown() {
-        return (
-            <div className={`dropdown-play ${this.playTools ? "active" : ""}`} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
-                <div className="dropdown-play-button" onClick={() => this.startOrResetPres(this.itemIndex)}>
-                    Present from current slide
-                </div>
-                <div className="dropdown-play-button" onClick={() => this.startOrResetPres(0)}>
-                    Present from first slide
-                </div>
-            </div>
-        );
-    }
-
     // Dropdown that appears when the user wants to begin presenting (either minimize or sidebar view)
     @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={(action(() => { this.updateMinimize; this.layoutDoc.presStatus = "manual"; this.turnOffEdit(); }))}>
                     Minimize
                 </div>
-                <div className="dropdown-play-button" onClick={() => { this.startOrResetPres(0); this.turnOffEdit(); }}>
+                <div className="dropdown-play-button" onClick={(action(() => { this.layoutDoc.presStatus = "manual"; this.turnOffEdit(); }))}>
                     Sidebar view
                 </div>
             </div>
         );
     }
 
-    // For toggling the options when the user wants to select play
-    @action togglePlay = () => { this.playTools = !this.playTools; };
-
-    // For toggling the options when the user wants to select play
-    @action togglePresent = () => { this.presentTools = !this.presentTools; };
-
     // Case in which the document has keyframes to navigate to next key frame
     @undoBatch
     @action
@@ -986,10 +996,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             CollectionFreeFormDocumentView.setupScroll(tagDoc, 0);
             CollectionFreeFormDocumentView.setupKeyframes(childDocs, 0);
         }
-        // let lastFrame: number = 0;
-        // childDocs.forEach((doc) => {
-        //     if (NumCast(doc.appearFrame) > lastFrame) lastFrame = NumCast(doc.appearFrame);
-        // });
         CollectionFreeFormDocumentView.updateScrollframe(tagDoc, currentFrame);
         CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0);
         tagDoc.currentFrame = Math.max(0, (currentFrame || 0) + 1);
@@ -1027,6 +1033,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         }
     }
 
+    /**
+     * Returns the collection type as a string for headers
+     */
     @computed get stringType(): string {
         const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
         const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
@@ -1587,7 +1596,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
         if (activeItem) {
             return (
-                <>
+                <div id="toolbarContainer" className={'presBox-toolbar'} style={{ display: this.layoutDoc.presStatus !== 'auto' && this.layoutDoc.presStatus !== 'manual' ? "inline-flex" : "none" }}>
                     <Tooltip title={<><div className="dash-tooltip">{"Add new slide"}</div></>}><div className={`toolbar-button ${this.newDocumentTools ? "active" : ""}`} onClick={action(() => this.newDocumentTools = !this.newDocumentTools)}><FontAwesomeIcon icon={"plus"} />
                         <FontAwesomeIcon className={`dropdown ${this.newDocumentTools ? "active" : ""}`} icon={"angle-down"} />
                     </div></Tooltip>
@@ -1624,7 +1633,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                             <div className="toolbar-moreInfoBall" />
                         </div>
                     </div> */}
-                </>
+                </div>
             );
         } else {
             return (
@@ -1648,13 +1657,14 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         }
     }
 
-    render() {
-        this.childDocs.slice(); // needed to insure that the childDocs are loaded for looking up fields
+    /**
+     * Top panel containes:
+     * viewPicker: The option to choose between List and Slides view for the presentaiton trail
+     * presentPanel: The button to start the presentation / open minimized view of the presentation
+     */
+    @computed get topPanel() {
         const mode = StrCast(this.rootDoc._viewType) as CollectionViewType;
-        // const addDocument = (doc: Doc | Doc[], relativeTo?: Doc, before?: boolean) => {
-        //     return add(doc, relativeTo ? relativeTo : docs[i], before !== undefined ? before : false);
-        // };
-        return <div onPointerOver={this.onPointerOver} onPointerLeave={this.onPointerLeave} className="presBox-cont" style={{ minWidth: this.layoutDoc.inOverlay ? 240 : undefined }} >
+        return (
             <div className="presBox-buttons" style={{ display: this.rootDoc._chromeStatus === "disabled" ? "none" : undefined }}>
                 <select className="presBox-viewPicker"
                     style={{ display: this.layoutDoc.presStatus === "edit" ? "block" : "none" }}
@@ -1666,36 +1676,61 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                 </select>
                 <div className="presBox-presentPanel">
                     <span className={`presBox-button ${this.layoutDoc.presStatus === "edit" ? "present" : ""}`}>
-                        <div className="presBox-button-left" onClick={() => this.layoutDoc.presStatus = "manual"}><FontAwesomeIcon icon={"play-circle"} /> <div style={{ display: this.props.PanelWidth() > 200 ? "inline-flex" : "none" }}>&nbsp; Present </div></div>
-                        <div className={`presBox-button-right ${this.presentTools ? "active" : ""}`} onClick={e => { e.stopPropagation; this.togglePresent(); }}>
+                        <div className="presBox-button-left" onClick={() => this.layoutDoc.presStatus = "manual"}>
+                            <FontAwesomeIcon icon={"play-circle"} />
+                            <div style={{ display: this.props.PanelWidth() > 200 ? "inline-flex" : "none" }}>&nbsp; Present</div>
+                        </div>
+                        <div className={`presBox-button-right ${this.presentTools ? "active" : ""}`} onClick={e => { e.stopPropagation; this.presentTools = !this.presentTools; }}>
                             <FontAwesomeIcon className="dropdown" style={{ margin: 0, transform: this.presentTools ? 'rotate(180deg)' : 'rotate(0deg)' }} icon={"angle-down"} />
                             {this.presentDropdown}
                         </div>
                     </span>
-                    <div className="miniPresOverlay" style={{ display: this.layoutDoc.presStatus !== "edit" ? "inline-flex" : "none" }}>
-                        {/* <span className={`presBox-button ${this.layoutDoc.presStatus !== "edit" ? "active" : ""}`}>
-                            <div className="presBox-button-left" onClick={() => this.startOrResetPres(0)}>
-                                <FontAwesomeIcon icon={"clock"} /> &nbsp;
-                                <FontAwesomeIcon icon={this.layoutDoc.presStatus === "auto" ? "pause" : "play"} />
-                            </div>
-                            <div className={`presBox-button-right ${this.playTools ? "active" : ""}`} onClick={e => { e.stopPropagation; this.togglePlay(); }}>
-                                <FontAwesomeIcon className="dropdown" style={{ margin: 0, transform: this.playTools ? 'rotate(180deg)' : 'rotate(0deg)' }} icon={"angle-down"} />
-                                {this.playDropdown}
-                            </div>
-                        </span> */}
-                        <div className="miniPres-button" onClick={this.back}><FontAwesomeIcon icon={"arrow-left"} /></div>
-                        <div className="miniPres-button" onClick={() => this.startOrResetPres(this.itemIndex)}><FontAwesomeIcon icon={PresBox.Instance.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}</div>
-                        <div className="miniPres-divider"></div>
-                        <div className="miniPres-button" onClick={() => this.layoutDoc.presStatus = "edit"}>
-                            <FontAwesomeIcon icon={"times"} />
-                        </div>
-                    </div>
+                    {this.playButtons}
+                </div>
+            </div>
+        );
+    }
+
+    @computed get playButtons() {
+        const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
+        const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
+        // 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" }}>
+            {/* <span className={`presBox-button ${this.layoutDoc.presStatus !== "edit" ? "active" : ""}`}>
+                <div className="presBox-button-left" onClick={() => this.startPres(0)}>
+                    <FontAwesomeIcon icon={"clock"} /> &nbsp;
+                    <FontAwesomeIcon icon={this.layoutDoc.presStatus === "auto" ? "pause" : "play"} />
+                </div>
+                <div className={`presBox-button-right ${this.playTools ? "active" : ""}`} onClick={e => { e.stopPropagation; this.togglePlay(); }}>
+                    <FontAwesomeIcon className="dropdown" style={{ margin: 0, transform: this.playTools ? 'rotate(180deg)' : 'rotate(0deg)' }} icon={"angle-down"} />
+                    {this.playDropdown}
                 </div>
+            </span> */}
+            <div className="miniPres-button" onClick={this.back}><FontAwesomeIcon icon={"arrow-left"} /></div>
+            <div className="miniPres-button" onClick={() => this.startPres(this.itemIndex)}><FontAwesomeIcon icon={PresBox.Instance.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" }}>
+                Slide {this.itemIndex + 1} / {this.childDocs.length}
+                {targetDoc ? <div className="miniPres-button-frame" style={{ display: targetDoc.lastFrame !== undefined && targetDoc.lastFrame >= 0 ? "inline-flex" : "none" }}>
+                    <div>{targetDoc.currentFrame}</div>
+                    <div>{targetDoc.lastFrame}</div>
+                </div> : null}
             </div>
-            <div id="toolbarContainer" className={`presBox-toolbar ${this.layoutDoc.presStatus === "edit" ? "active" : ""}`}> {this.toolbar} </div>
+            <div className="miniPres-divider"></div>
+            <div className="miniPres-button" onClick={() => this.layoutDoc.presStatus = "edit"}>
+                <FontAwesomeIcon icon={"times"} />
+            </div>
+        </div>);
+    }
+
+    render() {
+        // needed to insure that the childDocs are loaded for looking up fields
+        this.childDocs.slice();
+        const mode = StrCast(this.rootDoc._viewType) as CollectionViewType;
+        return <div onPointerOver={this.onPointerOver} onPointerLeave={this.onPointerLeave} className="presBox-cont" style={{ minWidth: this.layoutDoc.inOverlay ? 240 : undefined }} >
+            {this.topPanel}
+            {this.toolbar}
             {this.newDocumentToolbarDropdown}
             <div className="presBox-listCont">
                 {mode !== CollectionViewType.Invalid ?
diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss
index fa70b2a41..3d730d7ac 100644
--- a/src/client/views/presentationview/PresElementBox.scss
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -1,3 +1,7 @@
+$light-blue: #AEDDF8;
+$dark-blue: #5B9FDD;
+$light-background: #ececec;
+
 .presElementBox-item {
     display: grid;
     grid-template-columns: max-content max-content max-content;
@@ -26,7 +30,7 @@
         z-index: -1;
         width: calc(100% + 200px);
         height: calc(100% + 8px);
-        background-color: #AEDDF8;
+        background-color: $light-blue;
     }
 
     .presElementBox-highlightTop {
@@ -69,7 +73,7 @@
 .presElementBox-active {
     color: black;
     border-radius: 6px;
-    border: solid 2px #5B9FDD;
+    border: solid 2px $dark-blue;
 }
 
 .presElementBox-buttons {
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index 11ffde9dd..092fd1fd3 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -189,7 +189,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                     DataDoc={this.targetDoc[DataSym] !== this.targetDoc && this.targetDoc[DataSym]}
                     LibraryPath={emptyPath}
                     fitToBox={true}
-                    backgroundColor={() => "darkgrey"}
+                    backgroundColor={this.props.backgroundColor}
                     rootSelected={returnTrue}
                     addDocument={returnFalse}
                     removeDocument={returnFalse}
@@ -254,11 +254,8 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
     }
 
     startDrag = (e: PointerEvent, down: number[], delta: number[]) => {
-        // const ele: HTMLElement[] = PresBox.Instance._eleArray.map(doc => doc);
         const activeItem = this.rootDoc;
         const dragData = new DragManager.DocumentDragData(PresBox.Instance.sortArray().map(doc => doc));
-        // let value = this.getValue(this._heading);
-        // value = typeof value === "string" ? `"${value}"` : value;
         const dragItem: HTMLElement[] = [];
         PresBox.Instance._dragArray.map(ele => {
             const drag = ele;
@@ -337,7 +334,6 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                     <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">{"Remove from presentation"}</div></>}><div
                         className="presElementBox-closeIcon"
-                        // onPointerDown={e => e.stopPropagation()}
                         onClick={e => {
                             this.props.removeDocument?.(this.rootDoc);
                             e.stopPropagation();
@@ -363,6 +359,4 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
             </div>
         );
     }
-}
-
-// this.layoutDoc.title !== "pres element template"
\ No newline at end of file
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 142011ffd5c9ca5aeed85ed8a74e5919e0e5a6dd Mon Sep 17 00:00:00 2001
From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com>
Date: Thu, 6 Aug 2020 20:38:31 +0800
Subject: audio auto play bug fix && some more commenting

---
 src/client/views/.DS_Store                         | Bin 6148 -> 10244 bytes
 src/client/views/MainView.tsx                      |   6 +-
 src/client/views/PropertiesButtons.tsx             |   8 +-
 .../views/collections/CollectionDockingView.scss   |  15 ++
 .../views/collections/CollectionDockingView.tsx    |  30 ++--
 src/client/views/nodes/PresBox.scss                |  79 ++++-------
 src/client/views/nodes/PresBox.tsx                 | 151 ++++++++-------------
 7 files changed, 127 insertions(+), 162 deletions(-)

(limited to 'src/client/views/PropertiesButtons.tsx')

diff --git a/src/client/views/.DS_Store b/src/client/views/.DS_Store
index 7a8c419ee..c379549d0 100644
Binary files a/src/client/views/.DS_Store and b/src/client/views/.DS_Store differ
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 007d531c8..51137a080 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -175,10 +175,8 @@ export class MainView extends React.Component {
             fa.faFillDrip, fa.faLink, fa.faUnlink, fa.faBold, fa.faItalic, fa.faChevronLeft, fa.faUnderline, fa.faStrikethrough, fa.faSuperscript, fa.faSubscript,
             fa.faIndent, fa.faEyeDropper, fa.faPaintRoller, fa.faBars, fa.faBrush, fa.faShapes, fa.faEllipsisH, fa.faHandPaper, fa.faMap, fa.faUser, faHireAHelper,
             fa.faDesktop, fa.faTrashRestore, fa.faUsers, fa.faWrench, fa.faCog, fa.faMap, fa.faBellSlash, fa.faExpandAlt, fa.faArchive, fa.faBezierCurve, fa.faCircle,
-            fa.faLongArrowAltRight, fa.faPenFancy, fa.faAngleDoubleRight, faBuffer, fa.faExpand, fa.faUndo, fa.faSlidersH, fa.faAngleDoubleLeft);
-        //Pres trail icons (just for the sake of merging)
-        library.add(fa.faAngleUp, fa.faAngleDown, fa.faPlayCircle, fa.faClock,
-            fa.faRocket, fa.faExchangeAlt, faBuffer);
+            fa.faLongArrowAltRight, fa.faPenFancy, fa.faAngleDoubleRight, faBuffer, fa.faExpand, fa.faUndo, fa.faSlidersH, fa.faAngleDoubleLeft, fa.faAngleUp,
+            fa.faAngleDown, fa.faPlayCircle, fa.faClock, fa.faRocket, fa.faExchangeAlt, faBuffer);
         this.initEventListeners();
         this.initAuthenticationRouters();
     }
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 3392371de..55eb6c028 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -243,9 +243,8 @@ export class PropertiesButtons extends React.Component<{}, {}> {
             const scale = targetDoc._viewScale;
         }
         return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Pin with this view"}</div></>} placement="top">
-            <>
+            <div>
                 <div className="propertiesButtons-linker"
-                    style={{ backgroundColor: "black", color: "white" }}
                     onClick={e => {
                         if (targetDoc) {
                             DockedFrameRenderer.PinDoc(targetDoc, false);
@@ -262,8 +261,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                     <FontAwesomeIcon className="documentdecorations-icon" size="lg" icon="map-pin" />
                     <div style={{ position: 'relative', fontSize: 25, fontWeight: 700, transform: 'translate(0, -20px)', color: 'rgba(250,250,250,0.5)' }}>V</div>
                 </div>
-                <div className="propertiesButtons-title" style={{ backgroundColor: "black", color: "white" }}>{"View"}</div>
-            </>
+
+                <div className="propertiesButtons-title">{"View"}</div>
+            </div>
         </Tooltip>;
     }
 
diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
index 98babc3d2..4204ef5bb 100644
--- a/src/client/views/collections/CollectionDockingView.scss
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -54,6 +54,21 @@
             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%;
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index af701bfdd..7bd79b2ef 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -870,19 +870,25 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
         return currentFrame;
     }
     renderMiniPres() {
-        return <div className="miniPres" style={{
-            width: 250, height: 30, background: '#323232'
-        }}>
-            <div className="miniPresOverlay" onClick={() => document.addEventListener("keydown", PresBox.Instance.minimizeEvents, false)}>
-                <div className="miniPres-button" onClick={PresBox.Instance.back}><FontAwesomeIcon icon={"arrow-left"} /></div>
-                <div className="miniPres-button" onClick={() => PresBox.Instance.startOrResetPres(PresBox.Instance.itemIndex)}><FontAwesomeIcon icon={PresBox.Instance.layoutDoc.presStatus === "auto" ? "pause" : "play"} /></div>
-                <div className="miniPres-button" onClick={PresBox.Instance.next}><FontAwesomeIcon icon={"arrow-right"} /></div>
-                <div className="miniPres-divider"></div>
-                <div className="miniPres-button-text">Slide {PresBox.Instance.itemIndex + 1} / {PresBox.Instance.childDocs.length}</div>
-                <div className="miniPres-divider"></div>
-                <div className="miniPres-button-text" onClick={PresBox.Instance.updateMinimize}>EXIT</div>
+        return (
+            <div className="miniPres"
+                style={{ width: 250, height: 30, background: '#323232' }}
+                onClick={() => document.addEventListener("keydown", PresBox.Instance.minimizeEvents, false)}
+            >
+                {<div className="miniPresOverlay" onClick={() => document.addEventListener("keydown", PresBox.Instance.minimizeEvents, false)}>
+                    <div className="miniPres-button" onClick={PresBox.Instance.back}><FontAwesomeIcon icon={"arrow-left"} /></div>
+                    <div className="miniPres-button" onClick={() => PresBox.Instance.startAutoPres(PresBox.Instance.itemIndex)}><FontAwesomeIcon icon={PresBox.Instance.layoutDoc.presStatus === "auto" ? "pause" : "play"} /></div>
+                    <div className="miniPres-button" onClick={PresBox.Instance.next}><FontAwesomeIcon icon={"arrow-right"} /></div>
+                    <div className="miniPres-divider"></div>
+                    <div className="miniPres-button-text">
+                        Slide {PresBox.Instance.itemIndex + 1} / {PresBox.Instance.childDocs.length}
+                        {PresBox.Instance.playButtonFrames}
+                    </div>
+                    <div className="miniPres-divider"></div>
+                    <div className="miniPres-button-text" onClick={PresBox.Instance.updateMinimize}>EXIT</div>
+                </div>}
             </div>
-        </div>;
+        );
     }
     renderMiniMap() {
         return <div className="miniMap" style={{
diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index d5389da35..77e7924dd 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -161,52 +161,6 @@ $light-background: #ececec;
         padding-left: 10px;
     }
 
-    // .toolbar-slider {
-    //     position: relative;
-    //     align-self: center;
-    //     justify-self: left;
-    //     -webkit-appearance: none;
-    //     background-color: #5b9ddd;
-    //     overflow: hidden;
-    //     margin-top: 5px;
-    //     width: 100%;
-    //     max-width: 200px;
-
-    // }
-
-    // .toolbar-slider:focus {
-    //     outline: none;
-    // }
-
-    // .effectDirection {
-    //     justify-self: center;
-    //     align-self: center;
-    //     align-items: center;
-    //     justify-content: center;
-    //     grid-template-columns: 13px 13px 13px;
-    //     display: grid;
-    // }
-
-    // .toolbar-slider::-webkit-slider-thumb {
-    //     -webkit-appearance: none;
-    //     background-color: #5b9ddd;
-    //     box-shadow: -100 vw 0 0 100vw pink;
-    //     width: 12px;
-    //     height: 12px;
-    // }
-
-    // .toolbar-slider::-webkit-slider-runnable-track {
-    //     position: relative;
-    //     align-self: center;
-    //     justify-self: left;
-    //     -webkit-appearance: none;
-    //     background-color: #5b9ddd;
-    //     margin-top: 5px;
-    //     border: solid 1px black;
-    //     border-radius: 10px;
-    //     height: 5px;
-    //     left: 0px;
-    // }
     .presBox-subheading {
         font-size: 11;
         font-weight: 400;
@@ -412,7 +366,7 @@ $light-background: #ececec;
         font-size: 10.5;
         font-weight: 200;
         height: 20;
-        background-color: #dedede;
+        background-color: $light-background;
         border: solid 1px black;
         display: flex;
         margin-top: 5px;
@@ -504,7 +458,7 @@ $light-background: #ececec;
             grid-template-columns: auto 20%;
             position: relative;
             border: solid 1px black;
-            background-color: #dedede;
+            background-color: $light-background;
             border-radius: 5px;
             font-size: 10;
             height: 30;
@@ -632,7 +586,7 @@ $light-background: #ececec;
     align-items: center;
     justify-content: center;
     transform: translate(0px, -1px);
-    background-color: #dedede;
+    background-color: $light-background;
     width: 40px;
     height: 15px;
     align-self: center;
@@ -646,7 +600,7 @@ $light-background: #ececec;
 .layout-container {
     padding: 5px;
     display: grid;
-    background-color: #dedede;
+    background-color: $light-background;
     grid-template-columns: repeat(auto-fit, minmax(90px, 100px));
     width: 100%;
     border: solid 1px black;
@@ -798,12 +752,14 @@ $light-background: #ececec;
         border-radius: 5px;
         grid-template-rows: 100%;
         height: 25;
-        width: 200;
+        width: max-content;
+        min-width: max-content;
         justify-content: space-evenly;
         align-items: center;
         display: flex;
         position: absolute;
         right: 10px;
+        transition: all 0.2s;
 
         .miniPres-button-text {
             display: flex;
@@ -811,6 +767,10 @@ $light-background: #ececec;
             width: max-content;
             font-family: Roboto;
             font-weight: 400;
+            margin-left: 3px;
+            margin-right: 3px;
+            padding-right: 3px;
+            padding-left: 3px;
             letter-spacing: normal;
             border-radius: 5px;
             align-items: center;
@@ -824,10 +784,27 @@ $light-background: #ececec;
             border-right: solid 1px #5a5a5a;
         }
 
+        .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-button {
             display: flex;
             height: 20;
             min-width: 20;
+            margin-left: 3px;
+            margin-right: 3px;
             border-radius: 100%;
             align-items: center;
             justify-content: center;
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index 5d4cde382..24918098f 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -27,6 +27,7 @@ import { CollectionFreeFormViewChrome } from "../collections/CollectionMenu";
 import { actionAsync } from "mobx-utils";
 import { SelectionManager } from "../../util/SelectionManager";
 import { AudioBox } from "./AudioBox";
+import { white } from "colors";
 
 type PresBoxSchema = makeInterface<[typeof documentSchema]>;
 const PresBoxDocument = makeInterface(documentSchema);
@@ -37,7 +38,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     static Instance: PresBox;
 
     @observable _isChildActive = false;
-    @observable _moveOnFromAudio: boolean = false;
+    @observable _moveOnFromAudio: boolean = true;
     @observable _presTimer!: NodeJS.Timeout;
 
     @observable _selectedArray: Doc[] = [];
@@ -103,7 +104,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     next = () => {
         this.updateCurrentPresentation();
         const activeNext = Cast(this.childDocs[this.itemIndex + 1], Doc, null);
-        const presTargetDoc = Cast(this.childDocs[this.itemIndex].presentationTargetDoc, Doc, null);
+        const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
+        const presTargetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
         const childDocs = DocListCast(presTargetDoc[Doc.LayoutFieldKey(presTargetDoc)]);
         const currentFrame = Cast(presTargetDoc.currentFrame, "number", null);
         const lastFrame = Cast(presTargetDoc.lastFrame, "number", null);
@@ -119,26 +121,16 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             if (presTargetDoc.presProgressivize) CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0);
             if (presTargetDoc.zoomProgressivize) this.zoomProgressivizeNext(presTargetDoc);
             // Case 2: Audio or video therefore wait to play the audio or video before moving on
-        } else if ((presTargetDoc.type === DocumentType.VID || presTargetDoc.type === DocumentType.AUDIO) && !this._moveOnFromAudio) {
-            if (presTargetDoc.type === DocumentType.AUDIO) {
-                AudioBox.Instance.playFrom(0);
-                this._moveOnFromAudio = true;
-            }
-            if (presTargetDoc.type === DocumentType.VID) {
-                this._moveOnFromAudio = true;
-            }
+        } else if ((presTargetDoc.type === DocumentType.AUDIO) && !this._moveOnFromAudio) {
+            AudioBox.Instance.playFrom(0);
+            this._moveOnFromAudio = true;
             // Case 3: No more frames in current doc and next slide is defined, therefore move to next slide
-        } else if (activeNext !== undefined) {
-            if (!presTargetDoc.presProgressivize) {
-                const nextTagDoc = Cast(this.childDocs[this.itemIndex + 1].presentationTargetDoc, Doc, null);
-                const nextChildDocs = DocListCast(nextTagDoc[Doc.LayoutFieldKey(presTargetDoc)]);
-                nextChildDocs.forEach((doc, i) => {
-                    doc.opacity = 1;
-                });
-            }
+        } else if (this.childDocs[this.itemIndex + 1] !== undefined) {
             const nextSelected = this.itemIndex + 1;
             this.gotoDocument(nextSelected, this.itemIndex);
-            this._moveOnFromAudio = false;
+            const targetNext = Cast(activeNext.presentationTargetDoc, Doc, null);
+            if (activeNext && targetNext.type === DocumentType.AUDIO && activeNext.playAuto) {
+            } else { this._moveOnFromAudio = false };
         }
     }
 
@@ -318,7 +310,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     //The function that starts or resets presentaton functionally, depending on presStatus of the layoutDoc
     @undoBatch
     @action
-    startPres = (startSlide: number) => {
+    startAutoPres = (startSlide: number) => {
         this.updateCurrentPresentation();
         const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
         const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null);
@@ -377,13 +369,13 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         this.turnOffEdit();
         if (srcContext) {
             if (srcContext.miniPres) {
-                document.removeEventListener("keydown", this.minimizeEvents, false);
                 srcContext.miniPres = false;
                 CollectionDockingView.AddRightSplit(this.rootDoc);
+                document.removeEventListener("keydown", this.minimizeEvents, false);
             } else {
-                document.addEventListener("keydown", this.minimizeEvents, false);
                 srcContext.miniPres = true;
                 this.props.addDocTab?.(this.rootDoc, "close");
+                document.addEventListener("keydown", this.minimizeEvents, false);
             }
         }
     }
@@ -544,7 +536,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         } if (e.keyCode === 39) { // right (39) / d(68) / down(40) to go to next
             if (this.layoutDoc.presStatus !== "edit") this.next();
         } if (e.keyCode === 32) { // spacebar to 'present' or autoplay
-            if (this.layoutDoc.presStatus !== "edit") this.startPres(0);
+            if (this.layoutDoc.presStatus !== "edit") this.startAutoPres(0);
             else this.layoutDoc.presStatus = "manual";
         }
         if (e.keyCode === 8) { // delete selected items
@@ -688,7 +680,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
         if (activeItem && targetDoc) {
             const transitionSpeed = targetDoc.presTransition ? String(Number(targetDoc.presTransition) / 1000) : 0.5;
-            const duration = targetDoc.presDuration ? String(Number(targetDoc.presDuration) / 1000) : 2;
+            let duration = targetDoc.presDuration ? String(Number(targetDoc.presDuration) / 1000) : 2;
+            if (targetDoc.type === DocumentType.AUDIO) duration = NumCast(targetDoc.duration);
             const effect = targetDoc.presEffect ? targetDoc.presEffect : 'None';
             activeItem.presMovement = activeItem.presMovement ? activeItem.presMovement : 'Zoom';
             return (
@@ -726,8 +719,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                             <div className="presBox-subheading">Slide Duration</div>
                             <div className="ribbon-property"> {duration} s </div>
                         </div>
-                        <input type="range" step="0.1" min="0.1" max="10" value={duration} style={{ transform: 'rotate(0deg)' }} className={"toolbar-slider"} id="duration-slider" onChange={(e: React.ChangeEvent<HTMLInputElement>) => { e.stopPropagation(); this.setDurationTime(e.target.value); }} />
-                        <div className={"slider-headers"}>
+                        <input type="range" step="0.1" min="0.1" max="10" value={duration} style={{ display: targetDoc.type === DocumentType.AUDIO ? "none" : "block" }} className={"toolbar-slider"} id="duration-slider" onChange={(e: React.ChangeEvent<HTMLInputElement>) => { e.stopPropagation(); this.setDurationTime(e.target.value); }} />
+                        <div className={"slider-headers"} style={{ display: targetDoc.type === DocumentType.AUDIO ? "none" : "block" }}>
                             <div className="slider-text">Short</div>
                             <div className="slider-text">Medium</div>
                             <div className="slider-text">Long</div>
@@ -816,7 +809,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                         <div className="ribbon-box">
                             <div className="ribbon-doubleButton" style={{ display: targetDoc.type === DocumentType.VID || targetDoc.type === DocumentType.AUDIO ? "inline-flex" : "none" }}>
                                 <div className="ribbon-button" style={{ backgroundColor: activeItem.playAuto ? "#aedef8" : "" }} onClick={() => activeItem.playAuto = !activeItem.playAuto}>Play automatically</div>
-                                <div className="ribbon-button" style={{ display: "flex", backgroundColor: targetDoc.playAuto ? "" : "#aedef8" }} onClick={() => activeItem.playAuto = !activeItem.playAuto}>Play on next</div>
+                                <div className="ribbon-button" style={{ display: "flex", backgroundColor: activeItem.playAuto ? "" : "#aedef8" }} onClick={() => activeItem.playAuto = !activeItem.playAuto}>Play on next</div>
                             </div>
                             <div className="ribbon-doubleButton" style={{ display: "flex" }}>
                                 <div className="ribbon-button" style={{ backgroundColor: activeItem.openDocument ? "#aedef8" : "" }} onClick={() => activeItem.openDocument = !activeItem.openDocument}>Open document</div>
@@ -923,12 +916,14 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         if (freeform && layout) doc = this.createTemplate(layout, title);
         if (!freeform && !layout) doc = Docs.Create.TextDocument("", { _nativeWidth: 400, _width: 225, title: title });
         const presCollection = Cast(this.layoutDoc.presCollection, Doc, null);
-        const data = Cast(presCollection.data, listSpec(Doc));
+        const data = Cast(presCollection?.data, listSpec(Doc));
         const presData = Cast(this.rootDoc.data, listSpec(Doc));
         if (data && doc && presData) {
             data.push(doc);
             DockedFrameRenderer.PinDoc(doc, false);
             this.gotoDocument(this.childDocs.length, this.itemIndex);
+        } else {
+            this.props.addDocTab(doc as Doc, "onRight");
         }
     }
 
@@ -975,7 +970,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={(action(() => { this.updateMinimize; this.layoutDoc.presStatus = "manual"; this.turnOffEdit(); }))}>
+                <div className="dropdown-play-button" onClick={this.updateMinimize}>
                     Minimize
                 </div>
                 <div className="dropdown-play-button" onClick={(action(() => { this.layoutDoc.presStatus = "manual"; this.turnOffEdit(); }))}>
@@ -1108,7 +1103,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
     }
 
     turnOffEdit = () => {
-        this.childDocs.forEach((doc, index) => {
+        this.childDocs.forEach((doc) => {
+            doc.editSnapZoomProgressivize = false;
+            doc.editZoomProgressivize = false;
+            doc.editScrollProgressivize = false;
             const targetDoc = Cast(doc.presentationTargetDoc, Doc, null);
             targetDoc.editSnapZoomProgressivize = false;
             targetDoc.editZoomProgressivize = false;
@@ -1596,63 +1594,31 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
         if (activeItem) {
             return (
-                <div id="toolbarContainer" className={'presBox-toolbar'} style={{ display: this.layoutDoc.presStatus !== 'auto' && this.layoutDoc.presStatus !== 'manual' ? "inline-flex" : "none" }}>
-                    <Tooltip title={<><div className="dash-tooltip">{"Add new slide"}</div></>}><div className={`toolbar-button ${this.newDocumentTools ? "active" : ""}`} onClick={action(() => this.newDocumentTools = !this.newDocumentTools)}><FontAwesomeIcon icon={"plus"} />
+                <div id="toolbarContainer" className={'presBox-toolbar'} style={{ display: this.layoutDoc.presStatus === "edit" ? "inline-flex" : "none" }}>
+                    <Tooltip title={<><div className="dash-tooltip">{"Add new slide"}</div></>}><div className={`toolbar-button ${this.newDocumentTools ? "active" : ""}`} onClick={action(() => this.newDocumentTools = !this.newDocumentTools)}>
+                        <FontAwesomeIcon icon={"plus"} />
                         <FontAwesomeIcon className={`dropdown ${this.newDocumentTools ? "active" : ""}`} icon={"angle-down"} />
                     </div></Tooltip>
                     <div className="toolbar-divider" />
                     <Tooltip title={<><div className="dash-tooltip">{"View paths"}</div></>}><div className={`toolbar-button ${this.pathBoolean ? "active" : ""}`}>
-                        <FontAwesomeIcon icon={"exchange-alt"} onClick={this.viewPaths} />
+                        <FontAwesomeIcon icon={"exchange-alt"} onClick={this.childDocs.length > 1 ? this.viewPaths : undefined} />
                     </div></Tooltip>
                     <Tooltip title={<><div className="dash-tooltip">{this.expandBoolean ? "Minimize all" : "Expand all"}</div></>}>
                         <div className={`toolbar-button ${this.expandBoolean ? "active" : ""}`} onClick={() => { this.toggleExpand(); this.childDocs.forEach((doc, ind) => { if (this.expandBoolean) doc.presExpandInlineButton = true; else doc.presExpandInlineButton = false; }); }}>
                             <FontAwesomeIcon icon={"eye"} />
                         </div>
                     </Tooltip>
-                    {/* <div className="toolbar-button"><FontAwesomeIcon title={"Portal"} icon={"eye"} onClick={this.toolbarTest} /></div> */}
-                    <div className="toolbar-divider" />
-                    {/* <Tooltip title={<><div className="dash-tooltip">{"Transitions"}</div></>}><div className={`toolbar-button ${this.transitionTools ? "active" : ""}`} onClick={this.toggleTransitionTools}>
-                        <FontAwesomeIcon icon={"rocket"} />
-                        <div style={{ display: this.props.PanelWidth() > 430 ? "block" : "none" }} className="toolbar-buttonText">&nbsp; Transitions</div>
-                        <FontAwesomeIcon className={`dropdown ${this.transitionTools ? "active" : ""}`} icon={"angle-down"} />
-                    </div></Tooltip>
                     <div className="toolbar-divider" />
-                    <Tooltip title={<><div className="dash-tooltip">{"Progressivize"}</div></>}><div className={`toolbar-button ${this.progressivizeTools ? "active" : ""}`} onClick={this.toggleProgressivize}>
-                        <FontAwesomeIcon icon={"tasks"} />
-                        <div style={{ display: this.props.PanelWidth() > 430 ? "block" : "none" }} className="toolbar-buttonText">&nbsp; Progressivize</div>
-                        <FontAwesomeIcon className={`dropdown ${this.progressivizeTools ? "active" : ""}`} icon={"angle-down"} />
-                    </div></Tooltip>
-                    <div className="toolbar-divider" /> */}
-                    {/* <div className="toolbar-button" style={{ position: 'absolute', right: 23, transform: 'rotate(45deg)', fontSize: 16 }}>
-                        <FontAwesomeIcon className={"toolbar-thumbtack"} icon={"thumbtack"} />
-                    </div>
-                    <div className={`toolbar-button ${this.moreInfoTools ? "active" : ""}`} onClick={this.toggleMoreInfo}>
-                        <div className={`toolbar-moreInfo ${this.moreInfoTools ? "active" : ""}`}>
-                            <div className="toolbar-moreInfoBall" />
-                            <div className="toolbar-moreInfoBall" />
-                            <div className="toolbar-moreInfoBall" />
-                        </div>
-                    </div> */}
                 </div>
             );
         } else {
             return (
-                <>
+                <div id="toolbarContainer" className={'presBox-toolbar'}>
                     <Tooltip title={<><div className="dash-tooltip">{"Add new slide"}</div></>}><div className={`toolbar-button ${this.newDocumentTools ? "active" : ""}`} onClick={action(() => this.newDocumentTools = !this.newDocumentTools)}>
                         <FontAwesomeIcon icon={"plus"} />
                         <FontAwesomeIcon className={`dropdown ${this.newDocumentTools ? "active" : ""}`} icon={"angle-down"} />
                     </div></Tooltip>
-                    {/* <div className="toolbar-button" style={{ position: 'absolute', right: 23, transform: 'rotate(45deg)', fontSize: 16 }}>
-                        <FontAwesomeIcon className={"toolbar-thumbtack"} icon={"thumbtack"} />
-                    </div>
-                    <div className={`toolbar-button ${this.moreInfoTools ? "active" : ""}`} onClick={this.toggleMoreInfo}>
-                        <div className={`toolbar-moreInfo ${this.moreInfoTools ? "active" : ""}`}>
-                            <div className="toolbar-moreInfoBall" />
-                            <div className="toolbar-moreInfoBall" />
-                            <div className="toolbar-moreInfoBall" />
-                        </div>
-                    </div> */}
-                </>
+                </div>
             );
         }
     }
@@ -1674,13 +1640,16 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                     <option onPointerDown={e => e.stopPropagation()} value={CollectionViewType.Stacking}>List</option>
                     <option onPointerDown={e => e.stopPropagation()} value={CollectionViewType.Carousel}>Slides</option>
                 </select>
-                <div className="presBox-presentPanel">
+                <div className="presBox-presentPanel" style={{ opacity: this.childDocs.length > 0 ? 1 : 0.3 }}>
                     <span className={`presBox-button ${this.layoutDoc.presStatus === "edit" ? "present" : ""}`}>
-                        <div className="presBox-button-left" onClick={() => this.layoutDoc.presStatus = "manual"}>
+                        <div className="presBox-button-left" onClick={() => { if (this.childDocs.length > 0) this.layoutDoc.presStatus = "manual" }}>
                             <FontAwesomeIcon icon={"play-circle"} />
                             <div style={{ display: this.props.PanelWidth() > 200 ? "inline-flex" : "none" }}>&nbsp; Present</div>
                         </div>
-                        <div className={`presBox-button-right ${this.presentTools ? "active" : ""}`} onClick={e => { e.stopPropagation; this.presentTools = !this.presentTools; }}>
+                        <div className={`presBox-button-right ${this.presentTools ? "active" : ""}`}
+                            onClick={(action(() => {
+                                if (this.childDocs.length > 0) this.presentTools = !this.presentTools;
+                            }))}>
                             <FontAwesomeIcon className="dropdown" style={{ margin: 0, transform: this.presentTools ? 'rotate(180deg)' : 'rotate(0deg)' }} icon={"angle-down"} />
                             {this.presentDropdown}
                         </div>
@@ -1691,41 +1660,41 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         );
     }
 
-    @computed get playButtons() {
+    @computed get playButtonFrames() {
         const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
         const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null);
+        return (
+            <>
+                {targetDoc ? <div className="miniPres-button-frame" style={{ display: targetDoc.lastFrame !== undefined && targetDoc.lastFrame >= 0 ? "inline-flex" : "none" }}>
+                    <div>{targetDoc.currentFrame}</div>
+                    <div className="miniPres-divider" style={{ border: 'solid 0.5px white', height: '60%' }}></div>
+                    <div>{targetDoc.lastFrame}</div>
+                </div> : null}
+            </>
+        );
+    }
+
+    @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" }}>
-            {/* <span className={`presBox-button ${this.layoutDoc.presStatus !== "edit" ? "active" : ""}`}>
-                <div className="presBox-button-left" onClick={() => this.startPres(0)}>
-                    <FontAwesomeIcon icon={"clock"} /> &nbsp;
-                    <FontAwesomeIcon icon={this.layoutDoc.presStatus === "auto" ? "pause" : "play"} />
-                </div>
-                <div className={`presBox-button-right ${this.playTools ? "active" : ""}`} onClick={e => { e.stopPropagation; this.togglePlay(); }}>
-                    <FontAwesomeIcon className="dropdown" style={{ margin: 0, transform: this.playTools ? 'rotate(180deg)' : 'rotate(0deg)' }} icon={"angle-down"} />
-                    {this.playDropdown}
-                </div>
-            </span> */}
             <div className="miniPres-button" onClick={this.back}><FontAwesomeIcon icon={"arrow-left"} /></div>
-            <div className="miniPres-button" onClick={() => this.startPres(this.itemIndex)}><FontAwesomeIcon icon={PresBox.Instance.layoutDoc.presStatus === "auto" ? "pause" : "play"} /></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" }}>
                 Slide {this.itemIndex + 1} / {this.childDocs.length}
-                {targetDoc ? <div className="miniPres-button-frame" style={{ display: targetDoc.lastFrame !== undefined && targetDoc.lastFrame >= 0 ? "inline-flex" : "none" }}>
-                    <div>{targetDoc.currentFrame}</div>
-                    <div>{targetDoc.lastFrame}</div>
-                </div> : null}
+                {this.playButtonFrames}
             </div>
             <div className="miniPres-divider"></div>
-            <div className="miniPres-button" onClick={() => this.layoutDoc.presStatus = "edit"}>
-                <FontAwesomeIcon icon={"times"} />
-            </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"}>
+                    <FontAwesomeIcon icon={"times"} />
+                </div>}
         </div>);
     }
 
     render() {
-        // needed to insure that the childDocs are loaded for looking up fields
+        // 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 onPointerOver={this.onPointerOver} onPointerLeave={this.onPointerLeave} className="presBox-cont" style={{ minWidth: this.layoutDoc.inOverlay ? 240 : undefined }} >
-- 
cgit v1.2.3-70-g09d2


From 33487aa34fd455acf5216cfee7913d6e36f390ed Mon Sep 17 00:00:00 2001
From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com>
Date: Fri, 7 Aug 2020 01:35:46 +0800
Subject: presentaiton options slightly reformatted :pear:

---
 src/client/views/PropertiesButtons.tsx             |  3 +-
 .../views/collections/CollectionDockingView.tsx    |  3 +-
 .../collectionFreeForm/PropertiesView.scss         | 37 +++++++++
 .../collectionFreeForm/PropertiesView.tsx          | 64 ++++++++--------
 src/client/views/nodes/PresBox.scss                |  8 +-
 src/client/views/nodes/PresBox.tsx                 | 89 ++++++++++------------
 .../views/nodes/formattedText/FormattedTextBox.tsx | 19 ++---
 .../views/presentationview/PresElementBox.scss     |  4 +-
 .../views/presentationview/PresElementBox.tsx      |  3 +-
 9 files changed, 128 insertions(+), 102 deletions(-)

(limited to 'src/client/views/PropertiesButtons.tsx')

diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 55eb6c028..5c584d270 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -221,8 +221,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                 <div className="propertiesButtons-linker"
                     style={{ backgroundColor: isPinned ? "white" : "", color: isPinned ? "black" : "white" }}
                     onClick={e => DockedFrameRenderer.PinDoc(targetDoc, isPinned)}>
-                    <FontAwesomeIcon className="documentdecorations-icon" size="lg" icon="map-pin"
-                    />
+                    <FontAwesomeIcon className="documentdecorations-icon" size="lg" icon="map-pin" />
                 </div>
 
                 <div className="propertiesButtons-title" style={{
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 7bd79b2ef..7e096fa37 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -873,9 +873,8 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
         return (
             <div className="miniPres"
                 style={{ width: 250, height: 30, background: '#323232' }}
-                onClick={() => document.addEventListener("keydown", PresBox.Instance.minimizeEvents, false)}
             >
-                {<div className="miniPresOverlay" onClick={() => document.addEventListener("keydown", PresBox.Instance.minimizeEvents, false)}>
+                {<div className="miniPresOverlay">
                     <div className="miniPres-button" onClick={PresBox.Instance.back}><FontAwesomeIcon icon={"arrow-left"} /></div>
                     <div className="miniPres-button" onClick={() => PresBox.Instance.startAutoPres(PresBox.Instance.itemIndex)}><FontAwesomeIcon icon={PresBox.Instance.layoutDoc.presStatus === "auto" ? "pause" : "play"} /></div>
                     <div className="miniPres-button" onClick={PresBox.Instance.next}><FontAwesomeIcon icon={"arrow-right"} /></div>
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index 5b41db90e..3ae94efb7 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -405,6 +405,43 @@
         }
 
     }
+
+    .propertiesView-presTrails {
+        border-bottom: 1px solid black;
+        //padding: 8.5px;
+
+        .propertiesView-presTrails-title {
+            font-weight: bold;
+            font-size: 12.5px;
+            padding: 4px;
+            display: flex;
+            color: white;
+            padding-left: 8px;
+            background-color: rgb(51, 51, 51);
+
+            &:hover {
+                cursor: pointer;
+            }
+
+            .propertiesView-presTrails-title-icon {
+                float: right;
+                right: 0;
+                position: absolute;
+                margin-left: 2px;
+                margin-right: 9px;
+
+                &:hover {
+                    cursor: pointer;
+                }
+            }
+        }
+
+        .propertiesView-presTrails-content {
+            font-size: 10px;
+            padding: 10px;
+            margin-left: 5px;
+        }
+    }
 }
 
 .inking-button {
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index 89f48fc65..cef2241c9 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -71,11 +71,10 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     @observable openAppearance: boolean = true;
     @observable openTransform: boolean = true;
     //Pres Trails booleans:
-    @observable openAddSlide: boolean = true;
-    @observable openPresentationTools: boolean = true;
-    @observable openPresTransitions: boolean = true;
-    @observable openPresProgressivize: boolean = true;
-    @observable openSlideOptions: boolean = true;
+    @observable openPresTransitions: boolean = false;
+    @observable openPresProgressivize: boolean = false;
+    @observable openAddSlide: boolean = false;
+    @observable openSlideOptions: boolean = false;
 
     @observable inActions: boolean = false;
     @observable _controlBtn: boolean = false;
@@ -874,6 +873,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 </div>;
             }
             if (this.isPres) {
+                const selectedItem: boolean = PresBox.Instance._selectedArray.length > 0;
                 return <div className="propertiesView" style={{ width: this.props.width }} >
                     <div className="propertiesView-title" style={{ width: this.props.width }}>
                         Presentation
@@ -890,57 +890,57 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                             </div>
                         </div>
                     </div>
-                    <div className="propertiesView-settings">
-                        <div className="propertiesView-settings-title"
-                            onPointerDown={() => runInAction(() => { this.openAddSlide = !this.openAddSlide; })}
-                            style={{ backgroundColor: this.openAddSlide ? "black" : "" }}>
-                            &nbsp; <FontAwesomeIcon icon={"plus"} /> &nbsp; Add new slide
-                        <div className="propertiesView-settings-title-icon">
-                                <FontAwesomeIcon icon={this.openAddSlide ? "caret-down" : "caret-right"} size="lg" color="white" />
-                            </div>
-                        </div>
-                        {this.openAddSlide ? <div className="propertiesView-settings-content">
-                            {PresBox.Instance.newDocumentDropdown}
-                        </div> : null}
-                    </div>
-                    <div className="propertiesView-sharing">
-                        <div className="propertiesView-sharing-title"
+                    {!selectedItem ? (null) : <div className="propertiesView-presTrails">
+                        <div className="propertiesView-presTrails-title"
                             onPointerDown={() => runInAction(() => { this.openPresTransitions = !this.openPresTransitions; })}
                             style={{ backgroundColor: this.openPresTransitions ? "black" : "" }}>
                             &nbsp; <FontAwesomeIcon icon={"rocket"} /> &nbsp; Transitions
-                        <div className="propertiesView-sharing-title-icon">
+                        <div className="propertiesView-presTrails-title-icon">
                                 <FontAwesomeIcon icon={this.openPresTransitions ? "caret-down" : "caret-right"} size="lg" color="white" />
                             </div>
                         </div>
-                        {this.openPresTransitions ? <div className="propertiesView-sharing-content">
+                        {this.openPresTransitions ? <div className="propertiesView-presTrails-content">
                             {PresBox.Instance.transitionDropdown}
                         </div> : null}
-                    </div>
-                    <div className="propertiesView-sharing">
-                        <div className="propertiesView-sharing-title"
+                    </div>}
+                    {!selectedItem ? (null) : <div className="propertiesView-presTrails">
+                        <div className="propertiesView-presTrails-title"
                             onPointerDown={() => runInAction(() => { this.openPresProgressivize = !this.openPresProgressivize; })}
                             style={{ backgroundColor: this.openPresProgressivize ? "black" : "" }}>
                             &nbsp; <FontAwesomeIcon icon={"tasks"} /> &nbsp; Progressivize
-                        <div className="propertiesView-sharing-title-icon">
+                        <div className="propertiesView-presTrails-title-icon">
                                 <FontAwesomeIcon icon={this.openPresProgressivize ? "caret-down" : "caret-right"} size="lg" color="white" />
                             </div>
                         </div>
-                        {this.openPresProgressivize ? <div className="propertiesView-sharing-content">
+                        {this.openPresProgressivize ? <div className="propertiesView-presTrails-content">
                             {PresBox.Instance.progressivizeDropdown}
                         </div> : null}
-                    </div>
-                    <div className="propertiesView-sharing">
-                        <div className="propertiesView-sharing-title"
+                    </div>}
+                    {!selectedItem ? (null) : <div className="propertiesView-presTrails">
+                        <div className="propertiesView-presTrails-title"
                             onPointerDown={() => runInAction(() => { this.openSlideOptions = !this.openSlideOptions; })}
                             style={{ backgroundColor: this.openSlideOptions ? "black" : "" }}>
                             &nbsp; <FontAwesomeIcon icon={"cog"} /> &nbsp; {PresBox.Instance.stringType} options
-                        <div className="propertiesView-sharing-title-icon">
+                        <div className="propertiesView-presTrails-title-icon">
                                 <FontAwesomeIcon icon={this.openSlideOptions ? "caret-down" : "caret-right"} size="lg" color="white" />
                             </div>
                         </div>
-                        {this.openSlideOptions ? <div className="propertiesView-sharing-content">
+                        {this.openSlideOptions ? <div className="propertiesView-presTrails-content">
                             {PresBox.Instance.optionsDropdown}
                         </div> : null}
+                    </div>}
+                    <div className="propertiesView-presTrails">
+                        <div className="propertiesView-presTrails-title"
+                            onPointerDown={() => runInAction(() => { this.openAddSlide = !this.openAddSlide; })}
+                            style={{ backgroundColor: this.openAddSlide ? "black" : "" }}>
+                            &nbsp; <FontAwesomeIcon icon={"plus"} /> &nbsp; Add new slide
+                        <div className="propertiesView-presTrails-title-icon">
+                                <FontAwesomeIcon icon={this.openAddSlide ? "caret-down" : "caret-right"} size="lg" color="white" />
+                            </div>
+                        </div>
+                        {this.openAddSlide ? <div className="propertiesView-presTrails-content">
+                            {PresBox.Instance.newDocumentDropdown}
+                        </div> : null}
                     </div>
                     <div className="propertiesView-sharing">
                         <div className="propertiesView-sharing-title"
diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index 77e7924dd..a87b0e466 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -247,7 +247,7 @@ $light-background: #ececec;
         justify-self: left;
         margin-top: 5px;
         padding-left: 10px;
-        background-color: rgb(222, 222, 222);
+        background-color: $light-background;
         border: solid 1px black;
         min-width: 80px;
         max-width: 200px;
@@ -272,7 +272,7 @@ $light-background: #ececec;
             cursor: pointer;
             position: relative;
             height: 100%;
-            background: #d5dce2;
+            background: $light-background;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -436,7 +436,7 @@ $light-background: #ececec;
 
             .presBox-dropdownOptions {
                 position: absolute;
-                top: 29px;
+                top: 24px;
                 left: -1px;
                 z-index: 200;
                 width: 85%;
@@ -461,7 +461,7 @@ $light-background: #ececec;
             background-color: $light-background;
             border-radius: 5px;
             font-size: 10;
-            height: 30;
+            height: 25;
             padding-left: 5px;
             align-items: center;
             margin-top: 5px;
diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx
index efcea832d..a9daba675 100644
--- a/src/client/views/nodes/PresBox.tsx
+++ b/src/client/views/nodes/PresBox.tsx
@@ -371,11 +371,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             if (srcContext.miniPres) {
                 srcContext.miniPres = false;
                 CollectionDockingView.AddRightSplit(this.rootDoc);
-                document.removeEventListener("keydown", this.minimizeEvents, false);
             } else {
                 srcContext.miniPres = true;
                 this.props.addDocTab?.(this.rootDoc, "close");
-                document.addEventListener("keydown", this.minimizeEvents, false);
             }
         }
     }
@@ -506,20 +504,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
         }
     }
 
-    // Key events when the minimized player is active
-    @action
-    minimizeEvents = (e: KeyboardEvent) => {
-        e.stopPropagation();
-        e.preventDefault();
-        if (e.keyCode === 27) { // Escape key
-            this.layoutDoc.presStatus = "edit";
-        } if (e.keyCode === 37) { // left(37) / a(65) / up(38) to go back
-            this.back();
-        } if (e.keyCode === 39) { // right (39) / d(68) / down(40) to go to next
-            this.next();
-        }
-    }
-
     // Key for when the presentaiton is active (according to Selection Manager)
     @action
     keyEvents = (e: KeyboardEvent) => {
@@ -531,10 +515,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
             else this.layoutDoc.presStatus = "edit";
         } if ((e.metaKey || e.altKey) && e.keyCode === 65) { // Ctrl-A to select all
             if (this.layoutDoc.presStatus === "edit") this._selectedArray = this.childDocs;
-        } if (e.keyCode === 37) { // left(37) / a(65) / up(38) to go back
-            if (this.layoutDoc.presStatus !== "edit") this.back();
-        } if (e.keyCode === 39) { // right (39) / d(68) / down(40) to go to next
-            if (this.layoutDoc.presStatus !== "edit") this.next();
+        } if (e.keyCode === 37 || e.keyCode === 38) { // left(37) / a(65) / up(38) to go back
+            this.back();
+        } if (e.keyCode === 39 || e.keyCode === 40) { // right (39) / d(68) / down(40) to go to next
+            this.next();
         } if (e.keyCode === 32) { // spacebar to 'present' or autoplay
             if (this.layoutDoc.presStatus !== "edit") this.startAutoPres(0);
             else this.layoutDoc.presStatus = "manual";
@@ -720,7 +704,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                             <div className="ribbon-property"> {duration} s </div>
                         </div>
                         <input type="range" step="0.1" min="0.1" max="10" value={duration} style={{ display: targetDoc.type === DocumentType.AUDIO ? "none" : "block" }} className={"toolbar-slider"} id="duration-slider" onChange={(e: React.ChangeEvent<HTMLInputElement>) => { e.stopPropagation(); this.setDurationTime(e.target.value); }} />
-                        <div className={"slider-headers"} style={{ display: targetDoc.type === DocumentType.AUDIO ? "none" : "block" }}>
+                        <div className={"slider-headers"} style={{ display: targetDoc.type === DocumentType.AUDIO ? "none" : "grid" }}>
                             <div className="slider-text">Short</div>
                             <div className="slider-text">Medium</div>
                             <div className="slider-text">Long</div>
@@ -814,6 +798,20 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
                             <div className="ribbon-doubleButton" style={{ display: "flex" }}>
                                 <div className="ribbon-button" style={{ backgroundColor: activeItem.openDocument ? "#aedef8" : "" }} onClick={() => activeItem.openDocument = !activeItem.openDocument}>Open document</div>
                             </div>
+                            <div className="ribbon-doubleButton" style={{ display: targetDoc.type === DocumentType.COL ? "inline-flex" : "none" }}>
+                                <div className="ribbon-button" style={{ backgroundColor: activeItem.presPinView ? "#aedef8" : "" }}
+                                    onClick={() => {
+                                        activeItem.presPinView = !activeItem.presPinView;
+                                        if (activeItem.presPinView) {
+                                            const x = targetDoc._panX;
+                                            const y = targetDoc._panY;
+                                            const scale = targetDoc._viewScale;
+                                            activeItem.presPinViewX = x;
+                                            activeItem.presPinViewY = y;
+                                            activeItem.presPinViewScale = scale;
+                                        }
+                                    }}>Presentation pin view</div>
+                            </div>
                             <div className="ribbon-doubleButton" style={{ display: targetDoc.type === DocumentType.WEB ? "inline-flex" : "none" }}>
                                 <div className="ribbon-button" onClick={this.progressivizeText}>Store original website</div>
                             </div>
@@ -1592,35 +1590,26 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
 
     @computed get toolbar() {
         const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
-        if (activeItem) {
-            return (
-                <div id="toolbarContainer" className={'presBox-toolbar'} style={{ display: this.layoutDoc.presStatus === "edit" ? "inline-flex" : "none" }}>
-                    <Tooltip title={<><div className="dash-tooltip">{"Add new slide"}</div></>}><div className={`toolbar-button ${this.newDocumentTools ? "active" : ""}`} onClick={action(() => this.newDocumentTools = !this.newDocumentTools)}>
-                        <FontAwesomeIcon icon={"plus"} />
-                        <FontAwesomeIcon className={`dropdown ${this.newDocumentTools ? "active" : ""}`} icon={"angle-down"} />
-                    </div></Tooltip>
-                    <div className="toolbar-divider" />
-                    <Tooltip title={<><div className="dash-tooltip">{"View paths"}</div></>}><div className={`toolbar-button ${this.pathBoolean ? "active" : ""}`}>
-                        <FontAwesomeIcon icon={"exchange-alt"} onClick={this.childDocs.length > 1 ? this.viewPaths : undefined} />
-                    </div></Tooltip>
-                    <Tooltip title={<><div className="dash-tooltip">{this.expandBoolean ? "Minimize all" : "Expand all"}</div></>}>
-                        <div className={`toolbar-button ${this.expandBoolean ? "active" : ""}`} onClick={() => { this.toggleExpand(); this.childDocs.forEach((doc, ind) => { if (this.expandBoolean) doc.presExpandInlineButton = true; else doc.presExpandInlineButton = false; }); }}>
-                            <FontAwesomeIcon icon={"eye"} />
-                        </div>
-                    </Tooltip>
-                    <div className="toolbar-divider" />
-                </div>
-            );
-        } else {
-            return (
-                <div id="toolbarContainer" className={'presBox-toolbar'}>
-                    <Tooltip title={<><div className="dash-tooltip">{"Add new slide"}</div></>}><div className={`toolbar-button ${this.newDocumentTools ? "active" : ""}`} onClick={action(() => this.newDocumentTools = !this.newDocumentTools)}>
-                        <FontAwesomeIcon icon={"plus"} />
-                        <FontAwesomeIcon className={`dropdown ${this.newDocumentTools ? "active" : ""}`} icon={"angle-down"} />
-                    </div></Tooltip>
-                </div>
-            );
-        }
+        return (
+            <div id="toolbarContainer" className={'presBox-toolbar'} style={{ display: this.layoutDoc.presStatus === "edit" ? "inline-flex" : "none" }}>
+                <Tooltip title={<><div className="dash-tooltip">{"Add new slide"}</div></>}><div className={`toolbar-button ${this.newDocumentTools ? "active" : ""}`} onClick={action(() => this.newDocumentTools = !this.newDocumentTools)}>
+                    <FontAwesomeIcon icon={"plus"} />
+                    <FontAwesomeIcon className={`dropdown ${this.newDocumentTools ? "active" : ""}`} icon={"angle-down"} />
+                </div></Tooltip>
+                <div className="toolbar-divider" />
+                <Tooltip title={<><div className="dash-tooltip">{"View paths"}</div></>}>
+                    <div style={{ opacity: this.childDocs.length > 1 ? 1 : 0.3 }} className={`toolbar-button ${this.pathBoolean ? "active" : ""}`} onClick={this.childDocs.length > 1 ? this.viewPaths : undefined}>
+                        <FontAwesomeIcon icon={"exchange-alt"} />
+                    </div>
+                </Tooltip>
+                <Tooltip title={<><div className="dash-tooltip">{this.expandBoolean ? "Minimize all" : "Expand all"}</div></>}>
+                    <div style={{ opacity: this.childDocs.length > 0 ? 1 : 0.3 }} className={`toolbar-button ${this.expandBoolean ? "active" : ""}`} onClick={() => { if (this.childDocs.length > 0) this.toggleExpand(); this.childDocs.forEach((doc, ind) => { if (this.expandBoolean) doc.presExpandInlineButton = true; else doc.presExpandInlineButton = false; }); }}>
+                        <FontAwesomeIcon icon={"eye"} />
+                    </div>
+                </Tooltip>
+                <div className="toolbar-divider" />
+            </div>
+        );
     }
 
     /**
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index af4bd77c7..cc37cf586 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -577,7 +577,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
         const mainBulletText: string[] = [];
         const mainBulletList: Doc[] = [];
         if (list) {
-            const newBullets: Doc[] = this.recursiveProgressivize(1, list);
+            const newBullets: Doc[] = this.recursiveProgressivize(1, list)[0];
             mainBulletList.push.apply(mainBulletList, newBullets);
         }
         console.log(mainBulletList.length);
@@ -591,7 +591,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
         this.props.addDocument?.(doc);
     }
 
-    recursiveProgressivize = (nestDepth: number, list: HTMLCollectionOf<HTMLLIElement>, d?: number, y?: number, before?: string): Doc[] => {
+    recursiveProgressivize = (nestDepth: number, list: HTMLCollectionOf<HTMLLIElement>, d?: number, y?: number, before?: string): [Doc[], number] => {
         const mainBulletList: Doc[] = [];
         let b = d ? d : 0;
         let yLoc = y ? y : 0;
@@ -607,29 +607,30 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
                 if (listItem.childElementCount > 1) {
                     b++;
                     nestCount++;
-                    count = before ? count + nestCount + "." : nestCount + ".";
                     yLoc += height;
+                    count = before ? count + nestCount + "." : nestCount + ".";
                     const text = listItem.getElementsByTagName("p")[0].innerText;
                     const length = text.length;
-                    const bullet1 = Docs.Create.TextDocument(count + " " + text, { title: "Slide text", _width: width, _height: height, x: xLoc, y: 10 + (yLoc), _fontSize: fontSize, backgroundColor: "rgba(0,0,0,0)", appearFrame: d ? d : b });
+                    const bullet1 = Docs.Create.TextDocument(count + " " + text, { title: "Slide text", _width: width, _autoHeight: true, x: xLoc, y: (yLoc), _fontSize: fontSize, backgroundColor: "rgba(0,0,0,0)", appearFrame: d ? d : b });
+                    // yLoc += NumCast(bullet1._height);
                     mainBulletList.push(bullet1);
                     const newList = this.recursiveProgressivize(nestDepth + 1, listItem.getElementsByTagName("li"), b, yLoc, count);
-                    mainBulletList.push.apply(mainBulletList, newList);
-                    b += newList.length;
+                    mainBulletList.push.apply(mainBulletList, newList[0]);
                     yLoc += newList.length * (55 - ((nestDepth + 1) * 5));
                 } else {
                     b++;
                     nestCount++;
-                    count = before ? count + nestCount + "." : nestCount + ".";
                     yLoc += height;
+                    count = before ? count + nestCount + "." : nestCount + ".";
                     const text = listItem.innerText;
                     const length = text.length;
-                    const bullet1 = Docs.Create.TextDocument(count + " " + text, { title: "Slide text", _width: width, _height: height, x: xLoc, y: 10 + (yLoc), _fontSize: fontSize, backgroundColor: "rgba(0,0,0,0)", appearFrame: d ? d : b });
+                    const bullet1 = Docs.Create.TextDocument(count + " " + text, { title: "Slide text", _width: width, _autoHeight: true, x: xLoc, y: (yLoc), _fontSize: fontSize, backgroundColor: "rgba(0,0,0,0)", appearFrame: d ? d : b });
+                    // yLoc += NumCast(bullet1._height);
                     mainBulletList.push(bullet1);
                 }
             }
         });
-        return mainBulletList;
+        return [mainBulletList, yLoc];
     }
 
     recordDictation = () => {
diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss
index 3d730d7ac..1e776384a 100644
--- a/src/client/views/presentationview/PresElementBox.scss
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -4,7 +4,7 @@ $light-background: #ececec;
 
 .presElementBox-item {
     display: grid;
-    grid-template-columns: max-content max-content max-content;
+    grid-template-columns: max-content max-content max-content max-content;
     background-color: #d5dce2;
     font-family: Roboto;
     letter-spacing: normal;
@@ -122,7 +122,7 @@ $light-background: #ececec;
     padding-left: 10px;
     padding-right: 10px;
     letter-spacing: normal;
-    max-width: max-content;
+    width: max-content;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: pre;
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index 816577847..a6dbb76ef 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -326,11 +326,12 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
                     <div className="presElementBox-number">
                         {`${this.indexInPres + 1}.`}
                     </div>
-                    <div ref={this._dragRef} className="presElementBox-name">
+                    <div ref={this._dragRef} className="presElementBox-name" style={{ maxWidth: (PresBox.Instance.toolbarWidth - 70) }}>
                         {`${this.targetDoc?.title}`}
                     </div>
                     <Tooltip title={<><div className="dash-tooltip">{"Movement speed"}</div></>}><div className="presElementBox-time" style={{ display: PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>{this.transition}</div></Tooltip>
                     <Tooltip title={<><div className="dash-tooltip">{"Duration"}</div></>}><div className="presElementBox-time" style={{ display: PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>{this.duration}</div></Tooltip>
+                    <Tooltip title={<><div className="dash-tooltip">{"Presentation pin view"}</div></>}><div className="presElementBox-time" style={{ fontWeight: 700, display: this.rootDoc.presPinView && PresBox.Instance.toolbarWidth > 300 ? "block" : "none" }}>V</div></Tooltip>
                     <Tooltip title={<><div className="dash-tooltip">{"Remove from presentation"}</div></>}><div
                         className="presElementBox-closeIcon"
                         onClick={e => {
-- 
cgit v1.2.3-70-g09d2

