1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
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 { 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 { CollectionDockingView } from "../collections/CollectionDockingView";
import { ContextMenu } from "../ContextMenu";
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.
*/
@observer
export class TopBar extends React.Component {
navigateToHome = () => {
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
});
}
render() {
const activeDashboard = CurrentUserUtils.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 CurrentUserUtils.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" >
{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" />
</div>
<div className="topbar-button-icon" onClick={() => SettingsManager.Instance.open()}>
<FontAwesomeIcon icon="cog" />
</div>
</div>
</div>
</div>
);
}
}
|
