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

5 files changed, 36 insertions, 29 deletions

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