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/views/MainView.tsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

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

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>
-- 
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

