merge with master

2 files changed, 25 insertions, 16 deletions

diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss
index c5b340514..d415e9367 100644
--- a/src/client/views/topbar/TopBar.scss
+++ b/src/client/views/topbar/TopBar.scss
@@ -2,7 +2,6 @@
 
 
 .topbar-container {
-      display: flex;
       flex-direction: column;
       font-size: 10px;
       line-height: 1;
@@ -11,8 +10,10 @@
       background: $dark-gray;
       overflow: visible;
       z-index: 1000;
+      align-items: center;
       height: $topbar-height;
       background-color: $dark-gray;
+      cursor: default;
 
       .topbar-inner-container {
             display: flex;
@@ -52,6 +53,7 @@
 
             &:hover {
                   background-color: darken($color: $light-gray, $amount: 20);
+                  font-weight: 500;
             }
       }
 
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index 6a4deca38..b447bdc19 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -14,6 +14,7 @@ import { SelectionManager } from "../../util/SelectionManager";
 import { SettingsManager } from "../../util/SettingsManager";
 import { SharingManager } from "../../util/SharingManager";
 import { undoBatch, UndoManager } from "../../util/UndoManager";
+import { CollectionDockingView } from "../collections/CollectionDockingView";
 import { ContextMenu } from "../ContextMenu";
 import { Borders, Colors } from "../global/globalEnums";
 import { MainView } from "../MainView";
@@ -26,7 +27,7 @@ import "./TopBar.scss";
 @observer
 export class TopBar extends React.Component {
       navigateToHome = () => {
-            CurrentUserUtils.CaptureDashboardThumbnail()?.then(() => {
+            CollectionDockingView.Instance.CaptureThumbnail()?.then(() => {
                 CurrentUserUtils.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
             });
@@ -38,10 +39,18 @@ export class TopBar extends React.Component {
                   <div style={{ pointerEvents: "all", background: Colors.DARK_GRAY, borderBottom: Borders.STANDARD }} className="topbar-container">
                         <div className="topbar-inner-container">
                               <div className="topbar-left">
-                                    {activeDashboard ? <div className="topbar-button-text" onClick={e => {
-                                    ContextMenu.Instance.addItem({ description: "Logout", event: () => window.location.assign(Utils.prepend("/logout")), icon: "edit" });
-                                    ContextMenu.Instance.displayMenu(e.clientX +5, e.clientY + 10);
-                                    }}>{Doc.CurrentUserEmail}</div> : (null)}
+                                    {activeDashboard ?
+                                          <>
+                                                <div className="topbar-button-icon" onClick={e => {
+                                                      ContextMenu.Instance.addItem({ description: "Logout", event: () => window.location.assign(Utils.prepend("/logout")), icon: "edit" });
+                                                      ContextMenu.Instance.displayMenu(e.clientX + 5, e.clientY + 10);
+                                                }}>{Doc.CurrentUserEmail}</div>
+                                                <div className="topbar-button-icon" onClick={this.navigateToHome}>
+                                                      <FontAwesomeIcon icon="home" />
+                                                </div>
+                                          </>
+                                          : (null)}
+
                               </div>
                               <div className="topbar-center" >
                                     <div className="topbar-title" onClick={() => activeDashboard && SelectionManager.SelectView(DocumentManager.Instance.getDocumentView(activeDashboard)!, false)}>
@@ -57,20 +66,18 @@ export class TopBar extends React.Component {
                                         }, icon: "edit" });
                                         dashView?.showContextMenu(e.clientX+20, e.clientY+30);
                                     }}>
-                                    <FontAwesomeIcon color="white" size="lg" icon="bars" />
+                                          <FontAwesomeIcon color="white" size="lg" icon="bars" />
                                     </div>
                                     <Tooltip title={<div className="dash-tooltip">Browsing mode for directly navigating to documents</div>} placement="bottom">
-                                        <div className="topbar-icon" style={{ background: MainView.Instance._exploreMode ? Colors.LIGHT_BLUE : undefined }} onClick={action(() => MainView.Instance._exploreMode = !MainView.Instance._exploreMode)}>
-                                            <FontAwesomeIcon color={MainView.Instance._exploreMode ? "red":"white"} icon="eye"  size="lg" />
-                                        </div>
+                                          <div className="topbar-button-icon" style={{ background: MainView.Instance._exploreMode ? Colors.LIGHT_BLUE : undefined }} onClick={action(() => MainView.Instance._exploreMode = !MainView.Instance._exploreMode)}>
+                                                <FontAwesomeIcon color={MainView.Instance._exploreMode ? "red" : "white"} icon="eye" size="lg" />
+                                          </div>
                                     </Tooltip>
                               </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" */}
-                                        { CurrentUserUtils.ActiveDashboard && (Doc.GetProto(CurrentUserUtils.ActiveDashboard)?.author ===  Doc.CurrentUserEmail ?  "Share": "view original") }
-                                    </div>
+                                    {CurrentUserUtils.ActiveDashboard ? <div className="topbar-button-icon" onClick={() => { SharingManager.Instance.open(undefined, activeDashboard) }}>
+                                          {GetEffectiveAcl(Doc.GetProto(CurrentUserUtils.ActiveDashboard)) === AclAdmin ? "Share" : "view original"}
+                                    </div> : (null)}
                                     <div className="topbar-button-icon" onClick={() => window.open(
                                           "https://brown-dash.github.io/Dash-Documentation/", "_blank")}>
                                           <FontAwesomeIcon icon="question-circle" />
@@ -81,7 +88,7 @@ export class TopBar extends React.Component {
                               </div>
                         </div>
                   </div>
-                        
+
             );
       }
 }
\ No newline at end of file