merge

2 files changed, 195 insertions, 81 deletions

diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss
index d415e9367..a1131b92e 100644
--- a/src/client/views/topbar/TopBar.scss
+++ b/src/client/views/topbar/TopBar.scss
@@ -13,7 +13,12 @@
       align-items: center;
       height: $topbar-height;
       background-color: $dark-gray;
+      border-bottom: $standard-border;
+      padding: 0px 10px;
       cursor: default;
+      display: flex;
+        justify-content: center;
+        width: 100%;
 
       .topbar-inner-container {
             display: flex;
@@ -21,6 +26,7 @@
             position: relative;
             display: grid;
             grid-auto-columns: 33.3% 33.3% 33.3%;
+            width: 100%;
             align-items: center;
 
             // &:first-child {
@@ -70,10 +76,8 @@
             align-items: center;
             gap: 5px;
 
-            .topbar-dashboards {
-                  display: flex;
-                  flex-direction: row;
-                  gap: 5px;
+            .topbar-dashboard-header {
+                font-weight: 600;
             }
       }
 
@@ -96,6 +100,27 @@
             width: fit-content;
             gap: 5px;
 
+            .logo-container {
+                font-size: 15;
+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+                align-items: center;
+                -webkit-user-select: none;
+                -khtml-user-select: none;
+                -moz-user-select: none;
+                -o-user-select: none;
+                user-select: none;
+
+                .logo {
+                    background-color: transparent;
+                    width: 25px;
+                    height: 25px;
+                    margin-right: 5px;
+                    
+                }
+            }
+
             .topBar-icon:hover {
                   background-color: $close-red;
             }
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index cbcfed06f..7e728306c 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -1,15 +1,14 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Tooltip } from '@material-ui/core';
-import { MdBugReport } from 'react-icons/md';
-import { action } from 'mobx';
+import { Button, FontSize, IconButton, Size } from 'browndash-components';
+import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { AclAdmin, Doc } from '../../../fields/Doc';
+import { FaBug, FaCamera } from 'react-icons/fa';
+import { AclAdmin, Doc, DocListCast } from '../../../fields/Doc';
 import { StrCast } from '../../../fields/Types';
 import { GetEffectiveAcl } from '../../../fields/util';
-import { Utils } from '../../../Utils';
 import { DocumentManager } from '../../util/DocumentManager';
-import { SelectionManager } from '../../util/SelectionManager';
+import { ReportManager } from '../../util/ReportManager';
 import { SettingsManager } from '../../util/SettingsManager';
 import { SharingManager } from '../../util/SharingManager';
 import { UndoManager } from '../../util/UndoManager';
@@ -19,7 +18,6 @@ import { DashboardView } from '../DashboardView';
 import { Borders, Colors } from '../global/globalEnums';
 import { MainView } from '../MainView';
 import './TopBar.scss';
