blob: d5254e31592dc85122788106f58ae761e6369254 (
plain)
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
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { observer } from "mobx-react";
import * as React from 'react';
import { Doc, DocListCast } from '../../../fields/Doc';
import { Id } from '../../../fields/FieldSymbols';
import { StrCast } from '../../../fields/Types';
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";
/**
* 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 {
render() {
const myDashboards = DocListCast(CurrentUserUtils.MyDashboards.data);
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 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>
</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>
<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>
</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>
<div className="topbar-icon" onClick={() => SettingsManager.Instance.open()}>
{"Settings"}<FontAwesomeIcon icon="cog"></FontAwesomeIcon>
</div>
</div>
</div>
</div >
);
}
}
|
