fixed some problems with dragging doc onto empty tab bar. made topBar be just one line to save vertical space. added a context menu to Dashboard

7 files changed, 46 insertions, 35 deletions

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index e46bb3b3e..60bfc165b 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -381,6 +381,7 @@ export class CurrentUserUtils {
                     dontUndo: true,
                     title,
                     target,
+                    dontRegisterView: true,
                     hidden: hidden ? ComputedField.MakeFunction("IsNoviceMode()") as any : undefined,
                     _dropAction: "alias",
                     _removeDropProperties: new List<string>(["dropAction", "_stayInCollection"]),
@@ -399,6 +400,7 @@ export class CurrentUserUtils {
                 _chromeHidden: true,
                 backgroundColor: Colors.DARK_GRAY,
                 boxShadow: "rgba(0,0,0,0)",
+                dontRegisterView: true,
                 dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }),
                 ignoreClick: true,
                 _gridGap: 0,
@@ -719,7 +721,7 @@ export class CurrentUserUtils {
             ];
             doc.dockedBtns = CurrentUserUtils.linearButtonList({
                 title: "docked buttons", _height: 40, flexGap: 0, linearViewFloating: true,
-                linearViewIsExpanded: true, linearViewExpandable: true, ignoreClick: true
+                childDontRegisterViews: true, linearViewIsExpanded: true, linearViewExpandable: true, ignoreClick: true
             }, btnDescs.map(desc => doc[`dockedBtn-${desc.title}`] as Doc ?? (doc[`dockedBtn-${desc.title}`] = dockBtn({ title: desc.title, ...desc.opts() }))));
         }
     }
