From 4198c0fbcf8cb705bd09d9ba4a2d1c18590ff1bf Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Mon, 20 Jul 2020 18:25:26 -0500
Subject: framework for toolbar

---
 src/client/views/MainView.tsx | 83 +++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 81 insertions(+), 2 deletions(-)

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

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 46eeac77a..944f4c8d4 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
+    faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faDesktop, faTrashRestore, faUsers, faWrench
 } from '@fortawesome/free-solid-svg-icons';
 import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -66,6 +66,7 @@ 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';
 
 @observer
 export class MainView extends React.Component {
@@ -150,7 +151,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);
+            faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faDesktop, faTrashRestore, faUsers, faWrench);
         this.initEventListeners();
         this.initAuthenticationRouters();
     }
@@ -466,6 +467,83 @@ export class MainView extends React.Component {
         </div>;
     }
 
+    @computed get menuPanel() {
+        return <div className="mainView-menuPanel">
+            <Tooltip title={<div className="dash-tooltip">Open Workspaces</div>}>
+                <button className="mainView-menuPanel-button"
+                    style={{
+                        padding: "5px",
+                        background: "black",
+                        boxShadow: "4px 4px 12px black"
+                    }}>
+                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="desktop" color="white" size="lg" />
+                    <div className="mainView-menuPanel-button-label"> Workspaces </div>
+                </button>
+            </Tooltip>
+
+            <Tooltip title={<div className="dash-tooltip">Open Catalog</div>}>
+                <button className="mainView-menuPanel-button"
+                    style={{
+                        padding: "5px",
+                        background: "black",
+                        boxShadow: "4px 4px 12px black"
+                    }}>
+                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="file" color="white" size="lg" />
+                    <div className="mainView-menuPanel-button-label"> Catalog </div>
+                </button>
+            </Tooltip>
+
+            <Tooltip title={<div className="dash-tooltip">Open Recently Deleted</div>}>
+                <button className="mainView-menuPanel-button"
+                    style={{
+                        padding: "5px",
+                        background: "black",
+                        boxShadow: "4px 4px 12px black"
+                    }}>
+                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="trash-restore" color="white" size="lg" />
+                    <div className="mainView-menuPanel-button-label"> Recently Deleted </div>
+                </button>
+            </Tooltip>
+
+            <Tooltip title={<div className="dash-tooltip"> Import </div>}>
+                <button className="mainView-menuPanel-button"
+                    style={{
+                        padding: "5px",
+                        background: "black",
+                        boxShadow: "4px 4px 12px black"
+                    }}>
+                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="upload" color="white" size="lg" />
+                    <div className="mainView-menuPanel-button-label"> Import </div>
+                </button>
+            </Tooltip>
+
+            <Tooltip title={<div className="dash-tooltip">Open Sharing Preferences</div>}>
+                <button className="mainView-menuPanel-button"
+                    style={{
+                        padding: "5px",
+                        background: "black",
+                        boxShadow: "4px 4px 12px black"
+                    }}>
+                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="users" color="white" size="lg" />
+                    <div className="mainView-menuPanel-button-label"> Sharing </div>
+                </button>
+            </Tooltip>
+
+            <Tooltip title={<div className="dash-tooltip">Open Tools </div>}>
+                <button className="mainView-menuPanel-button"
+                    style={{
+                        padding: "5px",
+                        background: "black",
+                        boxShadow: "4px 4px 12px black"
+                    }}>
+                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="wrench" color="white" size="lg" />
+                    <div className="mainView-menuPanel-button-label"> Tools </div>
+                </button>
+            </Tooltip>
+        </div>;
+
+    }
+
     @computed get mainContent() {
         const sidebar = this.userDoc?.["tabs-panelContainer"];
         const n = (RichTextMenu.Instance?.Pinned ? 1 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0);
@@ -477,6 +555,7 @@ export class MainView extends React.Component {
                 height,
                 width: (FormatShapePane.Instance?.Pinned) ? `calc(100% - 200px)` : "100%"
             }} >
+                {this.menuPanel}
                 <div style={{ display: "contents", flexDirection: "row", position: "relative" }}>
                     <div className="mainView-flyoutContainer" onPointerLeave={this.pointerLeaveDragger} style={{ width: this.flyoutWidth }}>
                         <div className="mainView-libraryHandle" onPointerDown={this.onPointerDown}
-- 
cgit v1.2.3-70-g09d2


From 3af8da49bffdb37534cfac2b5b11a8818a57691b Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Tue, 21 Jul 2020 02:21:33 -0500
Subject: tools in stripmenu working

