diff options
| author | geireann <geireann.lindfield@gmail.com> | 2021-07-29 15:35:39 -0400 |
|---|---|---|
| committer | geireann <geireann.lindfield@gmail.com> | 2021-07-29 15:35:39 -0400 |
| commit | b33e45f1f839b3c6eaf1076e605abacd1bc6883c (patch) | |
| tree | b64454467e3463804b84363cf1d7ec752f62d6d7 /src/client/views/topbar/TopBar.tsx | |
| parent | 26e9e0a554ee5aff001e2bc10b6802a4e830b63c (diff) | |
lots of updates!
Diffstat (limited to 'src/client/views/topbar/TopBar.tsx')
| -rw-r--r-- | src/client/views/topbar/TopBar.tsx | 58 |
1 files changed, 58 insertions, 0 deletions
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx new file mode 100644 index 000000000..79239d4ea --- /dev/null +++ b/src/client/views/topbar/TopBar.tsx @@ -0,0 +1,58 @@ +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +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 { ColorScheme, SettingsManager } from "../../util/SettingsManager"; +import { undoBatch } from "../../util/UndoManager"; +import "./TopBar.scss"; +import { Colors, Borders } from "../global/globalEnums"; + +export const TopBar = () => { + + const myDashboards = DocListCast(CurrentUserUtils.MyDashboards.data); + return ( + <div style={{ pointerEvents: "all" }} className="topbar-container"> + <div className="topbar-bar" style={{ background: Doc.UserDoc().colorScheme === ColorScheme.Dark ? Colors.DARK_GRAY : Colors.LIGHT_GRAY, borderBottom: Borders.STANDARD }}> + <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: Doc.UserDoc().colorScheme === ColorScheme.Dark ? "white" : "black" }}> + {myDashboards.map((dash, i) => <option key={dash[Id]} value={i}> {StrCast(dash.title)} </option>)} + </select> + <div className="topbar-dashboards"> + <div className="topbar-icon" onClick={undoBatch(() => CurrentUserUtils.createNewDashboard(Doc.UserDoc()))} + style={{ color: Doc.UserDoc().colorScheme === ColorScheme.Dark ? "white" : "black" }}> + <FontAwesomeIcon icon="plus"></FontAwesomeIcon> + </div> + <div className="topbar-icon" onClick={undoBatch(() => CurrentUserUtils.snapshotDashboard(Doc.UserDoc()))} + style={{ color: Doc.UserDoc().colorScheme === ColorScheme.Dark ? "white" : "black" }}> + <FontAwesomeIcon icon="camera"></FontAwesomeIcon> + </div> + </div> + </div> + </div> + <div className="topbar-right" > + <div className="topbar-icon" + style={{ color: Doc.UserDoc().colorScheme === ColorScheme.Dark ? "white" : "black" }}> + <FontAwesomeIcon icon="question-circle"></FontAwesomeIcon> + </div> + <div className="topbar-icon" onClick={() => SettingsManager.Instance.open()} + style={{ color: Doc.UserDoc().colorScheme === ColorScheme.Dark ? "white" : "black" }}> + <FontAwesomeIcon icon="cog"></FontAwesomeIcon> + </div> + <div className="topbar-lozenge-user"> + {`${Doc.CurrentUserEmail}`} + <div className="topbar-logoff" onClick={() => window.location.assign(Utils.prepend("/logout"))}> + Logoff + </div> + </div> + </div> + + </div > + </div > + ); +}
\ No newline at end of file |