aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/util/SettingsManager.tsx2
-rw-r--r--src/client/views/DashboardView.scss85
-rw-r--r--src/client/views/DashboardView.tsx93
-rw-r--r--src/client/views/MainView.tsx1
-rw-r--r--src/client/views/global/globalCssVariables.scss2
-rw-r--r--src/client/views/topbar/TopBar.scss33
-rw-r--r--src/client/views/topbar/TopBar.tsx301
7 files changed, 414 insertions, 103 deletions
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index cf143c5e8..a185c8936 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -30,7 +30,7 @@ export enum ColorScheme {
export class SettingsManager extends React.Component<{}> {
public static Instance: SettingsManager;
static _settingsStyle = addStyleSheet();
- @observable private isOpen = false;
+ @observable public isOpen = false;
@observable private passwordResultText = '';
@observable private playgroundMode = false;
diff --git a/src/client/views/DashboardView.scss b/src/client/views/DashboardView.scss
index 3db23b86f..b8a6f6c05 100644
--- a/src/client/views/DashboardView.scss
+++ b/src/client/views/DashboardView.scss
@@ -1,3 +1,6 @@
+@import "./global/globalCssVariables";
+
+
.dashboard-view {
padding: 50px;
display: flex;
@@ -7,8 +10,10 @@
.left-menu {
display: flex;
+ justify-content: flex-start;
flex-direction: column;
- width: 300px;
+ width: 250px;
+ min-width: 250px;
}
.all-dashboards {
@@ -20,7 +25,8 @@
}
.text-button {
- padding: 10px 0;
+ cursor: pointer;
+ padding: 3px 0;
&:hover {
font-weight: 500;
}
@@ -30,17 +36,46 @@
}
}
+.new-dashboard-button {
+ font-weight: 600;
+ padding-bottom: 10px;
+}
+
+.dashboard-container-new {
+ border-radius: 10px;
+ width: 250px;
+ height: 200px;
+ font-size: 120px;
+ font-weight: 100;
+ text-align: center;
+ border: solid 2px $light-gray;
+ margin: 0 0px 30px 30px;
+ cursor: pointer;
+ color: $light-gray;
+ display: flex;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ &:hover {
+ color: $light-blue;
+ border: solid 2px $light-blue;
+ }
+}
+
.dashboard-container {
border-radius: 10px;
+ cursor: pointer;
width: 250px;
- border: solid .5px grey;
+ height: 200px;
+ outline: solid 2px $light-gray;
display: flex;
flex-direction: column;
- margin: 0 30px 30px 30px;
+ margin: 0 0px 30px 30px;
overflow: hidden;
- &:hover {
- border: solid 1.5px grey;
+ &:hover{
+ outline: solid 2px $light-blue;
}
.title {
@@ -58,9 +93,47 @@
flex-direction: row;
justify-content: space-between;
align-items: center;
+ padding: 0px 10px;
}
.more {
z-index: 100;
}
+}
+
+.new-dashboard {
+ color: $dark-gray;
+ display: flex;
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+ justify-content: space-between;
+
+ .header {
+ font-size: 1.5em;
+ font-weight: 600;
+ }
+
+ .title-input,
+ .color-picker {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: center;
+ font-weight: 500;
+ gap: 5px;
+ z-index: 5;
+
+ .input {
+ border-radius: 10px;
+ padding: 5px 10px;
+ }
+ }
+
+ .button-bar {
+ display: flex;
+ gap: 5px;
+ flex-direction: row;
+ justify-content: flex-end;
+ }
} \ No newline at end of file
diff --git a/src/client/views/DashboardView.tsx b/src/client/views/DashboardView.tsx
index f43500fc3..ce442801f 100644
--- a/src/client/views/DashboardView.tsx
+++ b/src/client/views/DashboardView.tsx
@@ -1,4 +1,5 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Button, ColorPicker, FontSize, IconButton, Size } from 'browndash-components';
import { action, computed, observable } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
@@ -20,8 +21,10 @@ import { CollectionDockingView } from './collections/CollectionDockingView';
import { CollectionView } from './collections/CollectionView';
import { ContextMenu } from './ContextMenu';
import './DashboardView.scss';
+import { Colors } from './global/globalEnums';
import { MainViewModal } from './MainViewModal';
import { ButtonType } from './nodes/button/FontIconBox';
+import { FaPlus } from 'react-icons/fa';
enum DashboardGroup {
MyDashboards,
@@ -39,6 +42,7 @@ export class DashboardView extends React.Component {
@observable private selectedDashboardGroup = DashboardGroup.MyDashboards;
@observable private newDashboardName: string | undefined = undefined;
+ @observable private newDashboardColor: string | undefined = undefined;
@action abortCreateNewDashboard = () => {
this.newDashboardName = undefined;
};
@@ -52,11 +56,9 @@ export class DashboardView extends React.Component {
};
clickDashboard = (e: React.MouseEvent, dashboard: Doc) => {
- if (e.detail === 2) {
- Doc.AddDocToList(Doc.MySharedDocs, 'viewed', dashboard);
- Doc.ActiveDashboard = dashboard;
- Doc.ActivePage = 'dashboard';
- }
+ Doc.AddDocToList(Doc.MySharedDocs, 'viewed', dashboard);
+ Doc.ActiveDashboard = dashboard;
+ Doc.ActivePage = 'dashboard';
};
getDashboards = () => {
@@ -80,26 +82,46 @@ export class DashboardView extends React.Component {
};
@undoBatch
- createNewDashboard = async (name: string) => {
- DashboardView.createNewDashboard(undefined, name);
+ createNewDashboard = async (name: string, background?: string) => {
+ DashboardView.createNewDashboard(undefined, name, background);
this.abortCreateNewDashboard();
};
@computed
get namingInterface() {
+ const dashboardCount = DocListCast(Doc.MyDashboards.data).length + 1;
+ const placeholder = `Dashboard ${dashboardCount}`;
return (
- <div>
- <input className="password-inputs" placeholder="Untitled Dashboard" onChange={e => this.setNewDashboardName((e.target as any).value)} />
- <button className="password-submit" onClick={this.abortCreateNewDashboard}>
- Cancel
- </button>
- <button
- className="password-submit"
- onClick={() => {
- this.createNewDashboard(this.newDashboardName!);
- }}>
- Create
- </button>
+ <div className='new-dashboard'>
+ <div className='header'>Create New Dashboard</div>
+ <div className="title-input">
+ Title
+ <input className="input" placeholder={placeholder} onChange={e => this.setNewDashboardName((e.target as any).value)} />
+ </div>
+ <div className="color-picker">
+ Background
+ <ColorPicker onChange={(color) => {
+ this.newDashboardColor = color;
+ }} />
+ </div>
+ <div className="button-bar">
+ <Button
+ text="Cancel"
+ borderRadius={10}
+ hoverStyle={'gray'}
+ fontSize={FontSize.SECONDARY}
+ onClick={this.abortCreateNewDashboard}
+ />
+ <Button
+ text="Create"
+ borderRadius={10}
+ backgroundColor={Colors.LIGHT_BLUE}
+ hoverStyle={'darken'}
+ fontSize={FontSize.SECONDARY}
+ onClick={() => {
+ this.createNewDashboard(this.newDashboardName!, this.newDashboardColor);
+ }}/>
+ </div>
</div>
);
}
@@ -142,11 +164,19 @@ export class DashboardView extends React.Component {
<div className="dashboard-view">
<div className="left-menu">
<div
- className="text-button"
+ className="new-dashboard-button">
+ <Button
+ icon={<FaPlus/>}
+ hoverStyle="darken"
+ backgroundColor={Colors.LIGHT_BLUE}
+ size={Size.MEDIUM}
+ fontSize={FontSize.HEADER}
+ text="New"
onClick={() => {
this.setNewDashboardName('');
- }}>
- New
+ }}
+ borderRadius={50}
+ />
</div>
<div className={`text-button ${this.selectedDashboardGroup === DashboardGroup.MyDashboards && 'selected'}`} onClick={() => this.selectDashboardGroup(DashboardGroup.MyDashboards)}>
My Dashboards
@@ -180,14 +210,26 @@ export class DashboardView extends React.Component {
this._downY = e.clientY;
}}
onClick={e => {
+ e.preventDefault();
+ e.stopPropagation();
this.onContextMenu(dashboard, e);
}}>
- <FontAwesomeIcon color="black" size="lg" icon="bars" />
+ <IconButton
+ isCircle={true}
+ size={Size.SMALL}
+ hoverStyle="gray"
+ icon={<FontAwesomeIcon color="black" size="lg" icon="bars" />}
+ />
</div>
</div>
</div>
);
})}
+ <div className="dashboard-container-new" onClick={() => {
+ this.setNewDashboardName('');
+ }}>
+ +
+ </div>
</div>
</div>
<MainViewModal
@@ -195,7 +237,7 @@ export class DashboardView extends React.Component {
isDisplayed={this.newDashboardName !== undefined}
interactive={true}
closeOnExternalClick={this.abortCreateNewDashboard}
- dialogueBoxStyle={{ width: '500px', height: '300px', background: Cast(Doc.SharingDoc().userColor, 'string', null) }}
+ dialogueBoxStyle={{ width: '400px', height: '180px', color: Colors.LIGHT_GRAY }}
/>
</>
);
@@ -257,7 +299,7 @@ export class DashboardView extends React.Component {
}
};
- public static createNewDashboard = (id?: string, name?: string) => {
+ public static createNewDashboard = (id?: string, name?: string, background?: string) => {
const dashboards = Doc.MyDashboards;
const dashboardCount = DocListCast(dashboards.data).length + 1;
const freeformOptions: DocumentOptions = {
@@ -267,6 +309,7 @@ export class DashboardView extends React.Component {
_height: 1000,
_fitWidth: true,
_backgroundGridShow: true,
+ backgroundColor: background,
title: `Untitled Tab 1`,
};
const title = name ? name : `Dashboard ${dashboardCount}`;
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 26718d695..d07e255e2 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -65,6 +65,7 @@ import { PreviewCursor } from './PreviewCursor';
import { PropertiesView } from './PropertiesView';
import { DashboardStyleProvider, DefaultStyleProvider } from './StyleProvider';
import { TopBar } from './topbar/TopBar';
+import 'browndash-components/dist/styles/global.min.css';
const _global = (window /* browser */ || global) /* node */ as any;
@observer
diff --git a/src/client/views/global/globalCssVariables.scss b/src/client/views/global/globalCssVariables.scss
index c5968d9a7..8a75aeef8 100644
--- a/src/client/views/global/globalCssVariables.scss
+++ b/src/client/views/global/globalCssVariables.scss
@@ -39,7 +39,7 @@ $small-text: 9px;
// misc values
$border-radius: 0.3em;
$search-thumnail-size: 130;
-$topbar-height: 32px;
+$topbar-height: 37px;
$antimodemenu-height: 36px;
// dragged items
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 096b2561f..bbdb4621e 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,7 @@ 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
@@ -34,36 +33,73 @@ export class TopBar extends React.Component {
});
};
- 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 => {
+ @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 && <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 myDashboards = DocListCast(Doc.MyDashboards.data);
+ const activeDashboard = Doc.ActiveDashboard;
+ // const dashboardItems = myDashboards.map(board => {
+ // const boardTitle = StrCast(board.title);
+ // console.log(boardTitle);
+ // return {
+ // text: boardTitle,
+ // onClick: () => DashboardView.openDashboard(board),
+ // val: board,
+ // };
+ // });
+ return activeDashboard ? (
+ <div className="topbar-center">
+ <Button
+ text={StrCast(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) => {
const dashView = activeDashboard && DocumentManager.Instance.getDocumentView(activeDashboard);
ContextMenu.Instance.addItem({ description: 'Open Dashboard View', event: this.navigateToHome, icon: 'edit' });
ContextMenu.Instance.addItem({
@@ -76,35 +112,168 @@ export class TopBar extends React.Component {
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>
+ }}
+ />
+ <Button
+ text={GetEffectiveAcl(Doc.GetProto(activeDashboard)) === AclAdmin ? 'Share' : 'View Original'}
+ onClick={() => {
+ SharingManager.Instance.open(undefined, 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>
+ // </div>
+ // );
+ // }
+ render() {
+ return (
+ //TODO:glr Add support for light / dark mode
+ <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>
);
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 10:09:47 +0000