-import { ReportManager } from '../../util/ReportManager';
 
 /**
  * ABOUT: This is the topbar in Dash, which included the current Dashboard as well as access to information on the user
@@ -28,83 +26,174 @@ import { ReportManager } from '../../util/ReportManager';
 @observer
 export class TopBar extends React.Component {
     navigateToHome = () => {
-        CollectionDockingView.Instance?.CaptureThumbnail()?.then(() => {
+        (CollectionDockingView.Instance?.CaptureThumbnail() ?? new Promise<void>(res => res())).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
         });
     };
-    
+
+    @observable textColor: string = Colors.LIGHT_GRAY;
+    @observable backgroundColor: string = Colors.DARK_GRAY;
+
+    /**
+     * Returns the left hand side of the topbar.
+     * This side of the topbar contains the different modes.
+     * The modes include:
+     * - Explore mode
+     * - Tracking mode
+     */
+    @computed get topbarLeft() {
+        return (
+            <div className="topbar-left">
+                {Doc.ActiveDashboard ? (
+                    <IconButton onClick={this.navigateToHome} icon={<FontAwesomeIcon icon="home" />} isCircle={true} hoverStyle="gray" color={this.textColor} />
+                ) : (
+                    <div className="logo-container">
+                        <img className="logo" src="/assets/medium-blue-light-blue-circle.png" alt="dash logo"></img>
+                        <span style={{ color: Colors.LIGHT_GRAY, fontWeight: 200 }}>brown</span>
+                        <span style={{ color: Colors.LIGHT_BLUE, fontWeight: 500 }}>dash</span>
+                    </div>
+                )}
+                {Doc.ActiveDashboard && !Doc.noviceMode && (
+                    <Button
+                        text="Explore"
+                        tooltip="Browsing mode for directly navigating to documents"
+                        fontSize={FontSize.SECONDARY}
+                        isActive={MainView.Instance._exploreMode}
+                        size={Size.SMALL}
+                        color={this.textColor}
+                        borderRadius={5}
+                        hoverStyle="gray"
+                        iconPosition="right"
+                        onClick={action(() => (MainView.Instance._exploreMode = !MainView.Instance._exploreMode))}
+                    />
+                )}
+            </div>
+        );
+    }
+
+    /**
+     * Returns the center of the topbar
+     * This part of the topbar contains everything related to the current dashboard including:
+     * - Selection of dashboards
+     * - Creating a new dashboard
+     * - Taking a snapshot of a dashboard
+     */
+    @computed get topbarCenter() {
+        // const dashboardItems = myDashboards.map(board => {
+        //     const boardTitle = StrCast(board.title);
+        //     console.log(boardTitle);
+        //     return {
+        //         text: boardTitle,
+        //         onClick: () => DashboardView.openDashboard(board),
+        //         val: board,
+        //     };
+        // });
+        return Doc.ActiveDashboard ? (
+            <div className="topbar-center">
+                <Button
+                    text={StrCast(Doc.ActiveDashboard.title)}
+                    tooltip="Browsing mode for directly navigating to documents"
+                    fontSize={FontSize.SECONDARY}
+                    size={Size.SMALL}
+                    color={'white'}
+                    type="outline"
+                    backgroundColor={Colors.MEDIUM_BLUE}
+                    borderRadius={5}
+                    hoverStyle="none"
+                    onClick={(e: React.MouseEvent) => {
+                        const dashView = Doc.ActiveDashboard && DocumentManager.Instance.getDocumentView(Doc.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);
+                    }}
+                />
+                <Button
+                    text={GetEffectiveAcl(Doc.GetProto(Doc.ActiveDashboard)) === AclAdmin ? 'Share' : 'View Original'}
+                    onClick={() => {
+                        SharingManager.Instance.open(undefined, Doc.ActiveDashboard);
+                    }}
+                    type="outline"
+                    fontSize={FontSize.SECONDARY}
+                    size={Size.SMALL}
+                    borderRadius={5}
+                    hoverStyle="gray"
+                />
+                {!Doc.noviceMode && (
+                    <IconButton
+                        fontSize={FontSize.SECONDARY}
+                        isCircle={true}
+                        tooltip="Work on a copy of the dashboard layout"
+                        size={Size.SMALL}
+                        color={this.textColor}
+                        borderRadius={Borders.STANDARD}
+                        hoverStyle="gray"
+                        onClick={async () => {
+                            const batch = UndoManager.StartBatch('snapshot');
+                            await DashboardView.snapshotDashboard();
+                            batch.end();
+                        }}
+                        icon={<FaCamera />}
+                    />
+                )}
+            </div>
+        ) : null;
+    }
+
+    /**
+     * Returns the right hand side of the topbar.
+     * This part of the topbar includes information about the current user,
+     * and allows the user to access their account settings etc.
+     */
+    @computed get topbarRight() {
+        return (
+            <div className="topbar-right">
+                <IconButton size={Size.SMALL} isCircle={true} color={Colors.LIGHT_GRAY} backgroundColor={Colors.DARK_GRAY} hoverStyle="gray" onClick={() => ReportManager.Instance.open()} icon={<FaBug />} />
+                <IconButton
+                    size={Size.SMALL}
+                    isCircle={true}
+                    color={Colors.LIGHT_GRAY}
+                    backgroundColor={Colors.DARK_GRAY}
+                    hoverStyle="gray"
+                    onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/', '_blank')}
+                    icon={<FontAwesomeIcon icon="question-circle" />}
+                />
+                <IconButton
+                    size={Size.SMALL}
+                    isCircle={true}
+                    color={Colors.LIGHT_GRAY}
+                    backgroundColor={Colors.DARK_GRAY}
+                    hoverStyle="gray"
+                    isActive={SettingsManager.Instance.isOpen}
+                    onClick={() => SettingsManager.Instance.open()}
+                    icon={<FontAwesomeIcon icon="cog" />}
+                />
+                {/* <Button text={'Logout'} borderRadius={5} hoverStyle={'gray'} backgroundColor={Colors.DARK_GRAY} color={this.textColor} fontSize={FontSize.SECONDARY} onClick={() => window.location.assign(Utils.prepend('/logout'))} /> */}
+            </div>
+        );
+    }
+
     render() {
-        const activeDashboard = Doc.ActiveDashboard;
         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">
-                        {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)}>
-                            {activeDashboard ? StrCast(activeDashboard.title) : 'Dash'}
-                        </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">
-                        {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={() => ReportManager.Instance.open()}>
-                            <MdBugReport />
-                        </div>
-                        <div className="topbar-button-icon" onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/', '_blank')}>
-                            <FontAwesomeIcon icon="question-circle" />
-                        </div>
-                        <div className="topbar-button-icon" onClick={() => SettingsManager.Instance.open()}>
-                            <FontAwesomeIcon icon="cog" />
-                        </div>
-                    </div>
+            <div style={{ pointerEvents: 'all' }} className="topbar-container">
+                <div
+                    className="topbar-inner-container"
+                    style={{
+                        color: this.textColor,
+                        background: this.backgroundColor,
+                    }}>
+                    {this.topbarLeft}
+                    {this.topbarCenter}
+                    {this.topbarRight}
                 </div>
             </div>
         );