Merge branch 'parker' of https://github.com/brown-dash/Dash-Web into parker

2 files changed, 221 insertions, 184 deletions

diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss
index 923f1892e..d415e9367 100644
--- a/src/client/views/topbar/TopBar.scss
+++ b/src/client/views/topbar/TopBar.scss
@@ -1,29 +1,45 @@
 @import "../global/globalCssVariables";
 
+
 .topbar-container {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    position: relative;
-    font-size: 10px;
-    line-height: 1;
-    overflow-y: auto;
-    overflow-x: visible;
-    background: $dark-gray;
-    overflow: visible;
-    z-index: 1000;
-
-    .topbar-bar {
-        height: $topbar-height;
-        display: grid;
-        grid-auto-columns: 33.3% 33.3% 33.3%;
-        align-items: center;
-        background-color: $dark-gray;
-
-        .topBar-icon {
+      flex-direction: column;
+      font-size: 10px;
+      line-height: 1;
+      overflow-y: auto;
+      overflow-x: visible;
+      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;
+            flex-direction: row;
+            position: relative;
+            display: grid;
+            grid-auto-columns: 33.3% 33.3% 33.3%;
+            align-items: center;
+
+            // &:first-child {
+            //       height: 20px;
+            // }
+      }
+
+      .topbar-button-text {
+            color: $white;
+            padding: 10px;
+            size: 15;
+
+            &:hover {
+                  font-weight: 500;
+            }
+      }
+
+      .topbar-button-icon {
             cursor: pointer;
-            font-size: 12.5px;
-            font-family: 'Roboto';
             width: fit-content;
             display: flex;
             justify-content: center;
@@ -31,21 +47,23 @@
             align-items: center;
             justify-self: center;
             align-self: center;
-            border-radius: $standard-border-radius;
             padding: 5px;
             transition: linear 0.2s;
-            color: $black;
-            background-color: $light-gray;
+            color: $white;
 
             &:hover {
-                background-color: darken($color: $light-gray, $amount: 20);
+                  background-color: darken($color: $light-gray, $amount: 20);
+                  font-weight: 500;
             }
-        }
+      }
 
+      .topbar-title {
+            color: $white;
+            font-size: 17;
+            font-weight: 500;
+      }
 
-
-
-        .topbar-center {
+      .topbar-center {
             grid-column: 2;
             display: inline-flex;
             justify-content: center;
@@ -53,42 +71,23 @@
             gap: 5px;
 
             .topbar-dashboards {
-                display: flex;
-                flex-direction: row;
-                gap: 5px;
-            }
-
-            .topbar-lozenge-dashboard {
-                display: flex;
-
-
-
-                .topbar-dashSelect {
-                    border: none;
-                    background-color: $dark-gray;
-                    color: $white;
-                    font-family: 'Roboto';
-                    font-size: 17;
-                    font-weight: 500;
-
-                    &:hover {
-                        cursor: pointer;
-                    }
-                }
+                  display: flex;
+                  flex-direction: row;
+                  gap: 5px;
             }
-        }
+      }
 
 
-        .topbar-right {
+      .topbar-right {
             grid-column: 3;
             position: relative;
             display: flex;
             justify-content: flex-end;
             gap: 5px;
             margin-right: 5px;
-        }
+      }
 
-        .topbar-left {
+      .topbar-left {
             grid-column: 1;
             color: black;
             font-family: 'Roboto';
@@ -98,123 +97,122 @@
             gap: 5px;
 
             .topBar-icon:hover {
-                background-color: $close-red;
+                  background-color: $close-red;
             }
 
             .topbar-lozenge-user,
             .topbar-lozenge {
-                height: 23;
-                font-size: 12;
-                color: white;
-                font-family: 'Roboto';
-                font-weight: 400;
-                padding: 4px;
-                align-self: center;
-                margin-left: 7px;
-                display: flex;
-                align-items: center;
-
-                .topbar-dashSelect {
-                    border: none;
-                    background-color: transparent;
-                    color: black;
-                    font-family: 'Roboto';
-                    font-size: 17;
-                    font-weight: 500;
-
-                    &:hover {
-                        cursor: pointer;
-                    }
-                }
+                  height: 23;
+                  font-size: 12;
+                  color: white;
+                  font-family: 'Roboto';
+                  font-weight: 400;
+                  padding: 4px;
+                  align-self: center;
+                  margin-left: 7px;
+                  display: flex;
+                  align-items: center;
+
+                  .topbar-dashSelect {
+                        border: none;
+                        background-color: transparent;
+                        color: black;
+                        font-family: 'Roboto';
+                        font-size: 17;
+                        font-weight: 500;
+
+                        &:hover {
+                              cursor: pointer;
+                        }
+                  }
             }
 
             .topbar-logoff {
-                border-radius: 3px;
-                background: olivedrab;
-                color: white;
-                display: none;
-                margin-left: 5px;
-                padding: 1px 2px 1px 2px;
-                cursor: pointer;
+                  border-radius: 3px;
+                  background: olivedrab;
+                  color: white;
+                  display: none;
+                  margin-left: 5px;
+                  padding: 1px 2px 1px 2px;
+                  cursor: pointer;
             }
 
             .topbar-logoff {
-                background: red;
+                  background: red;
             }
 
             .topbar-lozenge-user:hover {
-                .topbar-logoff {
-                    display: inline-block;
-                }
+                  .topbar-logoff {
+                        display: inline-block;
+                  }
             }
-        }
+      }
 
-        .topbar-barChild {
+      .topbar-barChild {
 
             &.topbar-collection {
-                flex: 0 1 auto;
-                margin-left: 2px;
-                margin-right: 2px
+                  flex: 0 1 auto;
+                  margin-left: 2px;
+                  margin-right: 2px
             }
 
             &.topbar-input {
-                margin: 5px;
-                border-radius: 20px;
-                border: $dark-gray;
-                display: block;
-                width: 130px;
-                -webkit-transition: width 0.4s;
-                transition: width 0.4s;
-                /* align-self: stretch; */
-                outline: none;
-
-                &:focus {
-                    width: 500px;
-                    outline: none;
-                }
+                  margin: 5px;
+                  border-radius: 20px;
+                  border: $dark-gray;
+                  display: block;
+                  width: 130px;
+                  -webkit-transition: width 0.4s;
+                  transition: width 0.4s;
+                  /* align-self: stretch; */
+                  outline: none;
+
+                  &:focus {
+                        width: 500px;
+                        outline: none;
+                  }
             }
 
             &.topbar-filter {
-                align-self: stretch;
+                  align-self: stretch;
 
-                button {
-                    transform: none;
-
-                    &:hover {
+                  button {
                         transform: none;
-                    }
-                }
+
+                        &:hover {
+                              transform: none;
+                        }
+                  }
             }
 
             &.topbar-submit {
-                margin-left: 2px;
-                margin-right: 2px
+                  margin-left: 2px;
+                  margin-right: 2px
             }
 
             &.topbar-close {
-                color: $white;
-                max-height: $topbar-height;
+                  color: $white;
+                  max-height: $topbar-height;
             }
-        }
-    }
+      }
 }
 
 .topbar-results {
-    display: flex;
-    flex-direction: column;
-    top: 300px;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow: visible;
-
-    .no-result {
-        width: 500px;
-        background: $light-gray;
-        padding: 10px;
-        height: 50px;
-        text-transform: uppercase;
-        text-align: left;
-        font-weight: bold;
-    }
+      display: flex;
+      flex-direction: column;
+      top: 300px;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      overflow: visible;
+
+      .no-result {
+            width: 500px;
+            background: $light-gray;
+            padding: 10px;
+            height: 50px;
+            text-transform: uppercase;
+            text-align: left;
+            font-weight: bold;
+      }
 }