---
 src/client/util/CurrentUserUtils.ts |  22 ++++-
 src/client/views/MainView.scss      |  23 +++--
 src/client/views/MainView.tsx       | 190 ++++++++++++++++++++----------------
 3 files changed, 139 insertions(+), 96 deletions(-)

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

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 4b8c342f1..8c551d6ea 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -37,6 +37,12 @@ export class CurrentUserUtils {
     @observable public static GuestWorkspace: Doc | undefined;
     @observable public static GuestMobile: Doc | undefined;
 
+    @observable public static toolsBtn: any | undefined;
+    @observable public static libraryBtn: any | undefined;
+    @observable public static searchBtn: any | undefined;
+
+    @observable public static toolsStack: any | undefined;
+
     // sets up the default User Templates - slideView, queryView, descriptionView
     static setupUserTemplateButtons(doc: Doc) {
         if (doc["template-button-query"] === undefined) {
@@ -593,6 +599,8 @@ export class CurrentUserUtils {
         const creatorBtns = await CurrentUserUtils.setupCreatorButtons(doc);
         const templateBtns = CurrentUserUtils.setupUserTemplateButtons(doc);
 
+        doc["tabs-button-tools"] = undefined;
+
         if (doc.myCreators === undefined) {
             doc.myCreators = new PrefetchProxy(Docs.Create.StackingDocument([creatorBtns, templateBtns], {
                 title: "all Creators", _yMargin: 0, _autoHeight: true, _xMargin: 0,
@@ -611,6 +619,9 @@ export class CurrentUserUtils {
             const toolsStack = new PrefetchProxy(Docs.Create.StackingDocument([doc.myCreators as Doc, doc.myColorPicker as Doc], {
                 _width: 500, lockedPosition: true, _chromeStatus: "disabled", title: "tools stack", forceActive: true
             })) as any as Doc;
+
+            CurrentUserUtils.toolsStack = toolsStack;
+
             doc["tabs-button-tools"] = new PrefetchProxy(Docs.Create.ButtonDocument({
                 _width: 35, _height: 25, title: "Tools", _fontSize: "10pt",
                 letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)",
@@ -624,6 +635,7 @@ export class CurrentUserUtils {
             }));
         }
         (doc["tabs-button-tools"] as Doc).sourcePanel; // prefetch sourcePanel
+
         return doc["tabs-button-tools"] as Doc;
     }
 
@@ -720,17 +732,17 @@ export class CurrentUserUtils {
     // setup the list of sidebar mode buttons which determine what is displayed in the sidebar
     static async setupSidebarButtons(doc: Doc) {
         const sidebarContainer = CurrentUserUtils.setupSidebarContainer(doc);
-        const toolsBtn = await CurrentUserUtils.setupToolsBtnPanel(doc, sidebarContainer);
-        const libraryBtn = CurrentUserUtils.setupLibraryPanel(doc, sidebarContainer);
-        const searchBtn = CurrentUserUtils.setupSearchBtnPanel(doc, sidebarContainer);
+        CurrentUserUtils.toolsBtn = await CurrentUserUtils.setupToolsBtnPanel(doc, sidebarContainer);
+        CurrentUserUtils.libraryBtn = CurrentUserUtils.setupLibraryPanel(doc, sidebarContainer);
+        CurrentUserUtils.searchBtn = CurrentUserUtils.setupSearchBtnPanel(doc, sidebarContainer);
 
         // Finally, setup the list of buttons to display in the sidebar
         if (doc["tabs-buttons"] === undefined) {
-            doc["tabs-buttons"] = new PrefetchProxy(Docs.Create.StackingDocument([libraryBtn, searchBtn, toolsBtn], {
+            doc["tabs-buttons"] = new PrefetchProxy(Docs.Create.StackingDocument([CurrentUserUtils.libraryBtn, CurrentUserUtils.searchBtn, CurrentUserUtils.toolsBtn], {
                 _width: 500, _height: 80, boxShadow: "0 0", _pivotField: "title", _columnsHideIfEmpty: true, ignoreClick: true, _chromeStatus: "view-mode",
                 title: "sidebar btn row stack", backgroundColor: "dimGray",
             }));
-            (toolsBtn.onClick as ScriptField).script.run({ this: toolsBtn });
+            (CurrentUserUtils.toolsBtn.onClick as ScriptField).script.run({ this: CurrentUserUtils.toolsBtn });
         }
     }
 
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index 556d26f6e..957aa6cfe 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -116,9 +116,10 @@
 
 .mainView-menuPanel {
 
-    max-width: 80px;
+    max-width: 95px;
     background-color: rgb(105, 105, 105);
     padding: 20px;
+    padding-right: 50px;
 
     .mainView-menuPanel-button {
         width: 50px;
@@ -130,20 +131,30 @@
         background: black;
         border-radius: 100%;
         transform-origin: top left;
-        margin-bottom: 15px;
+        margin-bottom: 23px;
         margin-top: 5px;
 
+        margin-right: 25px;
+
         .mainView-menuPanel-button-label {
-            background: gray;
-            color: white;
+            background: rgb(168, 168, 168);
+            color: black;
             margin-left: -10px;
             border-radius: 8px;
-            width: 60px;
+            width: 65px;
             position: absolute;
             text-align: center;
-            font-size: 8px;
+            font-size: 9.5px;
             margin-top: 4px;
             letter-spacing: normal;
+            padding: 3px;
+            //margin-bottom: 23px;
+        }
+
+        .mainView-menuPanel-button-icon {
+            width: 35px;
+            height: 35px;
+            padding: 5px;
         }
 
         svg {
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 944f4c8d4..287497df0 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -88,6 +88,8 @@ export class MainView extends React.Component {
     @computed public get mainFreeform(): Opt<Doc> { return (docs => (docs && docs.length > 1) ? docs[1] : undefined)(DocListCast(this.mainContainer!.data)); }
     @computed public get sidebarButtonsDoc() { return Cast(this.userDoc["tabs-buttons"], Doc) as Doc; }
 
+    @observable public sidebarContent: any = this.userDoc?.["tabs-panelContainer"];
+
     public isPointerDown = false;
 
     componentDidMount() {
@@ -396,8 +398,7 @@ export class MainView extends React.Component {
     mainContainerXf = () => this.sidebarScreenToLocal().translate(0, -this._buttonBarHeight);
 
     @computed get flyout() {
-        const sidebarContent = this.userDoc?.["tabs-panelContainer"];
-        if (!(sidebarContent instanceof Doc)) {
+        if (!(this.sidebarContent instanceof Doc)) {
             return (null);
         }
         return <div className="mainView-flyoutContainer" >
@@ -428,9 +429,10 @@ export class MainView extends React.Component {
                     ContainingCollectionView={undefined}
                     ContainingCollectionDoc={undefined} />
             </div>
+
             <div className="mainView-contentArea" style={{ position: "relative", height: `calc(100% - ${this._buttonBarHeight}px)`, width: "100%", overflow: "visible" }}>
                 <DocumentView
-                    Document={sidebarContent}
+                    Document={this.sidebarContent}
                     DataDoc={undefined}
                     LibraryPath={emptyPath}
                     addDocument={undefined}
@@ -454,14 +456,14 @@ export class MainView extends React.Component {
                     docFilters={returnEmptyFilter}
                     ContainingCollectionView={undefined}
                     ContainingCollectionDoc={undefined} />
-                <div className="buttonContainer" >
-                    <button className="mainView-settings" key="settings" onClick={() => SettingsManager.Instance.open()}>
-                        <FontAwesomeIcon icon="cog" size="lg" />
-                    </button>
-                    <button className="mainView-settings" key="groups" onClick={() => GroupManager.Instance.open()}>
-                        <FontAwesomeIcon icon="columns" size="lg" />
-                    </button>
-                </div>
+            </div>
+            <div className="buttonContainer" >
+                <button className="mainView-settings" key="settings" onClick={() => SettingsManager.Instance.open()}>
+                    <FontAwesomeIcon icon="cog" size="lg" />
+                </button>
+                <button className="mainView-settings" key="groups" onClick={() => GroupManager.Instance.open()}>
+                    <FontAwesomeIcon icon="columns" size="lg" />
+                </button>
             </div>
             {this.docButtons}
         </div>;
@@ -469,86 +471,104 @@ export class MainView extends React.Component {
 
     @computed get menuPanel() {
         return <div className="mainView-menuPanel">
-            <Tooltip title={<div className="dash-tooltip">Open Workspaces</div>}>
-                <button className="mainView-menuPanel-button"
-                    style={{
-                        padding: "5px",
-                        background: "black",
-                        boxShadow: "4px 4px 12px black"
-                    }}>
-                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="desktop" color="white" size="lg" />
-                    <div className="mainView-menuPanel-button-label"> Workspaces </div>
-                </button>
-            </Tooltip>
-
-            <Tooltip title={<div className="dash-tooltip">Open Catalog</div>}>
-                <button className="mainView-menuPanel-button"
-                    style={{
-                        padding: "5px",
-                        background: "black",
-                        boxShadow: "4px 4px 12px black"
-                    }}>
-                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="file" color="white" size="lg" />
-                    <div className="mainView-menuPanel-button-label"> Catalog </div>
-                </button>
-            </Tooltip>
-
-            <Tooltip title={<div className="dash-tooltip">Open Recently Deleted</div>}>
-                <button className="mainView-menuPanel-button"
-                    style={{
-                        padding: "5px",
-                        background: "black",
-                        boxShadow: "4px 4px 12px black"
-                    }}>
-                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="trash-restore" color="white" size="lg" />
-                    <div className="mainView-menuPanel-button-label"> Recently Deleted </div>
-                </button>
-            </Tooltip>
-
-            <Tooltip title={<div className="dash-tooltip"> Import </div>}>
-                <button className="mainView-menuPanel-button"
-                    style={{
-                        padding: "5px",
-                        background: "black",
-                        boxShadow: "4px 4px 12px black"
-                    }}>
-                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="upload" color="white" size="lg" />
-                    <div className="mainView-menuPanel-button-label"> Import </div>
-                </button>
-            </Tooltip>
-
-            <Tooltip title={<div className="dash-tooltip">Open Sharing Preferences</div>}>
-                <button className="mainView-menuPanel-button"
-                    style={{
-                        padding: "5px",
-                        background: "black",
-                        boxShadow: "4px 4px 12px black"
-                    }}>
-                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="users" color="white" size="lg" />
-                    <div className="mainView-menuPanel-button-label"> Sharing </div>
-                </button>
-            </Tooltip>
-
-            <Tooltip title={<div className="dash-tooltip">Open Tools </div>}>
-                <button className="mainView-menuPanel-button"
-                    style={{
-                        padding: "5px",
-                        background: "black",
-                        boxShadow: "4px 4px 12px black"
-                    }}>
-                    <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="wrench" color="white" size="lg" />
-                    <div className="mainView-menuPanel-button-label"> Tools </div>
-                </button>
-            </Tooltip>
+            {/* <Tooltip title={<div className="dash-tooltip">Open Workspaces</div>}> */}
+            <button className="mainView-menuPanel-button"
+                onPointerDown={e => this.selectPanel("workspace")}
+                style={{
+                    padding: "5px",
+                    background: "black",
+                    boxShadow: "4px 4px 12px black"
+                }}>
+                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="desktop" color="white" size="lg" />
+                <div className="mainView-menuPanel-button-label"> Workspace </div>
+            </button>
+            {/* </Tooltip> */}
+
+            {/* <Tooltip title={<div className="dash-tooltip">Open Catalog</div>}> */}
+            <button className="mainView-menuPanel-button"
+                onPointerDown={e => this.selectPanel("catalog")}
+                style={{
+                    padding: "5px",
+                    background: "black",
+                    boxShadow: "4px 4px 12px black"
+                }}>
+                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="file" color="white" size="lg" />
+                <div className="mainView-menuPanel-button-label"> Catalog </div>
+            </button>
+            {/* </Tooltip> */}
+
+            {/* <Tooltip title={<div className="dash-tooltip">Open Recently Deleted</div>}> */}
+            <button className="mainView-menuPanel-button"
+                onPointerDown={e => this.selectPanel("deleted")}
+                style={{
+                    padding: "5px",
+                    background: "black",
+                    boxShadow: "4px 4px 12px black",
+                    marginBottom: "30px"
+                }}>
+                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="trash-restore" color="white" size="lg" />
+                <div className="mainView-menuPanel-button-label"> Recently Deleted </div>
+            </button>
+            {/* </Tooltip> */}
+
+            {/* <Tooltip title={<div className="dash-tooltip"> Import </div>}> */}
+            <button className="mainView-menuPanel-button"
+                onPointerDown={e => this.selectPanel("upload")}
+                style={{
+                    padding: "5px",
+                    background: "black",
+                    boxShadow: "4px 4px 12px black"
+                }}>
+                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="upload" color="white" size="lg" />
+                <div className="mainView-menuPanel-button-label"> Import </div>
+            </button>
+            {/* </Tooltip> */}
+
+            {/* <Tooltip title={<div className="dash-tooltip">Open Sharing Preferences</div>}> */}
+            <button className="mainView-menuPanel-button"
+                onPointerDown={e => this.selectPanel("sharing")}
+                style={{
+                    padding: "5px",
+                    background: "black",
+                    boxShadow: "4px 4px 12px black"
+                }}>
+                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="users" color="white" size="lg" />
+                <div className="mainView-menuPanel-button-label"> Sharing </div>
+            </button>
+            {/* </Tooltip> */}
+
+            {/* <Tooltip title={<div className="dash-tooltip">Open Tools </div>}> */}
+            <button className="mainView-menuPanel-button"
+                onPointerDown={e => this.selectPanel("tools")}
+                style={{
+                    padding: "5px",
+                    background: "black",
+                    boxShadow: "4px 4px 12px black"
+                }}>
+                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="wrench" color="white" size="lg" />
+                <div className="mainView-menuPanel-button-label"> Tools </div>
+            </button>
+            {/* </Tooltip> */}
         </div>;
+    }
 
+    @action
+    selectPanel = (str: string) => {
+        //this.sidebarContent = null;
+
+        if (str === "tools") {
+            // this.userDoc?.["tabs-button-tools"] = undefined;
+            CurrentUserUtils.toolsBtn;
+            this.sidebarContent.proto = CurrentUserUtils.toolsStack;
+        } else if (str === "catalog") {
+            //this.sidebarContent = CurrentUserUtils.libraryBtn;
+        }
     }
 
     @computed get mainContent() {
-        const sidebar = this.userDoc?.["tabs-panelContainer"];
         const n = (RichTextMenu.Instance?.Pinned ? 1 : 0) + (CollectionMenu.Instance?.Pinned ? 1 : 0);
         const height = `calc(100% - ${n * Number(ANTIMODEMENU_HEIGHT.replace("px", ""))}px)`;
-        return !this.userDoc || !(sidebar instanceof Doc) ? (null) : (
+        return !this.userDoc || !(this.sidebarContent instanceof Doc) ? (null) : (
             <div className="mainView-mainContent" style={{
                 color: this.darkScheme ? "rgb(205,205,205)" : "black",
                 //change to times 2 for both pinned
@@ -559,7 +579,7 @@ export class MainView extends React.Component {
                 <div style={{ display: "contents", flexDirection: "row", position: "relative" }}>
                     <div className="mainView-flyoutContainer" onPointerLeave={this.pointerLeaveDragger} style={{ width: this.flyoutWidth }}>
                         <div className="mainView-libraryHandle" onPointerDown={this.onPointerDown}
-                            style={{ backgroundColor: this.defaultBackgroundColors(sidebar) }}>
+                            style={{ backgroundColor: this.defaultBackgroundColors(this.sidebarContent) }}>
                             <span title="library View Dragger" style={{
                                 width: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "3vw",
                                 //height: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "100vh",
-- 
cgit v1.2.3-70-g09d2


From 214ad7b39962b2873f106fca043907c839052c3d Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Tue, 21 Jul 2020 12:39:01 -0500
Subject: added functionality for all sidebar buttons except sharing and import

---
 src/client/util/CurrentUserUtils.ts | 31 +++++++++++++++++++++++++++++++
 src/client/views/MainView.tsx       | 32 +++++++++++++++++++++++---------
 2 files changed, 54 insertions(+), 9 deletions(-)

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

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 8c551d6ea..90e0c159e 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -42,6 +42,9 @@ export class CurrentUserUtils {
     @observable public static searchBtn: any | undefined;
 
     @observable public static toolsStack: any | undefined;
+    @observable public static workspaceStack: any | undefined;
+    @observable public static catalogStack: any | undefined;
+    @observable public static closedStack: any | undefined;
 
     // sets up the default User Templates - slideView, queryView, descriptionView
     static setupUserTemplateButtons(doc: Doc) {
@@ -641,6 +644,7 @@ export class CurrentUserUtils {
 
     static setupWorkspaces(doc: Doc) {
         // setup workspaces library item
+        doc.myWorkspaces === undefined;
         if (doc.myWorkspaces === undefined) {
             doc.myWorkspaces = new PrefetchProxy(Docs.Create.TreeDocument([], {
                 title: "WORKSPACES", _height: 100, forceActive: true, boxShadow: "0 0", lockedPosition: true,
@@ -650,19 +654,38 @@ export class CurrentUserUtils {
         (doc.myWorkspaces as Doc).contextMenuScripts = new List<ScriptField>([newWorkspace!]);
         (doc.myWorkspaces as Doc).contextMenuLabels = new List<string>(["Create New Workspace"]);
 
+        const workspaces = doc.myWorkspaces as Doc;
+
+        CurrentUserUtils.workspaceStack = new PrefetchProxy(Docs.Create.TreeDocument([workspaces], {
+            title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias",
+            treeViewTruncateTitleWidth: 150,
+            lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same"
+        })) as any as Doc;
+
         return doc.myWorkspaces as Doc;
     }
     static setupCatalog(doc: Doc) {
+        doc.myCatalog === undefined;
         if (doc.myCatalog === undefined) {
             doc.myCatalog = new PrefetchProxy(Docs.Create.SchemaDocument([], [], {
                 title: "CATALOG", _height: 1000, _fitWidth: true, forceActive: true, boxShadow: "0 0", treeViewPreventOpen: false,
                 childDropAction: "alias", targetDropAction: "same", stayInCollection: true,
             }));
         }
+
+        const catalog = doc.myCatalog as Doc;
+
+        CurrentUserUtils.catalogStack = new PrefetchProxy(Docs.Create.TreeDocument([catalog], {
+            title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias",
+            treeViewTruncateTitleWidth: 150,
+            lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same"
+        })) as any as Doc;
+
         return doc.myCatalog as Doc;
     }
     static setupRecentlyClosed(doc: Doc) {
         // setup Recently Closed library item
+        doc.myRecentlyClosed === undefined;
         if (doc.myRecentlyClosed === undefined) {
             doc.myRecentlyClosed = new PrefetchProxy(Docs.Create.TreeDocument([], {
                 title: "RECENTLY CLOSED", _height: 75, forceActive: true, boxShadow: "0 0", treeViewPreventOpen: true, stayInCollection: true,
@@ -674,6 +697,14 @@ export class CurrentUserUtils {
         (doc.myRecentlyClosed as Doc).contextMenuScripts = new List<ScriptField>([clearAll!]);
         (doc.myRecentlyClosed as Doc).contextMenuLabels = new List<string>(["Clear All"]);
 
+        const recentlyClosed = doc.myRecentlyClosed as Doc;
+
+        CurrentUserUtils.closedStack = new PrefetchProxy(Docs.Create.TreeDocument([recentlyClosed], {
+            title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias",
+            treeViewTruncateTitleWidth: 150,
+            lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same"
+        })) as any as Doc;
+
         return doc.myRecentlyClosed as Doc;
     }
     // setup the Library button which will display the library panel.  This panel includes a collection of workspaces, documents, and recently closed views
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 287497df0..c9da29cba 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -89,6 +89,7 @@ export class MainView extends React.Component {
     @computed public get sidebarButtonsDoc() { return Cast(this.userDoc["tabs-buttons"], Doc) as Doc; }
 
     @observable public sidebarContent: any = this.userDoc?.["tabs-panelContainer"];
+    @observable public panelContent: string = "none";
 
     public isPointerDown = false;
 
@@ -506,7 +507,7 @@ export class MainView extends React.Component {
                     boxShadow: "4px 4px 12px black",
                     marginBottom: "30px"
                 }}>
-                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="trash-restore" color="white" size="lg" />
+                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="trash-alt" color="white" size="lg" />
                 <div className="mainView-menuPanel-button-label"> Recently Deleted </div>
             </button>
             {/* </Tooltip> */}
@@ -554,14 +555,27 @@ export class MainView extends React.Component {
 
     @action
     selectPanel = (str: string) => {
-        //this.sidebarContent = null;
-
-        if (str === "tools") {
-            // this.userDoc?.["tabs-button-tools"] = undefined;
-            CurrentUserUtils.toolsBtn;
-            this.sidebarContent.proto = CurrentUserUtils.toolsStack;
-        } else if (str === "catalog") {
-            //this.sidebarContent = CurrentUserUtils.libraryBtn;
+
+        if (this.panelContent === str) {
+            this.sidebarContent = null;
+            this.panelContent = "none";
+            MainView.Instance._flyoutTranslate = false;
+        } else {
+            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 === "upload") {
+                this.sidebarContent.proto = "uploads";
+            } else if (str === "sharing") {
+                this.sidebarContent.proto = "sharing";
+            }
         }
     }
 
-- 
cgit v1.2.3-70-g09d2


From 25ec1ef48c36ad91dccc408fa6075f0915c36118 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Tue, 21 Jul 2020 17:18:07 -0500
Subject: finished left side UI changes

---
 src/client/util/CurrentUserUtils.ts             |  11 +-
 src/client/views/MainView.scss                  |  53 ++++++++
 src/client/views/MainView.tsx                   | 158 +++++++++++-------------
 src/client/views/collections/CollectionView.tsx |   3 +-
 4 files changed, 135 insertions(+), 90 deletions(-)

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

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 90e0c159e..c98bc0b01 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -620,7 +620,7 @@ export class CurrentUserUtils {
 
         if (doc["tabs-button-tools"] === undefined) {
             const toolsStack = new PrefetchProxy(Docs.Create.StackingDocument([doc.myCreators as Doc, doc.myColorPicker as Doc], {
-                _width: 500, lockedPosition: true, _chromeStatus: "disabled", title: "tools stack", forceActive: true
+                _width: 500, lockedPosition: true, _chromeStatus: "disabled", hideFilterView: true, title: "tools stack", forceActive: true
             })) as any as Doc;
 
             CurrentUserUtils.toolsStack = toolsStack;
@@ -633,6 +633,7 @@ export class CurrentUserUtils {
                 dragFactory: toolsStack,
                 removeDropProperties: new List<string>(["lockedPosition"]),
                 stayInCollection: true,
+                hideFilterView: true,
                 targetContainer: new PrefetchProxy(sidebarContainer) as any as Doc,
                 onClick: ScriptField.MakeScript("this.targetContainer.proto = this.sourcePanel"),
             }));
@@ -658,7 +659,7 @@ export class CurrentUserUtils {
 
         CurrentUserUtils.workspaceStack = new PrefetchProxy(Docs.Create.TreeDocument([workspaces], {
             title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias",
-            treeViewTruncateTitleWidth: 150,
+            treeViewTruncateTitleWidth: 150, hideFilterView: true,
             lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same"
         })) as any as Doc;
 
@@ -677,7 +678,7 @@ export class CurrentUserUtils {
 
         CurrentUserUtils.catalogStack = new PrefetchProxy(Docs.Create.TreeDocument([catalog], {
             title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias",
-            treeViewTruncateTitleWidth: 150,
+            treeViewTruncateTitleWidth: 150, hideFilterView: true,
             lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same"
         })) as any as Doc;
 
@@ -701,7 +702,7 @@ export class CurrentUserUtils {
 
         CurrentUserUtils.closedStack = new PrefetchProxy(Docs.Create.TreeDocument([recentlyClosed], {
             title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias",
-            treeViewTruncateTitleWidth: 150,
+            treeViewTruncateTitleWidth: 150, hideFilterView: true,
             lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same"
         })) as any as Doc;
 
@@ -716,7 +717,7 @@ export class CurrentUserUtils {
         if (doc["tabs-button-library"] === undefined) {
             const libraryStack = new PrefetchProxy(Docs.Create.TreeDocument([workspaces, documents, recentlyClosed, doc], {
                 title: "Library", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias",
-                treeViewTruncateTitleWidth: 150,
+                treeViewTruncateTitleWidth: 150, hideFilterView: true,
                 lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same"
             })) as any as Doc;
             doc["tabs-button-library"] = new PrefetchProxy(Docs.Create.ButtonDocument({
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index 957aa6cfe..dfd5a993e 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -162,6 +162,59 @@
             height: 95%;
         }
     }
+
+    .mainView-menuPanel-bottomButton {
+        width: 50px;
+        height: 50px;
+        padding: 10px;
+        pointer-events: all;
+        touch-action: none;
+        border-radius: inherit;
+        background: dimgray;
+        background-color: dimgray;
+        border-radius: 100%;
+        transform-origin: top left;
+        margin-bottom: 23px;
+        margin-top: 5px;
+
+        margin-right: 25px;
+
+        .mainView-menuPanel-bottomButton-label {
+            background: dimgray;
+            color: black;
+            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: black;
+        }
+
+        svg {
+            width: 95% !important;
+            height: 95%;
+        }
+    }
+}
+
+.mainView-searchPanel {
+    width: 100%;
+    height: 33px;
+    background-color: black;
+    color: white;
+    text-align: center;
+    vertical-align: middle;
+    padding-top: 6px;
 }
 
 .mainView-mainDiv {
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index c9da29cba..95301b900 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, faDesktop, faTrashRestore, faUsers, faWrench
+    faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faDesktop, faTrashRestore, faUsers, faWrench, faCog
 } from '@fortawesome/free-solid-svg-icons';
 import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -79,7 +79,7 @@ export class MainView extends React.Component {
 
     @observable private _panelWidth: number = 0;
     @observable private _panelHeight: number = 0;
-    @observable private _flyoutTranslate: boolean = true;
+    @observable private _flyoutTranslate: boolean = false;
     @observable public flyoutWidth: number = 250;
     private get darkScheme() { return BoolCast(Cast(this.userDoc?.activeWorkspace, Doc, null)?.darkScheme); }
 
@@ -154,7 +154,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);
+            faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faDesktop, faTrashRestore, faUsers, faWrench, faCog);
         this.initEventListeners();
         this.initAuthenticationRouters();
     }
@@ -402,77 +402,46 @@ export class MainView extends React.Component {
         if (!(this.sidebarContent instanceof Doc)) {
             return (null);
         }
-        return <div className="mainView-flyoutContainer" >
-            <div className="mainView-tabButtons" style={{ height: `${this._buttonBarHeight - 10/*margin-top*/}px`, backgroundColor: StrCast(this.sidebarButtonsDoc.backgroundColor) }}>
-                <DocumentView
-                    Document={this.sidebarButtonsDoc}
-                    DataDoc={undefined}
-                    LibraryPath={emptyPath}
-                    addDocument={undefined}
-                    rootSelected={returnTrue}
-                    addDocTab={this.addDocTabFunc}
-                    pinToPres={emptyFunction}
-                    removeDocument={undefined}
-                    onClick={undefined}
-                    ScreenToLocalTransform={this.sidebarScreenToLocal}
-                    ContentScaling={returnOne}
-                    NativeHeight={returnZero}
-                    NativeWidth={returnZero}
-                    PanelWidth={this.flyoutWidthFunc}
-                    PanelHeight={this.getPHeight}
-                    renderDepth={0}
-                    focus={emptyFunction}
-                    backgroundColor={this.defaultBackgroundColors}
-                    parentActive={returnTrue}
-                    whenActiveChanged={emptyFunction}
-                    bringToFront={emptyFunction}
-                    docFilters={returnEmptyFilter}
-                    ContainingCollectionView={undefined}
-                    ContainingCollectionDoc={undefined} />
-            </div>
-
-            <div className="mainView-contentArea" style={{ position: "relative", height: `calc(100% - ${this._buttonBarHeight}px)`, width: "100%", overflow: "visible" }}>
-                <DocumentView
-                    Document={this.sidebarContent}
-                    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={this.flyoutWidthFunc}
-                    PanelHeight={this.getContentsHeight}
-                    renderDepth={0}
-                    focus={emptyFunction}
-                    backgroundColor={this.defaultBackgroundColors}
-                    parentActive={returnTrue}
-                    whenActiveChanged={emptyFunction}
-                    bringToFront={emptyFunction}
-                    docFilters={returnEmptyFilter}
-                    ContainingCollectionView={undefined}
-                    ContainingCollectionDoc={undefined} />
-            </div>
-            <div className="buttonContainer" >
+        return <div className="mainView-contentArea" style={{ position: "relative", height: `100%`, width: "100%", overflow: "visible" }}>
+            <DocumentView
+                Document={this.sidebarContent}
+                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={this.flyoutWidthFunc}
+                PanelHeight={this.getContentsHeight}
+                renderDepth={0}
+                focus={emptyFunction}
+                backgroundColor={this.defaultBackgroundColors}
+                parentActive={returnTrue}
+                whenActiveChanged={emptyFunction}
+                bringToFront={emptyFunction}
+                docFilters={returnEmptyFilter}
+                ContainingCollectionView={undefined}
+                ContainingCollectionDoc={undefined} />
+        </div>;
+        {/* <div className="buttonContainer" >
                 <button className="mainView-settings" key="settings" onClick={() => SettingsManager.Instance.open()}>
                     <FontAwesomeIcon icon="cog" size="lg" />
                 </button>
                 <button className="mainView-settings" key="groups" onClick={() => GroupManager.Instance.open()}>
                     <FontAwesomeIcon icon="columns" size="lg" />
                 </button>
-            </div>
-            {this.docButtons}
-        </div>;
+            </div> */}
+        {/* {this.docButtons} */ }
     }
 
     @computed get menuPanel() {
         return <div className="mainView-menuPanel">
-            {/* <Tooltip title={<div className="dash-tooltip">Open Workspaces</div>}> */}
             <button className="mainView-menuPanel-button"
                 onPointerDown={e => this.selectPanel("workspace")}
                 style={{
@@ -483,9 +452,7 @@ export class MainView extends React.Component {
                 <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="desktop" color="white" size="lg" />
                 <div className="mainView-menuPanel-button-label"> Workspace </div>
             </button>
-            {/* </Tooltip> */}
 
-            {/* <Tooltip title={<div className="dash-tooltip">Open Catalog</div>}> */}
             <button className="mainView-menuPanel-button"
                 onPointerDown={e => this.selectPanel("catalog")}
                 style={{
@@ -496,9 +463,7 @@ export class MainView extends React.Component {
                 <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="file" color="white" size="lg" />
                 <div className="mainView-menuPanel-button-label"> Catalog </div>
             </button>
-            {/* </Tooltip> */}
 
-            {/* <Tooltip title={<div className="dash-tooltip">Open Recently Deleted</div>}> */}
             <button className="mainView-menuPanel-button"
                 onPointerDown={e => this.selectPanel("deleted")}
                 style={{
@@ -508,24 +473,20 @@ export class MainView extends React.Component {
                     marginBottom: "30px"
                 }}>
                 <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="trash-alt" color="white" size="lg" />
-                <div className="mainView-menuPanel-button-label"> Recently Deleted </div>
+                <div className="mainView-menuPanel-button-label"> Recently Closed </div>
             </button>
-            {/* </Tooltip> */}
 
-            {/* <Tooltip title={<div className="dash-tooltip"> Import </div>}> */}
             <button className="mainView-menuPanel-button"
                 onPointerDown={e => this.selectPanel("upload")}
                 style={{
                     padding: "5px",
                     background: "black",
-                    boxShadow: "4px 4px 12px black"
+                    boxShadow: "4px 4px 12px black",
                 }}>
                 <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="upload" color="white" size="lg" />
                 <div className="mainView-menuPanel-button-label"> Import </div>
             </button>
-            {/* </Tooltip> */}
 
-            {/* <Tooltip title={<div className="dash-tooltip">Open Sharing Preferences</div>}> */}
             <button className="mainView-menuPanel-button"
                 onPointerDown={e => this.selectPanel("sharing")}
                 style={{
@@ -536,20 +497,39 @@ export class MainView extends React.Component {
                 <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="users" color="white" size="lg" />
                 <div className="mainView-menuPanel-button-label"> Sharing </div>
             </button>
-            {/* </Tooltip> */}
 
-            {/* <Tooltip title={<div className="dash-tooltip">Open Tools </div>}> */}
             <button className="mainView-menuPanel-button"
                 onPointerDown={e => this.selectPanel("tools")}
                 style={{
                     padding: "5px",
                     background: "black",
-                    boxShadow: "4px 4px 12px black"
+                    boxShadow: "4px 4px 12px black",
+                    marginBottom: "45px"
                 }}>
                 <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="wrench" color="white" size="lg" />
                 <div className="mainView-menuPanel-button-label"> Tools </div>
             </button>
-            {/* </Tooltip> */}
+
+            <button className="mainView-menuPanel-bottomButton"
+                onPointerDown={e => this.selectPanel("help")}
+                style={{
+                    padding: "5px",
+                    background: "dimgrey",
+                }}>
+                <FontAwesomeIcon className="mainView-menuPanel-bottomButton-icon" icon="question-circle" color="white" size="lg" />
+                <div className="mainView-menuPanel-bottomButton-label"> Help </div>
+            </button>
+
+            <button className="mainView-menuPanel-bottomButton"
+                // onPointerDown={e => this.selectPanel("settings")}
+                onClick={() => SettingsManager.Instance.open()}
+                style={{
+                    padding: "5px",
+                    background: "dimgrey",
+                }}>
+                <FontAwesomeIcon className="mainView-menuPanel-bottomButton-icon" icon="cog" color="white" size="lg" />
+                <div className="mainView-menuPanel-bottomButton-label"> Settings </div>
+            </button>
         </div>;
     }
 
@@ -592,7 +572,8 @@ export class MainView extends React.Component {
                 {this.menuPanel}
                 <div style={{ display: "contents", flexDirection: "row", position: "relative" }}>
                     <div className="mainView-flyoutContainer" onPointerLeave={this.pointerLeaveDragger} style={{ width: this.flyoutWidth }}>
-                        <div className="mainView-libraryHandle" onPointerDown={this.onPointerDown}
+                        {MainView.Instance._flyoutTranslate ? <div className="mainView-libraryHandle"
+                            onPointerDown={this.onPointerDown}
                             style={{ backgroundColor: this.defaultBackgroundColors(this.sidebarContent) }}>
                             <span title="library View Dragger" style={{
                                 width: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "3vw",
@@ -600,18 +581,18 @@ export class MainView extends React.Component {
                                 position: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "absolute" : "fixed",
                                 top: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "" : "0"
                             }} />
-                        </div>
+                        </div> : null}
                         <div className="mainView-libraryFlyout" style={{
                             //transformOrigin: this._flyoutTranslate ? "" : "left center",
                             transition: this._flyoutTranslate ? "" : "width .5s",
                             //transform: `scale(${this._flyoutTranslate ? 1 : 0.8})`,
-                            boxShadow: this._flyoutTranslate ? "" : "rgb(156, 147, 150) 0.2vw 0.2vw 0.8vw"
+                            boxShadow: this._flyoutTranslate ? "" : "rgb(156, 147, 150) 0.2vw 0.2vw 0.2vw"
                         }}>
                             {this.flyout}
-                            {this.expandButton}
+                            {MainView.Instance._flyoutTranslate ? this.expandButton : null}
                         </div>
                     </div>
-                    {this.dockingContent}
+                    {/* {this.dockingContent} */}
                 </div>
             </div>);
     }
@@ -623,7 +604,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="grey" size="lg" /></div>) : (null);
+        return !this._flyoutTranslate ? (<div className="mainView-expandFlyoutButton" title="Re-attach sidebar" onPointerDown={MainView.expandFlyout}><FontAwesomeIcon icon="chevron-right" color="black" size="lg" /></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);
@@ -717,8 +698,16 @@ export class MainView extends React.Component {
         </svg>;
     }
 
+    @computed get search() {
+        return <div className="mainView-searchPanel">
+            <div style={{ float: "left", marginLeft: "10px" }}>{Doc.CurrentUserEmail}</div>
+            <div>SEARCH GOES HERE</div>
+        </div>;
+    }
+
     render() {
         return (<div className={"mainView-container" + (this.darkScheme ? "-dark" : "")} ref={this._mainViewRef}>
+
             {this.inkResources}
             <DictationOverlay />
             <SharingManager />
@@ -727,6 +716,7 @@ export class MainView extends React.Component {
             <GoogleAuthenticationManager />
             <HypothesisAuthenticationManager />
             <DocumentDecorations />
+            {/* {this.search} */}
             <CollectionMenu />
             <FormatShapePane />
             <RichTextMenu key="rich" />
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index c1da23470..21b0045d5 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -80,6 +80,7 @@ export interface CollectionViewCustomProps {
     childLayoutTemplate?: () => Opt<Doc>;  // specify a layout Doc template to use for children of the collection
     childLayoutString?: string;  // specify a layout string to use for children of the collection
     childOpacity?: () => number;
+    hideFilter?: true;
 }
 
 export interface CollectionRenderProps {
@@ -559,7 +560,7 @@ export class CollectionView extends Touchable<FieldViewProps & CollectionViewCus
                         Utils.CorsProxy(Cast(d.data, ImageField)!.url.href) : Cast(d.data, ImageField)!.url.href
                     :
                     ""))}
-            {(!this.props.isSelected() || this.props.Document.hideFilterView) && !this.props.Document.forceActive ? (null) :
+            {this.props.hideFilter || this.props.Document.hideFilterView || !this.props.isSelected() && !this.props.Document.forceActive ? (null) :
                 <div className="collectionView-filterDragger" title="library View Dragger" onPointerDown={this.onPointerDown}
                     style={{ right: this.facetWidth() - 1, top: this.props.Document._viewType === CollectionViewType.Docking ? "25%" : "55%" }} />
             }
-- 
cgit v1.2.3-70-g09d2


From 2918b0d3cdadce31d3e9fb20fb75c3bdb4576a90 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Tue, 21 Jul 2020 17:43:07 -0500
Subject: bug fix

---
 src/client/views/MainView.tsx | 61 ++++++++++++++++++++++---------------------
 1 file changed, 31 insertions(+), 30 deletions(-)

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

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 7c991c42a..845a61d32 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -402,34 +402,35 @@ export class MainView extends React.Component {
         if (!(this.sidebarContent instanceof Doc)) {
             return (null);
         }
-        return <div className="mainView-contentArea" style={{ position: "relative", height: `100%`, width: "100%", overflow: "visible" }}>
-            <DocumentView
-                Document={this.sidebarContent}
-                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={this.flyoutWidthFunc}
-                PanelHeight={this.getContentsHeight}
-                renderDepth={0}
-                focus={emptyFunction}
-                backgroundColor={this.defaultBackgroundColors}
-                parentActive={returnTrue}
-                whenActiveChanged={emptyFunction}
-                bringToFront={emptyFunction}
-                docFilters={returnEmptyFilter}
-                ContainingCollectionView={undefined}
-                ContainingCollectionDoc={undefined} />
-        </div>;
-        {/* <div className="buttonContainer" >
+        return <div className="mainView-libraryFlyout">
+            <div className="mainView-contentArea" style={{ position: "relative", height: `100%`, width: "100%", overflow: "visible" }}>
+                <DocumentView
+                    Document={this.sidebarContent}
+                    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={this.flyoutWidthFunc}
+                    PanelHeight={this.getContentsHeight}
+                    renderDepth={0}
+                    focus={emptyFunction}
+                    backgroundColor={this.defaultBackgroundColors}
+                    parentActive={returnTrue}
+                    whenActiveChanged={emptyFunction}
+                    bringToFront={emptyFunction}
+                    docFilters={returnEmptyFilter}
+                    ContainingCollectionView={undefined}
+                    ContainingCollectionDoc={undefined} />
+            </div>
+            {/* <div className="buttonContainer" >
                 <button className="mainView-settings" key="settings" onClick={() => SettingsManager.Instance.open()}>
                     <FontAwesomeIcon icon="cog" size="lg" />
                 </button>
@@ -437,7 +438,7 @@ export class MainView extends React.Component {
                     <FontAwesomeIcon icon="columns" size="lg" />
                 </button>
             </div> */}
-        {/* {this.docButtons} */ }
+            {this.docButtons}</div>;
     }
 
     @computed get menuPanel() {
@@ -592,7 +593,7 @@ export class MainView extends React.Component {
                             {MainView.Instance._flyoutTranslate ? this.expandButton : null}
                         </div>
                     </div>
-                    {/* {this.dockingContent} */}
+                    {this.dockingContent}
                 </div>
             </div>);
     }
-- 
cgit v1.2.3-70-g09d2


From 21af12f4c140485023450ad348703d69ffd2a724 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Tue, 21 Jul 2020 22:10:34 -0500
Subject: cleaned up tab on right

---
 src/client/util/CurrentUserUtils.ts |  3 +++
 src/client/views/MainView.scss      | 26 +++++++++++++++++---------
 src/client/views/MainView.tsx       | 36 ++++++++++++++++++++++++------------
 3 files changed, 44 insertions(+), 21 deletions(-)

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

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 005648b1e..088e20a3e 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -45,6 +45,7 @@ export class CurrentUserUtils {
     @observable public static workspaceStack: any | undefined;
     @observable public static catalogStack: any | undefined;
     @observable public static closedStack: any | undefined;
+    @observable public static searchStack: any | undefined;
 
     // sets up the default User Templates - slideView, queryView, descriptionView
     static setupUserTemplateButtons(doc: Doc) {
@@ -737,6 +738,7 @@ export class CurrentUserUtils {
 
     // setup the Search button which will display the search panel.
     static setupSearchBtnPanel(doc: Doc, sidebarContainer: Doc) {
+        doc["tabs-button-search"] = undefined;
         if (doc["tabs-button-search"] === undefined) {
             doc["tabs-button-search"] = new PrefetchProxy(Docs.Create.ButtonDocument({
                 _width: 50, _height: 25, title: "Search", _fontSize: "10pt",
@@ -747,6 +749,7 @@ export class CurrentUserUtils {
                 lockedPosition: true,
                 onClick: ScriptField.MakeScript("this.targetContainer.proto = this.sourcePanel")
             }));
+            CurrentUserUtils.searchStack = new PrefetchProxy(Docs.Create.QueryDocument({ title: "search stack", })) as any as Doc;
         }
         return doc["tabs-button-search"] as Doc;
     }
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index dfd5a993e..9454b0c78 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -122,8 +122,8 @@
     padding-right: 50px;
 
     .mainView-menuPanel-button {
-        width: 50px;
-        height: 50px;
+        width: 45px;
+        height: 45px;
         padding: 10px;
         pointer-events: all;
         touch-action: none;
@@ -139,7 +139,7 @@
         .mainView-menuPanel-button-label {
             background: rgb(168, 168, 168);
             color: black;
-            margin-left: -10px;
+            margin-left: -13px;
             border-radius: 8px;
             width: 65px;
             position: absolute;
@@ -269,22 +269,30 @@
 
 .mainView-expandFlyoutButton {
     position: absolute;
-    top: 100px;
-    right: 30px;
+    top: 120px;
+    right: 55px;
     cursor: pointer;
 }
 
 .mainView-libraryHandle {
-    width: 20px;
+    width: 28px;
     left: calc(100% - 10px);
-    height: 40px;
+    height: 55px;
     top: 50%;
     border: 1px solid black;
-    border-radius: 5px;
+    border-radius: 8px;
     position: absolute;
     z-index: 2;
     touch-action: none;
-    cursor: ew-resize;
+    cursor: grab;
+
+    .mainView-libraryHandle-icon {
+        width: 10px;
+        height: 10px;
+        float: right;
+        margin-right: 1px;
+    }
+
 }
 
 .mainView-workspace {
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 845a61d32..766626a82 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -489,7 +489,8 @@ export class MainView extends React.Component {
             </button>
 
             <button className="mainView-menuPanel-button"
-                onPointerDown={e => this.selectPanel("sharing")}
+                //onPointerDown={e => this.selectPanel("sharing")}
+                onClick={() => GroupManager.Instance.open()}
                 style={{
                     padding: "5px",
                     background: "black",
@@ -505,12 +506,24 @@ export class MainView extends React.Component {
                     padding: "5px",
                     background: "black",
                     boxShadow: "4px 4px 12px black",
-                    marginBottom: "45px"
+                    //marginBottom: "45px"
                 }}>
                 <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="wrench" color="white" size="lg" />
                 <div className="mainView-menuPanel-button-label"> Tools </div>
             </button>
 
+            <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>
+
             <button className="mainView-menuPanel-bottomButton"
                 onPointerDown={e => this.selectPanel("help")}
                 style={{
@@ -536,12 +549,11 @@ export class MainView extends React.Component {
 
     @action
     selectPanel = (str: string) => {
-
-        if (this.panelContent === str) {
-            this.sidebarContent = null;
+        if (this.panelContent === str && this.flyoutWidth !== 0) {
             this.panelContent = "none";
-            MainView.Instance._flyoutTranslate = false;
+            this.flyoutWidth = 0;
         } else {
+            this.panelContent = str;
             MainView.expandFlyout();
             if (str === "tools") {
                 CurrentUserUtils.toolsBtn;
@@ -552,10 +564,8 @@ export class MainView extends React.Component {
                 this.sidebarContent.proto = CurrentUserUtils.catalogStack;
             } else if (str === "deleted") {
                 this.sidebarContent.proto = CurrentUserUtils.closedStack;
-            } else if (str === "upload") {
-                this.sidebarContent.proto = "uploads";
-            } else if (str === "sharing") {
-                this.sidebarContent.proto = "sharing";
+            } else if (str === "search") {
+                this.sidebarContent.proto = CurrentUserUtils.searchStack;
             }
         }
     }
@@ -573,7 +583,7 @@ export class MainView extends React.Component {
                 {this.menuPanel}
                 <div style={{ display: "contents", flexDirection: "row", position: "relative" }}>
                     <div className="mainView-flyoutContainer" onPointerLeave={this.pointerLeaveDragger} style={{ width: this.flyoutWidth }}>
-                        {MainView.Instance._flyoutTranslate ? <div className="mainView-libraryHandle"
+                        {this.flyoutWidth !== 0 ? <div className="mainView-libraryHandle"
                             onPointerDown={this.onPointerDown}
                             style={{ backgroundColor: this.defaultBackgroundColors(this.sidebarContent) }}>
                             <span title="library View Dragger" style={{
@@ -582,6 +592,8 @@ export class MainView extends React.Component {
                                 position: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "absolute" : "fixed",
                                 top: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "" : "0"
                             }} />
+                            <div className="mainview-libraryHandle-icon">
+                                <FontAwesomeIcon icon="chevron-left" color="black" size="sm" /> </div>
                         </div> : null}
                         <div className="mainView-libraryFlyout" style={{
                             //transformOrigin: this._flyoutTranslate ? "" : "left center",
@@ -590,7 +602,7 @@ export class MainView extends React.Component {
                             boxShadow: this._flyoutTranslate ? "" : "rgb(156, 147, 150) 0.2vw 0.2vw 0.2vw"
                         }}>
                             {this.flyout}
-                            {MainView.Instance._flyoutTranslate ? this.expandButton : null}
+                            {this.expandButton}
                         </div>
                     </div>
                     {this.dockingContent}
-- 
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/MainView.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 f19dfd26aa3232f2fe52ef5e631be208706fca11 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Thu, 23 Jul 2020 13:09:37 -0500
Subject: menu buttons to documents

---
 src/client/views/MainView.scss                     |  12 +-
 src/client/views/MainView.tsx                      | 293 +++++++++++++--------
 .../views/collections/CollectionTreeView.tsx       |   1 +
 3 files changed, 187 insertions(+), 119 deletions(-)

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

diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index f64129600..bd074adea 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -155,7 +155,7 @@
 .mainView-menuPanel {
 
     max-width: 95px;
-    background-color: rgb(105, 105, 105);
+    background-color: #323232;
     padding: 20px;
     padding-right: 50px;
 
@@ -211,8 +211,8 @@
         pointer-events: all;
         touch-action: none;
         border-radius: inherit;
-        background: dimgray;
-        background-color: dimgray;
+        background: #323232;
+        background-color: #323232;
         border-radius: 100%;
         transform-origin: top left;
         margin-bottom: 20px;
@@ -221,8 +221,8 @@
         margin-right: 25px;
 
         .mainView-menuPanel-bottomButton-label {
-            background: dimgray;
-            color: black;
+            background: #323232;
+            color: white;
             margin-left: -10px;
             border-radius: 8px;
             width: 65px;
@@ -238,7 +238,7 @@
         .mainView-menuPanel-bottomButton-icon {
             width: 50px;
             height: 50px;
-            color: black;
+            color: white;
         }
 
         svg {
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 88f072493..9e8fa545f 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -53,7 +53,7 @@ import { RadialMenu } from './nodes/RadialMenu';
 import { OverlayView } from './OverlayView';
 import PDFMenu from './pdf/PDFMenu';
 import { PreviewCursor } from './PreviewCursor';
-import { ScriptField } from '../../fields/ScriptField';
+import { ScriptField, ComputedField } from '../../fields/ScriptField';
 import { TimelineMenu } from './animationtimeline/TimelineMenu';
 import { SnappingManager } from '../util/SnappingManager';
 import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox';
@@ -69,6 +69,8 @@ import CollectionMenu from './collections/CollectionMenu';
 import { Tooltip, AccordionActions } from '@material-ui/core';
 import { PropertiesView } from './collections/collectionFreeForm/PropertiesView';
 import { SelectionManager } from '../util/SelectionManager';
+import { PrefetchProxy } from '../../fields/Proxy';
+import { DragManager } from '../util/DragManager';
 
 @observer
 export class MainView extends React.Component {
@@ -333,7 +335,8 @@ export class MainView extends React.Component {
         }
     }
     @computed get mainDocView() {
-        return <DocumentView Document={this.mainContainer!}
+        return <DocumentView
+            Document={this.mainContainer!}
             DataDoc={undefined}
             LibraryPath={emptyPath}
             addDocument={undefined}
@@ -356,6 +359,7 @@ export class MainView extends React.Component {
             docFilters={returnEmptyFilter}
             ContainingCollectionView={undefined}
             ContainingCollectionDoc={undefined}
+            renderDepth={1}
         />;
     }
     @computed get dockingContent() {
@@ -449,123 +453,185 @@ export class MainView extends React.Component {
                     ContainingCollectionView={undefined}
                     ContainingCollectionDoc={undefined} />
             </div>
-            {/* <div className="buttonContainer" >
-                <button className="mainView-settings" key="settings" onClick={() => SettingsManager.Instance.open()}>
-                    <FontAwesomeIcon icon="cog" size="lg" />
-                </button>
-                <button className="mainView-settings" key="groups" onClick={() => GroupManager.Instance.open()}>
-                    <FontAwesomeIcon icon="columns" size="lg" />
-                </button>
-            </div> */}
             {this.docButtons}</div>;
     }
 
-    @computed get menuPanel() {
+    menuBtnDescriptions(): {
+        title: string, icon: string, click: string, backgroundColor?: string,
+    }[] {
+        return [
+            { title: "Workspace", icon: "desktop", click: 'this.selectPanel("workspace")' },
+            { title: "Catalog", icon: "file", click: 'this.selectPanel("catalog")' },
+            { title: "Recently Deleted", icon: "trash-alt", click: 'this.selectPanel("deleted")' },
+            { title: "Import", icon: "upload", click: 'this.selectPanel("upload")' },
+            { title: "Sharing", icon: "users", click: 'GroupManager.Instance.open()' },
+            { title: "Tools", icon: "wrench", click: 'this.selectPanel("tools")' },
+            { title: "Search", icon: "search", click: 'this.selectPanel("search")' },
+            { title: "Help", icon: "question-circle", click: 'this.selectPanel("help")' },
+            { title: "Settings", icon: "cog", click: 'SettingsManager.Instance.open()' },
+        ];
+    }
+
+    setupMenuButtons() {
+        const buttons = this.menuBtnDescriptions();
+        const menuBtns = buttons.map(({ title, icon, click, backgroundColor }) => Docs.Create.FontIconDocument({
+            _width: 100, _height: 100,
+            icon,
+            title,
+            onClick: click ? ScriptField.MakeScript(click) : undefined,
+            backgroundColor,
+        }));
+
+        const btnStack = new PrefetchProxy(Docs.Create.MasonryDocument(menuBtns, {
+            _xMargin: 0, _autoHeight: true, _width: 100, _columnWidth: 60, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled",
+        }));
+        return btnStack as unknown as Doc;
+    }
+
+    @computed get setupMenuPanel() {
+        const menuBtns = this.setupMenuButtons();
+        const menuStack = new PrefetchProxy(Docs.Create.StackingDocument([menuBtns], {
+            title: "all Creators", _yMargin: 0, _autoHeight: true, _xMargin: 0,
+            _width: 100, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled",
+        })) as any as Doc;
+
         return <div className="mainView-menuPanel">
-            <button className="mainView-menuPanel-button"
-                onPointerDown={e => this.selectPanel("workspace")}
-                style={{
-                    padding: "5px",
-                    background: "black",
-                    boxShadow: "4px 4px 12px black"
-                }}>
-                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="desktop" color="white" size="lg" />
-                <div className="mainView-menuPanel-button-label"> Workspace </div>
-            </button>
-
-            <button className="mainView-menuPanel-button"
-                onPointerDown={e => this.selectPanel("catalog")}
-                style={{
-                    padding: "5px",
-                    background: "black",
-                    boxShadow: "4px 4px 12px black"
-                }}>
-                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="file" color="white" size="lg" />
-                <div className="mainView-menuPanel-button-label"> Catalog </div>
-            </button>
-
-            <button className="mainView-menuPanel-button"
-                onPointerDown={e => this.selectPanel("deleted")}
-                style={{
-                    padding: "5px",
-                    background: "black",
-                    boxShadow: "4px 4px 12px black",
-                    marginBottom: "30px"
-                }}>
-                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="trash-alt" color="white" size="lg" />
-                <div className="mainView-menuPanel-button-label"> Recently Closed </div>
-            </button>
-
-            <button className="mainView-menuPanel-button"
-                onPointerDown={e => this.selectPanel("upload")}
-                style={{
-                    padding: "5px",
-                    background: "black",
-                    boxShadow: "4px 4px 12px black",
-                }}>
-                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="upload" color="white" size="lg" />
-                <div className="mainView-menuPanel-button-label"> Import </div>
-            </button>
-
-            <button className="mainView-menuPanel-button"
-                //onPointerDown={e => this.selectPanel("sharing")}
-                onClick={() => GroupManager.Instance.open()}
-                style={{
-                    padding: "5px",
-                    background: "black",
-                    boxShadow: "4px 4px 12px black"
-                }}>
-                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="users" color="white" size="lg" />
-                <div className="mainView-menuPanel-button-label"> Sharing </div>
-            </button>
-
-            <button className="mainView-menuPanel-button"
-                onPointerDown={e => this.selectPanel("tools")}
-                style={{
-                    padding: "5px",
-                    background: "black",
-                    boxShadow: "4px 4px 12px black",
-                    //marginBottom: "45px"
-                }}>
-                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="wrench" color="white" size="lg" />
-                <div className="mainView-menuPanel-button-label"> Tools </div>
-            </button>
-
-            <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>
-
-            <button className="mainView-menuPanel-bottomButton"
-                onPointerDown={e => this.selectPanel("help")}
-                style={{
-                    padding: "5px",
-                    background: "dimgrey",
-                }}>
-                <FontAwesomeIcon className="mainView-menuPanel-bottomButton-icon" icon="question-circle" color="white" size="lg" />
-                <div className="mainView-menuPanel-bottomButton-label"> Help </div>
-            </button>
-
-            <button className="mainView-menuPanel-bottomButton"
-                // onPointerDown={e => this.selectPanel("settings")}
-                onClick={() => SettingsManager.Instance.open()}
-                style={{
-                    padding: "5px",
-                    background: "dimgrey",
-                }}>
-                <FontAwesomeIcon className="mainView-menuPanel-bottomButton-icon" icon="cog" color="white" size="lg" />
-                <div className="mainView-menuPanel-bottomButton-label"> Settings </div>
-            </button>
+            <DocumentView
+                Document={menuStack}
+                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={() => 100}
+                PanelHeight={this.getContentsHeight}
+                renderDepth={0}
+                focus={emptyFunction}
+                backgroundColor={this.defaultBackgroundColors}
+                parentActive={returnTrue}
+                whenActiveChanged={emptyFunction}
+                bringToFront={emptyFunction}
+                docFilters={returnEmptyFilter}
+                ContainingCollectionView={undefined}
+                ContainingCollectionDoc={undefined} />
         </div>;
     }
 
+    @observable menuPanel: any;
+
+    // @computed get menuPanel() {
+    //     return <div className="mainView-menuPanel">
+    //         <button className="mainView-menuPanel-button"
+    //             onPointerDown={e => this.selectPanel("workspace")}
+    //             style={{
+    //                 padding: "5px",
+    //                 background: "black",
+    //                 boxShadow: "4px 4px 12px black"
+    //             }}>
+    //             <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="desktop" color="white" size="lg" />
+    //             <div className="mainView-menuPanel-button-label"> Workspace </div>
+    //         </button>
+
+    //         <button className="mainView-menuPanel-button"
+    //             onPointerDown={e => this.selectPanel("catalog")}
+    //             style={{
+    //                 padding: "5px",
+    //                 background: "black",
+    //                 boxShadow: "4px 4px 12px black"
+    //             }}>
+    //             <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="file" color="white" size="lg" />
+    //             <div className="mainView-menuPanel-button-label"> Catalog </div>
+    //         </button>
+
+    //         <button className="mainView-menuPanel-button"
+    //             onPointerDown={e => this.selectPanel("deleted")}
+    //             style={{
+    //                 padding: "5px",
+    //                 background: "black",
+    //                 boxShadow: "4px 4px 12px black",
+    //                 marginBottom: "30px"
+    //             }}>
+    //             <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="trash-alt" color="white" size="lg" />
+    //             <div className="mainView-menuPanel-button-label"> Recently Closed </div>
+    //         </button>
+
+    //         <button className="mainView-menuPanel-button"
+    //             onPointerDown={e => this.selectPanel("upload")}
+    //             style={{
+    //                 padding: "5px",
+    //                 background: "black",
+    //                 boxShadow: "4px 4px 12px black",
+    //             }}>
+    //             <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="upload" color="white" size="lg" />
+    //             <div className="mainView-menuPanel-button-label"> Import </div>
+    //         </button>
+
+    //         <button className="mainView-menuPanel-button"
+    //             //onPointerDown={e => this.selectPanel("sharing")}
+    //             onClick={() => GroupManager.Instance.open()}
+    //             style={{
+    //                 padding: "5px",
+    //                 background: "black",
+    //                 boxShadow: "4px 4px 12px black"
+    //             }}>
+    //             <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="users" color="white" size="lg" />
+    //             <div className="mainView-menuPanel-button-label"> Sharing </div>
+    //         </button>
+
+    //         <button className="mainView-menuPanel-button"
+    //             onPointerDown={e => this.selectPanel("tools")}
+    //             style={{
+    //                 padding: "5px",
+    //                 background: "black",
+    //                 boxShadow: "4px 4px 12px black",
+    //                 //marginBottom: "45px"
+    //             }}>
+    //             <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="wrench" color="white" size="lg" />
+    //             <div className="mainView-menuPanel-button-label"> Tools </div>
+    //         </button>
+
+    //         <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>
+
+    //         <button className="mainView-menuPanel-bottomButton"
+    //             onPointerDown={e => this.selectPanel("help")}
+    //             style={{
+    //                 padding: "5px",
+    //                 background: "323232",
+    //             }}>
+    //             <FontAwesomeIcon className="mainView-menuPanel-bottomButton-icon" icon="question-circle" color="white" size="lg" />
+    //             <div className="mainView-menuPanel-bottomButton-label"> Help </div>
+    //         </button>
+
+    //         <button className="mainView-menuPanel-bottomButton"
+    //             // onPointerDown={e => this.selectPanel("settings")}
+    //             onClick={() => SettingsManager.Instance.open()}
+    //             style={{
+    //                 padding: "5px",
+    //                 background: "323232",
+    //             }}>
+    //             <FontAwesomeIcon className="mainView-menuPanel-bottomButton-icon" icon="cog" color="white" size="lg" />
+    //             <div className="mainView-menuPanel-bottomButton-label"> Settings </div>
+    //         </button>
+    //     </div>;
+    // }
+
     @action
     selectPanel = (str: string) => {
         if (this.panelContent === str && this.flyoutWidth !== 0) {
@@ -587,6 +653,7 @@ export class MainView extends React.Component {
                 this.sidebarContent.proto = CurrentUserUtils.searchStack;
             }
         }
+        return true;
     }
 
     @action
@@ -623,7 +690,7 @@ export class MainView extends React.Component {
                 height,
                 width: (FormatShapePane.Instance?.Pinned) ? `calc(100% - 200px)` : "100%"
             }} >
-                {this.menuPanel}
+                {this.setupMenuPanel}
                 <div style={{ display: "contents", flexDirection: "row", position: "relative" }}>
                     <div className="mainView-flyoutContainer" onPointerLeave={this.pointerLeaveDragger} style={{ width: this.flyoutWidth }}>
                         {this.flyoutWidth !== 0 ? <div className="mainView-libraryHandle"
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 96a2e23c9..8d9c4af6e 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -64,6 +64,7 @@ export interface TreeViewProps {
     onCheckedClick?: () => ScriptField;
     onChildClick?: () => ScriptField;
     ignoreFields?: string[];
+    alwaysOpen?: boolean;
 }
 
 @observer
-- 
cgit v1.2.3-70-g09d2


From 05c46464ba69e889145d8a32320cd7f130665ee1 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Thu, 23 Jul 2020 13:25:42 -0500
Subject: selection changes

---
 src/client/util/CurrentUserUtils.ts                | 47 ++++++++++++++++++++++
 src/client/util/SelectionManager.ts                | 23 +----------
 src/client/views/MainView.tsx                      | 45 ++-------------------
 .../collectionFreeForm/PropertiesView.tsx          | 12 ++++--
 4 files changed, 59 insertions(+), 68 deletions(-)

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

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 1dd25ae30..54d81a9fa 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -493,6 +493,52 @@ export class CurrentUserUtils {
         return doc.myItemCreators as Doc;
     }
 
+    static menuBtnDescriptions(): {
+        title: string, icon: string, click: string, backgroundColor?: string,
+    }[] {
+        return [
+            { title: "Workspace", icon: "desktop", click: 'this.selectPanel("workspace")' },
+            { title: "Catalog", icon: "file", click: 'this.selectPanel("catalog")' },
+            { title: "Recently Deleted", icon: "trash-alt", click: 'this.selectPanel("deleted")' },
+            { title: "Import", icon: "upload", click: 'this.selectPanel("upload")' },
+            { title: "Sharing", icon: "users", click: 'GroupManager.Instance.open()' },
+            { title: "Tools", icon: "wrench", click: 'this.selectPanel("tools")' },
+            { title: "Search", icon: "search", click: 'this.selectPanel("search")' },
+            { title: "Help", icon: "question-circle", click: 'this.selectPanel("help")' },
+            { title: "Settings", icon: "cog", click: 'SettingsManager.Instance.open()' },
+        ];
+    }
+
+    static setupMenuButtons(doc: Doc) {
+        if (doc.menuStackBtns === undefined) {
+            const buttons = CurrentUserUtils.menuBtnDescriptions();
+            const menuBtns = buttons.map(({ title, icon, click, backgroundColor }) => Docs.Create.FontIconDocument({
+                _width: 100, _height: 100,
+                icon,
+                title,
+                onClick: click ? ScriptField.MakeScript(click) : undefined,
+                backgroundColor,
+            }));
+
+            doc.menuStackBtns = new PrefetchProxy(Docs.Create.MasonryDocument(menuBtns, {
+                _xMargin: 0, _autoHeight: true, _width: 100, _columnWidth: 60, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled",
+            }));
+        }
+        return doc.menuStackBtns as Doc;
+    }
+
+    static setupMenuPanel(doc: Doc) {
+        if (doc.menuStack === undefined) {
+            const menuBtns = CurrentUserUtils.setupMenuButtons(doc);
+            doc.menuStack = new PrefetchProxy(Docs.Create.StackingDocument([menuBtns], {
+                title: "all Creators", _yMargin: 0, _autoHeight: true, _xMargin: 0,
+                _width: 100, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled",
+            })) as any as Doc;
+        }
+        return doc.menuStack;
+    }
+
+
     // Sets up mobile menu if it is undefined creates a new one, otherwise returns existing menu
     static setupActiveMobileMenu(doc: Doc) {
         if (doc.activeMobileMenu === undefined) {
@@ -894,6 +940,7 @@ export class CurrentUserUtils {
         this.setupDocTemplates(doc); // sets up the template menu of templates
         this.setupRightSidebar(doc);  // sets up the right sidebar collection for mobile upload documents and sharing
         this.setupActiveMobileMenu(doc); // sets up the current mobile menu for Dash Mobile
+        this.setupMenuPanel(doc);
         this.setupOverlays(doc);  // documents in overlay layer
         this.setupDockedButtons(doc);  // the bottom bar of font icons
         this.setupDefaultPresentation(doc); // presentation that's initially triggered
diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index 6fb758eac..ec875fe4b 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -13,13 +13,9 @@ 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) {
@@ -39,14 +35,6 @@ 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);
@@ -55,16 +43,11 @@ 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();
@@ -76,10 +59,6 @@ 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.tsx b/src/client/views/MainView.tsx
index 9e8fa545f..8113ad698 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -456,48 +456,11 @@ export class MainView extends React.Component {
             {this.docButtons}</div>;
     }
 
-    menuBtnDescriptions(): {
-        title: string, icon: string, click: string, backgroundColor?: string,
-    }[] {
-        return [
-            { title: "Workspace", icon: "desktop", click: 'this.selectPanel("workspace")' },
-            { title: "Catalog", icon: "file", click: 'this.selectPanel("catalog")' },
-            { title: "Recently Deleted", icon: "trash-alt", click: 'this.selectPanel("deleted")' },
-            { title: "Import", icon: "upload", click: 'this.selectPanel("upload")' },
-            { title: "Sharing", icon: "users", click: 'GroupManager.Instance.open()' },
-            { title: "Tools", icon: "wrench", click: 'this.selectPanel("tools")' },
-            { title: "Search", icon: "search", click: 'this.selectPanel("search")' },
-            { title: "Help", icon: "question-circle", click: 'this.selectPanel("help")' },
-            { title: "Settings", icon: "cog", click: 'SettingsManager.Instance.open()' },
-        ];
-    }
-
-    setupMenuButtons() {
-        const buttons = this.menuBtnDescriptions();
-        const menuBtns = buttons.map(({ title, icon, click, backgroundColor }) => Docs.Create.FontIconDocument({
-            _width: 100, _height: 100,
-            icon,
-            title,
-            onClick: click ? ScriptField.MakeScript(click) : undefined,
-            backgroundColor,
-        }));
-
-        const btnStack = new PrefetchProxy(Docs.Create.MasonryDocument(menuBtns, {
-            _xMargin: 0, _autoHeight: true, _width: 100, _columnWidth: 60, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled",
-        }));
-        return btnStack as unknown as Doc;
-    }
-
-    @computed get setupMenuPanel() {
-        const menuBtns = this.setupMenuButtons();
-        const menuStack = new PrefetchProxy(Docs.Create.StackingDocument([menuBtns], {
-            title: "all Creators", _yMargin: 0, _autoHeight: true, _xMargin: 0,
-            _width: 100, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled",
-        })) as any as Doc;
+    @computed get menuPanel() {
 
         return <div className="mainView-menuPanel">
             <DocumentView
-                Document={menuStack}
+                Document={Doc.UserDoc().menuStack as Doc}
                 DataDoc={undefined}
                 LibraryPath={emptyPath}
                 addDocument={undefined}
@@ -524,8 +487,6 @@ export class MainView extends React.Component {
         </div>;
     }
 
-    @observable menuPanel: any;
-
     // @computed get menuPanel() {
     //     return <div className="mainView-menuPanel">
     //         <button className="mainView-menuPanel-button"
@@ -690,7 +651,7 @@ export class MainView extends React.Component {
                 height,
                 width: (FormatShapePane.Instance?.Pinned) ? `calc(100% - 200px)` : "100%"
             }} >
-                {this.setupMenuPanel}
+                {this.menuPanel}
                 <div style={{ display: "contents", flexDirection: "row", position: "relative" }}>
                     <div className="mainView-flyoutContainer" onPointerLeave={this.pointerLeaveDragger} style={{ width: this.flyoutWidth }}>
                         {this.flyoutWidth !== 0 ? <div className="mainView-libraryHandle"
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index 5aa0066d2..11609b1c0 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -28,10 +28,14 @@ interface PropertiesViewProps {
 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;
+
+    @computed get selectedDocumentView() {
+        if (SelectionManger.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; }
 
     @action
     rtfWidth = () => {
-- 
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/MainView.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 171f8a5ce7ba35bb8a4045411f925a469c460774 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Thu, 23 Jul 2020 18:33:52 -0500
Subject: fixed right handle issues

---
 src/client/util/CurrentUserUtils.ts                |  21 +-
 src/client/views/MainView.scss                     |   5 +-
 src/client/views/MainView.tsx                      | 304 +++++++++++----------
 .../collectionFreeForm/PropertiesView.scss         |   1 -
 src/client/views/nodes/DocumentView.tsx            |  12 +-
 5 files changed, 180 insertions(+), 163 deletions(-)

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

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index c89f9b8fe..d41aa4b58 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -498,14 +498,14 @@ export class CurrentUserUtils {
         title: string, icon: string, click: string, backgroundColor?: string,
     }[] {
         return [
-            { title: "Workspace", icon: "desktop", click: 'this.selectPanel("workspace")' },
-            { title: "Catalog", icon: "file", click: 'this.selectPanel("catalog")' },
-            { title: "Recently Deleted", icon: "trash-alt", click: 'this.selectPanel("deleted")' },
+            { 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: "Sharing", icon: "users", click: 'GroupManager.Instance.open()' },
-            { title: "Tools", icon: "wrench", click: 'this.selectPanel("tools")' },
-            { title: "Search", icon: "search", click: 'this.selectPanel("search")' },
-            { title: "Help", icon: "question-circle", click: 'this.selectPanel("help")' },
+            { 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: "Settings", icon: "cog", click: 'SettingsManager.Instance.open()' },
         ];
     }
@@ -514,7 +514,7 @@ export class CurrentUserUtils {
         if (doc.menuStackBtns === undefined) {
             const buttons = CurrentUserUtils.menuBtnDescriptions();
             const menuBtns = buttons.map(({ title, icon, click, backgroundColor }) => Docs.Create.FontIconDocument({
-                _width: 100, _height: 100,
+                _width: 40, _height: 40,
                 icon,
                 title,
                 onClick: click ? ScriptField.MakeScript(click) : undefined,
@@ -522,18 +522,19 @@ export class CurrentUserUtils {
             }));
 
             doc.menuStackBtns = new PrefetchProxy(Docs.Create.MasonryDocument(menuBtns, {
-                _xMargin: 0, _autoHeight: true, _width: 100, _columnWidth: 60, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled",
+                _xMargin: 0, _autoHeight: true, _width: 80, _columnWidth: 50, lockedPosition: true, _chromeStatus: "disabled",
             }));
         }
         return doc.menuStackBtns as Doc;
     }
 
     static setupMenuPanel(doc: Doc) {
+        doc.menuStack = undefined;
         if (doc.menuStack === undefined) {
             const menuBtns = CurrentUserUtils.setupMenuButtons(doc);
             doc.menuStack = new PrefetchProxy(Docs.Create.StackingDocument([menuBtns], {
-                title: "all Creators", _yMargin: 0, _autoHeight: true, _xMargin: 0,
-                _width: 100, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled",
+                _yMargin: 0, _autoHeight: true, _xMargin: 0,
+                _width: 80, 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 bd074adea..10e7f471b 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -137,7 +137,8 @@
     right: 0;
     top: 0;
     border-left: solid 1px;
-    z-index: 10;
+    z-index: 10000;
+    cursor: auto;
 }
 
 .mainView-flyoutContainer {
@@ -160,7 +161,7 @@
     padding-right: 50px;
 
     overflow-y: scroll;
-    overflow-x: hidden;
+    overflow-x: clip;
 
     .mainView-menuPanel-button {
         width: 45px;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index bc20059e8..beee9289e 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -84,7 +84,7 @@ export class MainView extends React.Component {
     @observable private _panelWidth: number = 0;
     @observable private _panelHeight: number = 0;
     @observable private _flyoutTranslate: boolean = false;
-    @observable public flyoutWidth: number = 250;
+    @observable public flyoutWidth: number = 275;
     private get darkScheme() { return BoolCast(Cast(this.userDoc?.activeWorkspace, Doc, null)?.darkScheme); }
 
     @computed private get userDoc() { return Doc.UserDoc(); }
@@ -96,6 +96,11 @@ export class MainView extends React.Component {
     @observable public panelContent: string = "none";
     @observable public showProperties: boolean = false;
     public isPointerDown = false;
+    @computed get selectedDocumentView() {
+        if (SelectionManager.SelectedDocuments().length) {
+            return SelectionManager.SelectedDocuments()[0];
+        } else { return undefined; }
+    }
 
     @observable _propertiesWidth: number = 0;
     propertiesWidth = () => Math.max(0, Math.min(this._panelWidth - 50, this._propertiesWidth));
@@ -447,148 +452,152 @@ export class MainView extends React.Component {
                     bringToFront={emptyFunction}
                     docFilters={returnEmptyFilter}
                     ContainingCollectionView={undefined}
-                    ContainingCollectionDoc={undefined} />
+                    ContainingCollectionDoc={undefined}
+                    relative={true}
+                />
             </div>
             {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={() => 100}
-                PanelHeight={this.getContentsHeight}
-                renderDepth={0}
-                focus={emptyFunction}
-                backgroundColor={this.defaultBackgroundColors}
-                parentActive={returnTrue}
-                whenActiveChanged={emptyFunction}
-                bringToFront={emptyFunction}
-                docFilters={returnEmptyFilter}
-                ContainingCollectionView={undefined}
-                ContainingCollectionDoc={undefined} />
-        </div>;
-    }
-
     // @computed get menuPanel() {
+
     //     return <div className="mainView-menuPanel">
-    //         <button className="mainView-menuPanel-button"
-    //             onPointerDown={e => this.selectPanel("workspace")}
-    //             style={{
-    //                 padding: "5px",
-    //                 background: "black",
-    //                 boxShadow: "4px 4px 12px black"
-    //             }}>
-    //             <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="desktop" color="white" size="lg" />
-    //             <div className="mainView-menuPanel-button-label"> Workspace </div>
-    //         </button>
-
-    //         <button className="mainView-menuPanel-button"
-    //             onPointerDown={e => this.selectPanel("catalog")}
-    //             style={{
-    //                 padding: "5px",
-    //                 background: "black",
-    //                 boxShadow: "4px 4px 12px black"
-    //             }}>
-    //             <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="file" color="white" size="lg" />
-    //             <div className="mainView-menuPanel-button-label"> Catalog </div>
-    //         </button>
-
-    //         <button className="mainView-menuPanel-button"
-    //             onPointerDown={e => this.selectPanel("deleted")}
-    //             style={{
-    //                 padding: "5px",
-    //                 background: "black",
-    //                 boxShadow: "4px 4px 12px black",
-    //                 marginBottom: "30px"
-    //             }}>
-    //             <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="trash-alt" color="white" size="lg" />
-    //             <div className="mainView-menuPanel-button-label"> Recently Closed </div>
-    //         </button>
-
-    //         <button className="mainView-menuPanel-button"
-    //             onPointerDown={e => this.selectPanel("upload")}
-    //             style={{
-    //                 padding: "5px",
-    //                 background: "black",
-    //                 boxShadow: "4px 4px 12px black",
-    //             }}>
-    //             <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="upload" color="white" size="lg" />
-    //             <div className="mainView-menuPanel-button-label"> Import </div>
-    //         </button>
-
-    //         <button className="mainView-menuPanel-button"
-    //             //onPointerDown={e => this.selectPanel("sharing")}
-    //             onClick={() => GroupManager.Instance.open()}
-    //             style={{
-    //                 padding: "5px",
-    //                 background: "black",
-    //                 boxShadow: "4px 4px 12px black"
-    //             }}>
-    //             <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="users" color="white" size="lg" />
-    //             <div className="mainView-menuPanel-button-label"> Sharing </div>
-    //         </button>
-
-    //         <button className="mainView-menuPanel-button"
-    //             onPointerDown={e => this.selectPanel("tools")}
-    //             style={{
-    //                 padding: "5px",
-    //                 background: "black",
-    //                 boxShadow: "4px 4px 12px black",
-    //                 //marginBottom: "45px"
-    //             }}>
-    //             <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="wrench" color="white" size="lg" />
-    //             <div className="mainView-menuPanel-button-label"> Tools </div>
-    //         </button>
-
-    //         <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>
-
-    //         <button className="mainView-menuPanel-bottomButton"
-    //             onPointerDown={e => this.selectPanel("help")}
-    //             style={{
-    //                 padding: "5px",
-    //                 background: "323232",
-    //             }}>
-    //             <FontAwesomeIcon className="mainView-menuPanel-bottomButton-icon" icon="question-circle" color="white" size="lg" />
-    //             <div className="mainView-menuPanel-bottomButton-label"> Help </div>
-    //         </button>
-
-    //         <button className="mainView-menuPanel-bottomButton"
-    //             // onPointerDown={e => this.selectPanel("settings")}
-    //             onClick={() => SettingsManager.Instance.open()}
-    //             style={{
-    //                 padding: "5px",
-    //                 background: "323232",
-    //             }}>
-    //             <FontAwesomeIcon className="mainView-menuPanel-bottomButton-icon" icon="cog" color="white" size="lg" />
-    //             <div className="mainView-menuPanel-bottomButton-label"> Settings </div>
-    //         </button>
+    //         <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}
+    //         />
     //     </div>;
     // }
 
+    @computed get menuPanel() {
+        return <div className="mainView-menuPanel">
+            <button className="mainView-menuPanel-button"
+                onPointerDown={e => this.selectPanel("workspace")}
+                style={{
+                    padding: "5px",
+                    background: "black",
+                    boxShadow: "4px 4px 12px black"
+                }}>
+                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="desktop" color="white" size="lg" />
+                <div className="mainView-menuPanel-button-label"> Workspace </div>
+            </button>
+
+            <button className="mainView-menuPanel-button"
+                onPointerDown={e => this.selectPanel("catalog")}
+                style={{
+                    padding: "5px",
+                    background: "black",
+                    boxShadow: "4px 4px 12px black"
+                }}>
+                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="file" color="white" size="lg" />
+                <div className="mainView-menuPanel-button-label"> Catalog </div>
+            </button>
+
+            <button className="mainView-menuPanel-button"
+                onPointerDown={e => this.selectPanel("deleted")}
+                style={{
+                    padding: "5px",
+                    background: "black",
+                    boxShadow: "4px 4px 12px black",
+                    marginBottom: "30px"
+                }}>
+                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="trash-alt" color="white" size="lg" />
+                <div className="mainView-menuPanel-button-label"> Recently Closed </div>
+            </button>
+
+            <button className="mainView-menuPanel-button"
+                onPointerDown={e => this.selectPanel("upload")}
+                style={{
+                    padding: "5px",
+                    background: "black",
+                    boxShadow: "4px 4px 12px black",
+                }}>
+                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="upload" color="white" size="lg" />
+                <div className="mainView-menuPanel-button-label"> Import </div>
+            </button>
+
+            <button className="mainView-menuPanel-button"
+                //onPointerDown={e => this.selectPanel("sharing")}
+                onClick={() => GroupManager.Instance.open()}
+                style={{
+                    padding: "5px",
+                    background: "black",
+                    boxShadow: "4px 4px 12px black"
+                }}>
+                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="users" color="white" size="lg" />
+                <div className="mainView-menuPanel-button-label"> Sharing </div>
+            </button>
+
+            <button className="mainView-menuPanel-button"
+                onPointerDown={e => this.selectPanel("tools")}
+                style={{
+                    padding: "5px",
+                    background: "black",
+                    boxShadow: "4px 4px 12px black",
+                    //marginBottom: "45px"
+                }}>
+                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="wrench" color="white" size="lg" />
+                <div className="mainView-menuPanel-button-label"> Tools </div>
+            </button>
+
+            <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>
+
+            <button className="mainView-menuPanel-bottomButton"
+                onPointerDown={e => this.selectPanel("help")}
+                style={{
+                    padding: "5px",
+                    background: "323232",
+                }}>
+                <FontAwesomeIcon className="mainView-menuPanel-bottomButton-icon" icon="question-circle" color="white" size="lg" />
+                <div className="mainView-menuPanel-bottomButton-label"> Help </div>
+            </button>
+
+            <button className="mainView-menuPanel-bottomButton"
+                // onPointerDown={e => this.selectPanel("settings")}
+                onClick={() => SettingsManager.Instance.open()}
+                style={{
+                    padding: "5px",
+                    background: "323232",
+                }}>
+                <FontAwesomeIcon className="mainView-menuPanel-bottomButton-icon" icon="cog" color="white" size="lg" />
+                <div className="mainView-menuPanel-bottomButton-label"> Settings </div>
+            </button>
+        </div>;
+    }
+
     @action
     selectPanel = (str: string) => {
         if (this.panelContent === str && this.flyoutWidth !== 0) {
@@ -623,23 +632,24 @@ export class MainView extends React.Component {
 
     @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>;
+        return <div className="mainView-propertiesView" style={{
+            width: `200px`,
+            overflow: this.propertiesWidth() < 15 ? "hidden" : undefined
+        }}>
+            <PropertiesView
+                width={200}
+                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)`;
+
+        const rightFlyout = this.selectedDocumentView ? this._propertiesWidth - 1 : this.propertiesWidth() > 10 ? 151.5 : 0;
         return !this.userDoc || !(this.sidebarContent instanceof Doc) ? (null) : (
             <div className="mainView-mainContent" style={{
                 color: this.darkScheme ? "rgb(205,205,205)" : "black",
@@ -675,7 +685,7 @@ export class MainView extends React.Component {
                     {this.dockingContent}
                     {this.showProperties ? (null) :
                         <div className="mainView-propertiesDragger" title="Properties View Dragger" onPointerDown={this.onDown}
-                            style={{ right: this._propertiesWidth - 1, top: "45%" }}>
+                            style={{ right: rightFlyout, top: "45%" }}>
                             <div className="mainView-propertiesDragger-icon">
                                 <FontAwesomeIcon icon={this.propertiesIcon} color="white" size="sm" /> </div>
                         </div>
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index 98eae1ac7..f64ef2211 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -2,7 +2,6 @@
 
     background-color: rgb(205, 205, 205);
     height: 100%;
-    z-index: 1;
     font-family: "Noto Sans";
     cursor: auto;
 
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 998c6798e..02fe60255 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -100,6 +100,7 @@ export interface DocumentViewProps {
     layoutKey?: string;
     radialMenu?: String[];
     display?: string;
+    relative?: boolean;
 }
 
 @observer
@@ -1021,8 +1022,9 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     }
     childScaling = () => (this.layoutDoc._fitWidth ? this.props.PanelWidth() / this.nativeWidth : this.props.ContentScaling());
     @computed get contents() {
+        const pos = this.props.relative ? "relative " : "absolute";
         TraceMobx();
-        return (<div style={{ position: "absolute", width: "100%", height: "100%" }}>
+        return (<div style={{ position: pos, width: "100%", height: "100%" }}>
             <DocumentContentsView key={1}
                 docFilters={this.props.docFilters}
                 ContainingCollectionView={this.props.ContainingCollectionView}
@@ -1109,8 +1111,12 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     }
     @computed get innards() {
         TraceMobx();
+        const pos = this.props.relative ? "relative" : undefined;
         if (this.props.treeViewDoc && !this.props.LayoutTemplateString?.includes("LinkAnchorBox")) {  // this happens when the document is a tree view label (but not an anchor dot)
-            return <div className="documentView-treeView" style={{ maxWidth: this.props.PanelWidth() || undefined }}>
+            return <div className="documentView-treeView" style={{
+                maxWidth: this.props.PanelWidth() || undefined,
+                position: pos
+            }}>
                 {StrCast(this.props.Document.title)}
                 {this.allAnchors}
             </div>;
@@ -1235,7 +1241,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 background: finalColor,
                 opacity: finalOpacity,
                 fontFamily: StrCast(this.Document._fontFamily, "inherit"),
-                fontSize: Cast(this.Document._fontSize, "string", null)
+                fontSize: Cast(this.Document._fontSize, "string", null),
             }}>
             {this.onClickHandler && this.props.ContainingCollectionView?.props.Document._viewType === CollectionViewType.Time ? <>
                 {this.innards}
-- 
cgit v1.2.3-70-g09d2


From 433ac4ffcf2eb71557ca0baff704bd67c461cadc Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Fri, 24 Jul 2020 12:16:16 -0500
Subject: implemented  sharing UI in permissions

---
 src/client/views/MainView.tsx                      |  4 +-
 .../collectionFreeForm/PropertiesView.scss         | 79 ++++++++++++++++++++++
 .../collectionFreeForm/PropertiesView.tsx          | 76 +++++++++++++++++++++
 3 files changed, 157 insertions(+), 2 deletions(-)

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

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index beee9289e..f43eca468 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
+    faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faMap, faDesktop, faTrashRestore, faUsers, faWrench, faCog, faBellSlash
 } 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);
+            faPaintRoller, faBars, faBrush, faShapes, faEllipsisH, faHandPaper, faDesktop, faTrashRestore, faUsers, faWrench, faCog, faMap, faBellSlash);
         this.initEventListeners();
         this.initAuthenticationRouters();
     }
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index f64ef2211..e025c7e87 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -41,6 +41,85 @@
 
     }
 
+    .propertiesView-sharing {
+        border-bottom: 1px solid black;
+        padding: 8.5px;
+
+        .propertiesView-sharing-title {
+            font-size: 12.5px;
+            font-weight: bold;
+            padding-bottom: 7px;
+        }
+
+        .propertiesView-sharing-content {
+            font-size: 10px;
+            margin-left: 5px;
+        }
+    }
+
+    .notify-button {
+        padding: 2px;
+        width: 12px;
+        height: 12px;
+        background-color: black;
+        border-radius: 10px;
+        padding-left: 2px;
+        padding-right: 2px;
+        margin-top: 2px;
+        margin-right: 3px;
+
+        .notify-button-icon {
+            width: 6px;
+            height: 6.5px;
+            margin-left: .5px;
+        }
+
+        &:hover {
+            background-color: rgb(158, 158, 158);
+        }
+    }
+
+    .propertiesView-sharingTable {
+
+        border: 1px solid black;
+        padding: 5px;
+        border-radius: 6px;
+        width: 170px;
+        background-color: #ececec;
+
+        .propertiesView-sharingTable-item {
+
+            display: flex;
+            padding: 3px;
+
+            border-bottom: 0.5px solid grey;
+
+            .propertiesView-sharingTable-item-name {
+                font-weight: bold;
+                width: 80px;
+                overflow-x: hidden;
+                display: inline-block;
+            }
+
+            .propertiesView-sharingTable-item-permission {
+
+                .permissions-select {
+                    z-index: 1;
+                    //border: 0.5px solid grey;
+                    //border-radius: 4px;
+                    //outline: none;
+                    border: none;
+                    background-color: inherit;
+                    width: 75px;
+                }
+            }
+
+            &:last-child {
+                border-bottom: none;
+            }
+        }
+    }
+
     .propertiesView-fields {
         border-bottom: 1px solid black;
         padding: 8.5px;
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index 1954a11bf..9af4bd276 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -15,6 +15,8 @@ import { Id } from "../../../../fields/FieldSymbols";
 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";
 
 
 interface PropertiesViewProps {
@@ -154,6 +156,74 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         }
     }
 
+    @computed get permissionsSelect() {
+        return <select className="permissions-select" onChange={emptyFunction}>
+            <option key={"Can Edit"} value={"Can Edit"}>
+                Can Edit
+                        </option>
+            <option key={"Can Add"} value={"Can Add"}>
+                Can Add
+                        </option>
+            <option key={"Can View"} value={"Can View"}>
+                Can View
+                        </option>
+            <option key={"Not Shared"} value={"Not Shared"}>
+                Not Shared
+                        </option>
+        </select>;
+    }
+
+    @computed get notifyIcon() {
+        return <Tooltip title={<><div className="dash-tooltip">{"Notify user or group of permissions change"}</div></>}>
+            <div className="notify-button">
+                <FontAwesomeIcon className="notify-button-icon" icon="bell" color="white" 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}
+            </div>
+        </div>;
+    }
+
+    @computed get sharingTable() {
+        return <div className="propertiesView-sharingTable">
+            {this.sharingItem("Me", false, false, "Owner")}
+            {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>;
+    }
+
     render() {
 
         if (!this.selectedDoc) {
@@ -176,6 +246,12 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     <PropertiesButtons />
                 </div>
             </div>
+            <div className="propertiesView-sharing">
+                <div className="propertiesView-sharing-title"> Sharing {"&"} Permissions</div>
+                <div className="propertiesView-sharing-content">
+                    {this.sharingTable}
+                </div>
+            </div>
             <div className="propertiesView-fields">
                 <div className="propertiesView-fields-title"> Fields</div>
                 <div className="propertiesView-fields-content"> {this.expandedField} </div>
-- 
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/MainView.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 ee3d12fbf6306da958ae6546260921f5fee5553b Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Fri, 24 Jul 2020 16:32:45 -0500
Subject: changing menu layout

---
 src/client/views/MainView.scss                     | 121 ++++++++++---------
 src/client/views/MainView.tsx                      | 132 +++++++++------------
 .../collectionFreeForm/PropertiesView.scss         |   8 +-
 3 files changed, 123 insertions(+), 138 deletions(-)

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

diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index 10e7f471b..51548bf58 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -156,45 +156,39 @@
 .mainView-menuPanel {
 
     max-width: 95px;
-    background-color: #323232;
-    padding: 20px;
-    padding-right: 50px;
-
+    background-color: black;
+    padding: 15px;
+    /* padding-right: 50px; */
     overflow-y: scroll;
-    overflow-x: clip;
+    overflow-x: hidden;
 
     .mainView-menuPanel-button {
-        width: 45px;
-        height: 45px;
-        padding: 10px;
-        pointer-events: all;
+        width: 60px;
+        padding: 7.5px;
         touch-action: none;
-        border-radius: inherit;
         background: black;
-        border-radius: 100%;
         transform-origin: top left;
-        margin-bottom: 23px;
+        margin-bottom: 5px;
         margin-top: 5px;
-
         margin-right: 25px;
+        border-radius: 8px;
 
         .mainView-menuPanel-button-label {
-            background: rgb(168, 168, 168);
-            color: black;
-            margin-left: -13px;
+            color: white;
+            margin-left: -6px;
             border-radius: 8px;
-            width: 65px;
+            width: 55px;
             position: relative;
             text-align: center;
             font-size: 9.5px;
-            margin-top: 4px;
+            margin-top: 1px;
             letter-spacing: normal;
             padding: 3px;
-            //margin-bottom: 23px;
+            background-color: inherit;
         }
 
         .mainView-menuPanel-button-icon {
-            width: 35px;
+            width: auto;
             height: 35px;
             padding: 5px;
         }
@@ -203,50 +197,55 @@
             width: 95% !important;
             height: 95%;
         }
-    }
-
-    .mainView-menuPanel-bottomButton {
-        width: 50px;
-        height: 50px;
-        padding: 10px;
-        pointer-events: all;
-        touch-action: none;
-        border-radius: inherit;
-        background: #323232;
-        background-color: #323232;
-        border-radius: 100%;
-        transform-origin: top left;
-        margin-bottom: 20px;
-        margin-top: 5px;
-
-        margin-right: 25px;
-
-        .mainView-menuPanel-bottomButton-label {
-            background: #323232;
-            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%;
+        &:hover {
+            background: rgb(61, 61, 61);
+            cursor: pointer;
         }
     }
+
+    // .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 {
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 4a80f57b3..c08717947 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -71,6 +71,7 @@ import { PropertiesView } from './collections/collectionFreeForm/PropertiesView'
 import { SelectionManager } from '../util/SelectionManager';
 import { PrefetchProxy } from '../../fields/Proxy';
 import { DragManager } from '../util/DragManager';
+import { discovery_v1, dialogflow_v2beta1 } from 'googleapis';
 
 @observer
 export class MainView extends React.Component {
@@ -84,7 +85,7 @@ export class MainView extends React.Component {
     @observable private _panelWidth: number = 0;
     @observable private _panelHeight: number = 0;
     @observable private _flyoutTranslate: boolean = false;
-    @observable public flyoutWidth: number = 275;
+    @observable public flyoutWidth: number = 0;
     private get darkScheme() { return BoolCast(Cast(this.userDoc?.activeWorkspace, Doc, null)?.darkScheme); }
 
     @computed private get userDoc() { return Doc.UserDoc(); }
@@ -377,8 +378,11 @@ export class MainView extends React.Component {
     }
 
     _canClick = false;
+
+    @action
     onPointerDown = (e: React.PointerEvent) => {
         if (this._flyoutTranslate) {
+            this.panelContent = "none";
             this._canClick = true;
             this._flyoutSizeOnDown = e.clientX;
             document.removeEventListener("pointermove", this.onPointerMove);
@@ -494,76 +498,59 @@ export class MainView extends React.Component {
 
     @computed get menuPanel() {
         return <div className="mainView-menuPanel">
-            <button className="mainView-menuPanel-button"
-                onPointerDown={e => this.selectPanel("workspace")}
-                style={{
-                    padding: "5px",
-                    background: "black",
-                    boxShadow: "4px 4px 12px black"
-                }}>
-                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="desktop" color="white" size="lg" />
-                <div className="mainView-menuPanel-button-label"> Workspace </div>
-            </button>
+            <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>
 
-            <button className="mainView-menuPanel-button"
-                onPointerDown={e => this.selectPanel("catalog")}
-                style={{
-                    padding: "5px",
-                    background: "black",
-                    boxShadow: "4px 4px 12px black"
-                }}>
-                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="file" color="white" size="lg" />
-                <div className="mainView-menuPanel-button-label"> Catalog </div>
-            </button>
+            <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>
 
-            <button className="mainView-menuPanel-button"
-                onPointerDown={e => this.selectPanel("deleted")}
-                style={{
-                    padding: "5px",
-                    background: "black",
-                    boxShadow: "4px 4px 12px black",
-                    marginBottom: "30px"
-                }}>
-                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="trash-alt" color="white" size="lg" />
-                <div className="mainView-menuPanel-button-label"> Recently Closed </div>
-            </button>
+            <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"
+                    color={this.panelContent === "deleted" ? "black" : "white"} size="lg" />
+                <div className="mainView-menuPanel-button-label"
+                    style={{ color: this.panelContent === "deleted" ? "black" : "white" }}> Recently Closed </div>
+            </div>
 
-            <button className="mainView-menuPanel-button"
-                onPointerDown={e => this.selectPanel("upload")}
-                style={{
-                    padding: "5px",
-                    background: "black",
-                    boxShadow: "4px 4px 12px black",
-                }}>
+            <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>
-            </button>
+            </div>
 
-            <button className="mainView-menuPanel-button"
+            <div className="mainView-menuPanel-button"
                 //onPointerDown={e => this.selectPanel("sharing")}
-                onClick={() => GroupManager.Instance.open()}
-                style={{
-                    padding: "5px",
-                    background: "black",
-                    boxShadow: "4px 4px 12px black"
-                }}>
+                onClick={() => GroupManager.Instance.open()}>
                 <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="users" color="white" size="lg" />
                 <div className="mainView-menuPanel-button-label"> Sharing </div>
-            </button>
+            </div>
 
-            <button className="mainView-menuPanel-button"
+            <div className="mainView-menuPanel-button"
                 onPointerDown={e => this.selectPanel("tools")}
                 style={{
-                    padding: "5px",
-                    background: "black",
-                    boxShadow: "4px 4px 12px black",
-                    //marginBottom: "45px"
+                    backgroundColor: this.panelContent === "tools" ? "lightgrey" : "",
+                    marginBottom: "70px"
                 }}>
-                <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="wrench" color="white" size="lg" />
-                <div className="mainView-menuPanel-button-label"> Tools </div>
-            </button>
+                <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>
 
-            <button className="mainView-menuPanel-button"
+            {/* <button className="mainView-menuPanel-button"
                 onPointerDown={e => this.selectPanel("search")}
                 style={{
                     padding: "5px",
@@ -573,28 +560,21 @@ export class MainView extends React.Component {
                 }}>
                 <FontAwesomeIcon className="mainView-menuPanel-button-icon" icon="search" color="white" size="lg" />
                 <div className="mainView-menuPanel-button-label"> Search </div>
-            </button>
+            </button> */}
 
-            <button className="mainView-menuPanel-bottomButton"
-                onPointerDown={e => this.selectPanel("help")}
-                style={{
-                    padding: "5px",
-                    background: "323232",
-                }}>
-                <FontAwesomeIcon className="mainView-menuPanel-bottomButton-icon" icon="question-circle" color="white" size="lg" />
-                <div className="mainView-menuPanel-bottomButton-label"> Help </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>
 
-            <button className="mainView-menuPanel-bottomButton"
+            <div className="mainView-menuPanel-button"
                 // onPointerDown={e => this.selectPanel("settings")}
-                onClick={() => SettingsManager.Instance.open()}
-                style={{
-                    padding: "5px",
-                    background: "323232",
-                }}>
-                <FontAwesomeIcon className="mainView-menuPanel-bottomButton-icon" icon="cog" color="white" size="lg" />
-                <div className="mainView-menuPanel-bottomButton-label"> Settings </div>
-            </button>
+                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>;
     }
 
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index e6bc3f15a..b40a08086 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -5,7 +5,7 @@
     font-family: "Noto Sans";
     cursor: auto;
 
-    //overflow-y: scroll;
+    overflow-y: scroll;
 
     .propertiesView-title {
         background-color: rgb(159, 159, 159);
@@ -76,6 +76,7 @@
 
         &:hover {
             background-color: rgb(158, 158, 158);
+            cursor: pointer;
         }
     }
 
@@ -87,6 +88,7 @@
 
         &:hover {
             color: rgb(131, 131, 131);
+            cursor: pointer;
         }
     }
 
@@ -124,6 +126,10 @@
                     border: none;
                     background-color: inherit;
                     width: 75px;
+
+                    &:hover {
+                        cursor: pointer;
+                    }
                 }
             }
 
-- 
cgit v1.2.3-70-g09d2


From 229e8ba914943da0d11dff00d14a8adae950d853 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Sat, 25 Jul 2020 10:27:27 -0500
Subject: exit button for properties

---
 src/client/views/MainView.tsx                      |  1 +
 .../collectionFreeForm/PropertiesView.scss         | 23 ++++++++++++++++++++--
 .../collectionFreeForm/PropertiesView.tsx          |  6 +++++-
 src/client/views/nodes/DocumentLinksButton.tsx     |  5 ++++-
 4 files changed, 31 insertions(+), 4 deletions(-)

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

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index c08717947..734b45dd0 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -621,6 +621,7 @@ export class MainView extends React.Component {
                 height={this._panelHeight}
                 renderDepth={1}
                 ScreenToLocalTransform={Transform.Identity}
+                onDown={this.onDown}
             />
         </div>;
     }
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index b40a08086..7b8f116b7 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -10,10 +10,29 @@
     .propertiesView-title {
         background-color: rgb(159, 159, 159);
         text-align: center;
-        font-size: 18px;
-        font-weight: bold;
         padding-top: 12px;
         padding-bottom: 12px;
+        display: flex;
+
+        .propertiesView-title-name {
+            font-size: 18px;
+            font-weight: bold;
+            padding-left: 45px;
+        }
+
+        .propertiesView-title-icon {
+            width: 20px;
+            height: 20px;
+            padding-left: 32px;
+            margin-top: -5px;
+
+            &:hover {
+                color: grey;
+                cursor: pointer;
+            }
+
+        }
+
     }
 
     .propertiesView-name {
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index e911c7a9f..a75ad13e5 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -25,6 +25,7 @@ interface PropertiesViewProps {
     height: number;
     renderDepth: number;
     ScreenToLocalTransform: () => Transform;
+    onDown: (event: any) => void;
 }
 
 @observer
@@ -225,7 +226,10 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
 
         return <div className="propertiesView" >
             <div className="propertiesView-title">
-                Properties
+                <div className="propertiesView-title-name">Properties </div>
+                <div className="propertiesView-title-icon" onPointerDown={this.props.onDown}>
+                    <FontAwesomeIcon icon="times" color="black" size="sm" />
+                </div>
             </div>
             <div className="propertiesView-name">
                 {this.selectedDoc.title}
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index b17accfd6..fa7fe64f3 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -194,8 +194,11 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
             // }))} 
             >
 
+                {/* {this.props.InMenu ? this.props.StartLink ? <FontAwesomeIcon className="documentdecorations-icon" icon="link" size="sm" /> :
+                    <FontAwesomeIcon className="documentdecorations-icon" icon="hand-paper" size="sm" /> : links.length} */}
+
                 {this.props.InMenu ? this.props.StartLink ? <FontAwesomeIcon className="documentdecorations-icon" icon="link" size="sm" /> :
-                    <FontAwesomeIcon className="documentdecorations-icon" icon="hand-paper" size="sm" /> : links.length}
+                    link : links.length}
 
             </div>
             {DocumentLinksButton.StartLink && this.props.InMenu && !!!this.props.StartLink && DocumentLinksButton.StartLink !== this.props.View ? <div className={"documentLinksButton-endLink"}
-- 
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/MainView.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/MainView.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/MainView.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 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/MainView.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/MainView.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 31685e36d1f7e6a95fd5d65c55562f51bfe723e1 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Thu, 30 Jul 2020 01:31:32 -0400
Subject: fixed leftsidebar menu buttons

---
 src/client/util/CurrentUserUtils.ts                |  49 ++++------
 src/client/views/MainView.tsx                      | 103 +++++++--------------
 .../views/collections/CollectionStackingView.tsx   |   1 +
 .../CollectionStackingViewFieldColumn.tsx          |   2 +-
 .../views/nodes/ContentFittingDocumentView.tsx     |   3 +
 src/client/views/nodes/DocumentView.tsx            |   1 +
 src/client/views/nodes/FieldView.tsx               |   1 +
 src/client/views/nodes/MenuIconBox.tsx             |  22 ++---
 8 files changed, 69 insertions(+), 113 deletions(-)

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

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 442be98d2..34e732500 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -48,8 +48,6 @@ 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) {
@@ -508,46 +506,39 @@ export class CurrentUserUtils {
         title: string, icon: string, click: string,
     }[] {
         return [
-            { title: "Workspace", icon: "desktop", click: 'scriptContext.selectMenu("workspace")' },
-            { title: "Catalog", icon: "file", click: 'scriptContext.selectMenu("catalog")' },
+            { 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: "Import", icon: "upload", click: 'scriptContext.selectMenu("Import")' },
             { title: "Sharing", icon: "users", click: 'GroupManager.Instance.open()' },
-            { title: "Tools", icon: "wrench", click: 'scriptContext.selectMenu("tools")' },
-            { title: "Help", icon: "question-circle", click: 'scriptContext.selectMenu("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()' },
         ];
     }
 
-    static setupMenuButtons(doc: Doc) {
-        if (doc.menuStackBtns === undefined) {
+    static setupMenuPanel(doc: Doc) {
+        if (doc.menuStack === undefined) {
             const buttons = CurrentUserUtils.menuBtnDescriptions();
             const menuBtns = buttons.map(({ title, icon, click }) => Docs.Create.MenuIconDocument({
                 icon,
                 title,
+                _backgroundColor: "black",
                 stayInCollection: true,
                 _width: 60,
-                _height: 70,
-                onClick: ScriptField.MakeScript(click),
+                _height: 60,
+                onClick: ScriptField.MakeScript(click, { scriptContext: "any" }),
             }));
 
-            doc.menuStackBtns = new PrefetchProxy(Docs.Create.MasonryDocument(menuBtns, {
-                _xMargin: 0, _autoHeight: false, _width: 60, _columnWidth: 60, lockedPosition: true, _chromeStatus: "disabled",
+            doc.menuStack = new PrefetchProxy(Docs.Create.StackingDocument(menuBtns, {
+                title: "menuItemPanel",
+                _backgroundColor: "black",
+                _gridGap: 0,
+                _yMargin: 0,
+                _yPadding: 0, _xMargin: 0, _autoHeight: false, _width: 60, _columnWidth: 60, lockedPosition: true, _chromeStatus: "disabled",
             }));
         }
-        return doc.menuStackBtns as Doc;
-    }
-
-    static setupMenuPanel(doc: Doc) {
-        doc.menuStack = undefined;
-        if (doc.menuStack === undefined) {
-            const menuBtns = CurrentUserUtils.setupMenuButtons(doc);
-            doc.menuStack = new PrefetchProxy(Docs.Create.StackingDocument([menuBtns], {
-                _yMargin: 0, _autoHeight: true, _xMargin: 0,
-                _width: 60, lockedPosition: true, _chromeStatus: "disabled",
-            })) as any as Doc;
-        }
-        return doc.menuStack;
+        return doc.menuStack as Doc;
     }
 
 
@@ -696,9 +687,9 @@ export class CurrentUserUtils {
                 onClick: ScriptField.MakeScript("this.targetContainer.proto = this.sourcePanel"),
             }));
         }
-        (doc["tabs-button-tools"] as Doc).sourcePanel; // prefetch sourcePanel
+        (doc["tabs-button-tools"] as any as Doc).sourcePanel; // prefetch sourcePanel
 
-        return doc["tabs-button-tools"] as Doc;
+        return doc["tabs-button-tools"] as any as Doc;
     }
 
     static setupWorkspaces(doc: Doc) {
@@ -808,7 +799,7 @@ export class CurrentUserUtils {
             }));
             CurrentUserUtils.searchStack = new PrefetchProxy(Docs.Create.QueryDocument({ title: "search stack", })) as any as Doc;
         }
-        return doc["tabs-button-search"] as Doc;
+        return doc["tabs-button-search"] as any as Doc;
     }
 
     static setupSidebarContainer(doc: Doc) {
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 5f7f7ca03..27d1da389 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -1,7 +1,6 @@
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faHireAHelper } from '@fortawesome/free-brands-svg-icons';
 import * as fa from '@fortawesome/free-solid-svg-icons';
-import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, configure, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
@@ -12,57 +11,54 @@ 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, NumCast } from '../../fields/Types';
+import { ScriptField } from '../../fields/ScriptField';
+import { BoolCast, Cast, FieldValue, StrCast } from '../../fields/Types';
 import { TraceMobx } from '../../fields/util';
-import { CurrentUserUtils } from '../util/CurrentUserUtils';
-import { emptyFunction, emptyPath, returnFalse, returnOne, returnZero, returnTrue, Utils, returnEmptyFilter, setupMoveUpEvents } from '../../Utils';
+import { emptyFunction, emptyPath, returnEmptyFilter, returnFalse, returnOne, returnTrue, returnZero, setupMoveUpEvents, Utils } from '../../Utils';
 import GoogleAuthenticationManager from '../apis/GoogleAuthenticationManager';
+import HypothesisAuthenticationManager from '../apis/HypothesisAuthenticationManager';
 import { DocServer } from '../DocServer';
 import { Docs, DocumentOptions } from '../documents/Documents';
 import { DocumentType } from '../documents/DocumentTypes';
+import { CurrentUserUtils } from '../util/CurrentUserUtils';
+import { DocumentManager } from '../util/DocumentManager';
+import GroupManager from '../util/GroupManager';
 import { HistoryUtil } from '../util/History';
-import RichTextMenu from './nodes/formattedText/RichTextMenu';
 import { Scripting } from '../util/Scripting';
+import { SelectionManager } from '../util/SelectionManager';
 import SettingsManager from '../util/SettingsManager';
-import GroupManager from '../util/GroupManager';
 import SharingManager from '../util/SharingManager';
+import { SnappingManager } from '../util/SnappingManager';
 import { Transform } from '../util/Transform';
+import { TimelineMenu } from './animationtimeline/TimelineMenu';
 import { CollectionDockingView } from './collections/CollectionDockingView';
+import FormatShapePane from "./collections/collectionFreeForm/FormatShapePane";
 import MarqueeOptionsMenu from './collections/collectionFreeForm/MarqueeOptionsMenu';
+import { PropertiesView } from './collections/collectionFreeForm/PropertiesView';
 import { CollectionLinearView } from './collections/CollectionLinearView';
+import CollectionMenu from './collections/CollectionMenu';
 import { CollectionView, CollectionViewType } from './collections/CollectionView';
 import { ContextMenu } from './ContextMenu';
 import { DictationOverlay } from './DictationOverlay';
 import { DocumentDecorations } from './DocumentDecorations';
 import GestureOverlay from './GestureOverlay';
+import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss';
 import KeyManager from './GlobalKeyHandler';
+import { LinkMenu } from './linking/LinkMenu';
 import "./MainView.scss";
 import { MainViewNotifs } from './MainViewNotifs';
 import { AudioBox } from './nodes/AudioBox';
+import { DocumentLinksButton } from './nodes/DocumentLinksButton';
 import { DocumentView } from './nodes/DocumentView';
+import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox';
+import RichTextMenu from './nodes/formattedText/RichTextMenu';
+import { LinkDescriptionPopup } from './nodes/LinkDescriptionPopup';
+import { LinkDocPreview } from './nodes/LinkDocPreview';
 import { RadialMenu } from './nodes/RadialMenu';
+import { TaskCompletionBox } from './nodes/TaskCompletedBox';
 import { OverlayView } from './OverlayView';
 import PDFMenu from './pdf/PDFMenu';
 import { PreviewCursor } from './PreviewCursor';
-import { ScriptField, ComputedField } from '../../fields/ScriptField';
-import { TimelineMenu } from './animationtimeline/TimelineMenu';
-import { SnappingManager } from '../util/SnappingManager';
-import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox';
-import { DocumentManager } from '../util/DocumentManager';
-import { DocumentLinksButton } from './nodes/DocumentLinksButton';
-import { LinkMenu } from './linking/LinkMenu';
-import { LinkDocPreview } from './nodes/LinkDocPreview';
-import { TaskCompletionBox } from './nodes/TaskCompletedBox';
-import { LinkDescriptionPopup } from './nodes/LinkDescriptionPopup';
-import FormatShapePane from "./collections/collectionFreeForm/FormatShapePane";
-import HypothesisAuthenticationManager from '../apis/HypothesisAuthenticationManager';
-import CollectionMenu from './collections/CollectionMenu';
-import { Tooltip, AccordionActions } from '@material-ui/core';
-import { PropertiesView } from './collections/collectionFreeForm/PropertiesView';
-import { SelectionManager } from '../util/SelectionManager';
-import { PrefetchProxy } from '../../fields/Proxy';
-import { DragManager } from '../util/DragManager';
-import { discovery_v1, dialogflow_v2beta1 } from 'googleapis';
 
 @observer
 export class MainView extends React.Component {
@@ -311,9 +307,11 @@ export class MainView extends React.Component {
     getPHeight = () => this._panelHeight;
     getContentsHeight = () => this._panelHeight - this._buttonBarHeight;
 
-    defaultBackgroundColors = (doc: Doc) => {
+    defaultBackgroundColors = (doc: Opt<Doc>) => {
+        if (this.panelContent === doc?.title) return "lightgrey";
         if (this.darkScheme) {
             switch (doc?.type) {
+                case DocumentType.MENUICON: return "white";
                 case DocumentType.RTF || DocumentType.LABEL || DocumentType.BUTTON: return "#2d2d2d";
                 case DocumentType.LINK:
                 case DocumentType.COL: {
@@ -323,6 +321,7 @@ export class MainView extends React.Component {
             }
         } else {
             switch (doc?.type) {
+                case DocumentType.MENUICON: return "black";
                 case DocumentType.RTF: return "#f1efeb";
                 case DocumentType.BUTTON:
                 case DocumentType.LABEL: return "lightgray";
@@ -381,7 +380,6 @@ 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);
@@ -427,9 +425,7 @@ export class MainView extends React.Component {
     mainContainerXf = () => this.sidebarScreenToLocal().translate(0, -this._buttonBarHeight);
 
     @computed get flyout() {
-        if (!(this.sidebarContent instanceof Doc)) {
-            return (null);
-        }
+        if (!this.sidebarContent) return null;
         return <div className="mainView-libraryFlyout">
             <div className="mainView-contentArea" style={{ position: "relative", height: `100%`, width: "100%", overflow: "visible" }}>
                 <DocumentView
@@ -583,49 +579,20 @@ export class MainView extends React.Component {
     // }
 
     @action
-    selectPanel = (str: string) => {
+    selectMenu = (str: string) => {
         if (this.panelContent === str && this.flyoutWidth !== 0) {
             this.panelContent = "none";
             this.flyoutWidth = 0;
         } else {
             this.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;
+            switch (this.panelContent) {
+                case "Tools": this.sidebarContent.proto = CurrentUserUtils.toolsStack; break;
+                case "Workspace": this.sidebarContent.proto = CurrentUserUtils.workspaceStack; break;
+                case "Catalog": this.sidebarContent.proto = CurrentUserUtils.catalogStack; break;
+                case "deleted": this.sidebarContent.proto = CurrentUserUtils.closedStack; break;
+                case "Search": this.sidebarContent.proto = CurrentUserUtils.searchStack; break;
             }
-        }
-        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;
     }
@@ -660,7 +627,7 @@ export class MainView extends React.Component {
         const height = `calc(100% - ${n * Number(ANTIMODEMENU_HEIGHT.replace("px", ""))}px)`;
 
         const rightFlyout = this.selectedDocumentView ? this._propertiesWidth - 1 : this.propertiesWidth() > 10 ? 151.5 : 0;
-        return !this.userDoc || !(this.sidebarContent instanceof Doc) ? (null) : (
+        return !this.userDoc ? (null) : (
             <div className="mainView-mainContent" style={{
                 color: this.darkScheme ? "rgb(205,205,205)" : "black",
                 //change to times 2 for both pinned
@@ -672,7 +639,7 @@ export class MainView extends React.Component {
                     <div className="mainView-flyoutContainer" onPointerLeave={this.pointerLeaveDragger} style={{ width: this.flyoutWidth }}>
                         {this.flyoutWidth !== 0 ? <div className="mainView-libraryHandle"
                             onPointerDown={this.onPointerDown}
-                            style={{ backgroundColor: this.defaultBackgroundColors(this.sidebarContent) }}>
+                            style={{ backgroundColor: this.defaultBackgroundColors(undefined) }}>
                             <span title="library View Dragger" style={{
                                 width: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "3vw",
                                 //height: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "100vh",
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index dd4c34885..fe8f1f322 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -227,6 +227,7 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument)
             addDocTab={this.addDocTab}
             bringToFront={returnFalse}
             ContentScaling={returnOne}
+            scriptContext={this.props.scriptContext}
             pinToPres={this.props.pinToPres}
         />;
     }
diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
index 76af70cd1..59a87b450 100644
--- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
@@ -355,7 +355,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
             {this.props.parent.Document._columnsHideIfEmpty ? (null) : headingView}
             {
                 this.collapsed ? (null) :
-                    <div style={{ marginTop: 5 }}>
+                    <div>
                         <div key={`${heading}-stack`} className={`collectionStackingView-masonry${singleColumn ? "Single" : "Grid"}`}
                             style={{
                                 padding: singleColumn ? `${columnYMargin}px ${0}px ${style.yMargin}px ${0}px` : `${columnYMargin}px ${0}px`,
diff --git a/src/client/views/nodes/ContentFittingDocumentView.tsx b/src/client/views/nodes/ContentFittingDocumentView.tsx
index 6081def5d..f7e253f42 100644
--- a/src/client/views/nodes/ContentFittingDocumentView.tsx
+++ b/src/client/views/nodes/ContentFittingDocumentView.tsx
@@ -78,6 +78,9 @@ export class ContentFittingDocumentView extends React.Component<DocumentViewProp
 
     render() {
         TraceMobx();
+        if (this.props.Document.title === "Archive") {
+            console.log("");
+        }
         return (<div className="contentFittingDocumentView" style={{
             width: Math.abs(this.centeringYOffset) > 0.001 ? "auto" : this.props.PanelWidth(),
             height: Math.abs(this.centeringOffset) > 0.0001 ? "auto" : this.props.PanelHeight(),
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 856eb7246..a221dcfdb 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -843,6 +843,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 ChromeHeight={this.chromeHeight}
                 isSelected={this.isSelected}
                 select={this.select}
+                scriptContext={this.props.scriptContext}
                 onClick={this.onClickFunc}
                 layoutKey={this.finalLayoutKey} />
             {this.layoutDoc.hideAllLinks ? (null) : this.allAnchors}
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 48e1f6ce3..23ae48108 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -60,6 +60,7 @@ export interface FieldViewProps {
     color?: string;
     xMargin?: number;
     yMargin?: number;
+    scriptContext?: any;
 }
 
 @observer
diff --git a/src/client/views/nodes/MenuIconBox.tsx b/src/client/views/nodes/MenuIconBox.tsx
index e1656fcba..0aa7b327e 100644
--- a/src/client/views/nodes/MenuIconBox.tsx
+++ b/src/client/views/nodes/MenuIconBox.tsx
@@ -2,15 +2,10 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { createSchema, makeInterface } from '../../../fields/Schema';
+import { StrCast } from '../../../fields/Types';
 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';
+import './MenuIconBox.scss';
 const MenuIconSchema = createSchema({
     icon: "string"
 });
@@ -24,15 +19,12 @@ export class MenuIconBox extends DocComponent<FieldViewProps, MenuIconDocument>(
 
     render() {
 
-        const menuBTN = <div className="menuButton" style={{ backgroundColor: CurrentUserUtils.panelContent === this.dataDoc.title ? "lightgrey" : "" }}>
+        const color = this.props.backgroundColor?.(this.props.Document) === "lightgrey" ? "black" : "white";
+        const menuBTN = <div className="menuButton" style={{ backgroundColor: this.props.backgroundColor?.(this.props.Document) }}>
             <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>
+                style={{ backgroundColor: this.props.backgroundColor?.(this.props.Document) }} >
+                <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>;
 
-- 
cgit v1.2.3-70-g09d2


From 1ea51992bd418c319a253ed41c50497a6b13de25 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Thu, 30 Jul 2020 15:31:34 -0500
Subject: fixing layouts UI

---
 src/client/util/CurrentUserUtils.ts                |   6 +-
 src/client/views/MainView.scss                     |  49 +-----
 src/client/views/MainView.tsx                      | 173 ++++++++-------------
 .../collectionFreeForm/PropertiesView.scss         |  27 ++--
 .../collectionFreeForm/PropertiesView.tsx          |  14 +-
 5 files changed, 89 insertions(+), 180 deletions(-)

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

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 725be882e..3d8bd6bd5 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -508,12 +508,12 @@ export class CurrentUserUtils {
         return [
             { 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: "Archive", icon: "archive", click: 'scriptContext.selectMenu("Archive")' },
             { title: "Import", icon: "upload", click: 'scriptContext.selectMenu("Import")' },
-            { title: "Sharing", icon: "users", click: 'scriptContext.groupManager.open()' },
+            { title: "Sharing", icon: "users", click: 'scriptContext.selectMenu("Sharing")' },
             { 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()' },
+            { title: "Settings", icon: "cog", click: 'scriptContext.selectMenu("Settings")' },
         ];
     }
 
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index fe01c27a3..054a409df 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -124,14 +124,13 @@
     }
 
     &:hover {
-        cursor: pointer;
+        cursor: grab;
     }
 }
 
 .mainiView-propertiesView {
     display: flex;
     flex-direction: column;
-    width: 200px;
     height: 100%;
     position: absolute;
     right: 0;
@@ -212,50 +211,6 @@
     }
 }
 
-// .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;
@@ -342,7 +297,7 @@
     position: absolute;
     z-index: 2;
     touch-action: none;
-    cursor: grab;
+    cursor: ew-resize;
 
     .mainView-libraryHandle-icon {
         width: 10px;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index ec0bff8a7..825a75afa 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -101,6 +101,7 @@ export class MainView extends React.Component {
             return "chevron-right";
         }
     }
+    @observable propertiesDownX: number | undefined;
 
     componentDidMount() {
         DocServer.setPlaygroundFields(["dataTransition", "_viewTransition", "_panX", "_panY", "_viewScale", "_viewType", "_chromeStatus"]); // can play with these fields on someone else's
@@ -233,7 +234,7 @@ export class MainView extends React.Component {
         const freeformOptions: DocumentOptions = {
             x: 0,
             y: 400,
-            _width: this._panelWidth * .7 - this._propertiesWidth,
+            _width: this._panelWidth * .7 - this.propertiesWidth(),
             _height: this._panelHeight,
             title: "Collection " + workspaceCount,
         };
@@ -299,12 +300,12 @@ export class MainView extends React.Component {
 
     @action
     onResize = (r: any) => {
-        this._panelWidth = r.offset.width - this._propertiesWidth;
+        this._panelWidth = r.offset.width - this.propertiesWidth();
         this._panelHeight = r.offset.height;
     }
 
     @action
-    getPWidth = () => this._panelWidth - this._propertiesWidth;
+    getPWidth = () => this._panelWidth - this.propertiesWidth();
 
     getPHeight = () => this._panelHeight;
     getContentsHeight = () => this._panelHeight - this._buttonBarHeight;
@@ -401,20 +402,67 @@ export class MainView extends React.Component {
         }
     }
 
+    @action
+    onDown = (e: React.PointerEvent) => {
+        this.propertiesDownX = e.screenX;
+        document.removeEventListener("pointermove", this.onPointerMove);
+        document.removeEventListener("pointerup", this.onPointerUp);
+        document.addEventListener("pointermove", this.onPointerMove);
+        document.addEventListener("pointerup", this.onPointerUp);
+        e.stopPropagation();
+        e.preventDefault();
+        // 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);
+    }
+
     @action
     onPointerMove = (e: PointerEvent) => {
-        this.flyoutWidth = Math.max(e.clientX, 0);
-        Math.abs(this.flyoutWidth - this._flyoutSizeOnDown) > 6 && (this._canClick = false);
-        this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30;
+        if (this.propertiesDownX) {
+            this._propertiesWidth = this._propertiesWidth + (this.propertiesDownX - e.screenX) * .5;
+            if (this._propertiesWidth < 150) {
+                this._propertiesWidth = 0;
+                this.propertiesDownX = undefined;
+            } else if (this._propertiesWidth > 400) {
+                this._propertiesWidth = 400;
+                this.propertiesDownX = undefined;
+            }
+            document.removeEventListener("pointermove", this.onPointerMove);
+            document.removeEventListener("pointerup", this.onPointerUp);
+        } else {
+            this.flyoutWidth = Math.max(e.clientX, 0);
+            Math.abs(this.flyoutWidth - this._flyoutSizeOnDown) > 6 && (this._canClick = false);
+            this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30;
+        }
     }
     @action
     onPointerUp = (e: PointerEvent) => {
-        if (Math.abs(e.clientX - this._flyoutSizeOnDown) < 4 && this._canClick) {
-            this.flyoutWidth = this.flyoutWidth < 15 ? 250 : 0;
-            this.flyoutWidth && (this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30);
+        if (this.propertiesDownX) {
+            if (Math.abs(this.propertiesDownX - e.screenX) < 3) {
+                if (this._propertiesWidth < 10) {
+                    this._propertiesWidth = 200;
+                } else {
+                    this._propertiesWidth = 0;
+                }
+            } else {
+                this._propertiesWidth = this._propertiesWidth + (this.propertiesDownX - e.screenX) * .5;
+                if (this._propertiesWidth < 150) {
+                    this._propertiesWidth = 0;
+                } else if (this._propertiesWidth > 400) {
+                    this._propertiesWidth = 400;
+                }
+            }
+            this.propertiesDownX = undefined;
+        } else {
+            if (Math.abs(e.clientX - this._flyoutSizeOnDown) < 4 && this._canClick) {
+                this.flyoutWidth = this.flyoutWidth < 15 ? 250 : 0;
+                this.flyoutWidth && (this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30);
+            }
         }
         document.removeEventListener("pointermove", this.onPointerMove);
         document.removeEventListener("pointerup", this.onPointerUp);
+
     }
     flyoutWidthFunc = () => this.flyoutWidth;
     addDocTabFunc = (doc: Doc, where: string, libraryPath?: Doc[]): boolean => {
@@ -501,91 +549,6 @@ export class MainView extends React.Component {
         </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 @undoBatch
     closeFlyout = () => {
@@ -606,8 +569,9 @@ export class MainView extends React.Component {
                 case "Tools": this.sidebarContent.proto = CurrentUserUtils.toolsStack; break;
                 case "Workspace": this.sidebarContent.proto = CurrentUserUtils.workspaceStack; break;
                 case "Catalog": this.sidebarContent.proto = CurrentUserUtils.catalogStack; break;
-                case "deleted": this.sidebarContent.proto = CurrentUserUtils.closedStack; break;
-                case "Search": this.sidebarContent.proto = CurrentUserUtils.searchStack; break;
+                case "Archive": this.sidebarContent.proto = CurrentUserUtils.closedStack; break;
+                case "Settings": this.sidebarContent.proto = SettingsManager.Instance.open(); break;
+                case "Sharing": this.sidebarContent.proto = GroupManager.Instance.open(); break;
             }
             MainView.expandFlyout();
         }
@@ -615,25 +579,21 @@ export class MainView extends React.Component {
     }
 
     @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);
-            return false;
-        }), returnFalse, action(() => this._propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._panelWidth - 50, 200) : 0), false);
+    closeProperties = () => {
+        this._propertiesWidth = 0;
     }
 
     @computed get propertiesView() {
         TraceMobx();
         return <div className="mainView-propertiesView" style={{
-            width: `200px`,
             overflow: this.propertiesWidth() < 15 ? "hidden" : undefined
         }}>
             <PropertiesView
-                width={200}
+                width={this.propertiesWidth()}
                 height={this._panelHeight}
                 renderDepth={1}
                 ScreenToLocalTransform={Transform.Identity}
-                onDown={this.onDown}
+                onDown={this.closeProperties}
             />
         </div>;
     }
@@ -643,7 +603,7 @@ export class MainView extends React.Component {
         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;
+        const rightFlyout = this.propertiesWidth() - 1;
         return !this.userDoc ? (null) : (
             <div className="mainView-mainContent" style={{
                 color: this.darkScheme ? "rgb(205,205,205)" : "black",
@@ -684,7 +644,8 @@ export class MainView extends React.Component {
                                 <FontAwesomeIcon icon={this.propertiesIcon} color="white" size="sm" /> </div>
                         </div>
                     }
-                    {this.propertiesWidth() < 10 ? (null) : this.propertiesView}
+                    {this.propertiesWidth() < 10 ? (null) :
+                        <div style={{ width: this.propertiesWidth() }}> {this.propertiesView} </div>}
                 </div>
             </div>);
     }
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index 83e0fc0d5..76c934551 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -57,7 +57,6 @@
             font-size: 12.5px;
             padding: 4px;
             display: flex;
-            width: 200px;
             color: white;
             padding-left: 8px;
             background-color: rgb(51, 51, 51);
@@ -92,7 +91,6 @@
             font-size: 12.5px;
             padding: 4px;
             display: flex;
-            width: 200px;
             color: white;
             padding-left: 8px;
             background-color: rgb(51, 51, 51);
@@ -126,7 +124,6 @@
             font-size: 12.5px;
             padding: 4px;
             display: flex;
-            width: 200px;
             color: white;
             padding-left: 8px;
             background-color: rgb(51, 51, 51);
@@ -160,7 +157,6 @@
             font-size: 12.5px;
             padding: 4px;
             display: flex;
-            width: 200px;
             color: white;
             padding-left: 8px;
             background-color: rgb(51, 51, 51);
@@ -275,7 +271,6 @@
             font-size: 12.5px;
             padding: 4px;
             display: flex;
-            width: 200px;
             color: white;
             padding-left: 8px;
             background-color: rgb(51, 51, 51);
@@ -299,18 +294,17 @@
                     cursor: pointer;
                 }
             }
+        }
 
-            .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-checkbox {
+            float: right;
+            height: 20px;
+            margin-top: -9px;
+
+            .propertiesView-fields-checkbox-text {
+                font-size: 7px;
+                margin-top: -10px;
+                margin-left: 6px;
             }
         }
 
@@ -352,7 +346,6 @@
             font-size: 12.5px;
             padding: 4px;
             display: flex;
-            width: 200px;
             color: white;
             padding-left: 8px;
             background-color: rgb(51, 51, 51);
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index c4291f2a4..976e52fda 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -361,16 +361,16 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     render() {
 
         if (!this.selectedDoc) {
-            return <div className="propertiesView" >
-                <div className="propertiesView-title">
+            return <div className="propertiesView" style={{ width: this.props.width }}>
+                <div className="propertiesView-title" style={{ width: this.props.width, paddingLeft: 6 }}>
                     No Document Selected
             </div> </div>;
         }
 
         const novice = Doc.UserDoc().noviceMode;
 
-        return <div className="propertiesView" >
-            <div className="propertiesView-title">
+        return <div className="propertiesView" style={{ width: this.props.width }} >
+            <div className="propertiesView-title" style={{ width: this.props.width }}>
                 <div className="propertiesView-title-name">Properties </div>
                 <div className="propertiesView-title-icon" onPointerDown={this.props.onDown}>
                     <FontAwesomeIcon icon="times" color="black" size="sm" />
@@ -381,7 +381,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             </div>
             <div className="propertiesView-settings">
                 <div className="propertiesView-settings-title" style={{ backgroundColor: this.openActions ? "black" : "" }}>
-                    Document Actions
+                    Actions
                     <div className="propertiesView-settings-title-icon"
                         onPointerDown={() => runInAction(() => { this.openActions = !this.openActions; })}>
                         <FontAwesomeIcon icon={this.openActions ? "caret-down" : "caret-right"} size="lg" color="white" />
@@ -447,9 +447,9 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                         </div>
                     </div>
                 </div>
-                {!novice && this.openFields ? <div className="propertiesView-fields-title-checkbox">
+                {!novice && this.openFields ? <div className="propertiesView-fields-checkbox">
                     {this.fieldsCheckbox}
-                    <div className="propertiesView-fields-title-checkbox-text">Layout</div>
+                    <div className="propertiesView-fields-checkbox-text">Layout</div>
                 </div> : null}
                 {this.openFields ?
                     <div className="propertiesView-fields-content">
-- 
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/MainView.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 57122492fc344d254c507422aace7932b785276c Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Thu, 30 Jul 2020 19:46:55 -0500
Subject: started merging with ink, transform buttons done

---
 src/client/documents/Documents.ts                  |   8 +-
 src/client/views/MainView.tsx                      |   2 +-
 .../collectionFreeForm/PropertiesView.scss         |  55 ++++++++++
 .../collectionFreeForm/PropertiesView.tsx          | 118 ++++++++++++++++++++-
 4 files changed, 175 insertions(+), 8 deletions(-)

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

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 32f46bd1c..88c25567e 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -304,10 +304,10 @@ export namespace Docs {
             [DocumentType.MENUICON, {
                 layout: { view: MenuIconBox, dataField: defaultDataKey },
             }],
-            [DocumentType.RECOMMENDATION, {
-                layout: { view: RecommendationsBox, dataField: defaultDataKey },
-                options: { _width: 200, _height: 200 },
-            }],
+            // [DocumentType.RECOMMENDATION, {
+            //     layout: { view: RecommendationsBox, dataField: defaultDataKey },
+            //     options: { _width: 200, _height: 200 },
+            // }],
             [DocumentType.WEBCAM, {
                 layout: { view: DashWebRTCVideo, dataField: defaultDataKey }
             }],
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 0e2362866..8e4851b6e 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, faBuffer, fa.faExpand);
+            fa.faLongArrowAltRight, fa.faPenFancy, fa.faAngleDoubleRight, faBuffer, fa.faExpand, fa.faUndo);
         this.initEventListeners();
         this.initAuthenticationRouters();
     }
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index 30598adfb..f44445066 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -378,4 +378,59 @@
         }
 
     }
+}
+
+.inking-button {
+
+    display: flex;
+
+    .inking-button-points {
+        background-color: #333333;
+        padding: 7px;
+        border-radius: 7px;
+        margin-right: 32px;
+        width: 32;
+        height: 32;
+        padding-top: 9px;
+        margin-left: 5px;
+
+        &:hover {
+            background: rgb(131, 131, 131);
+            transform: scale(1.05);
+            cursor: pointer;
+        }
+    }
+
+    .inking-button-lock {
+        background-color: #333333;
+        padding: 7px;
+        border-radius: 7px;
+        margin-right: 32px;
+        width: 32;
+        height: 32;
+        padding-top: 9px;
+        padding-left: 10px;
+
+        &:hover {
+            background: rgb(131, 131, 131);
+            transform: scale(1.05);
+            cursor: pointer;
+        }
+    }
+
+    .inking-button-rotate {
+        background-color: #333333;
+        padding: 7px;
+        border-radius: 7px;
+        width: 32;
+        height: 32;
+        padding-top: 9px;
+        padding-left: 10px;
+
+        &:hover {
+            background: rgb(131, 131, 131);
+            transform: scale(1.05);
+            cursor: pointer;
+        }
+    }
 }
\ 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 57f31ca3d..90a55ed2d 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -2,7 +2,7 @@ import React = require("react");
 import { observer } from "mobx-react";
 import "./PropertiesView.scss";
 import { observable, action, computed, runInAction } from "mobx";
-import { Doc, Field, DocListCast, WidthSym, HeightSym, AclSym, AclPrivate, AclReadonly, AclAddonly, AclEdit, AclAdmin } from "../../../../fields/Doc";
+import { Doc, Field, DocListCast, WidthSym, HeightSym, AclSym, AclPrivate, AclReadonly, AclAddonly, AclEdit, AclAdmin, Opt } from "../../../../fields/Doc";
 import { DocumentView } from "../../nodes/DocumentView";
 import { ComputedField } from "../../../../fields/ScriptField";
 import { EditableView } from "../../EditableView";
@@ -21,6 +21,11 @@ import SharingManager from "../../../util/SharingManager";
 import { DocumentType } from "../../../documents/DocumentTypes";
 import FormatShapePane from "./FormatShapePane";
 import { SharingPermissions, GetEffectiveAcl } from "../../../../fields/util";
+import { InkField } from "../../../../fields/InkField";
+import { undoBatch } from "../../../util/UndoManager";
+import { ColorState, SketchPicker } from "react-color";
+import AntimodeMenu from "../../AntimodeMenu";
+import "./FormatShapePane.scss";
 
 
 interface PropertiesViewProps {
@@ -349,6 +354,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             SetValue={this.setTitle} />;
     }
 
+    @action
     setTitle = (value: string) => {
         if (this.dataDoc) {
             this.selectedDoc && (this.selectedDoc.title = value);
@@ -358,6 +364,112 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         return false;
     }
 
+
+
+
+
+    @undoBatch
+    @action
+    rotate = (angle: number) => {
+        const _centerPoints: { X: number, Y: number }[] = [];
+        if (this.selectedDoc) {
+            const doc = this.selectedDoc;
+            if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) {
+                const ink = Cast(doc.data, InkField)?.inkData;
+                if (ink) {
+                    const xs = ink.map(p => p.X);
+                    const ys = ink.map(p => p.Y);
+                    const left = Math.min(...xs);
+                    const top = Math.min(...ys);
+                    const right = Math.max(...xs);
+                    const bottom = Math.max(...ys);
+                    _centerPoints.push({ X: left, Y: top });
+                }
+            }
+
+            var index = 0;
+            if (doc.type === DocumentType.INK && doc.x && doc.y && doc._width && doc._height && doc.data) {
+                doc.rotation = Number(doc.rotation) + Number(angle);
+                const ink = Cast(doc.data, InkField)?.inkData;
+                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;
+                        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);
+                    const left = Math.min(...xs);
+                    const top = Math.min(...ys);
+                    const right = Math.max(...xs);
+                    const bottom = Math.max(...ys);
+
+                    doc._height = (bottom - top);
+                    doc._width = (right - left);
+                }
+                index++;
+            }
+        }
+    }
+
+    @observable _controlBtn: boolean = false;
+    @observable _lock: boolean = false;
+
+    @computed
+    get controlPointsButton() {
+        return <div className="inking-button">
+            <Tooltip title={<><div className="dash-tooltip">{"Edit points"}</div></>}>
+                <div className="inking-button-points" onPointerDown={action(() => this._controlBtn = !this._controlBtn)} style={{ backgroundColor: this._controlBtn ? "black" : "" }}>
+                    <FontAwesomeIcon icon="bezier-curve" color="white" size="lg" />
+                </div>
+            </Tooltip>
+            <Tooltip title={<><div className="dash-tooltip">{this._lock ? "Unlock points" : "Lock points"}</div></>}>
+                <div className="inking-button-lock" onPointerDown={action(() => this._lock = !this._lock)} >
+                    <FontAwesomeIcon icon={this._lock ? "unlock" : "lock"} color="white" size="lg" />
+                </div>
+            </Tooltip>
+            <Tooltip title={<><div className="dash-tooltip">{"Rotate 90˚"}</div></>}>
+                <div className="inking-button-rotate" onPointerDown={action(() => this.rotate(Math.PI / 2))}>
+                    <FontAwesomeIcon icon="undo" color="white" size="lg" />
+                </div>
+            </Tooltip>
+        </div>;
+    }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    @computed get appearanceEditor() { return "appearance" };
+
+    @computed get transformEditor() { return this.controlPointsButton };
+
     render() {
 
         if (!this.selectedDoc) {
@@ -416,7 +528,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     </div>
                 </div>
                 {this.openAppearance ? <div className="propertiesView-appearance-content">
-                    <FormatShapePane />
+                    {this.appearanceEditor}
                 </div> : null}
             </div> : null}
 
@@ -429,7 +541,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                     </div>
                 </div>
                 {this.openTransform ? <div className="propertiesView-transform-content">
-                    transform
+                    {this.transformEditor}
                 </div> : null}
             </div> : null}
 
-- 
cgit v1.2.3-70-g09d2


From 49ff32114387b5875e5cfb804a741caf24424612 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 31 Jul 2020 17:55:39 -0400
Subject: fixed dragging properties

---
 src/client/views/MainView.tsx                      | 204 ++++++++-------------
 .../collectionFreeForm/PropertiesView.tsx          |   2 +-
 2 files changed, 76 insertions(+), 130 deletions(-)

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

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 8e4851b6e..6009f7dab 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -300,7 +300,7 @@ export class MainView extends React.Component {
 
     @action
     onResize = (r: any) => {
-        this._panelWidth = r.offset.width - this.propertiesWidth();
+        this._panelWidth = r.offset.width;// - this.propertiesWidth();
         this._panelHeight = r.offset.height;
     }
 
@@ -368,102 +368,37 @@ export class MainView extends React.Component {
         TraceMobx();
         const mainContainer = this.mainContainer;
         const width = this.flyoutWidth;
-        return <Measure offset onResize={this.onResize}>
-            {({ measureRef }) =>
-                <div ref={measureRef} className="mainContent-div" onDrop={this.onDrop} style={{ width: `calc(100% - ${width}px)` }}>
-                    {!mainContainer ? (null) : this.mainDocView}
-                </div>
-            }
-        </Measure>;
+        return <div className="mainContent-div" onDrop={this.onDrop} style={{ width: `calc(100% - ${width}px)` }}>
+            {!mainContainer ? (null) : this.mainDocView}
+        </div>;
     }
 
     _canClick = false;
 
     @action
-    onPointerDown = (e: React.PointerEvent) => {
-        if (this._flyoutTranslate) {
-            this.panelContent = "none";
-            this._canClick = true;
-            this._flyoutSizeOnDown = e.clientX;
-            document.removeEventListener("pointermove", this.onPointerMove);
-            document.removeEventListener("pointerup", this.onPointerUp);
-            document.addEventListener("pointermove", this.onPointerMove);
-            document.addEventListener("pointerup", this.onPointerUp);
-            e.stopPropagation();
-            e.preventDefault();
-        }
-    }
-
-    @action
-    pointerLeaveDragger = () => {
-        if (!this._flyoutTranslate) {
-            this.flyoutWidth = 0;
-            this._flyoutTranslate = true;
-        }
-    }
-
-    @action
-    onDown = (e: React.PointerEvent) => {
-        this.propertiesDownX = e.screenX;
-        document.removeEventListener("pointermove", this.onPointerMove);
-        document.removeEventListener("pointerup", this.onPointerUp);
-        document.addEventListener("pointermove", this.onPointerMove);
-        document.addEventListener("pointerup", this.onPointerUp);
-        e.stopPropagation();
-        e.preventDefault();
-        // 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);
+    onPropertiesPointerDown = (e: React.PointerEvent) => {
+        setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => {
+            this._propertiesWidth = this._panelWidth - e.clientX;
+            return false;
+        }), returnFalse, action(() => this._propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._panelWidth - 50, 200) : 0), false);
     }
 
     @action
-    onPointerMove = (e: PointerEvent) => {
-        if (this.propertiesDownX) {
-            this._propertiesWidth = this._propertiesWidth + (this.propertiesDownX - e.screenX);
-            if (this._propertiesWidth < 150) {
-                this._propertiesWidth = 0;
-                this.propertiesDownX = undefined;
-            } else if (this._propertiesWidth > 400) {
-                this._propertiesWidth = 400;
-                this.propertiesDownX = undefined;
-            }
-            document.removeEventListener("pointermove", this.onPointerMove);
-            document.removeEventListener("pointerup", this.onPointerUp);
-        } else {
-            this.flyoutWidth = Math.max(e.clientX, 0);
-            Math.abs(this.flyoutWidth - this._flyoutSizeOnDown) > 6 && (this._canClick = false);
-            this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30;
-        }
-    }
-    @action
-    onPointerUp = (e: PointerEvent) => {
-        if (this.propertiesDownX) {
-            if (Math.abs(this.propertiesDownX - e.screenX) < 3) {
-                if (this._propertiesWidth < 10) {
-                    this._propertiesWidth = 200;
-                } else {
-                    this._propertiesWidth = 0;
-                }
-            } else {
-                this._propertiesWidth = this._propertiesWidth + (this.propertiesDownX - e.screenX);
-                if (this._propertiesWidth < 150) {
-                    this._propertiesWidth = 0;
-                } else if (this._propertiesWidth > 400) {
-                    this._propertiesWidth = 400;
-                }
-            }
-            this.propertiesDownX = undefined;
-        } else {
-            if (Math.abs(e.clientX - this._flyoutSizeOnDown) < 4 && this._canClick) {
+    onFlyoutPointerDown = (e: React.PointerEvent) => {
+        this.panelContent = "none";
+        if (this._flyoutTranslate) {
+            setupMoveUpEvents(this, e, action((e: PointerEvent) => {
+                this.flyoutWidth = Math.max(e.clientX, 0);
+                Math.abs(this.flyoutWidth - this._flyoutSizeOnDown) > 6 && (this._canClick = false);
+                this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30;
+                return false;
+            }), emptyFunction, action(() => {
                 this.flyoutWidth = this.flyoutWidth < 15 ? 250 : 0;
                 this.flyoutWidth && (this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30);
-            }
+            }));
         }
-        document.removeEventListener("pointermove", this.onPointerMove);
-        document.removeEventListener("pointerup", this.onPointerUp);
-
     }
+
     flyoutWidthFunc = () => this.flyoutWidth;
     addDocTabFunc = (doc: Doc, where: string, libraryPath?: Doc[]): boolean => {
         return where === "close" ? CollectionDockingView.CloseRightSplit(doc) :
@@ -603,56 +538,67 @@ export class MainView extends React.Component {
         </div>;
     }
 
+    @computed get mainInnerContent() {
+        const rightFlyout = this.propertiesWidth() - 1;
+        return <>
+            {this.menuPanel}
+            <div style={{ display: "contents", flexDirection: "row", position: "relative" }}>
+                <div className="mainView-flyoutContainer" style={{ width: this.flyoutWidth }}>
+                    {this.flyoutWidth !== 0 ? <div className="mainView-libraryHandle"
+                        onPointerDown={this.onFlyoutPointerDown}
+                        style={{ backgroundColor: this.defaultBackgroundColors(undefined) }}>
+                        <span title="library View Dragger" style={{
+                            width: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "3vw",
+                            //height: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "100vh",
+                            position: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "absolute" : "fixed",
+                            top: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "" : "0"
+                        }} />
+                        <div className="mainview-libraryHandle-icon">
+                            <FontAwesomeIcon icon="chevron-left" color="black" size="sm" /> </div>
+                    </div> : null}
+                    <div className="mainView-libraryFlyout" style={{
+                        //transformOrigin: this._flyoutTranslate ? "" : "left center",
+                        transition: this._flyoutTranslate ? "" : "width .5s",
+                        //transform: `scale(${this._flyoutTranslate ? 1 : 0.8})`,
+                        boxShadow: this._flyoutTranslate ? "" : "rgb(156, 147, 150) 0.2vw 0.2vw 0.2vw"
+                    }}>
+                        {this.flyout}
+                        {this.expandButton}
+                    </div>
+                </div>
+                {this.dockingContent}
+                {this.showProperties ? (null) :
+                    <div className="mainView-propertiesDragger" title="Properties View Dragger" onPointerDown={this.onPropertiesPointerDown}
+                        style={{ right: rightFlyout, top: "45%" }}>
+                        <div className="mainView-propertiesDragger-icon">
+                            <FontAwesomeIcon icon={this.propertiesIcon} color="white" size="sm" /> </div>
+                    </div>
+                }
+                {this.propertiesWidth() < 10 ? (null) :
+                    <div style={{ width: this.propertiesWidth() }}> {this.propertiesView} </div>}
+            </div>
+        </>;
+    }
+
     @computed get mainContent() {
         //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.propertiesWidth() - 1;
+        const pinned = FormatShapePane.Instance?.Pinned;
+        const innerContent = this.mainInnerContent;
         return !this.userDoc ? (null) : (
-            <div className="mainView-mainContent" style={{
-                color: this.darkScheme ? "rgb(205,205,205)" : "black",
-                //change to times 2 for both pinned
-                height,
-                width: (FormatShapePane.Instance?.Pinned) ? `calc(100% - 200px)` : "100%"
-            }} >
-                {this.menuPanel}
-                <div style={{ display: "contents", flexDirection: "row", position: "relative" }}>
-                    <div className="mainView-flyoutContainer" onPointerLeave={this.pointerLeaveDragger} style={{ width: this.flyoutWidth }}>
-                        {this.flyoutWidth !== 0 ? <div className="mainView-libraryHandle"
-                            onPointerDown={this.onPointerDown}
-                            style={{ backgroundColor: this.defaultBackgroundColors(undefined) }}>
-                            <span title="library View Dragger" style={{
-                                width: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "3vw",
-                                //height: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "100%" : "100vh",
-                                position: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "absolute" : "fixed",
-                                top: (this.flyoutWidth !== 0 && this._flyoutTranslate) ? "" : "0"
-                            }} />
-                            <div className="mainview-libraryHandle-icon">
-                                <FontAwesomeIcon icon="chevron-left" color="black" size="sm" /> </div>
-                        </div> : null}
-                        <div className="mainView-libraryFlyout" style={{
-                            //transformOrigin: this._flyoutTranslate ? "" : "left center",
-                            transition: this._flyoutTranslate ? "" : "width .5s",
-                            //transform: `scale(${this._flyoutTranslate ? 1 : 0.8})`,
-                            boxShadow: this._flyoutTranslate ? "" : "rgb(156, 147, 150) 0.2vw 0.2vw 0.2vw"
-                        }}>
-                            {this.flyout}
-                            {this.expandButton}
-                        </div>
+            <Measure offset onResize={this.onResize}>
+                {({ measureRef }) =>
+                    <div className="mainView-mainContent" ref={measureRef} style={{
+                        color: this.darkScheme ? "rgb(205,205,205)" : "black",
+                        //change to times 2 for both pinned
+                        height,
+                        width: pinned ? `calc(100% - 200px)` : "100%"
+                    }} >
+                        {innerContent}
                     </div>
-                    {this.dockingContent}
-                    {this.showProperties ? (null) :
-                        <div className="mainView-propertiesDragger" title="Properties View Dragger" onPointerDown={this.onDown}
-                            style={{ right: rightFlyout, top: "45%" }}>
-                            <div className="mainView-propertiesDragger-icon">
-                                <FontAwesomeIcon icon={this.propertiesIcon} color="white" size="sm" /> </div>
-                        </div>
-                    }
-                    {this.propertiesWidth() < 10 ? (null) :
-                        <div style={{ width: this.propertiesWidth() }}> {this.propertiesView} </div>}
-                </div>
-            </div>);
+                }
+            </Measure>);
     }
 
     public static expandFlyout = action(() => {
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index c187ad3b8..a3c9516e1 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -295,7 +295,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     }
 
     sharingItem(name: string, effectiveAcl: symbol, permission?: string) {
-        return <div className="propertiesView-sharingTable-item">
+        return <div className="propertiesView-sharingTable-item" key="name">
             <div className="propertiesView-sharingTable-item-name" style={{ width: name !== "Me" ? "70px" : "80px" }}> {name} </div>
             {name !== "Me" ? this.notifyIcon : null}
             <div className="propertiesView-sharingTable-item-permission">
-- 
cgit v1.2.3-70-g09d2


From 8ab7035428524b024a56556ca3060d56b162dd57 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 31 Jul 2020 18:12:27 -0400
Subject: fixed not-selecting dockingView by setting renderDepth=-1 & checking
 in DocView's onCLick.

---
 src/client/views/MainView.tsx                          | 5 +----
 src/client/views/collections/CollectionDockingView.tsx | 1 -
 src/client/views/nodes/DocumentView.tsx                | 2 +-
 3 files changed, 2 insertions(+), 6 deletions(-)

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

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 6009f7dab..85f695b85 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -361,7 +361,7 @@ export class MainView extends React.Component {
             docFilters={returnEmptyFilter}
             ContainingCollectionView={undefined}
             ContainingCollectionDoc={undefined}
-            renderDepth={0}
+            renderDepth={-1}
         />;
     }
     @computed get dockingContent() {
@@ -373,8 +373,6 @@ export class MainView extends React.Component {
         </div>;
     }
 
-    _canClick = false;
-
     @action
     onPropertiesPointerDown = (e: React.PointerEvent) => {
         setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => {
@@ -389,7 +387,6 @@ export class MainView extends React.Component {
         if (this._flyoutTranslate) {
             setupMoveUpEvents(this, e, action((e: PointerEvent) => {
                 this.flyoutWidth = Math.max(e.clientX, 0);
-                Math.abs(this.flyoutWidth - this._flyoutSizeOnDown) > 6 && (this._canClick = false);
                 this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30;
                 return false;
             }), emptyFunction, action(() => {
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 375df8786..9ce5cb03b 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -463,7 +463,6 @@ export class CollectionDockingView extends React.Component<SubCollectionViewProp
         if (className === "lm_drag_handle" || className === "lm_close" || className === "lm_maximise" || className === "lm_minimise" || className === "lm_close_tab") {
             this._flush = true;
         }
-        e.stopPropagation();
     }
 
     updateDataField = async (json: string) => {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 31b2586e9..62a786a03 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -289,7 +289,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     }
 
     onClick = action((e: React.MouseEvent | React.PointerEvent) => {
-        if (!e.nativeEvent.cancelBubble && !this.Document.ignoreClick &&
+        if (!e.nativeEvent.cancelBubble && !this.Document.ignoreClick && this.props.renderDepth >= 0 &&
             (Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD && Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD)) {
             let stopPropagate = true;
             let preventDefault = true;
-- 
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/MainView.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 5d3b965b85cf3caf50b973aa10ddd88da38a8563 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Sat, 1 Aug 2020 09:49:28 -0400
Subject: fixed size of left buttons

---
 src/client/views/MainView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 67f1f5592..74be36bda 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -464,7 +464,7 @@ export class MainView extends React.Component {
                 onClick={undefined}
                 ScreenToLocalTransform={this.mainContainerXf}
                 ContentScaling={returnOne}
-                PanelWidth={() => 80}
+                PanelWidth={() => 60}
                 PanelHeight={this.getContentsHeight}
                 renderDepth={0}
                 focus={emptyFunction}
-- 
cgit v1.2.3-70-g09d2


From 034e05b5bb587e361e9ab87160c9f3abddc9845b Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Sat, 1 Aug 2020 13:34:36 -0500
Subject: finished ink menu merge

---
 src/client/views/MainView.tsx                      |  4 +-
 src/client/views/PropertiesButtons.scss            | 12 +--
 src/client/views/collections/CollectionMenu.tsx    | 11 +--
 .../collectionFreeForm/PropertiesView.scss         | 90 ++++++++++++++++++++--
 .../collectionFreeForm/PropertiesView.tsx          | 88 +++++++++++++--------
 5 files changed, 153 insertions(+), 52 deletions(-)

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

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 74be36bda..993c6f4b6 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -378,7 +378,7 @@ export class MainView extends React.Component {
         setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => {
             this._propertiesWidth = this._panelWidth - e.clientX;
             return false;
-        }), returnFalse, action(() => this._propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._panelWidth - 50, 200) : 0), false);
+        }), returnFalse, action(() => this._propertiesWidth = this.propertiesWidth() < 15 ? Math.min(this._panelWidth - 50, 250) : 0), false);
     }
 
     @action
@@ -464,7 +464,7 @@ export class MainView extends React.Component {
                 onClick={undefined}
                 ScreenToLocalTransform={this.mainContainerXf}
                 ContentScaling={returnOne}
-                PanelWidth={() => 60}
+                PanelWidth={() => 70}
                 PanelHeight={this.getContentsHeight}
                 renderDepth={0}
                 focus={emptyFunction}
diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss
index 11265b413..e099122c4 100644
--- a/src/client/views/PropertiesButtons.scss
+++ b/src/client/views/PropertiesButtons.scss
@@ -20,8 +20,8 @@ $linkGap : 3px;
 
 .propertiesButtons-linkButton-empty,
 .propertiesButtons-linkButton-nonempty {
-    height: 25px;
-    width: 25px;
+    height: 30px;
+    width: 30px;
     border-radius: 5px;
     opacity: 0.9;
     pointer-events: auto;
@@ -35,7 +35,7 @@ $linkGap : 3px;
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-right: 5px;
+    margin-right: 10px;
 
     &:hover {
         background: $main-accent;
@@ -68,12 +68,12 @@ $linkGap : 3px;
     padding-right: 5px;
     width: 25px;
     border-radius: 5px;
-    margin-right: 8px;
+    margin-right: 18px;
 }
 
 .propertiesButtons-linker {
-    height: 25px;
-    width: 25px;
+    height: 30px;
+    width: 30px;
     text-align: center;
     border-radius: 5px;
     pointer-events: auto;
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 01374cfbb..498030b71 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -554,11 +554,12 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
     }
 
     @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 <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() {
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index 0b23d2325..8847fe89d 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -221,7 +221,8 @@
         border: 1px solid black;
         padding: 5px;
         border-radius: 6px;
-        width: 170px;
+        /* width: 170px; */
+        margin-right: 10px;
         background-color: #ececec;
         max-height: 130px;
         overflow-y: scroll;
@@ -250,6 +251,9 @@
 
             .propertiesView-sharingTable-item-permission {
                 display: flex;
+                right: 34;
+                float: right;
+                position: absolute;
 
                 .permissions-select {
                     z-index: 1;
@@ -392,7 +396,7 @@
         width: 32;
         height: 32;
         padding-top: 9px;
-        margin-left: 5px;
+        margin-left: 18px;
 
         &:hover {
             background: rgb(131, 131, 131);
@@ -505,14 +509,14 @@
 }
 
 .strokeAndFill {
-
     display: flex;
+    margin-top: 10px;
 
     .fill {
-        margin-right: 30px;
+        margin-right: 40px;
         display: flex;
         padding-bottom: 7px;
-        margin-left: 20px;
+        margin-left: 35px;
 
         .fill-title {
             font-size: 12px;
@@ -538,4 +542,80 @@
             margin-top: -1px;
         }
     }
+}
+
+.widthAndDash {
+
+    .width {
+        .width-top {
+            display: flex;
+
+            .width-title {
+                font-size: 12;
+                margin-right: 20px;
+                margin-left: 35px;
+                text-align: center;
+            }
+
+            .width-input {
+                margin-right: 30px;
+                margin-top: -10px;
+            }
+        }
+
+        .width-range {
+            margin-right: 1px;
+            margin-bottom: 6;
+        }
+    }
+
+    .arrows {
+
+        display: flex;
+        margin-bottom: 3px;
+
+        .arrows-head {
+
+            display: flex;
+            margin-right: 35px;
+
+            .arrows-head-title {
+                font-size: 12;
+            }
+
+            .arrows-head-input {
+                margin-left: 6px;
+                margin-top: 2px;
+            }
+        }
+
+        .arrows-tail {
+            display: flex;
+
+            .arrows-tail-title {
+                font-size: 12;
+            }
+
+            .arrows-tail-input {
+                margin-left: 6px;
+                margin-top: 2px;
+            }
+        }
+    }
+
+    .dashed {
+
+        display: flex;
+        margin-left: 74px;
+        margin-bottom: 6px;
+
+        .dashed-title {
+            font-size: 12;
+        }
+
+        .dashed-input {
+            margin-left: 6px;
+            margin-top: 2px;
+        }
+    }
 }
\ 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 ca81bf131..f39a75b81 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -26,6 +26,7 @@ import { undoBatch } from "../../../util/UndoManager";
 import { ColorState, SketchPicker } from "react-color";
 import AntimodeMenu from "../../AntimodeMenu";
 import "./FormatShapePane.scss";
+import { discovery_v1 } from "googleapis";
 
 
 interface PropertiesViewProps {
@@ -295,7 +296,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     }
 
     sharingItem(name: string, effectiveAcl: symbol, permission?: string) {
-        return <div className="propertiesView-sharingTable-item" key="name">
+        return <div className="propertiesView-sharingTable-item">
             <div className="propertiesView-sharingTable-item-name" style={{ width: name !== "Me" ? "70px" : "80px" }}> {name} </div>
             {name !== "Me" ? this.notifyIcon : null}
             <div className="propertiesView-sharingTable-item-permission">
@@ -399,11 +400,11 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 if (ink) {
 
                     const newPoints: { X: number, Y: number }[] = [];
-                    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;
+                    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;
                         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,7 +535,11 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     }
 
     getField(key: string) {
-        return Field.toString(this.selectedDoc?.[key] as Field);
+        //if (this.selectedDoc) {
+        return Field.toString(this.selectedDoc[key] as Field);
+        // } else {
+        //     return undefined as Opt<string>;
+        // }
     }
 
     @computed get shapeXps() { return this.getField("x"); }
@@ -565,7 +570,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
 
     private _lastFill = "#D0021B";
     private _lastLine = "#D0021B";
-    private _lastDash = "2";
+    private _lastDash: any = "2";
 
     @computed get colorFil() { const ccol = this.getField("fillColor") || ""; ccol && (this._lastFill = ccol); return ccol; }
     @computed get colorStk() { const ccol = this.getField("color") || ""; ccol && (this._lastLine = ccol); return ccol; }
@@ -629,7 +634,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     }
 
     @computed get solidStk() { return this.selectedDoc?.color && (!this.selectedDoc?.strokeDash || this.selectedDoc?.strokeDash === "0") ? true : false; }
-    @computed get dashdStk() { return !this.unStrokd && this.getField("strokeDash") || ""; }
+    @computed get dashdStk() { return this.selectedDoc?.strokeDash || ""; }
     @computed get unStrokd() { return this.selectedDoc?.color ? true : false; }
     @computed get widthStk() { return this.getField("strokeWidth") || "1"; }
     @computed get markHead() { return this.getField("strokeStartMarker") || ""; }
@@ -667,35 +672,50 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     }
 
     @computed get widthAndDash() {
-        return <div>{(this.solidStk || this.dashdStk) ? "Width" : ""}
-            {(this.solidStk || this.dashdStk) ? this.stkInput : ""}
-
-
-            {(this.solidStk || this.dashdStk) ? <input type="range"
-                defaultValue={Number(this.widthStk)} min={1} max={100}
-                onChange={undoBatch(action((e) => this.widthStk = e.target.value))} /> : (null)}
-            <br />
-            {(this.solidStk || this.dashdStk) ? <>
-                <p style={{ position: "absolute", fontSize: 12 }}>Arrow Head</p>
-                <input key="markHead" className="formatShapePane-inputBtn" type="checkbox"
-                    checked={this.markHead !== ""}
-                    onChange={undoBatch(action(() => this.markHead = this.markHead ? "" : "arrow"))}
-                    style={{ position: "absolute", right: 110, width: 20 }} />
-                <p style={{ position: "absolute", fontSize: 12, right: 30 }}>Arrow End</p>
-                <input key="markTail" className="formatShapePane-inputBtn" type="checkbox"
-                    checked={this.markTail !== ""}
-                    onChange={undoBatch(action(() => this.markTail = this.markTail ? "" : "arrow"))}
-                    style={{ position: "absolute", right: 0, width: 20 }} />
-                <br />
-            </> : ""}
-                Dash:
-            <input key="markHead" className="formatShapePane-inputBtn"
-                type="checkbox" checked={this.dashdStk === "2"}
-                onChange={undoBatch(action(() => this.dashdStk = this.dashdStk === "2" ? "0" : "2"))}
-                style={{ position: "absolute", right: 110, width: 20 }} />
+        return <div className="widthAndDash">
+            <div className="width">
+                <div className="width-top">
+                    <div className="width-title">Width:</div>
+                    <div className="width-input">{this.stkInput}</div>
+                </div>
+                <input className="width-range" type="range"
+                    defaultValue={Number(this.widthStk)} min={1} max={100}
+                    onChange={undoBatch(action((e) => this.widthStk = e.target.value))} />
+            </div>
+
+            <div className="arrows">
+                <div className="arrows-head">
+                    <div className="arrows-head-title" >Arrow Head: </div>
+                    <input key="markHead" className="arrows-head-input" type="checkbox"
+                        checked={this.markHead !== ""}
+                        onChange={undoBatch(action(() => this.markHead = this.markHead ? "" : "arrow"))} />
+                </div>
+                <div className="arrows-tail">
+                    <div className="arrows-tail-title" >Arrow End: </div>
+                    <input key="markTail" className="arrows-tail-input" type="checkbox"
+                        checked={this.markTail !== ""}
+                        onChange={undoBatch(action(() => this.markTail = this.markTail ? "" : "arrow"))} />
+                </div>
+            </div>
+            <div className="dashed">
+                <div className="dashed-title">Dash:</div>
+                <input key="markHead" className="dashed-input"
+                    type="checkbox" checked={this.dashdStk === "2"}
+                    onChange={this.changeDash} />
+            </div>
         </div>;
     }
 
+    @undoBatch @action
+    changeDash = () => {
+        const dash = this.dashdStk;
+        if (dash === "2") {
+            this.dashdStk = "0";
+        } else {
+            this.dashdStk = "2";
+        }
+    }
+
     @computed get appearanceEditor() {
         return <div className="appearance-editor">
             {this.widthAndDash}
-- 
cgit v1.2.3-70-g09d2


From b317845a0aa01319ba0b6d45a0f61d8fa2075e3f Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Sat, 1 Aug 2020 15:39:15 -0500
Subject: UI changes

---
 src/client/views/MainView.tsx                           |  2 +-
 src/client/views/collections/CollectionDockingView.scss | 14 +++++++++++---
 src/client/views/collections/CollectionMenu.tsx         |  1 +
 .../collections/collectionFreeForm/PropertiesView.scss  | 17 ++++++++---------
 .../collections/collectionFreeForm/PropertiesView.tsx   |  8 ++++----
 5 files changed, 25 insertions(+), 17 deletions(-)

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

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 993c6f4b6..d095a9836 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, faBuffer, fa.faExpand, fa.faUndo);
+            fa.faLongArrowAltRight, fa.faPenFancy, fa.faAngleDoubleRight, faBuffer, fa.faExpand, fa.faUndo, fa.faSlidersH);
         this.initEventListeners();
         this.initAuthenticationRouters();
     }
diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss
index 6d894b56a..27d66f796 100644
--- a/src/client/views/collections/CollectionDockingView.scss
+++ b/src/client/views/collections/CollectionDockingView.scss
@@ -12,12 +12,14 @@
         width: 100%;
         height: 100%;
         position: absolute;
+
         .miniThumb {
             background: #25252525;
             position: absolute;
         }
     }
 }
+
 .lm_title {
     margin-top: 3px;
     border-radius: 5px;
@@ -27,6 +29,7 @@
     transform: translate(0px, -3px);
     cursor: grab;
 }
+
 .lm_title.focus-visible {
     cursor: text;
 }
@@ -35,8 +38,9 @@
     overflow: hidden;
     height: 19px;
     margin-top: -2px;
-    display:inline-block;
+    display: inline-block;
 }
+
 .lm_active .lm_title {
     border: solid 1px lightgray;
 }
@@ -47,11 +51,11 @@
 }
 
 .lm_header .lm_tab {
-    padding-right : 20px;
+    padding-right: 20px;
 }
 
 .lm_popout {
-    display:none;
+    display: none;
 }
 
 .messageCounter {
@@ -74,6 +78,7 @@
     position: absolute;
     top: 0;
     left: 0;
+
     // overflow: hidden;  // bcz: menus don't show up when this is on (e.g., the parentSelectorMenu)
     .collectionDockingView-gear {
         padding-left: 5px;
@@ -81,7 +86,10 @@
         width: 18px;
         display: inline-block;
         margin: auto;
+
+        display: none;
     }
+
     .collectionDockingView-dragAsDocument {
         touch-action: none;
         position: absolute;
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 498030b71..fdd1b4e81 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -415,6 +415,7 @@ export class CollectionFreeFormViewChrome extends React.Component<CollectionMenu
     miniMap = (): void => {
         this.document.hideMinimap = !this.document.hideMinimap;
     }
+
     private _palette = ["#D0021B", "#F5A623", "#F8E71C", "#8B572A", "#7ED321", "#417505", "#9013FE", "#4A90E2", "#50E3C2", "#B8E986", "#000000", "#4A4A4A", "#9B9B9B", "#FFFFFF", ""];
     private _width = ["1", "5", "10", "100"];
     // private _draw = ["⎯", "→", "↔︎", "∿", "↝", "↭", "ロ", "O", "∆"];
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
index 8847fe89d..74f32275a 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss
@@ -14,18 +14,17 @@
         padding-top: 12px;
         padding-bottom: 12px;
         display: flex;
-
-        .propertiesView-title-name {
-            font-size: 18px;
-            font-weight: bold;
-            padding-left: 45px;
-        }
+        font-size: 18px;
+        font-weight: bold;
+        justify-content: center;
 
         .propertiesView-title-icon {
             width: 20px;
             height: 20px;
             padding-left: 38px;
             margin-top: -5px;
+            right: 19;
+            position: absolute;
 
             &:hover {
                 color: grey;
@@ -580,7 +579,7 @@
             margin-right: 35px;
 
             .arrows-head-title {
-                font-size: 12;
+                font-size: 10;
             }
 
             .arrows-head-input {
@@ -593,7 +592,7 @@
             display: flex;
 
             .arrows-tail-title {
-                font-size: 12;
+                font-size: 10;
             }
 
             .arrows-tail-input {
@@ -610,7 +609,7 @@
         margin-bottom: 6px;
 
         .dashed-title {
-            font-size: 12;
+            font-size: 10;
         }
 
         .dashed-input {
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
index f39a75b81..3eb3ef8ab 100644
--- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
+++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx
@@ -115,7 +115,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             const rows: JSX.Element[] = [];
             for (const key of Object.keys(ids).slice().sort()) {
                 const contents = doc[key];
-                if (contents === "UNDEFINED") {
+                if (key[0] === "#") {
                     rows.push(<div style={{ display: "flex", overflowY: "visible", marginBottom: "2px" }} key={key}>
                         <span style={{ fontWeight: "bold", whiteSpace: "nowrap" }}>{key}</span>
                     &nbsp;
@@ -158,7 +158,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             for (const key of Object.keys(ids).slice().sort()) {
                 if (key[0] === key[0].toUpperCase() || key[0] === "#" || key === "author" || key === "creationDate" || key.indexOf("lastModified") !== -1) {
                     const contents = doc[key];
-                    if (contents === "UNDEFINED") {
+                    if (key[0] === "#") {
                         rows.push(<div className="uneditable-field" key={key}>
                             <span style={{ fontWeight: "bold", whiteSpace: "nowrap" }}>{key}</span>
                     &nbsp;
@@ -211,7 +211,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 KeyValueBox.SetField(doc, newVal.substring(0, newVal.indexOf(":")), newVal.substring(newVal.indexOf(":") + 1, newVal.length), true);
                 return true;
             } else if (value[0] === "#") {
-                const newVal = value + ":'UNDEFINED'";
+                const newVal = value + `:'${value}'`;
                 KeyValueBox.SetField(doc, newVal.substring(0, newVal.indexOf(":")), newVal.substring(newVal.indexOf(":") + 1, newVal.length), true);
                 return true;
             }
@@ -745,7 +745,7 @@ 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 }}>
-                <div className="propertiesView-title-name">Properties </div>
+                Properties
                 <div className="propertiesView-title-icon" onPointerDown={this.props.onDown}>
                     <FontAwesomeIcon icon="times" color="black" size="sm" />
                 </div>
-- 
cgit v1.2.3-70-g09d2


From 3257bfdb28fbd4573adc7d507827d6a6957fc7d2 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Sun, 2 Aug 2020 12:15:58 -0500
Subject: merging menuiconbox into fonticonbox

---
 src/client/documents/Documents.ts               |  9 +---
 src/client/util/CurrentUserUtils.ts             |  5 ++-
 src/client/util/SharingManager.tsx              |  6 +++
 src/client/views/MainView.tsx                   | 18 ++++++--
 src/client/views/nodes/DocumentContentsView.tsx |  3 +-
 src/client/views/nodes/FontIconBox.scss         | 56 ++++++++++++++++++++++-
 src/client/views/nodes/FontIconBox.tsx          | 59 ++++++++++++++++++-------
 src/client/views/nodes/MenuIconBox.scss         | 49 --------------------
 src/client/views/nodes/MenuIconBox.tsx          | 33 --------------
 9 files changed, 123 insertions(+), 115 deletions(-)
 delete mode 100644 src/client/views/nodes/MenuIconBox.scss
 delete mode 100644 src/client/views/nodes/MenuIconBox.tsx

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

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index de0557185..300af4e50 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -31,7 +31,6 @@ 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";
@@ -152,6 +151,7 @@ export interface DocumentOptions {
     annotationOn?: Doc;
     removeDropProperties?: List<string>; // list of properties that should be removed from a document when it is dropped.  e.g., a creator button may be forceActive to allow it be dragged, but the forceActive property can be removed from the dropped document
     dbDoc?: Doc;
+    menuIcon?: boolean; // if the font icon box is in the menu
     linkRelationship?: string; // type of relatinoship a link represents
     ischecked?: ScriptField; // returns whether a font icon box is checked
     activeInkPen?: Doc; // which pen document is currently active (used as the radio button state for the 'unhecked' pen tool scripts)
@@ -301,9 +301,6 @@ 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 },
@@ -794,10 +791,6 @@ 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 b37c91c56..7b6868f73 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 selectedPanel: string = "none";
+
     // sets up the default User Templates - slideView, queryView, descriptionView
     static setupUserTemplateButtons(doc: Doc) {
         if (doc["template-button-query"] === undefined) {
@@ -520,8 +522,9 @@ export class CurrentUserUtils {
     static setupMenuPanel(doc: Doc) {
         if (doc.menuStack === undefined) {
             const buttons = CurrentUserUtils.menuBtnDescriptions();
-            const menuBtns = buttons.map(({ title, icon, click }) => Docs.Create.MenuIconDocument({
+            const menuBtns = buttons.map(({ title, icon, click }) => Docs.Create.FontIconDocument({
                 icon,
+                menuIcon: true,
                 title,
                 _backgroundColor: "black",
                 stayInCollection: true,
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index 000b3e46c..eda12a5e9 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -179,6 +179,12 @@ export default class SharingManager extends React.Component<{}> {
         }
     }
 
+    shareFromPropertiesSidebar = (shareWith: string, permission: SharingPermissions, target: Doc) => {
+        const user = this.users.find(({ user: { email } }) => email === (shareWith === "Me" ? Doc.CurrentUserEmail : shareWith));
+        if (user) this.setInternalSharing(user, permission, target);
+        else this.setInternalGroupSharing(GroupManager.Instance.getGroup(shareWith)!, permission, target);
+    }
+
     /**
      * Removes the documents shared with a user through a group when the user is removed from the group.
      * @param group 
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index d095a9836..c83aeee25 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -234,7 +234,7 @@ export class MainView extends React.Component {
         const freeformOptions: DocumentOptions = {
             x: 0,
             y: 400,
-            _width: this._panelWidth * .7 - this.propertiesWidth(),
+            _width: this._panelWidth * .7 - this.propertiesWidth() * 0.7,
             _height: this._panelHeight,
             title: "Collection " + workspaceCount,
         };
@@ -367,7 +367,7 @@ export class MainView extends React.Component {
     @computed get dockingContent() {
         TraceMobx();
         const mainContainer = this.mainContainer;
-        const width = this.flyoutWidth;
+        const width = this.flyoutWidth + this.propertiesWidth();
         return <div className="mainContent-div" onDrop={this.onDrop} style={{ width: `calc(100% - ${width}px)` }}>
             {!mainContainer ? (null) : this.mainDocView}
         </div>;
@@ -388,10 +388,16 @@ export class MainView extends React.Component {
             setupMoveUpEvents(this, e, action((e: PointerEvent) => {
                 this.flyoutWidth = Math.max(e.clientX, 0);
                 this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30;
+                if (this.flyoutWidth === 0) {
+                    CurrentUserUtils.selectedPanel = "none";
+                }
                 return false;
             }), emptyFunction, action(() => {
                 this.flyoutWidth = this.flyoutWidth < 15 ? 250 : 0;
                 this.flyoutWidth && (this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30);
+                if (this.flyoutWidth === 0) {
+                    CurrentUserUtils.selectedPanel = "none";
+                }
             }));
         }
     }
@@ -464,7 +470,7 @@ export class MainView extends React.Component {
                 onClick={undefined}
                 ScreenToLocalTransform={this.mainContainerXf}
                 ContentScaling={returnOne}
-                PanelWidth={() => 70}
+                PanelWidth={() => 60}
                 PanelHeight={this.getContentsHeight}
                 renderDepth={0}
                 focus={emptyFunction}
@@ -484,6 +490,7 @@ export class MainView extends React.Component {
 
     @action @undoBatch
     closeFlyout = () => {
+        CurrentUserUtils.selectedPanel = "none";
         this.panelContent = "none";
         this.flyoutWidth = 0;
     }
@@ -493,10 +500,12 @@ export class MainView extends React.Component {
     @action @undoBatch
     selectMenu = (str: string) => {
         if (this.panelContent === str && this.flyoutWidth !== 0) {
+            CurrentUserUtils.selectedPanel = "none";
             this.panelContent = "none";
             this.flyoutWidth = 0;
         } else {
             this.panelContent = str;
+            CurrentUserUtils.selectedPanel = str;
             switch (this.panelContent) {
                 case "Tools": this.sidebarContent.proto = CurrentUserUtils.toolsStack; break;
                 case "Workspace": this.sidebarContent.proto = CurrentUserUtils.workspaceStack; break;
@@ -505,7 +514,8 @@ export class MainView extends React.Component {
                 case "Settings": this.sidebarContent.proto = SettingsManager.Instance.open(); break;
                 case "Sharing": this.sidebarContent.proto = GroupManager.Instance.open(); break;
             }
-            if (str === "Settings" || str === "Sharing" || str === "Help") {
+            if (str === "Settings" || str === "Sharing" || str === "Help" || str === "Import") {
+                CurrentUserUtils.selectedPanel = "none";
                 this.panelContent = "none";
                 this.flyoutWidth = 0;
             } else {
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index e3f258b8d..e8173d103 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -18,7 +18,6 @@ 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 +189,7 @@ export class DocumentContentsView extends React.Component<DocumentViewProps & {
                 blacklistedAttrs={[]}
                 renderInWrapper={false}
                 components={{
-                    FormattedTextBox, ImageBox, DirectoryImportBox, FontIconBox, MenuIconBox, LabelBox, SliderBox, FieldView,
+                    FormattedTextBox, ImageBox, DirectoryImportBox, FontIconBox, 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/FontIconBox.scss b/src/client/views/nodes/FontIconBox.scss
index 69c835318..13af511a6 100644
--- a/src/client/views/nodes/FontIconBox.scss
+++ b/src/client/views/nodes/FontIconBox.scss
@@ -10,9 +10,9 @@
 
     .fontIconBox-label {
         background: gray;
-        color:white;
+        color: white;
         border-radius: 8px;
-        width:100%;
+        width: 100%;
         position: absolute;
         text-align: center;
         font-size: 8px;
@@ -22,6 +22,58 @@
         overflow: hidden;
     }
 
+    svg {
+        width: 95% !important;
+        height: 95%;
+    }
+}
+
+.menuButton {
+    //padding: 7px;
+    padding-left: 5px;
+    width: 100%;
+    width: 60px;
+    height: 70px;
+    padding-top: 3px;
+    padding-bottom: 3px;
+
+    .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: 7px;
+        margin-top: 1px;
+        letter-spacing: normal;
+        padding: 3px;
+        background-color: inherit;
+    }
+
+    .menuButton-icon {
+        width: auto;
+        height: 32px;
+        padding: 5px;
+    }
+
     svg {
         width: 95% !important;
         height: 95%;
diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx
index 2611d2ca7..720d6a15d 100644
--- a/src/client/views/nodes/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox.tsx
@@ -12,8 +12,10 @@ import { Doc } from '../../../fields/Doc';
 import { ContextMenu } from '../ContextMenu';
 import { ScriptField } from '../../../fields/ScriptField';
 import { Tooltip } from '@material-ui/core';
+import { createUnionOrIntersectionTypeNode } from 'typescript';
+import { CurrentUserUtils } from '../../util/CurrentUserUtils';
 const FontIconSchema = createSchema({
-    icon: "string"
+    icon: "string",
 });
 
 type FontIconDocument = makeInterface<[typeof FontIconSchema]>;
@@ -59,20 +61,45 @@ export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>(
     }
 
     render() {
-        const referenceDoc = (this.layoutDoc.dragFactory instanceof Doc ? this.layoutDoc.dragFactory : this.layoutDoc);
-        const refLayout = Doc.Layout(referenceDoc);
-        const button = <button className="fontIconBox-outerDiv" ref={this._ref} onContextMenu={this.specificContextMenu}
-            style={{
-                padding: Cast(this.layoutDoc._xPadding, "number", null),
-                background: StrCast(refLayout._backgroundColor, StrCast(refLayout.backgroundColor)),
-                boxShadow: this.layoutDoc.ischecked ? `4px 4px 12px black` : undefined
-            }}>
-            <FontAwesomeIcon className="fontIconBox-icon" icon={StrCast(this.dataDoc.icon, "user") as any} color={StrCast(this.layoutDoc.color, this._foregroundColor)} size="sm" />
-            {!this.rootDoc.title ? (null) : <div className="fontIconBox-label" style={{ width: this.rootDoc.label ? "max-content" : undefined }}> {StrCast(this.rootDoc.label, StrCast(this.rootDoc.title).substring(0, 6))} </div>}
-        </button>;
-        return !this.layoutDoc.toolTip ? button :
-            <Tooltip title={<div className="dash-tooltip">{StrCast(this.layoutDoc.toolTip)}</div>}>
-                {button}
-            </Tooltip>;
+
+        //style={{ backgroundColor: this.props.backgroundColor?.(this.props.Document) }}>
+
+        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";
+            }
+
+            const color = backgroundColor === "lightgrey" ? "black" : "white";
+            const menuBTN = <div className="menuButton" style={{ backgroundColor: backgroundColor }}>
+
+                <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-label" style={{ color: color }}> {this.dataDoc.title} </div>
+                </div>
+            </div>;
+
+            return menuBTN;
+        } else {
+            const referenceDoc = (this.layoutDoc.dragFactory instanceof Doc ? this.layoutDoc.dragFactory : this.layoutDoc);
+            const refLayout = Doc.Layout(referenceDoc);
+            const button = <button className="fontIconBox-outerDiv" ref={this._ref} onContextMenu={this.specificContextMenu}
+                style={{
+                    padding: Cast(this.layoutDoc._xPadding, "number", null),
+                    background: StrCast(refLayout._backgroundColor, StrCast(refLayout.backgroundColor)),
+                    boxShadow: this.layoutDoc.ischecked ? `4px 4px 12px black` : undefined
+                }}>
+                <FontAwesomeIcon className="fontIconBox-icon" icon={StrCast(this.dataDoc.icon, "user") as any} color={StrCast(this.layoutDoc.color, this._foregroundColor)} size="sm" />
+                {!this.rootDoc.title ? (null) : <div className="fontIconBox-label" style={{ width: this.rootDoc.label ? "max-content" : undefined }}> {StrCast(this.rootDoc.label, StrCast(this.rootDoc.title).substring(0, 6))} </div>}
+            </button>;
+            return !this.layoutDoc.toolTip ? button :
+                <Tooltip title={<div className="dash-tooltip">{StrCast(this.layoutDoc.toolTip)}</div>}>
+                    {button}
+                </Tooltip>;
+        }
+
     }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/MenuIconBox.scss b/src/client/views/nodes/MenuIconBox.scss
deleted file mode 100644
index 1b72f5a8f..000000000
--- a/src/client/views/nodes/MenuIconBox.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-.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
deleted file mode 100644
index 0aa7b327e..000000000
--- a/src/client/views/nodes/MenuIconBox.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { observer } from 'mobx-react';
-import * as React from 'react';
-import { createSchema, makeInterface } from '../../../fields/Schema';
-import { StrCast } from '../../../fields/Types';
-import { DocComponent } from '../DocComponent';
-import { FieldView, FieldViewProps } from './FieldView';
-import './MenuIconBox.scss';
-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 color = this.props.backgroundColor?.(this.props.Document) === "lightgrey" ? "black" : "white";
-        const menuBTN = <div className="menuButton" style={{ backgroundColor: this.props.backgroundColor?.(this.props.Document) }}>
-            <div className="menuButton-wrap"
-                style={{ backgroundColor: this.props.backgroundColor?.(this.props.Document) }} >
-                <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>;
-
-        return menuBTN;
-    }
-}
\ No newline at end of file
-- 
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/MainView.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 6ab1be67787779c8a6b26f9fbb058a8ccc973fa6 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 3 Aug 2020 02:30:28 -0400
Subject: cleaned up fonticonbox

---
 src/client/documents/DocumentTypes.ts              |  1 -
 src/client/documents/Documents.ts                  |  2 +-
 src/client/util/CurrentUserUtils.ts                | 42 +++++-----
 src/client/views/MainView.tsx                      | 51 ++++++-------
 .../views/collections/CollectionLinearView.tsx     |  2 +-
 src/client/views/collections/CollectionMenu.tsx    |  2 +-
 src/client/views/collections/CollectionSubView.tsx |  8 +-
 .../views/nodes/ContentFittingDocumentView.tsx     |  3 -
 src/client/views/nodes/FontIconBox.scss            | 89 +++++++++-------------
 src/client/views/nodes/FontIconBox.tsx             | 60 ++++-----------
 10 files changed, 101 insertions(+), 159 deletions(-)

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

diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts
index 659f78970..985fcce11 100644
--- a/src/client/documents/DocumentTypes.ts
+++ b/src/client/documents/DocumentTypes.ts
@@ -13,7 +13,6 @@ 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 300af4e50..92942bd58 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -151,7 +151,7 @@ export interface DocumentOptions {
     annotationOn?: Doc;
     removeDropProperties?: List<string>; // list of properties that should be removed from a document when it is dropped.  e.g., a creator button may be forceActive to allow it be dragged, but the forceActive property can be removed from the dropped document
     dbDoc?: Doc;
-    menuIcon?: boolean; // if the font icon box is in the menu
+    iconShape?: string; // shapes of the fonticon border
     linkRelationship?: string; // type of relatinoship a link represents
     ischecked?: ScriptField; // returns whether a font icon box is checked
     activeInkPen?: Doc; // which pen document is currently active (used as the radio button state for the 'unhecked' pen tool scripts)
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 7b6868f73..abedb2cd2 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -42,13 +42,11 @@ export class CurrentUserUtils {
     @observable public static libraryBtn: any | undefined;
     @observable public static searchBtn: any | undefined;
 
-    @observable public static toolsStack: any | undefined;
-    @observable public static workspaceStack: any | undefined;
-    @observable public static catalogStack: any | undefined;
-    @observable public static closedStack: any | undefined;
-    @observable public static searchStack: any | undefined;
-
-    @observable public static selectedPanel: string = "none";
+    @observable public static toolsStack: Doc | undefined;
+    @observable public static workspaceStack: Doc | undefined;
+    @observable public static catalogStack: Doc | undefined;
+    @observable public static closedStack: Doc | undefined;
+    @observable public static searchStack: Doc | undefined;
 
     // sets up the default User Templates - slideView, queryView, descriptionView
     static setupUserTemplateButtons(doc: Doc) {
@@ -441,7 +439,7 @@ export class CurrentUserUtils {
             { toolTip: "Drag a collection", title: "Col", icon: "folder", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc },
             { toolTip: "Drag a web page", title: "Web", icon: "globe-asia", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyWebpage as Doc },
             { toolTip: "Drag a cat image", title: "Image", icon: "cat", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyImage as Doc },
-            { toolTip: "Drag a comparison box", title: "Comp", icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc },
+            { toolTip: "Drag a comparison box", title: "Compare", icon: "columns", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyComparison as Doc },
             { toolTip: "Drag a screengrabber", title: "Grab", icon: "photo-video", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyScreenshot as Doc },
             //  { title: "Drag a webcam", title: "Cam", icon: "video", ignoreClick: true, drag: 'Docs.Create.WebCamDocument("", { _width: 400, _height: 400, title: "a test cam" })' },
             { toolTip: "Drag a audio recorder", title: "Audio", icon: "microphone", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyAudio as Doc },
@@ -477,7 +475,7 @@ export class CurrentUserUtils {
         }
         const buttons = CurrentUserUtils.creatorBtnDescriptors(doc).filter(d => !alreadyCreatedButtons?.includes(d.title));
         const creatorBtns = buttons.map(({ title, toolTip, icon, ignoreClick, drag, click, ischecked, activeInkPen, backgroundColor, dragFactory }) => Docs.Create.FontIconDocument({
-            _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100,
+            _nativeWidth: 50, _nativeHeight: 50, _width: 50, _height: 50,
             icon,
             title,
             toolTip,
@@ -508,14 +506,14 @@ export class CurrentUserUtils {
         title: string, icon: string, click: string,
     }[] {
         return [
-            { title: "Workspace", icon: "desktop", click: 'scriptContext.selectMenu("Workspace")' },
-            { title: "Catalog", icon: "file", click: 'scriptContext.selectMenu("Catalog")' },
-            { title: "Archive", icon: "archive", click: 'scriptContext.selectMenu("Archive")' },
-            { title: "Import", icon: "upload", click: 'scriptContext.selectMenu("Import")' },
-            { title: "Sharing", icon: "users", click: 'scriptContext.selectMenu("Sharing")' },
-            { title: "Tools", icon: "wrench", click: 'scriptContext.selectMenu("Tools")' },
-            { title: "Help", icon: "question-circle", click: 'scriptContext.selectMenu("Help")' },
-            { title: "Settings", icon: "cog", click: 'scriptContext.selectMenu("Settings")' },
+            { title: "Workspace", icon: "desktop", click: 'scriptContext.selectMenu(self, "Workspace")' },
+            { title: "Catalog", icon: "file", click: 'scriptContext.selectMenu(self, "Catalog")' },
+            { title: "Archive", icon: "archive", click: 'scriptContext.selectMenu(self, "Archive")' },
+            { title: "Import", icon: "upload", click: 'scriptContext.selectMenu(self, "Import")' },
+            { title: "Sharing", icon: "users", click: 'scriptContext.selectMenu(self, "Sharing")' },
+            { title: "Tools", icon: "wrench", click: 'scriptContext.selectMenu(self, "Tools")' },
+            { title: "Help", icon: "question-circle", click: 'scriptContext.selectMenu(self, "Help")' },
+            { title: "Settings", icon: "cog", click: 'scriptContext.selectMenu(self, "Settings")' },
         ];
     }
 
@@ -524,10 +522,11 @@ export class CurrentUserUtils {
             const buttons = CurrentUserUtils.menuBtnDescriptions();
             const menuBtns = buttons.map(({ title, icon, click }) => Docs.Create.FontIconDocument({
                 icon,
-                menuIcon: true,
+                iconShape: "square",
                 title,
                 _backgroundColor: "black",
                 stayInCollection: true,
+                childDropAction: "same",
                 _width: 60,
                 _height: 60,
                 onClick: ScriptField.MakeScript(click, { scriptContext: "any" }),
@@ -535,6 +534,7 @@ export class CurrentUserUtils {
 
             doc.menuStack = new PrefetchProxy(Docs.Create.StackingDocument(menuBtns, {
                 title: "menuItemPanel",
+                dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }),
                 _backgroundColor: "black",
                 _gridGap: 0,
                 _yMargin: 0,
@@ -678,7 +678,7 @@ export class CurrentUserUtils {
             CurrentUserUtils.toolsStack = toolsStack;
 
             doc["tabs-button-tools"] = new PrefetchProxy(Docs.Create.ButtonDocument({
-                _width: 35, _height: 25, title: "Tools", _fontSize: "10pt",
+                _width: 35, _height: 25, title: "Tools", _fontSize: "10pt", color: "black",
                 letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)",
                 sourcePanel: toolsStack,
                 onDragStart: ScriptField.MakeFunction('getCopy(this.dragFactory, true)'),
@@ -773,7 +773,7 @@ export class CurrentUserUtils {
                 lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same"
             })) as any as Doc;
             doc["tabs-button-library"] = new PrefetchProxy(Docs.Create.ButtonDocument({
-                _width: 50, _height: 25, title: "Library", _fontSize: "10pt", targetDropAction: "same",
+                _width: 50, _height: 25, title: "Library", _fontSize: "10pt", targetDropAction: "same", color: "black",
                 letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)",
                 sourcePanel: libraryStack,
                 onDragStart: ScriptField.MakeFunction('getCopy(this.dragFactory, true)'),
@@ -792,7 +792,7 @@ export class CurrentUserUtils {
         doc["tabs-button-search"] = undefined;
         if (doc["tabs-button-search"] === undefined) {
             doc["tabs-button-search"] = new PrefetchProxy(Docs.Create.ButtonDocument({
-                _width: 50, _height: 25, title: "Search", _fontSize: "10pt",
+                _width: 50, _height: 25, title: "Search", _fontSize: "10pt", color: "black",
                 letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)",
                 sourcePanel: new PrefetchProxy(Docs.Create.QueryDocument({ title: "search stack", })) as any as Doc,
                 searchFileTypes: new List<string>([DocumentType.RTF, DocumentType.IMG, DocumentType.PDF, DocumentType.VID, DocumentType.WEB, DocumentType.SCRIPTING]),
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index c83aeee25..d535f0d1b 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -314,7 +314,7 @@ export class MainView extends React.Component {
         if (this.panelContent === doc?.title) return "lightgrey";
         if (this.darkScheme) {
             switch (doc?.type) {
-                case DocumentType.MENUICON: return "white";
+                case DocumentType.FONTICON: return "white";
                 case DocumentType.RTF || DocumentType.LABEL || DocumentType.BUTTON: return "#2d2d2d";
                 case DocumentType.LINK:
                 case DocumentType.COL: {
@@ -324,7 +324,7 @@ export class MainView extends React.Component {
             }
         } else {
             switch (doc?.type) {
-                case DocumentType.MENUICON: return "black";
+                case DocumentType.FONTICON: return "black";
                 case DocumentType.RTF: return "#f1efeb";
                 case DocumentType.BUTTON:
                 case DocumentType.LABEL: return "lightgray";
@@ -388,16 +388,10 @@ export class MainView extends React.Component {
             setupMoveUpEvents(this, e, action((e: PointerEvent) => {
                 this.flyoutWidth = Math.max(e.clientX, 0);
                 this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30;
-                if (this.flyoutWidth === 0) {
-                    CurrentUserUtils.selectedPanel = "none";
-                }
                 return false;
             }), emptyFunction, action(() => {
                 this.flyoutWidth = this.flyoutWidth < 15 ? 250 : 0;
                 this.flyoutWidth && (this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30);
-                if (this.flyoutWidth === 0) {
-                    CurrentUserUtils.selectedPanel = "none";
-                }
             }));
         }
     }
@@ -454,7 +448,7 @@ export class MainView extends React.Component {
     }
 
     @computed get menuPanel() {
-
+        setTimeout(() => DocListCast((Doc.UserDoc().menuStack as Doc).data).forEach(action(doc => { doc.color = "white"; doc._backgroundColor = ""; })), 0);
         return <div className="mainView-menuPanel">
             <DocumentView
                 Document={Doc.UserDoc().menuStack as Doc}
@@ -468,7 +462,7 @@ export class MainView extends React.Component {
                 rootSelected={returnTrue}
                 removeDocument={returnFalse}
                 onClick={undefined}
-                ScreenToLocalTransform={this.mainContainerXf}
+                ScreenToLocalTransform={this.sidebarScreenToLocal}
                 ContentScaling={returnOne}
                 PanelWidth={() => 60}
                 PanelHeight={this.getContentsHeight}
@@ -490,37 +484,37 @@ export class MainView extends React.Component {
 
     @action @undoBatch
     closeFlyout = () => {
-        CurrentUserUtils.selectedPanel = "none";
         this.panelContent = "none";
         this.flyoutWidth = 0;
     }
 
     get groupManager() { return GroupManager.Instance; }
 
+    _lastButton: Doc | undefined;
     @action @undoBatch
-    selectMenu = (str: string) => {
+    selectMenu = (button: Doc, str: string) => {
+        this._lastButton && (this._lastButton.color = "white");
+        this._lastButton && (this._lastButton._backgroundColor = "");
         if (this.panelContent === str && this.flyoutWidth !== 0) {
-            CurrentUserUtils.selectedPanel = "none";
             this.panelContent = "none";
             this.flyoutWidth = 0;
         } else {
-            this.panelContent = str;
-            CurrentUserUtils.selectedPanel = str;
-            switch (this.panelContent) {
-                case "Tools": this.sidebarContent.proto = CurrentUserUtils.toolsStack; break;
-                case "Workspace": this.sidebarContent.proto = CurrentUserUtils.workspaceStack; break;
-                case "Catalog": this.sidebarContent.proto = CurrentUserUtils.catalogStack; break;
-                case "Archive": this.sidebarContent.proto = CurrentUserUtils.closedStack; break;
-                case "Settings": this.sidebarContent.proto = SettingsManager.Instance.open(); break;
-                case "Sharing": this.sidebarContent.proto = GroupManager.Instance.open(); break;
+            let panelDoc: Doc | undefined;
+            switch (this.panelContent = str) {
+                case "Tools": panelDoc = CurrentUserUtils.toolsStack; break;
+                case "Workspace": panelDoc = CurrentUserUtils.workspaceStack; break;
+                case "Catalog": panelDoc = CurrentUserUtils.catalogStack; break;
+                case "Archive": panelDoc = CurrentUserUtils.closedStack; break;
+                case "Settings": SettingsManager.Instance.open(); break;
+                case "Sharing": GroupManager.Instance.open(); break;
             }
-            if (str === "Settings" || str === "Sharing" || str === "Help" || str === "Import") {
-                CurrentUserUtils.selectedPanel = "none";
-                this.panelContent = "none";
-                this.flyoutWidth = 0;
-            } else {
+            this.sidebarContent.proto = panelDoc;
+            if (panelDoc) {
                 MainView.expandFlyout();
-            }
+                button._backgroundColor = "lightgrey";
+                button.color = "black";
+                this._lastButton = button;
+            } else this.flyoutWidth = 0;
         }
         return true;
     }
@@ -640,6 +634,7 @@ export class MainView extends React.Component {
                     fieldKey={"data"}
                     dropAction={"alias"}
                     annotationsKey={""}
+                    backgroundColor={this.defaultBackgroundColors}
                     rootSelected={returnTrue}
                     bringToFront={emptyFunction}
                     select={emptyFunction}
diff --git a/src/client/views/collections/CollectionLinearView.tsx b/src/client/views/collections/CollectionLinearView.tsx
index 3b31947f7..a9e812ad3 100644
--- a/src/client/views/collections/CollectionLinearView.tsx
+++ b/src/client/views/collections/CollectionLinearView.tsx
@@ -161,7 +161,7 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
                                 PanelHeight={nested ? pair.layout[HeightSym] : () => this.dimension()}
                                 renderDepth={this.props.renderDepth + 1}
                                 focus={emptyFunction}
-                                backgroundColor={returnEmptyString}
+                                backgroundColor={this.props.backgroundColor}
                                 parentActive={returnTrue}
                                 whenActiveChanged={emptyFunction}
                                 bringToFront={emptyFunction}
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 59e6ac7ff..47ff9ec40 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -331,7 +331,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionMenuProp
                     <div className="collectionViewBaseChrome">
                         {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}
+                        {this.props.type === CollectionViewType.Docking || (this.isText && Doc.UserDoc().noviceMode) ? (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" />
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index c90e85271..3ebc6baca 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -185,13 +185,10 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?:
         @action
         protected onInternalDrop(e: Event, de: DragManager.DropEvent): boolean {
             const docDragData = de.complete.docDragData;
-            ScriptCast(this.props.Document.dropConverter)?.script.run({ dragData: docDragData });
             if (docDragData) {
                 let added = false;
-                const dropaction = docDragData.dropAction || docDragData.userDropAction;
-                if (dropaction && dropaction !== "move") {
-                    added = this.addDocument(docDragData.droppedDocuments);
-                } else if (docDragData.moveDocument) {
+                const dropAction = docDragData.dropAction || docDragData.userDropAction;
+                if ((!dropAction || dropAction === "move") && docDragData.moveDocument) {
                     const movedDocs = docDragData.droppedDocuments.filter((d, i) => docDragData.draggedDocuments[i] === d);
                     const addedDocs = docDragData.droppedDocuments.filter((d, i) => docDragData.draggedDocuments[i] !== d);
                     const res = addedDocs.length ? this.addDocument(addedDocs) : true;
@@ -201,6 +198,7 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?:
                         added = docDragData.moveDocument(movedDocs, this.props.Document, canAdd ? this.addDocument : returnFalse);
                     } else added = res;
                 } else {
+                    ScriptCast(this.props.Document.dropConverter)?.script.run({ dragData: docDragData });
                     added = this.addDocument(docDragData.droppedDocuments);
                 }
                 added && e.stopPropagation();
diff --git a/src/client/views/nodes/ContentFittingDocumentView.tsx b/src/client/views/nodes/ContentFittingDocumentView.tsx
index f7e253f42..6081def5d 100644
--- a/src/client/views/nodes/ContentFittingDocumentView.tsx
+++ b/src/client/views/nodes/ContentFittingDocumentView.tsx
@@ -78,9 +78,6 @@ export class ContentFittingDocumentView extends React.Component<DocumentViewProp
 
     render() {
         TraceMobx();
-        if (this.props.Document.title === "Archive") {
-            console.log("");
-        }
         return (<div className="contentFittingDocumentView" style={{
             width: Math.abs(this.centeringYOffset) > 0.001 ? "auto" : this.props.PanelWidth(),
             height: Math.abs(this.centeringOffset) > 0.0001 ? "auto" : this.props.PanelHeight(),
diff --git a/src/client/views/nodes/FontIconBox.scss b/src/client/views/nodes/FontIconBox.scss
index a142d873a..31bc471de 100644
--- a/src/client/views/nodes/FontIconBox.scss
+++ b/src/client/views/nodes/FontIconBox.scss
@@ -1,51 +1,46 @@
-.fontIconBox-outerDiv {
-    width: 100%;
-    height: 100%;
-    pointer-events: all;
-    touch-action: none;
-    border-radius: inherit;
-    background: black;
-    border-radius: 100%;
-    transform-origin: top left;
 
+
+.fontIconBox-label {
+    color: white;
+    margin-right: 4px;
+    margin-top: 1px;
+    position: relative;
+    text-align: center;
+    font-size: 7px;
+    letter-spacing: normal;
+    background-color: inherit;
+    border-radius: 8px;
+    margin-top: -8px;
+    padding: 0;
+     width: 100%;
+}
+
+.menuButton-round {
+    border-radius: 100%;
     .fontIconBox-label {
-        background: gray;
-        color: white;
-        border-radius: 8px;
-        width: 100%;
+        margin-left: -10px; // button padding is 10px;
+        bottom:0;
         position: absolute;
-        text-align: center;
-        font-size: 8px;
-        //margin-top:4px;
-        letter-spacing: normal;
-        left: 0;
-        overflow: hidden;
-    }
-
-    svg {
-        width: 95% !important;
-        height: 95%;
     }
 }
-
-.menuButton {
-    //padding: 7px;
-    padding-left: 5px;
-    width: 100%;
-    width: 60px;
-    height: 60px;
+.menuButton-square {
     padding-top: 3px;
     padding-bottom: 3px;
+    padding-left: 5px;
+    .fontIconBox-label {
+        border-radius: 0px;
+        margin-top: 0px;
+        border-radius: "inherit";
+    }
+}
+.menuButton, .menuButton-round, .menuButton-square{
+    width: 100%;
+    height:100%;
+    pointer-events: all;
+    touch-action: none;
 
     .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 {
@@ -54,24 +49,10 @@
         }
     }
 
-    .menuButton-label {
-        color: white;
-        margin-right: 4px;
-        border-radius: 8px;
-        width: 42px;
-        position: relative;
-        text-align: center;
-        font-size: 7px;
-        margin-top: 1px;
-        letter-spacing: normal;
-        padding: 3px;
-        background-color: inherit;
-    }
-
-    .menuButton-icon {
+    .menuButton-icon-square {
         width: auto;
         height: 32px;
-        padding: 5px;
+        padding: 4px;
     }
 
     svg {
diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx
index 7c538df92..98522b2dd 100644
--- a/src/client/views/nodes/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox.tsx
@@ -12,8 +12,6 @@ import { Doc } from '../../../fields/Doc';
 import { ContextMenu } from '../ContextMenu';
 import { ScriptField } from '../../../fields/ScriptField';
 import { Tooltip } from '@material-ui/core';
-import { createUnionOrIntersectionTypeNode } from 'typescript';
-import { CurrentUserUtils } from '../../util/CurrentUserUtils';
 const FontIconSchema = createSchema({
     icon: "string",
 });
@@ -61,48 +59,22 @@ export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>(
     }
 
     render() {
-
-        //style={{ backgroundColor: this.props.backgroundColor?.(this.props.Document) }}>
-
-        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" : "";
-            // }
-
-            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: 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>
+        const label = StrCast(this.rootDoc.label, StrCast(this.rootDoc.title));
+        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="lg" />}
+                    {!label ? (null) : <div className="fontIconBox-label" style={{ color, backgroundColor }}> {label} </div>}
                 </div>
-            </div>;
-
-            return menuBTN;
-        } else {
-            const referenceDoc = (this.layoutDoc.dragFactory instanceof Doc ? this.layoutDoc.dragFactory : this.layoutDoc);
-            const refLayout = Doc.Layout(referenceDoc);
-            const button = <button className="fontIconBox-outerDiv" ref={this._ref} onContextMenu={this.specificContextMenu}
-                style={{
-                    padding: Cast(this.layoutDoc._xPadding, "number", null),
-                    background: StrCast(refLayout._backgroundColor, StrCast(refLayout.backgroundColor)),
-                    boxShadow: this.layoutDoc.ischecked ? `4px 4px 12px black` : undefined
-                }}>
-                <FontAwesomeIcon className="fontIconBox-icon" icon={StrCast(this.dataDoc.icon, "user") as any} color={StrCast(this.layoutDoc.color, this._foregroundColor)} size="sm" />
-                {!this.rootDoc.title ? (null) : <div className="fontIconBox-label" style={{ width: this.rootDoc.label ? "max-content" : undefined }}> {StrCast(this.rootDoc.label, StrCast(this.rootDoc.title).substring(0, 6))} </div>}
-            </button>;
-            return !this.layoutDoc.toolTip ? button :
-                <Tooltip title={<div className="dash-tooltip">{StrCast(this.layoutDoc.toolTip)}</div>}>
-                    {button}
-                </Tooltip>;
-        }
-
+            </button>
+        </>;
+        return !this.layoutDoc.toolTip ? button :
+            <Tooltip title={<div className="dash-tooltip">{StrCast(this.layoutDoc.toolTip)}</div>}>
+                {button}
+            </Tooltip>;
     }
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 9d2204b09a88315f4bb294dce3043a87e14ae45f Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 3 Aug 2020 10:41:51 -0400
Subject: cleaned up currentUserUtils

---
 src/client/util/CurrentUserUtils.ts | 173 ++++++++++++------------------------
 src/client/views/MainView.tsx       |  20 ++---
 2 files changed, 63 insertions(+), 130 deletions(-)

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

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 5a5f6c1a2..cce853b2d 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -12,7 +12,7 @@ import { Cast, PromiseValue, StrCast, NumCast } from "../../fields/Types";
 import { nullAudio } from "../../fields/URLField";
 import { DragManager } from "./DragManager";
 import { Scripting } from "./Scripting";
-import { CollectionViewType } from "../views/collections/CollectionView";
+import { CollectionViewType, CollectionView } from "../views/collections/CollectionView";
 import { makeTemplate } from "./DropConverter";
 import { RichTextField } from "../../fields/RichTextField";
 import { PrefetchProxy } from "../../fields/Proxy";
@@ -38,16 +38,6 @@ export class CurrentUserUtils {
     @observable public static GuestWorkspace: Doc | undefined;
     @observable public static GuestMobile: Doc | undefined;
 
-    @observable public static toolsBtn: any | undefined;
-    @observable public static libraryBtn: any | undefined;
-    @observable public static searchBtn: any | undefined;
-
-    @observable public static toolsStack: Doc | undefined;
-    @observable public static workspaceStack: Doc | undefined;
-    @observable public static catalogStack: Doc | undefined;
-    @observable public static closedStack: Doc | undefined;
-    @observable public static searchStack: Doc | undefined;
-
     @observable public static propertiesWidth: number = 0;
 
     // sets up the default User Templates - slideView, queryView, descriptionView
@@ -516,6 +506,7 @@ export class CurrentUserUtils {
             { title: "Tools", icon: "wrench", click: 'scriptContext.selectMenu(self, "Tools")' },
             { title: "Help", icon: "question-circle", click: 'scriptContext.selectMenu(self, "Help")' },
             { title: "Settings", icon: "cog", click: 'scriptContext.selectMenu(self, "Settings")' },
+            { title: "User Doc", icon: "address-card", click: 'scriptContext.selectMenu(self, "UserDoc")' },
         ];
     }
 
@@ -533,6 +524,9 @@ export class CurrentUserUtils {
                 _height: 60,
                 onClick: ScriptField.MakeScript(click, { scriptContext: "any" }),
             }));
+            const userDoc = menuBtns[menuBtns.length - 1];
+            userDoc.target = doc;
+            userDoc.hidden = ComputedField.MakeFunction("self.target.noviceMode");
 
             doc.menuStack = new PrefetchProxy(Docs.Create.StackingDocument(menuBtns, {
                 title: "menuItemPanel",
@@ -645,10 +639,6 @@ export class CurrentUserUtils {
         return Cast(userDoc.thumbDoc, Doc);
     }
 
-    static setupLibrary(userDoc: Doc) {
-        return CurrentUserUtils.setupWorkspaces(userDoc);
-    }
-
     // setup the Creator button which will display the creator panel.  This panel will include the drag creators and the color picker.
     // when clicked, this panel will be displayed in the target container (ie, sidebarContainer)
     static async setupToolsBtnPanel(doc: Doc, sidebarContainer: Doc) {
@@ -672,29 +662,13 @@ export class CurrentUserUtils {
             doc.myColorPicker = new PrefetchProxy(color);
         }
 
-        if (doc["tabs-button-tools"] === undefined) {
+        if (doc["sidebar-tools"] === undefined) {
             const toolsStack = new PrefetchProxy(Docs.Create.StackingDocument([doc.myCreators as Doc, doc.myColorPicker as Doc], {
-                _width: 500, lockedPosition: true, _chromeStatus: "disabled", hideFilterView: true, title: "tools stack", forceActive: true
+                title: "sidebar-tools", _width: 500, lockedPosition: true, _chromeStatus: "disabled", hideFilterView: true, forceActive: true
             })) as any as Doc;
 
-            CurrentUserUtils.toolsStack = toolsStack;
-
-            doc["tabs-button-tools"] = new PrefetchProxy(Docs.Create.ButtonDocument({
-                _width: 35, _height: 25, title: "Tools", _fontSize: "10pt", color: "black",
-                letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)",
-                sourcePanel: toolsStack,
-                onDragStart: ScriptField.MakeFunction('getCopy(this.dragFactory, true)'),
-                dragFactory: toolsStack,
-                removeDropProperties: new List<string>(["lockedPosition"]),
-                stayInCollection: true,
-                hideFilterView: true,
-                targetContainer: new PrefetchProxy(sidebarContainer) as any as Doc,
-                onClick: ScriptField.MakeScript("this.targetContainer.proto = this.sourcePanel"),
-            }));
+            doc["sidebar-tools"] = toolsStack;
         }
-        (doc["tabs-button-tools"] as any as Doc).sourcePanel; // prefetch sourcePanel
-
-        return doc["tabs-button-tools"] as any as Doc;
     }
 
     static setupWorkspaces(doc: Doc) {
@@ -705,20 +679,21 @@ export class CurrentUserUtils {
                 title: "WORKSPACES", _height: 100, forceActive: true, boxShadow: "0 0", lockedPosition: true, treeViewOpen: true,
             }));
         }
-        const newWorkspace = ScriptField.MakeScript(`createNewWorkspace()`);
-        (doc.myWorkspaces as Doc).contextMenuScripts = new List<ScriptField>([newWorkspace!]);
-        (doc.myWorkspaces as Doc).contextMenuLabels = new List<string>(["Create New Workspace"]);
-
-        const workspaces = doc.myWorkspaces as Doc;
+        if (doc["sidebar-workspaces"] === undefined) {
+            const newWorkspace = ScriptField.MakeScript(`createNewWorkspace()`);
+            (doc.myWorkspaces as Doc).contextMenuScripts = new List<ScriptField>([newWorkspace!]);
+            (doc.myWorkspaces as Doc).contextMenuLabels = new List<string>(["Create New Workspace"]);
 
-        CurrentUserUtils.workspaceStack = new PrefetchProxy(Docs.Create.TreeDocument([workspaces], {
-            title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias",
-            treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, treeViewOpen: true,
-            lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same"
-        })) as any as Doc;
+            const workspaces = doc.myWorkspaces as Doc;
 
-        return doc.myWorkspaces as Doc;
+            doc["sidebar-workspaces"] = new PrefetchProxy(Docs.Create.TreeDocument([workspaces], {
+                treeViewHideTitle: true, _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias",
+                treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, treeViewOpen: true,
+                lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same"
+            })) as any as Doc;
+        }
     }
+
     static setupCatalog(doc: Doc) {
         doc.myCatalog === undefined;
         if (doc.myCatalog === undefined) {
@@ -728,15 +703,16 @@ export class CurrentUserUtils {
             }));
         }
 
-        const catalog = doc.myCatalog as Doc;
+        if (doc["sidebar-catalog"] === undefined) {
+            const catalog = doc.myCatalog as Doc;
 
-        CurrentUserUtils.catalogStack = new PrefetchProxy(Docs.Create.TreeDocument([catalog], {
-            title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias",
-            treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, treeViewOpen: true,
-            lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same"
-        })) as any as Doc;
-
-        return doc.myCatalog as Doc;
+            doc["sidebar-catalog"] = new PrefetchProxy(Docs.Create.TreeDocument([catalog], {
+                title: "sidebar-catalog",
+                treeViewHideTitle: true, _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias",
+                treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, treeViewOpen: true,
+                lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same"
+            })) as any as Doc;
+        }
     }
     static setupRecentlyClosed(doc: Doc) {
         // setup Recently Closed library item
@@ -748,90 +724,51 @@ export class CurrentUserUtils {
         }
         // this is equivalent to using PrefetchProxies to make sure the recentlyClosed doc is ready
         PromiseValue(Cast(doc.myRecentlyClosed, Doc)).then(recent => recent && PromiseValue(recent.data).then(DocListCast));
-        const clearAll = ScriptField.MakeScript(`self.data = new List([])`);
-        (doc.myRecentlyClosed as Doc).contextMenuScripts = new List<ScriptField>([clearAll!]);
-        (doc.myRecentlyClosed as Doc).contextMenuLabels = new List<string>(["Clear All"]);
+        if (doc["sidebar-recentlyClosed"] === undefined) {
+            const clearAll = ScriptField.MakeScript(`self.data = new List([])`);
+            (doc.myRecentlyClosed as Doc).contextMenuScripts = new List<ScriptField>([clearAll!]);
+            (doc.myRecentlyClosed as Doc).contextMenuLabels = new List<string>(["Clear All"]);
 
-        const recentlyClosed = doc.myRecentlyClosed as Doc;
+            const recentlyClosed = doc.myRecentlyClosed as Doc;
 
-        CurrentUserUtils.closedStack = new PrefetchProxy(Docs.Create.TreeDocument([recentlyClosed], {
-            title: " ", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias",
-            treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, treeViewOpen: true,
-            lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same"
-        })) as any as Doc;
-
-        return doc.myRecentlyClosed as Doc;
-    }
-    // setup the Library button which will display the library panel.  This panel includes a collection of workspaces, documents, and recently closed views
-    static setupLibraryPanel(doc: Doc, sidebarContainer: Doc) {
-        const workspaces = CurrentUserUtils.setupWorkspaces(doc);
-        const documents = CurrentUserUtils.setupCatalog(doc);
-        const recentlyClosed = CurrentUserUtils.setupRecentlyClosed(doc);
-
-        if (doc["tabs-button-library"] === undefined) {
-            const libraryStack = new PrefetchProxy(Docs.Create.TreeDocument([workspaces, documents, recentlyClosed, doc], {
-                title: "Library", _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias",
-                treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false,
+            doc["sidebar-recentlyClosed"] = new PrefetchProxy(Docs.Create.TreeDocument([recentlyClosed], {
+                title: "sidebar-recentlyClosed",
+                treeViewHideTitle: true, _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, childDropAction: "alias",
+                treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false, treeViewOpen: true,
                 lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same"
             })) as any as Doc;
-            doc["tabs-button-library"] = new PrefetchProxy(Docs.Create.ButtonDocument({
-                _width: 50, _height: 25, title: "Library", _fontSize: "10pt", targetDropAction: "same", color: "black",
-                letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)",
-                sourcePanel: libraryStack,
-                onDragStart: ScriptField.MakeFunction('getCopy(this.dragFactory, true)'),
-                dragFactory: libraryStack,
-                removeDropProperties: new List<string>(["lockedPosition"]),
-                stayInCollection: true,
-                targetContainer: new PrefetchProxy(sidebarContainer) as any as Doc,
-                onClick: ScriptField.MakeScript("this.targetContainer.proto = this.sourcePanel")
-            }));
         }
-        return doc["tabs-button-library"] as Doc;
     }
-
-    // setup the Search button which will display the search panel.
-    static setupSearchBtnPanel(doc: Doc, sidebarContainer: Doc) {
-        doc["tabs-button-search"] = undefined;
-        if (doc["tabs-button-search"] === undefined) {
-            doc["tabs-button-search"] = new PrefetchProxy(Docs.Create.ButtonDocument({
-                _width: 50, _height: 25, title: "Search", _fontSize: "10pt", color: "black",
-                letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)",
-                sourcePanel: new PrefetchProxy(Docs.Create.QueryDocument({ title: "search stack", })) as any as Doc,
-                searchFileTypes: new List<string>([DocumentType.RTF, DocumentType.IMG, DocumentType.PDF, DocumentType.VID, DocumentType.WEB, DocumentType.SCRIPTING]),
-                targetContainer: new PrefetchProxy(sidebarContainer) as any as Doc,
-                lockedPosition: true,
-                onClick: ScriptField.MakeScript("this.targetContainer.proto = this.sourcePanel")
-            }));
-            CurrentUserUtils.searchStack = new PrefetchProxy(Docs.Create.QueryDocument({ title: "search stack", })) as any as Doc;
+    static setupUserDoc(doc: Doc) {
+        if (doc["sidebar-userDoc"] === undefined) {
+            doc.treeViewOpen = true;
+            doc.treeViewExpandedView = "fields";
+            doc["sidebar-userDoc"] = new PrefetchProxy(Docs.Create.TreeDocument([doc], {
+                treeViewHideTitle: true, _xMargin: 5, _yMargin: 5, _gridGap: 5, forceActive: true, title: "sidebar-userDoc",
+                treeViewTruncateTitleWidth: 150, hideFilterView: true, treeViewPreventOpen: false,
+                lockedPosition: true, boxShadow: "0 0", dontRegisterChildViews: true, targetDropAction: "same"
+            })) as any as Doc;
         }
-        return doc["tabs-button-search"] as any as Doc;
     }
 
     static setupSidebarContainer(doc: Doc) {
-        if (doc["tabs-panelContainer"] === undefined) {
+        if (doc["sidebar"] === undefined) {
             const sidebarContainer = new Doc();
             sidebarContainer._chromeStatus = "disabled";
             sidebarContainer.onClick = ScriptField.MakeScript("freezeSidebar()");
-            doc["tabs-panelContainer"] = new PrefetchProxy(sidebarContainer);
+            doc["sidebar"] = new PrefetchProxy(sidebarContainer);
         }
-        return doc["tabs-panelContainer"] as Doc;
+        return doc["sidebar"] as Doc;
     }
 
     // setup the list of sidebar mode buttons which determine what is displayed in the sidebar
     static async setupSidebarButtons(doc: Doc) {
         const sidebarContainer = CurrentUserUtils.setupSidebarContainer(doc);
-        CurrentUserUtils.toolsBtn = await CurrentUserUtils.setupToolsBtnPanel(doc, sidebarContainer);
-        CurrentUserUtils.libraryBtn = CurrentUserUtils.setupLibraryPanel(doc, sidebarContainer);
-        CurrentUserUtils.searchBtn = CurrentUserUtils.setupSearchBtnPanel(doc, sidebarContainer);
-
-        // Finally, setup the list of buttons to display in the sidebar
-        if (doc["tabs-buttons"] === undefined) {
-            doc["tabs-buttons"] = new PrefetchProxy(Docs.Create.StackingDocument([CurrentUserUtils.libraryBtn, CurrentUserUtils.searchBtn, CurrentUserUtils.toolsBtn], {
-                _width: 500, _height: 80, boxShadow: "0 0", _pivotField: "title", _columnsHideIfEmpty: true, ignoreClick: true, _chromeStatus: "view-mode",
-                title: "sidebar btn row stack", backgroundColor: "dimGray",
-            }));
-            (CurrentUserUtils.toolsBtn.onClick as ScriptField).script.run({ this: CurrentUserUtils.toolsBtn });
-        }
+        await CurrentUserUtils.setupToolsBtnPanel(doc, sidebarContainer);
+        CurrentUserUtils.setupWorkspaces(doc);
+        CurrentUserUtils.setupCatalog(doc);
+        CurrentUserUtils.setupRecentlyClosed(doc);
+        CurrentUserUtils.setupUserDoc(doc);
     }
 
     static blist = (opts: DocumentOptions, docs: Doc[]) => new PrefetchProxy(Docs.Create.LinearDocument(docs, {
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 350be7fbf..a5dbc0627 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -79,9 +79,8 @@ export class MainView extends React.Component {
     @computed private get userDoc() { return Doc.UserDoc(); }
     @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeWorkspace, Doc)) : CurrentUserUtils.GuestWorkspace; }
     @computed public get mainFreeform(): Opt<Doc> { return (docs => (docs && docs.length > 1) ? docs[1] : undefined)(DocListCast(this.mainContainer!.data)); }
-    @computed public get sidebarButtonsDoc() { return Cast(this.userDoc["tabs-buttons"], Doc) as Doc; }
 
-    @observable public sidebarContent: any = this.userDoc?.["tabs-panelContainer"];
+    @observable public sidebarContent: any = this.userDoc?.["sidebar"];
     @observable public panelContent: string = "none";
     @observable public showProperties: boolean = false;
     public isPointerDown = false;
@@ -389,12 +388,8 @@ export class MainView extends React.Component {
         if (this._flyoutTranslate) {
             setupMoveUpEvents(this, e, action((e: PointerEvent) => {
                 this.flyoutWidth = Math.max(e.clientX, 0);
-                this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30;
                 return false;
-            }), emptyFunction, action(() => {
-                this.flyoutWidth = this.flyoutWidth < 15 ? 250 : 0;
-                this.flyoutWidth && (this.sidebarButtonsDoc._columnWidth = this.flyoutWidth / 3 - 30);
-            }));
+            }), emptyFunction, action(() => this.flyoutWidth = this.flyoutWidth < 15 ? 250 : 0));
         }
     }
 
@@ -503,12 +498,13 @@ export class MainView extends React.Component {
         } else {
             let panelDoc: Doc | undefined;
             switch (this.panelContent = str) {
-                case "Tools": panelDoc = CurrentUserUtils.toolsStack; break;
-                case "Workspace": panelDoc = CurrentUserUtils.workspaceStack; break;
-                case "Catalog": panelDoc = CurrentUserUtils.catalogStack; break;
-                case "Archive": panelDoc = CurrentUserUtils.closedStack; break;
+                case "Tools": panelDoc = Doc.UserDoc()["sidebar-tools"] as Doc ?? undefined; break;
+                case "Workspace": panelDoc = Doc.UserDoc()["sidebar-workspaces"] as Doc ?? undefined; break;
+                case "Catalog": panelDoc = Doc.UserDoc()["sidebar-catalog"] as Doc ?? undefined; break;
+                case "Archive": panelDoc = Doc.UserDoc()["sidebar-recentlyClosed"] as Doc ?? undefined; break;
                 case "Settings": SettingsManager.Instance.open(); break;
                 case "Sharing": GroupManager.Instance.open(); break;
+                case "UserDoc": panelDoc = Doc.UserDoc()["sidebar-userDoc"] as Doc ?? undefined; break;
             }
             this.sidebarContent.proto = panelDoc;
             if (panelDoc) {
@@ -607,7 +603,7 @@ export class MainView extends React.Component {
     public static expandFlyout = action(() => {
         MainView.Instance._flyoutTranslate = true;
         MainView.Instance.flyoutWidth = (MainView.Instance.flyoutWidth || 250);
-        MainView.Instance.sidebarButtonsDoc._columnWidth = MainView.Instance.flyoutWidth / 3 - 30;
+
     });
 
     @computed get expandButton() {
-- 
cgit v1.2.3-70-g09d2


From 4df8465c58542064ea29bb1047e9477d2f7b048a Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 3 Aug 2020 11:28:51 -0400
Subject: from last

---
 src/client/views/MainView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index a5dbc0627..1589ac7e0 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -445,7 +445,7 @@ export class MainView extends React.Component {
     }
 
     @computed get menuPanel() {
-        setTimeout(() => DocListCast((Doc.UserDoc().menuStack as Doc).data).forEach(action(doc => { doc.color = "white"; doc._backgroundColor = ""; })), 0);
+        setTimeout(() => DocListCast((Doc.UserDoc().menuStack as Doc).data).forEach(action(doc => { doc.color = "white"; doc._backgroundColor = ""; })), 1000);
         return <div className="mainView-menuPanel">
             <DocumentView
                 Document={Doc.UserDoc().menuStack as Doc}
-- 
cgit v1.2.3-70-g09d2


From 4758868d0d24f91f95c9396a4135fb6319814aca Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 3 Aug 2020 11:42:34 -0400
Subject: fix for resetting sidebar buttons on load

---
 src/client/util/CurrentUserUtils.ts | 33 +++++++++++++++++++++------------
 src/client/views/MainView.tsx       |  1 -
 2 files changed, 21 insertions(+), 13 deletions(-)

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

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index cce853b2d..a99d9451b 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -512,18 +512,18 @@ export class CurrentUserUtils {
 
     static setupMenuPanel(doc: Doc) {
         if (doc.menuStack === undefined) {
-            const buttons = CurrentUserUtils.menuBtnDescriptions();
-            const menuBtns = buttons.map(({ title, icon, click }) => Docs.Create.FontIconDocument({
-                icon,
-                iconShape: "square",
-                title,
-                _backgroundColor: "black",
-                stayInCollection: true,
-                childDropAction: "same",
-                _width: 60,
-                _height: 60,
-                onClick: ScriptField.MakeScript(click, { scriptContext: "any" }),
-            }));
+            const menuBtns = CurrentUserUtils.menuBtnDescriptions().map(({ title, icon, click }) =>
+                Docs.Create.FontIconDocument({
+                    icon,
+                    iconShape: "square",
+                    title,
+                    _backgroundColor: "black",
+                    stayInCollection: true,
+                    childDropAction: "same",
+                    _width: 60,
+                    _height: 60,
+                    onClick: ScriptField.MakeScript(click, { scriptContext: "any" }),
+                }));
             const userDoc = menuBtns[menuBtns.length - 1];
             userDoc.target = doc;
             userDoc.hidden = ComputedField.MakeFunction("self.target.noviceMode");
@@ -537,6 +537,15 @@ export class CurrentUserUtils {
                 _yPadding: 0, _xMargin: 0, _autoHeight: false, _width: 60, _columnWidth: 60, lockedPosition: true, _chromeStatus: "disabled",
             }));
         }
+        // this resets all sidebar buttons to being deactivated
+        PromiseValue(Cast(doc.menuStack, Doc)).then(stack => {
+            stack && PromiseValue(stack.data).then(btns => {
+                DocListCastAsync(btns).then(bts => bts?.forEach(btn => {
+                    btn.color = "white";
+                    btn._backgroundColor = "";
+                }));
+            })
+        });
         return doc.menuStack as Doc;
     }
 
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 1589ac7e0..0bfbc41ca 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -445,7 +445,6 @@ export class MainView extends React.Component {
     }
 
     @computed get menuPanel() {
-        setTimeout(() => DocListCast((Doc.UserDoc().menuStack as Doc).data).forEach(action(doc => { doc.color = "white"; doc._backgroundColor = ""; })), 1000);
         return <div className="mainView-menuPanel">
             <DocumentView
                 Document={Doc.UserDoc().menuStack as Doc}
-- 
cgit v1.2.3-70-g09d2


From 19f963aef35237245418f94595ca519d254bcffe Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Mon, 3 Aug 2020 11:03:43 -0500
Subject: minor tweeks

---
 src/client/views/MainView.tsx          |  2 ++
 src/client/views/nodes/FontIconBox.tsx | 11 ++++++-----
 2 files changed, 8 insertions(+), 5 deletions(-)

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

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index a5dbc0627..d17b0bd32 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -481,6 +481,8 @@ export class MainView extends React.Component {
 
     @action @undoBatch
     closeFlyout = () => {
+        // this._lastButton && (this._lastButton.color = "white");
+        // this._lastButton && (this._lastButton._backgroundColor = "");
         this.panelContent = "none";
         this.flyoutWidth = 0;
     }
diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx
index 2f540e62a..3561d22b6 100644
--- a/src/client/views/nodes/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox.tsx
@@ -12,6 +12,7 @@ import { Doc } from '../../../fields/Doc';
 import { ContextMenu } from '../ContextMenu';
 import { ScriptField } from '../../../fields/ScriptField';
 import { Tooltip } from '@material-ui/core';
+import { CurrentUserUtils } from '../../util/CurrentUserUtils';
 const FontIconSchema = createSchema({
     icon: "string",
 });
@@ -65,11 +66,11 @@ export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>(
         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="lg" />}
-                    {!label ? (null) : <div className="fontIconBox-label" style={{ color, backgroundColor }}> {label} </div>}
-                </div>
+                style={{ boxShadow: this.layoutDoc.ischecked ? `4px 4px 12px black` : undefined, }}>
+                {<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>}
             </button>
         </>;
         return !this.layoutDoc.toolTip ? button :
-- 
cgit v1.2.3-70-g09d2


From a63200e21d6304ef347a5a123839cd06ac04ec72 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Mon, 3 Aug 2020 12:28:25 -0500
Subject: menu button fix and link greyed out

---
 src/client/views/DocumentButtonBar.tsx         |  4 ++--
 src/client/views/MainView.tsx                  | 22 ++++++++++++++++++----
 src/client/views/nodes/DocumentLinksButton.tsx | 18 ++++++++++++------
 src/client/views/nodes/FontIconBox.scss        | 24 ++++++++++++++----------
 src/client/views/nodes/FontIconBox.tsx         | 12 ++++++------
 5 files changed, 52 insertions(+), 28 deletions(-)

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

diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index 23a3e1684..c9f380737 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -278,9 +278,9 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
             <div className="documentButtonBar-button">
                 <DocumentLinksButton links={this.view0.allLinks} View={this.view0} AlwaysOn={true} InMenu={true} StartLink={true} />
             </div>
-            {DocumentLinksButton.StartLink ? <div className="documentButtonBar-button">
+            <div className="documentButtonBar-button">
                 <DocumentLinksButton links={this.view0.allLinks} View={this.view0} AlwaysOn={true} InMenu={true} StartLink={false} />
-            </div> : null}
+            </div>
             {/* <div className="documentButtonBar-button">
                 {this.templateButton}
             </div>
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 09980ce97..8ee34a4b0 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -384,12 +384,26 @@ export class MainView extends React.Component {
 
     @action
     onFlyoutPointerDown = (e: React.PointerEvent) => {
-        this.panelContent = "none";
         if (this._flyoutTranslate) {
             setupMoveUpEvents(this, e, action((e: PointerEvent) => {
                 this.flyoutWidth = Math.max(e.clientX, 0);
+                if (this.flyoutWidth < 5) {
+                    this.panelContent = "none";
+                    this._lastButton && (this._lastButton.color = "white");
+                    this._lastButton && (this._lastButton._backgroundColor = "");
+                }
                 return false;
-            }), emptyFunction, action(() => this.flyoutWidth = this.flyoutWidth < 15 ? 250 : 0));
+            }), emptyFunction, this.openCloseFlyout);
+        }
+    }
+
+    @action
+    openCloseFlyout = () => {
+        this.flyoutWidth = this.flyoutWidth < 15 ? 250 : 0;
+        if (this.flyoutWidth < 15) {
+            this.panelContent = "none";
+            this._lastButton && (this._lastButton.color = "white");
+            this._lastButton && (this._lastButton._backgroundColor = "");
         }
     }
 
@@ -480,8 +494,8 @@ export class MainView extends React.Component {
 
     @action @undoBatch
     closeFlyout = () => {
-        // this._lastButton && (this._lastButton.color = "white");
-        // this._lastButton && (this._lastButton._backgroundColor = "");
+        this._lastButton && (this._lastButton.color = "white");
+        this._lastButton && (this._lastButton._backgroundColor = "");
         this.panelContent = "none";
         this.flyoutWidth = 0;
     }
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index 9395ac961..31efaaaa6 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -4,7 +4,7 @@ import { action, computed, observable, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import { Doc } from "../../../fields/Doc";
 import { TraceMobx } from "../../../fields/util";
-import { emptyFunction, returnFalse, setupMoveUpEvents } from "../../../Utils";
+import { emptyFunction, returnFalse, setupMoveUpEvents, emptyPath } from "../../../Utils";
 import { DocUtils } from "../../documents/Documents";
 import { DragManager } from "../../util/DragManager";
 import { LinkManager } from "../../util/LinkManager";
@@ -202,9 +202,15 @@ 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"}
-                style={{ width: this.props.InMenu ? "20px" : "30px", height: this.props.InMenu ? "20px" : "30px" }}
-                onPointerDown={this.completeLink} onClick={e => this.finishLinkClick(e.screenX, e.screenY)} /> : (null)}
+            {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",
+                        border: DocumentLinksButton.StartLink ? "" : "none"
+                    }}
+                    onPointerDown={DocumentLinksButton.StartLink ? this.completeLink : emptyFunction}
+                    onClick={e => DocumentLinksButton.StartLink ? this.finishLinkClick(e.screenX, e.screenY) : emptyFunction} /> : (null)}
             {DocumentLinksButton.StartLink === this.props.View && this.props.InMenu && this.props.StartLink ? <div className={"documentLinksButton-startLink"}
                 style={{ width: this.props.InMenu ? "20px" : "30px", height: this.props.InMenu ? "20px" : "30px" }}
                 onPointerDown={this.clearLinks} onClick={this.clearLinks}
@@ -212,10 +218,10 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
         </div>;
 
         return (!links.length) && !this.props.AlwaysOn ? (null) :
-            this.props.InMenu ?
+            this.props.InMenu && (this.props.StartLink || DocumentLinksButton.StartLink) ?
                 <Tooltip title={<><div className="dash-tooltip">{title}</div></>}>
                     {linkButton}
-                </Tooltip> : !!!DocumentLinksButton.EditLink ?
+                </Tooltip> : !!!DocumentLinksButton.EditLink && !this.props.InMenu ?
                     <Tooltip title={<><div className="dash-tooltip">{title}</div></>}>
                         {linkButton}
                     </Tooltip> :
diff --git a/src/client/views/nodes/FontIconBox.scss b/src/client/views/nodes/FontIconBox.scss
index 31bc471de..5bdafd857 100644
--- a/src/client/views/nodes/FontIconBox.scss
+++ b/src/client/views/nodes/FontIconBox.scss
@@ -1,5 +1,3 @@
-
-
 .fontIconBox-label {
     color: white;
     margin-right: 4px;
@@ -12,30 +10,36 @@
     border-radius: 8px;
     margin-top: -8px;
     padding: 0;
-     width: 100%;
+    width: 100%;
 }
 
 .menuButton-round {
     border-radius: 100%;
+
     .fontIconBox-label {
         margin-left: -10px; // button padding is 10px;
-        bottom:0;
+        bottom: 0;
         position: absolute;
     }
 }
+
 .menuButton-square {
     padding-top: 3px;
     padding-bottom: 3px;
     padding-left: 5px;
+
     .fontIconBox-label {
         border-radius: 0px;
         margin-top: 0px;
         border-radius: "inherit";
     }
 }
-.menuButton, .menuButton-round, .menuButton-square{
+
+.menuButton,
+.menuButton-round,
+.menuButton-square {
     width: 100%;
-    height:100%;
+    height: 100%;
     pointer-events: all;
     touch-action: none;
 
@@ -43,10 +47,10 @@
         touch-action: none;
         border-radius: 8px;
 
-        &:hover {
-            background: rgb(61, 61, 61);
-            cursor: pointer;
-        }
+        // &:hover {
+        //     background: rgb(61, 61, 61);
+        //     cursor: pointer;
+        // }
     }
 
     .menuButton-icon-square {
diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx
index 3561d22b6..eff5a4160 100644
--- a/src/client/views/nodes/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox.tsx
@@ -12,7 +12,6 @@ import { Doc } from '../../../fields/Doc';
 import { ContextMenu } from '../ContextMenu';
 import { ScriptField } from '../../../fields/ScriptField';
 import { Tooltip } from '@material-ui/core';
-import { CurrentUserUtils } from '../../util/CurrentUserUtils';
 const FontIconSchema = createSchema({
     icon: "string",
 });
@@ -66,11 +65,12 @@ export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>(
         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, }}>
-                {<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>}
+                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>
         </>;
         return !this.layoutDoc.toolTip ? button :
-- 
cgit v1.2.3-70-g09d2


From 3dc66a77097b0ee3ea9aa1d29b9a3a63667ed3b3 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 3 Aug 2020 13:37:24 -0400
Subject: fixes for flyouts and button colors.

---
 src/client/views/MainView.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

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

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 09980ce97..47bccce43 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -150,7 +150,7 @@ export class MainView extends React.Component {
                 if (type === "doc") {
                     CurrentUserUtils.MainDocId = pathname[1];
                     if (!this.userDoc) {
-                        runInAction(() => this.flyoutWidth = 0);
+                        runInAction(() => this.closeFlyout());
                         DocServer.GetRefField(CurrentUserUtils.MainDocId).then(action((field: Opt<Field>) =>
                             field instanceof Doc && (CurrentUserUtils.GuestTarget = field)));
                     }
@@ -389,7 +389,10 @@ export class MainView extends React.Component {
             setupMoveUpEvents(this, e, action((e: PointerEvent) => {
                 this.flyoutWidth = Math.max(e.clientX, 0);
                 return false;
-            }), emptyFunction, action(() => this.flyoutWidth = this.flyoutWidth < 15 ? 250 : 0));
+            }), emptyFunction, action(() => {
+                if (this.flyoutWidth < 15) MainView.expandFlyout();
+                else this.closeFlyout();
+            }));
         }
     }
 
@@ -480,8 +483,8 @@ export class MainView extends React.Component {
 
     @action @undoBatch
     closeFlyout = () => {
-        // this._lastButton && (this._lastButton.color = "white");
-        // this._lastButton && (this._lastButton._backgroundColor = "");
+        this._lastButton && (this._lastButton.color = "white");
+        this._lastButton && (this._lastButton._backgroundColor = "");
         this.panelContent = "none";
         this.flyoutWidth = 0;
     }
-- 
cgit v1.2.3-70-g09d2


From 061a5a676ad9ebd821b2ba17d28fef54d8a773d0 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 3 Aug 2020 15:44:39 -0400
Subject: added sharing panel

---
 package.json                         |  2 +-
 src/client/util/CurrentUserUtils.ts  |  6 +++---
 src/client/util/GroupManager.tsx     |  2 +-
 src/client/util/SharingManager.tsx   |  4 ++--
 src/client/views/MainView.tsx        |  9 +++++----
 src/client/views/MainViewNotifs.scss |  2 ++
 src/client/views/MainViewNotifs.tsx  | 29 +++++++++++++++++------------
 src/mobile/AudioUpload.tsx           |  2 +-
 src/mobile/MobileInterface.tsx       |  8 ++++----
 9 files changed, 36 insertions(+), 28 deletions(-)

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

diff --git a/package.json b/package.json
index ddf4c3b24..0a3a63ec3 100644
--- a/package.json
+++ b/package.json
@@ -254,4 +254,4 @@
         "xoauth2": "^1.2.0",
         "xregexp": "^4.3.0"
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index a99d9451b..4b823231e 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -498,11 +498,11 @@ export class CurrentUserUtils {
         title: string, icon: string, click: string,
     }[] {
         return [
+            { title: "Sharing", icon: "users", click: 'scriptContext.selectMenu(self, "Sharing")' },
             { title: "Workspace", icon: "desktop", click: 'scriptContext.selectMenu(self, "Workspace")' },
             { title: "Catalog", icon: "file", click: 'scriptContext.selectMenu(self, "Catalog")' },
             { title: "Archive", icon: "archive", click: 'scriptContext.selectMenu(self, "Archive")' },
             { title: "Import", icon: "upload", click: 'scriptContext.selectMenu(self, "Import")' },
-            { title: "Sharing", icon: "users", click: 'scriptContext.selectMenu(self, "Sharing")' },
             { title: "Tools", icon: "wrench", click: 'scriptContext.selectMenu(self, "Tools")' },
             { title: "Help", icon: "question-circle", click: 'scriptContext.selectMenu(self, "Help")' },
             { title: "Settings", icon: "cog", click: 'scriptContext.selectMenu(self, "Settings")' },
@@ -821,8 +821,8 @@ export class CurrentUserUtils {
 
     // Right sidebar is where mobile uploads are contained
     static setupRightSidebar(doc: Doc) {
-        if (doc.rightSidebarCollection === undefined) {
-            doc.rightSidebarCollection = new PrefetchProxy(Docs.Create.StackingDocument([], { title: "Mobile Uploads" }));
+        if (doc["sidebar-sharing"] === undefined) {
+            doc["sidebar-sharing"] = new PrefetchProxy(Docs.Create.StackingDocument([], { title: "Mobile Uploads" }));
         }
     }
 
diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx
index 5215ea35f..229a846a9 100644
--- a/src/client/util/GroupManager.tsx
+++ b/src/client/util/GroupManager.tsx
@@ -68,7 +68,7 @@ export default class GroupManager extends React.Component<{}> {
         const evaluating = raw.map(async user => {
             const userDocument = await DocServer.GetRefField(user.userDocumentId);
             if (userDocument instanceof Doc) {
-                const notificationDoc = await Cast(userDocument.rightSidebarCollection, Doc);
+                const notificationDoc = await Cast(userDocument["sidebar-sharing"], Doc);
                 runInAction(() => {
                     if (notificationDoc instanceof Doc) {
                         this.users.push(user.email);
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index 7a0fe4140..9d91ce1ba 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -114,7 +114,7 @@ export default class SharingManager extends React.Component<{}> {
     }
 
     /**
-     * Populates the list of validated users (this.users) by adding registered users which have a rightSidebarCollection.
+     * Populates the list of validated users (this.users) by adding registered users which have a sidebar-sharing.
      */
     populateUsers = async () => {
         runInAction(() => this.users = []);
@@ -125,7 +125,7 @@ export default class SharingManager extends React.Component<{}> {
             if (isCandidate) {
                 const userDocument = await DocServer.GetRefField(user.userDocumentId);
                 if (userDocument instanceof Doc) {
-                    const notificationDoc = await Cast(userDocument.rightSidebarCollection, Doc);
+                    const notificationDoc = await Cast(userDocument["sidebar-sharing"], Doc);
                     runInAction(() => {
                         if (notificationDoc instanceof Doc) {
                             this.users.push({ user, notificationDoc });
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index ca5154ef7..66545ea1f 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -288,7 +288,7 @@ export class MainView extends React.Component {
         }
         // if there is a pending doc, and it has new data, show it (syip: we use a timeout to prevent collection docking view from being uninitialized)
         setTimeout(async () => {
-            const col = this.userDoc && await Cast(this.userDoc.rightSidebarCollection, Doc);
+            const col = this.userDoc && await Cast(this.userDoc["sidebar-sharing"], Doc);
             col && Cast(col.data, listSpec(Doc)) && runInAction(() => MainViewNotifs.NotifsCol = col);
         }, 100);
         return true;
@@ -511,7 +511,7 @@ export class MainView extends React.Component {
                 case "Catalog": panelDoc = Doc.UserDoc()["sidebar-catalog"] as Doc ?? undefined; break;
                 case "Archive": panelDoc = Doc.UserDoc()["sidebar-recentlyClosed"] as Doc ?? undefined; break;
                 case "Settings": SettingsManager.Instance.open(); break;
-                case "Sharing": GroupManager.Instance.open(); break;
+                case "Sharing": panelDoc = Doc.UserDoc()["sidebar-sharing"] as Doc ?? undefined; break;
                 case "UserDoc": panelDoc = Doc.UserDoc()["sidebar-userDoc"] as Doc ?? undefined; break;
             }
             this.sidebarContent.proto = panelDoc;
@@ -561,7 +561,8 @@ 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" /> </div>
+                            <FontAwesomeIcon icon="chevron-left" color="black" size="sm" />
+                        </div>
                     </div> : null}
                     <div className="mainView-libraryFlyout" style={{
                         //transformOrigin: this._flyoutTranslate ? "" : "left center",
@@ -574,6 +575,7 @@ export class MainView extends React.Component {
                     </div>
                 </div>
                 {this.dockingContent}
+                <MainViewNotifs />
                 {this.showProperties ? (null) :
                     <div className="mainView-propertiesDragger" title="Properties View Dragger" onPointerDown={this.onPropertiesPointerDown}
                         style={{ right: rightFlyout, top: "50%" }}>
@@ -632,7 +634,6 @@ export class MainView extends React.Component {
         if (dockedBtns instanceof Doc) {
             return <div className="mainView-docButtons" ref={this._docBtnRef}
                 style={{ height: !dockedBtns.linearViewIsExpanded ? "42px" : undefined }} >
-                <MainViewNotifs />
                 <CollectionLinearView
                     Document={dockedBtns}
                     DataDoc={undefined}
diff --git a/src/client/views/MainViewNotifs.scss b/src/client/views/MainViewNotifs.scss
index 25ec95643..92d7d6ee3 100644
--- a/src/client/views/MainViewNotifs.scss
+++ b/src/client/views/MainViewNotifs.scss
@@ -1,5 +1,7 @@
 .mainNotifs-container {
     position:absolute;
+    z-index: 1000;
+    top: 12px;
 
     .mainNotifs-badge {
         position: absolute;
diff --git a/src/client/views/MainViewNotifs.tsx b/src/client/views/MainViewNotifs.tsx
index 05f890485..ce47e1cf1 100644
--- a/src/client/views/MainViewNotifs.tsx
+++ b/src/client/views/MainViewNotifs.tsx
@@ -3,28 +3,33 @@ import { observer } from 'mobx-react';
 import "normalize.css";
 import * as React from 'react';
 import { Doc, DocListCast, Opt } from '../../fields/Doc';
-import { emptyFunction } from '../../Utils';
-import { SetupDrag } from '../util/DragManager';
+import { emptyFunction, returnFalse, setupMoveUpEvents } from '../../Utils';
+import { SetupDrag, DragManager } from '../util/DragManager';
 import "./MainViewNotifs.scss";
-import { CollectionDockingView } from './collections/CollectionDockingView';
+import { MainView } from './MainView';
 
 
 @observer
 export class MainViewNotifs extends React.Component {
-
     @observable static NotifsCol: Opt<Doc>;
-    openNotifsCol = () => {
-        if (MainViewNotifs.NotifsCol) {
-            CollectionDockingView.AddRightSplit(MainViewNotifs.NotifsCol);
-        }
+    _notifsRef = React.createRef<HTMLDivElement>();
+
+    onPointerDown = (e: React.PointerEvent) => {
+        setupMoveUpEvents(this, e,
+            (e: PointerEvent) => {
+                const dragData = new DragManager.DocumentDragData([MainViewNotifs.NotifsCol!]);
+                DragManager.StartDocumentDrag([this._notifsRef.current!], dragData, e.x, e.y);
+                return true;
+            },
+            returnFalse,
+            () => MainViewNotifs.NotifsCol && MainView.Instance.selectMenu(MainViewNotifs.NotifsCol, "Sharing"));
     }
+
     render() {
         const length = MainViewNotifs.NotifsCol ? DocListCast(MainViewNotifs.NotifsCol.data).length : 0;
-        const notifsRef = React.createRef<HTMLDivElement>();
-        const dragNotifs = action(() => MainViewNotifs.NotifsCol!);
-        return <div className="mainNotifs-container" ref={notifsRef}>
+        return <div className="mainNotifs-container" style={{ width: 15, height: 15 }} ref={this._notifsRef}>
             <button className="mainNotifs-badge" style={length > 0 ? { "display": "initial" } : { "display": "none" }}
-                onClick={this.openNotifsCol} onPointerDown={MainViewNotifs.NotifsCol ? SetupDrag(notifsRef, dragNotifs) : emptyFunction}>
+                onPointerDown={this.onPointerDown} >
                 {length}
             </button>
         </div>;
diff --git a/src/mobile/AudioUpload.tsx b/src/mobile/AudioUpload.tsx
index b75102e43..8ae504f1b 100644
--- a/src/mobile/AudioUpload.tsx
+++ b/src/mobile/AudioUpload.tsx
@@ -53,7 +53,7 @@ export class AudioUpload extends React.Component {
      * Pushing the audio doc onto Dash Web through the right side bar
      */
     uploadAudio = () => {
-        const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc;
+        const audioRightSidebar = Cast(Doc.UserDoc()["sidebar-sharing"], Doc) as Doc;
         const audioDoc = this._audioCol;
         const data = Cast(audioRightSidebar.data, listSpec(Doc));
         for (let i = 1; i < 8; i++) {
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index 3a889b0db..40aa65372 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -436,7 +436,7 @@ export class MobileInterface extends React.Component {
     // DocButton that uses UndoManager and handles the opacity change if CanUndo is true
     @computed get undo() {
         if (this.mainContainer && this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc &&
-            this._activeDoc !== Doc.UserDoc().rightSidebarCollection && this._activeDoc.title !== "WORKSPACES") {
+            this._activeDoc !== Doc.UserDoc()["sidebar-sharing"] && this._activeDoc.title !== "WORKSPACES") {
             return (
                 <div className="docButton"
                     style={{ backgroundColor: "black", color: "white", fontSize: "60", opacity: UndoManager.CanUndo() ? "1" : "0.4", }}
@@ -454,7 +454,7 @@ export class MobileInterface extends React.Component {
     // DocButton that uses UndoManager and handles the opacity change if CanRedo is true
     @computed get redo() {
         if (this.mainContainer && this._activeDoc.type === "collection" && this._activeDoc !== this._homeDoc &&
-            this._activeDoc !== Doc.UserDoc().rightSidebarCollection && this._activeDoc.title !== "WORKSPACES") {
+            this._activeDoc !== Doc.UserDoc()["sidebar-sharing"] && this._activeDoc.title !== "WORKSPACES") {
             return (
                 <div className="docButton"
                     style={{ backgroundColor: "black", color: "white", fontSize: "60", opacity: UndoManager.CanRedo() ? "1" : "0.4", }}
@@ -605,7 +605,7 @@ export class MobileInterface extends React.Component {
 
     // Returns the image upload pop up
     @computed get uploadImage() {
-        const doc = !this._homeMenu ? this._activeDoc : Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc;
+        const doc = !this._homeMenu ? this._activeDoc : Cast(Doc.UserDoc()["sidebar-sharing"], Doc) as Doc;
         return <Uploader Document={doc} />;
     }
 
@@ -628,7 +628,7 @@ export class MobileInterface extends React.Component {
      */
     @action
     switchToMobileUploads = () => {
-        const mobileUpload = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc;
+        const mobileUpload = Cast(Doc.UserDoc()["sidebar-sharing"], Doc) as Doc;
         this.switchCurrentView(mobileUpload);
         this._homeMenu = false;
     }
-- 
cgit v1.2.3-70-g09d2