@@ -833,12 +835,13 @@ export class CurrentUserUtils {
         });
         if (doc.contextMenuBtns === undefined) {
             doc.contextMenuBtns = CurrentUserUtils.linearButtonList(
-                { title: "menu buttons", flexGap: 0, linearViewIsExpanded: true, ignoreClick: true, linearViewExpandable: false, _height: 35 },
+                { title: "menu buttons", flexGap: 0, childDontRegisterViews: true,  linearViewIsExpanded: true, ignoreClick: true, linearViewExpandable: false, _height: 35 },
                 CurrentUserUtils.contextMenuTools(doc).map(params =>
                     !params.subMenu ?
                         btnFunc(params) :
                         CurrentUserUtils.linearButtonList({
                             title: params.title,
+                            childDontRegisterViews: true,
                             linearViewSubMenu: true, flexGap: 0, ignoreClick: true,
                             linearViewExpandable: true, icon: params.title, _height: 30,
                             linearViewIsExpanded: params.expanded ? !(ComputedField.MakeFunction(params.expanded) as any) : undefined,
@@ -854,6 +857,7 @@ export class CurrentUserUtils {
                         btnFunc(params) :
                         CurrentUserUtils.linearButtonList({
                             title: params.title,
+                            childDontRegisterViews: true,
                             linearViewSubMenu: true, flexGap: 0, ignoreClick: true,
                             linearViewExpandable: true, icon: params.title, _height: 30,
                             linearViewIsExpanded: params.expanded ? !(ComputedField.MakeFunction(params.expanded) as any) : undefined,
@@ -919,7 +923,7 @@ export class CurrentUserUtils {
                     title: "My SharedDocs", childDropAction: "alias", system: true, contentPointerEvents: "all", childLimitHeight: 0, _yMargin: 50, _gridGap: 15,
                     _showTitle: "title", treeViewHideTitle: true, ignoreClick: true, _lockedPosition: true, "acl-Public": SharingPermissions.Augment, "_acl-Public": SharingPermissions.Augment,
                     _chromeHidden: true, boxShadow: "0 0",
-                    explainer: "This is where documents or dashboards that other users have shared with you will appear. To share a document or dashboard right click and select 'Share'"
+                    dontRegisterView: true, explainer: "This is where documents or dashboards that other users have shared with you will appear. To share a document or dashboard right click and select 'Share'"
                 }, sharingDocumentId + "outer", sharingDocumentId);
                 (sharedDocs as Doc)["acl-Public"] = (sharedDocs as Doc)[DataSym]["acl-Public"] = SharingPermissions.Augment;
             }
@@ -943,7 +947,7 @@ export class CurrentUserUtils {
             doc.myImportDocs = new PrefetchProxy(Docs.Create.StackingDocument([], {
                 title: "My Imports", _forceActive: true, buttonMenu: true, buttonMenuDoc: newImportButton, ignoreClick: true, _showTitle: "title", _stayInCollection: true, _hideContextMenu: true, childLimitHeight: 0,
                 childDropAction: "copy", _autoHeight: true, _yMargin: 50, _gridGap: 15, boxShadow: "0 0", _lockedPosition: true, system: true, _chromeHidden: true,
-                explainer: "This is where documents that are Imported into Dash will go."
+                dontRegisterView: true, explainer: "This is where documents that are Imported into Dash will go."
             }));
         }
     }
@@ -952,7 +956,7 @@ export class CurrentUserUtils {
     static setupSearchSidebar(doc: Doc) {
         if (doc.mySearchPanel === undefined) {
             doc.mySearchPanel = new PrefetchProxy(Docs.Create.SearchDocument({
-                backgroundColor: "dimgray", ignoreClick: true, _searchDoc: true,
+                dontRegisterView: true, backgroundColor: "dimgray", ignoreClick: true, _searchDoc: true,
                 childDropAction: "alias", _lockedPosition: true, _viewType: CollectionViewType.Schema, title: "Search Panel", system: true
             })) as any as Doc;
         }
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 9f8c49081..c3c6c22df 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -455,7 +455,7 @@ export namespace DragManager {
             if (dragData instanceof DocumentDragData) {
                 dragData.userDropAction = e.ctrlKey && e.altKey ? "copy" : e.ctrlKey ? "alias" : dragData.defaultDropAction;
             }
-            if (((e.target as any)?.className === "lm_tabs" || e?.shiftKey) && dragData.draggedDocuments.length === 1) {
+            if (((e.target as any)?.className === "lm_tabs" || ((e.target as any)?.className === "lm_header" || e?.shiftKey) && dragData.draggedDocuments.length === 1) {
                 if (!startWindowDragTimer) {
                     startWindowDragTimer = setTimeout(async () => {
                         startWindowDragTimer = undefined;
diff --git a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
index c0a33a5e0..9b1cb1601 100644
--- a/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
+++ b/src/client/views/collections/collectionLinear/CollectionLinearView.tsx
@@ -153,6 +153,7 @@ export class CollectionLinearView extends CollectionSubView() {
                 PanelWidth={nested ? doc[WidthSym] : this.dimension}
                 PanelHeight={nested || doc._height ? doc[HeightSym] : this.dimension}
                 renderDepth={this.props.renderDepth + 1}
+                dontRegisterView={BoolCast(this.rootDoc.childDontRegisterViews)}
                 focus={emptyFunction}
                 styleProvider={this.props.styleProvider}
                 docViewPath={returnEmptyDoclist}
diff --git a/src/client/views/global/globalCssVariables.scss b/src/client/views/global/globalCssVariables.scss
index ce9cc05d6..a14634bdc 100644
--- a/src/client/views/global/globalCssVariables.scss
+++ b/src/client/views/global/globalCssVariables.scss
@@ -38,7 +38,7 @@ $small-text: 9px;
 // misc values
 $border-radius: 0.3em;
 $search-thumnail-size: 130;
-$topbar-height: 55px;
+$topbar-height: 32px;
 $antimodemenu-height: 36px;
 
 // dragged items
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 1591840e6..60d16f044 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -764,7 +764,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
             DocListCast(this.Document.links).length && appearanceItems.splice(0, 0, { description: `${this.layoutDoc.hideLinkButton ? "Show" : "Hide"} Link Button`, event: action(() => this.layoutDoc.hideLinkButton = !this.layoutDoc.hideLinkButton), icon: "eye" });
             !appearance && cm.addItem({ description: "UI Controls...", subitems: appearanceItems, icon: "compass" });
 
-            if (!Doc.IsSystem(this.rootDoc) && this.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Tree) {
+            if (!Doc.IsSystem(this.rootDoc) && this.rootDoc._viewType !== CollectionViewType.Docking && this.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Tree) {
                 !Doc.UserDoc().noviceMode && appearanceItems.splice(0, 0, { description: `${!this.layoutDoc._showAudio ? "Show" : "Hide"} Audio Button`, event: action(() => this.layoutDoc._showAudio = !this.layoutDoc._showAudio), icon: "microphone" });
                 const existingOnClick = cm.findByDescription("OnClick...");
                 const onClicks: ContextMenuProps[] = existingOnClick && "subitems" in existingOnClick ? existingOnClick.subitems : [];
@@ -834,10 +834,10 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
 
             const help = cm.findByDescription("Help...");
             const helpItems: ContextMenuProps[] = help && "subitems" in help ? help.subitems : [];
-            !Doc.UserDoc().novice && helpItems.push({ description: "Show Fields ", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "add:right"), icon: "layer-group" });
-            helpItems.push({ description: "Text Shortcuts Ctrl+/", event: () => this.props.addDocTab(Docs.Create.PdfDocument("/assets/cheat-sheet.pdf", { _width: 300, _height: 300 }), "add:right"), icon: "keyboard" });
-            !Doc.UserDoc().novice && helpItems.push({ description: "Print Document in Console", event: () => console.log(this.props.Document), icon: "hand-point-right" });
-            !Doc.UserDoc().novice && helpItems.push({ description: "Print DataDoc in Console", event: () => console.log(this.props.Document[DataSym]), icon: "hand-point-right" });
+            helpItems.push({ description: "Show Fields ", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { _width: 300, _height: 300 }), "add:right"), icon: "layer-group" });
+            !Doc.UserDoc().noviceMode && helpItems.push({ description: "Text Shortcuts Ctrl+/", event: () => this.props.addDocTab(Docs.Create.PdfDocument("/assets/cheat-sheet.pdf", { _width: 300, _height: 300 }), "add:right"), icon: "keyboard" });
+            !Doc.UserDoc().noviceMode && helpItems.push({ description: "Print Document in Console", event: () => console.log(this.props.Document), icon: "hand-point-right" });
+            !Doc.UserDoc().noviceMode && helpItems.push({ description: "Print DataDoc in Console", event: () => console.log(this.props.Document[DataSym]), icon: "hand-point-right" });
             cm.addItem({ description: "Help...", noexpand: true, subitems: helpItems, icon: "question" });
         }
 
@@ -1204,6 +1204,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
 
     @observable public docView: DocumentViewInternal | undefined | null;
 
+    showContextMenu(pageX:number, pageY:number) { return this.docView?.onContextMenu(undefined, pageX, pageY); }
     get Document() { return this.props.Document; }
     get topMost() { return this.props.renderDepth === 0; }
     get rootDoc() { return this.docView?.rootDoc || this.Document; }
diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss
index 6662386d4..c5b340514 100644
--- a/src/client/views/topbar/TopBar.scss
+++ b/src/client/views/topbar/TopBar.scss
@@ -22,9 +22,9 @@
             grid-auto-columns: 33.3% 33.3% 33.3%;
             align-items: center;
 
-            &:first-child {
-                  height: 20px;
-            }
+            // &:first-child {
+            //       height: 20px;
+            // }
       }
 
       .topbar-button-text {
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index 57ceac2dd..5bee58ccb 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -3,14 +3,18 @@ import { Tooltip } from "@material-ui/core";
 import { action } from "mobx";
 import { observer } from "mobx-react";
 import * as React from 'react';
-import { Doc, DocListCast } from '../../../fields/Doc';
+import { AclAdmin, Doc, DocListCast } from '../../../fields/Doc';
 import { Id } from '../../../fields/FieldSymbols';
 import { Cast, StrCast } from '../../../fields/Types';
+import { GetEffectiveAcl } from "../../../fields/util";
 import { Utils } from '../../../Utils';
 import { CurrentUserUtils } from "../../util/CurrentUserUtils";
+import { DocumentManager } from "../../util/DocumentManager";
+import { SelectionManager } from "../../util/SelectionManager";
 import { SettingsManager } from "../../util/SettingsManager";
 import { SharingManager } from "../../util/SharingManager";
 import { undoBatch, UndoManager } from "../../util/UndoManager";
+import { ContextMenu } from "../ContextMenu";
 import { Borders, Colors } from "../global/globalEnums";
 import { MainView } from "../MainView";
 import "./TopBar.scss";
@@ -22,22 +26,38 @@ import "./TopBar.scss";
 @observer
 export class TopBar extends React.Component {
       navigateToHome = () => {
-            CurrentUserUtils.closeActiveDashboard();
-            CurrentUserUtils.CaptureDashboardThumbnail()?.then(() => Doc.UserDoc().activePage = "home");
+            CurrentUserUtils.CaptureDashboardThumbnail()?.then(() => {
+                Doc.UserDoc().activePage = "home";
+                CurrentUserUtils.closeActiveDashboard(); // bcz: if we do this, we need some other way to keep track, for user convenience, of the last dashboard in use
+            });
       }
       render() {
-            const myDashboards = DocListCast(CurrentUserUtils.MyDashboards.data);
             const activeDashboard = Cast(Doc.UserDoc().activeDashboard, Doc, null)
             return (
                   //TODO:glr Add support for light / dark mode
                   <div style={{ pointerEvents: "all", background: Colors.DARK_GRAY, borderBottom: Borders.STANDARD }} className="topbar-container">
                         <div className="topbar-inner-container">
                               <div className="topbar-left">
-                                    <div className="topbar-button-text" onClick={this.navigateToHome}>Home</div>
+                                    {activeDashboard ? <div className="topbar-button-text">{Doc.CurrentUserEmail} (Placeholder)</div> : (null)}
                               </div>
                               <div className="topbar-center" >
+                                    <div className="topbar-title" onClick={() => SelectionManager.SelectView(DocumentManager.Instance.getDocumentView(activeDashboard)!, false)}>
+                                          {activeDashboard ? StrCast(activeDashboard.title) : "Dash"}
+                                    </div>
+                                    <div className="topbar-button-icon" onClick={e => {
+                                        const dashView = DocumentManager.Instance.getDocumentView(activeDashboard);
+                                        ContextMenu.Instance.addItem({ description: "Open Dashboard View", event: this.navigateToHome, icon: "edit" });
+                                        dashView?.showContextMenu(e.clientX+20, e.clientY+30);
+                                    }}>
+                                    <FontAwesomeIcon color="white" icon="bars" />
+                                    </div>
                               </div>
                               <div className="topbar-right" >
+                                    <div className="topbar-button-text" onClick={() => {SharingManager.Instance.open(undefined, activeDashboard)}}>
+                                        {/* TODO: if this is my dashboard, display share
+                                        if this is a shared dashboard, display "view original or view annotated" */}
+                                        { Doc.GetProto(CurrentUserUtils.ActiveDashboard)?.author ===  Doc.CurrentUserEmail ?  "Share": "view original" }
+                                    </div>
                                     <div className="topbar-button-icon" onClick={() => window.open(
                                           "https://brown-dash.github.io/Dash-Documentation/", "_blank")}>
                                           <FontAwesomeIcon icon="question-circle" />
@@ -47,21 +67,6 @@ export class TopBar extends React.Component {
                                     </div>
                               </div>
                         </div>
-                        <div className="topbar-inner-container">
-                              <div className="topbar-left">
-                                    {activeDashboard ? <div className="topbar-button-text">Freeform View (Placeholder)</div> : (null)}
-                              </div>
-                              <div className="topbar-center" >
-                                    <div className="topbar-title">
-                                          {activeDashboard ? StrCast(activeDashboard.title) : "Dash"}
-                                    </div>
-                              </div>
-                              <div className="topbar-right" >
-                                    {/* TODO: if this is my dashboard, display share
-                                     if this is a shared dashboard, display "view original or view annotated" */}
-                                    <div className="topbar-button-text" onClick={() => {SharingManager.Instance.open(undefined, activeDashboard)}}>Share</div>
-                              </div>
-                        </div>
                   </div>
                         
             );