\ No newline at end of file
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index d5254e315..3fc0a237e 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -1,67 +1,106 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { observer } from "mobx-react";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+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 { Id } from '../../../fields/FieldSymbols';
+import { AclAdmin, Doc } from '../../../fields/Doc';
 import { StrCast } from '../../../fields/Types';
+import { GetEffectiveAcl } from '../../../fields/util';
 import { Utils } from '../../../Utils';
-import { CurrentUserUtils } from "../../util/CurrentUserUtils";
-import { SettingsManager } from "../../util/SettingsManager";
-import { undoBatch } from "../../util/UndoManager";
-import { Borders, Colors } from "../global/globalEnums";
-import "./TopBar.scss";
+import { DocumentManager } from '../../util/DocumentManager';
+import { SelectionManager } from '../../util/SelectionManager';
+import { SettingsManager } from '../../util/SettingsManager';
+import { SharingManager } from '../../util/SharingManager';
+import { UndoManager } from '../../util/UndoManager';
+import { CollectionDockingView } from '../collections/CollectionDockingView';
+import { ContextMenu } from '../ContextMenu';
+import { DashboardView } from '../DashboardView';
+import { Borders, Colors } from '../global/globalEnums';
+import { MainView } from '../MainView';
+import './TopBar.scss';
 
 /**
  * ABOUT: This is the topbar in Dash, which included the current Dashboard as well as access to information on the user
- * and settings and help buttons. Future scope for this bar is to include the collaborators that are on the same Dashboard. 
+ * and settings and help buttons. Future scope for this bar is to include the collaborators that are on the same Dashboard.
  */
 @observer
 export class TopBar extends React.Component {
+    navigateToHome = () => {
+        CollectionDockingView.Instance?.CaptureThumbnail()?.then(() => {
+            Doc.ActivePage = 'home';
+            DashboardView.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 = Doc.ActiveDashboard;
         return (
             //TODO:glr Add support for light / dark mode
-            <div style={{ pointerEvents: "all" }} className="topbar-container">
-                <div className="topbar-bar" style={{ background: Colors.DARK_GRAY, borderBottom: Borders.STANDARD }}>
+            <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-lozenge-user">
-                            {`${Doc.CurrentUserEmail}`}
-                        </div>
-                        <div className="topbar-icon" onClick={() => window.location.assign(Utils.prepend("/logout"))}>
-                            {"Log out"}
-                        </div>
+                        {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-lozenge-dashboard">
-                            <select className="topbar-dashSelect" onChange={e => CurrentUserUtils.openDashboard(Doc.UserDoc(), myDashboards[Number(e.target.value)])}
-                                value={myDashboards.indexOf(CurrentUserUtils.ActiveDashboard)}
-                                style={{ color: Colors.WHITE }}>
-                                {myDashboards.map((dash, i) => <option key={dash[Id]} value={i}> {StrCast(dash.title)} </option>)}
-                            </select>
+                    <div className="topbar-center">
+                        <div className="topbar-title" onClick={() => activeDashboard && SelectionManager.SelectView(DocumentManager.Instance.getDocumentView(activeDashboard)!, false)}>
+                            {activeDashboard ? StrCast(activeDashboard.title) : 'Dash'}
                         </div>
-                        <div className="topbar-dashboards">
-                            <div className="topbar-icon" onClick={undoBatch(() => CurrentUserUtils.createNewDashboard(Doc.UserDoc()))}
-                            >
-                                {"New"}<FontAwesomeIcon icon="plus"></FontAwesomeIcon>
-                            </div>
-                            {Doc.UserDoc().noviceMode ? (null) : <div className="topbar-icon" onClick={undoBatch(() => CurrentUserUtils.snapshotDashboard(Doc.UserDoc()))}
-                            >
-                                {"Snapshot"}<FontAwesomeIcon icon="camera"></FontAwesomeIcon>
-                            </div>}
+                        <div
+                            className="topbar-button-icon"
+                            onClick={e => {
+                                const dashView = activeDashboard && DocumentManager.Instance.getDocumentView(activeDashboard);
+                                ContextMenu.Instance.addItem({ description: 'Open Dashboard View', event: this.navigateToHome, icon: 'edit' });
+                                ContextMenu.Instance.addItem({
+                                    description: 'Snapshot Dashboard',
+                                    event: async () => {
+                                        const batch = UndoManager.StartBatch('snapshot');
+                                        await DashboardView.snapshotDashboard();
+                                        batch.end();
+                                    },
+                                    icon: 'edit',
+                                });
+                                dashView?.showContextMenu(e.clientX + 20, e.clientY + 30);
+                            }}>
+                            <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-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-icon" onClick={() => window.open(
-                            "https://brown-dash.github.io/Dash-Documentation/", "_blank")}>
-                            {"Help"}<FontAwesomeIcon icon="question-circle"></FontAwesomeIcon>
+                    <div className="topbar-right">
+                        {Doc.ActiveDashboard ? (
+                            <div
+                                className="topbar-button-icon"
+                                onClick={() => {
+                                    SharingManager.Instance.open(undefined, activeDashboard);
+                                }}>
+                                {GetEffectiveAcl(Doc.GetProto(Doc.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" />
                         </div>
-                        <div className="topbar-icon" onClick={() => SettingsManager.Instance.open()}>
-                            {"Settings"}<FontAwesomeIcon icon="cog"></FontAwesomeIcon>
+                        <div className="topbar-button-icon" onClick={() => SettingsManager.Instance.open()}>
+                            <FontAwesomeIcon icon="cog" />
                         </div>
-
                     </div>
                 </div>
-            </div >
+            </div>
         );
     }
-}
\ No newline at end of file
+}