aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/topbar
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/topbar')
-rw-r--r--src/client/views/topbar/TopBar.scss276
-rw-r--r--src/client/views/topbar/TopBar.tsx126
2 files changed, 201 insertions, 201 deletions
diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss
index 923f1892e..c5b340514 100644
--- a/src/client/views/topbar/TopBar.scss
+++ b/src/client/views/topbar/TopBar.scss
@@ -1,29 +1,44 @@
@import "../global/globalCssVariables";
+
.topbar-container {
- display: flex;
- flex-direction: column;
- width: 100%;
- position: relative;
- font-size: 10px;
- line-height: 1;
- overflow-y: auto;
- overflow-x: visible;
- background: $dark-gray;
- overflow: visible;
- z-index: 1000;
-
- .topbar-bar {
- height: $topbar-height;
- display: grid;
- grid-auto-columns: 33.3% 33.3% 33.3%;
- align-items: center;
- background-color: $dark-gray;
-
- .topBar-icon {
+ display: flex;
+ flex-direction: column;
+ font-size: 10px;
+ line-height: 1;
+ overflow-y: auto;
+ overflow-x: visible;
+ background: $dark-gray;
+ overflow: visible;
+ z-index: 1000;
+ height: $topbar-height;
+ background-color: $dark-gray;
+
+ .topbar-inner-container {
+ display: flex;
+ flex-direction: row;
+ position: relative;
+ display: grid;
+ grid-auto-columns: 33.3% 33.3% 33.3%;
+ align-items: center;
+
+ // &:first-child {
+ // height: 20px;
+ // }
+ }
+
+ .topbar-button-text {
+ color: $white;
+ padding: 10px;
+ size: 15;
+
+ &:hover {
+ font-weight: 500;
+ }
+ }
+
+ .topbar-button-icon {
cursor: pointer;
- font-size: 12.5px;
- font-family: 'Roboto';
width: fit-content;
display: flex;
justify-content: center;
@@ -31,21 +46,22 @@
align-items: center;
justify-self: center;
align-self: center;
- border-radius: $standard-border-radius;
padding: 5px;
transition: linear 0.2s;
- color: $black;
- background-color: $light-gray;
+ color: $white;
&:hover {
- background-color: darken($color: $light-gray, $amount: 20);
+ background-color: darken($color: $light-gray, $amount: 20);
}
- }
+ }
+ .topbar-title {
+ color: $white;
+ font-size: 17;
+ font-weight: 500;
+ }
-
-
- .topbar-center {
+ .topbar-center {
grid-column: 2;
display: inline-flex;
justify-content: center;
@@ -53,42 +69,23 @@
gap: 5px;
.topbar-dashboards {
- display: flex;
- flex-direction: row;
- gap: 5px;
- }
-
- .topbar-lozenge-dashboard {
- display: flex;
-
-
-
- .topbar-dashSelect {
- border: none;
- background-color: $dark-gray;
- color: $white;
- font-family: 'Roboto';
- font-size: 17;
- font-weight: 500;
-
- &:hover {
- cursor: pointer;
- }
- }
+ display: flex;
+ flex-direction: row;
+ gap: 5px;
}
- }
+ }
- .topbar-right {
+ .topbar-right {
grid-column: 3;
position: relative;
display: flex;
justify-content: flex-end;
gap: 5px;
margin-right: 5px;
- }
+ }
- .topbar-left {
+ .topbar-left {
grid-column: 1;
color: black;
font-family: 'Roboto';
@@ -98,123 +95,122 @@
gap: 5px;
.topBar-icon:hover {
- background-color: $close-red;
+ background-color: $close-red;
}
.topbar-lozenge-user,
.topbar-lozenge {
- height: 23;
- font-size: 12;
- color: white;
- font-family: 'Roboto';
- font-weight: 400;
- padding: 4px;
- align-self: center;
- margin-left: 7px;
- display: flex;
- align-items: center;
-
- .topbar-dashSelect {
- border: none;
- background-color: transparent;
- color: black;
- font-family: 'Roboto';
- font-size: 17;
- font-weight: 500;
-
- &:hover {
- cursor: pointer;
- }
- }
+ height: 23;
+ font-size: 12;
+ color: white;
+ font-family: 'Roboto';
+ font-weight: 400;
+ padding: 4px;
+ align-self: center;
+ margin-left: 7px;
+ display: flex;
+ align-items: center;
+
+ .topbar-dashSelect {
+ border: none;
+ background-color: transparent;
+ color: black;
+ font-family: 'Roboto';
+ font-size: 17;
+ font-weight: 500;
+
+ &:hover {
+ cursor: pointer;
+ }
+ }
}
.topbar-logoff {
- border-radius: 3px;
- background: olivedrab;
- color: white;
- display: none;
- margin-left: 5px;
- padding: 1px 2px 1px 2px;
- cursor: pointer;
+ border-radius: 3px;
+ background: olivedrab;
+ color: white;
+ display: none;
+ margin-left: 5px;
+ padding: 1px 2px 1px 2px;
+ cursor: pointer;
}
.topbar-logoff {
- background: red;
+ background: red;
}
.topbar-lozenge-user:hover {
- .topbar-logoff {
- display: inline-block;
- }
+ .topbar-logoff {
+ display: inline-block;
+ }
}
- }
+ }
- .topbar-barChild {
+ .topbar-barChild {
&.topbar-collection {
- flex: 0 1 auto;
- margin-left: 2px;
- margin-right: 2px
+ flex: 0 1 auto;
+ margin-left: 2px;
+ margin-right: 2px
}
&.topbar-input {
- margin: 5px;
- border-radius: 20px;
- border: $dark-gray;
- display: block;
- width: 130px;
- -webkit-transition: width 0.4s;
- transition: width 0.4s;
- /* align-self: stretch; */
- outline: none;
-
- &:focus {
- width: 500px;
- outline: none;
- }
+ margin: 5px;
+ border-radius: 20px;
+ border: $dark-gray;
+ display: block;
+ width: 130px;
+ -webkit-transition: width 0.4s;
+ transition: width 0.4s;
+ /* align-self: stretch; */
+ outline: none;
+
+ &:focus {
+ width: 500px;
+ outline: none;
+ }
}
&.topbar-filter {
- align-self: stretch;
+ align-self: stretch;
- button {
- transform: none;
-
- &:hover {
+ button {
transform: none;
- }
- }
+
+ &:hover {
+ transform: none;
+ }
+ }
}
&.topbar-submit {
- margin-left: 2px;
- margin-right: 2px
+ margin-left: 2px;
+ margin-right: 2px
}
&.topbar-close {
- color: $white;
- max-height: $topbar-height;
+ color: $white;
+ max-height: $topbar-height;
}
- }
- }
+ }
}
.topbar-results {
- display: flex;
- flex-direction: column;
- top: 300px;
- display: flex;
- flex-direction: column;
- height: 100%;
- overflow: visible;
-
- .no-result {
- width: 500px;
- background: $light-gray;
- padding: 10px;
- height: 50px;
- text-transform: uppercase;
- text-align: left;
- font-weight: bold;
- }
+ display: flex;
+ flex-direction: column;
+ top: 300px;
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ overflow: visible;
+
+ .no-result {
+ width: 500px;
+ background: $light-gray;
+ padding: 10px;
+ height: 50px;
+ text-transform: uppercase;
+ text-align: left;
+ font-weight: bold;
+ }
} \ No newline at end of file
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index e486bcb52..6a4deca38 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -3,13 +3,18 @@ import { Tooltip } from "@material-ui/core";
import { action } from "mobx";
import { observer } from "mobx-react";
import * as React from 'react';
-import { Doc, DocListCast } from '../../../fields/Doc';
+import { AclAdmin, Doc, DocListCast } from '../../../fields/Doc';
import { Id } from '../../../fields/FieldSymbols';
-import { StrCast } from '../../../fields/Types';
+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 { ContextMenu } from "../ContextMenu";
import { Borders, Colors } from "../global/globalEnums";
import { MainView } from "../MainView";
import "./TopBar.scss";
@@ -20,64 +25,63 @@ import "./TopBar.scss";
*/
@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}`}
+ navigateToHome = () => {
+ CurrentUserUtils.CaptureDashboardThumbnail()?.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-text" 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> : (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-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" >
+ <div className="topbar-button-text" onClick={() => {SharingManager.Instance.open(undefined, activeDashboard)}}>
+ {/* TODO: if this is my dashboard, display share
+ if this is a shared dashboard, display "view original or view annotated" */}
+ { CurrentUserUtils.ActiveDashboard && (Doc.GetProto(CurrentUserUtils.ActiveDashboard)?.author === Doc.CurrentUserEmail ? "Share": "view original") }
+ </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 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={undoBatch(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">
- <Tooltip title={<div className="dash-tooltip">Create a new dashboard </div>} placement="bottom"><div className="topbar-icon" onClick={async () => {
- const batch = UndoManager.StartBatch("new dash");
- await CurrentUserUtils.createNewDashboard(Doc.UserDoc());
- batch.end();
- }}>
- New<FontAwesomeIcon icon="plus" />
- </div>
- </Tooltip>
- <Tooltip title={<div className="dash-tooltip">Work on a copy of the dashboard layout</div>} placement="bottom">
- <div className="topbar-icon" onClick={async () => {
- const batch = UndoManager.StartBatch("snapshot");
- await CurrentUserUtils.snapshotDashboard(Doc.UserDoc());
- batch.end();
- }}>
- Snapshot<FontAwesomeIcon icon="camera" />
- </div>
- </Tooltip>
- <Tooltip title={<div className="dash-tooltip">Browsing mode for directly navigating to documents</div>} placement="bottom">
- <div className="topbar-icon" style={{ background: MainView.Instance._exploreMode ? Colors.LIGHT_BLUE : undefined }} onClick={action(() => MainView.Instance._exploreMode = !MainView.Instance._exploreMode)}>
- Explore<FontAwesomeIcon icon="map" />
- </div>
- </Tooltip>
- </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" />
- </div>
- <div className="topbar-icon" onClick={() => SettingsManager.Instance.open()}>
- {"Settings"}<FontAwesomeIcon icon="cog" />
- </div>
- </div>
- </div>
- </div >
- );
- }
+ </div>
+
+ );
+ }
} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-15 16:50:07 +0000