aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/util/CurrentUserUtils.ts9
-rw-r--r--src/client/views/DashboardView.scss2
-rw-r--r--src/client/views/DashboardView.tsx71
-rw-r--r--src/client/views/topbar/TopBar.tsx55
4 files changed, 87 insertions, 50 deletions
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 60bfc165b..aa7c2a39b 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -1222,7 +1222,8 @@ export class CurrentUserUtils {
Doc.UserDoc().activeDashboard = undefined;
}
- public static createNewDashboard = async (userDoc: Doc, id?: string) => {
+ public static createNewDashboard = async (userDoc: Doc, id?: string, name?: string) => {
+ console.log(name)
const presentation = Doc.MakeCopy(userDoc.emptyPresentation as Doc, true);
const dashboards = await Cast(userDoc.myDashboards, Doc) as Doc;
const dashboardCount = DocListCast(dashboards.data).length + 1;
@@ -1235,8 +1236,9 @@ export class CurrentUserUtils {
_backgroundGridShow: true,
title: `Untitled Tab 1`,
};
+ const title = name ? name : `Dashboard ${dashboardCount}`
const freeformDoc = CurrentUserUtils.GuestTarget || Docs.Create.FreeformDocument([], freeformOptions);
- const dashboardDoc = Docs.Create.StandardCollectionDockingDocument([{ doc: freeformDoc, initialWidth: 600 }], { title: `Dashboard ${dashboardCount}` }, id, "row");
+ const dashboardDoc = Docs.Create.StandardCollectionDockingDocument([{ doc: freeformDoc, initialWidth: 600 }], { title: title }, id, "row");
freeformDoc.context = dashboardDoc;
// switching the tabs from the datadoc to the regular doc
@@ -1247,7 +1249,8 @@ export class CurrentUserUtils {
userDoc.activePresentation = presentation;
Doc.AddDocToList(dashboards, "data", dashboardDoc);
- // CurrentUserUtils.openDashboard(userDoc, dashboardDoc);
+ // open this new dashboard
+ // Doc.UserDoc().activeDashboard = dashboardDoc;
}
public static GetNewTextDoc(title: string, x: number, y: number, width?: number, height?: number, noMargins?: boolean, annotationOn?: Doc, maxHeight?: number, backgroundColor?: string) {
diff --git a/src/client/views/DashboardView.scss b/src/client/views/DashboardView.scss
index 67587dd2b..06f331c13 100644
--- a/src/client/views/DashboardView.scss
+++ b/src/client/views/DashboardView.scss
@@ -2,6 +2,8 @@
padding: 50px;
display: flex;
flex-direction: row;
+ width: 100%;
+ position: absolute;
.left-menu {
display: flex;
diff --git a/src/client/views/DashboardView.tsx b/src/client/views/DashboardView.tsx
index 5aacec61f..fa8a98402 100644
--- a/src/client/views/DashboardView.tsx
+++ b/src/client/views/DashboardView.tsx
@@ -1,4 +1,4 @@
-import { action, observable } from "mobx";
+import { action, computed, observable } from "mobx";
import { extname } from 'path';
import { observer } from "mobx-react";
import * as React from 'react';
@@ -8,6 +8,7 @@ import { Cast, ImageCast, StrCast } from "../../fields/Types";
import { CurrentUserUtils } from "../util/CurrentUserUtils";
import { UndoManager } from "../util/UndoManager";
import "./DashboardView.scss"
+import { MainViewModal } from "./MainViewModal";
enum DashboardGroup {
MyDashboards, SharedDashboards
@@ -18,20 +19,17 @@ export class DashboardView extends React.Component {
//TODO: delete dashboard, share dashboard, etc.
- @observable
- private selectedDashboardGroup = DashboardGroup.MyDashboards;
+ @observable private selectedDashboardGroup = DashboardGroup.MyDashboards;
+
+ @observable private newDashboardName: string | undefined = undefined;
+ @action abortCreateNewDashboard = () => { this.newDashboardName = undefined }
+ @action setNewDashboardName(name: string) { this.newDashboardName = name}
@action
selectDashboardGroup = (group: DashboardGroup) => {
this.selectedDashboardGroup = group
}
- newDashboard = async () => {
- const batch = UndoManager.StartBatch("new dash");
- await CurrentUserUtils.createNewDashboard(Doc.UserDoc());
- batch.end();
- }
-
clickDashboard = async (e: React.MouseEvent, dashboard: Doc) => {
if (e.detail === 2) {
Doc.UserDoc().activeDashboard = dashboard;
@@ -48,24 +46,49 @@ export class DashboardView extends React.Component {
}
}
+ createNewDashboard = async (name: string) => {
+ const batch = UndoManager.StartBatch("new dash");
+ await CurrentUserUtils.createNewDashboard(Doc.UserDoc(), undefined, name);
+ batch.end();
+ this.abortCreateNewDashboard();
+ }
+
+ @computed
+ get namingInterface() {
+ 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>;
+ }
+
render() {
- return <div className="dashboard-view">
- <div className="left-menu">
- <div className="text-button" onClick={this.newDashboard}>New</div>
- <div className={`text-button ${this.selectedDashboardGroup === DashboardGroup.MyDashboards && 'selected'}`}onClick={() => this.selectDashboardGroup(DashboardGroup.MyDashboards) }>My Dashboards</div>
- <div className={`text-button ${this.selectedDashboardGroup === DashboardGroup.SharedDashboards && 'selected'}`} onClick={() => this.selectDashboardGroup(DashboardGroup.SharedDashboards) }>Shared Dashboards</div>
- </div>
- <div className="all-dashboards">
- {this.getDashboards().map((dashboard) => {
- const href = ImageCast((dashboard.thumb as Doc)?.data)?.url.href;
- return <div className="dashboard-container" key={dashboard[Id]} onClick={e => this.clickDashboard(e, dashboard)}>
- <img src={href ?? "https://media.istockphoto.com/photos/hot-air-balloons-flying-over-the-botan-canyon-in-turkey-picture-id1297349747?b=1&k=20&m=1297349747&s=170667a&w=0&h=oH31fJty_4xWl_JQ4OIQWZKP8C6ji9Mz7L4XmEnbqRU="}></img>
- <div className="title"> {StrCast(dashboard.title)} </div>
- </div>
+ return <>
+ <div className="dashboard-view">
+ <div className="left-menu">
+ <div className="text-button" onClick={() => { this.setNewDashboardName("") }}>New</div>
+ <div className={`text-button ${this.selectedDashboardGroup === DashboardGroup.MyDashboards && 'selected'}`} onClick={() => this.selectDashboardGroup(DashboardGroup.MyDashboards)}>My Dashboards</div>
+ <div className={`text-button ${this.selectedDashboardGroup === DashboardGroup.SharedDashboards && 'selected'}`} onClick={() => this.selectDashboardGroup(DashboardGroup.SharedDashboards)}>Shared Dashboards</div>
+ </div>
+ <div className="all-dashboards">
+ {this.getDashboards().map((dashboard) => {
+ const href = ImageCast((dashboard.thumb as Doc)?.data)?.url.href;
+ return <div className="dashboard-container" key={dashboard[Id]} onClick={e => this.clickDashboard(e, dashboard)}>
+ <img src={href ?? "https://media.istockphoto.com/photos/hot-air-balloons-flying-over-the-botan-canyon-in-turkey-picture-id1297349747?b=1&k=20&m=1297349747&s=170667a&w=0&h=oH31fJty_4xWl_JQ4OIQWZKP8C6ji9Mz7L4XmEnbqRU="}></img>
+ <div className="title"> {StrCast(dashboard.title)} </div>
+ </div>
- })}
+ })}
+ </div>
</div>
- </div>
+ <MainViewModal
+ contents={this.namingInterface}
+ isDisplayed={this.newDashboardName !== undefined}
+ interactive={true}
+ closeOnExternalClick={this.abortCreateNewDashboard}
+ dialogueBoxStyle={{ width: "500px", height: "300px", background: Cast(Doc.SharingDoc().userColor, "string", null) }} />;
+ </>
+
}
}
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index 7ff7063cd..0665e79ed 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -27,8 +27,8 @@ import "./TopBar.scss";
export class TopBar extends React.Component {
navigateToHome = () => {
CurrentUserUtils.CaptureDashboardThumbnail()?.then(() => {
- Doc.UserDoc().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
+ Doc.UserDoc().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() {
@@ -38,39 +38,48 @@ export class TopBar extends React.Component {
<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)}
+ {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>
+ <div className="topbar-button-icon" onClick={this.navigateToHome}>
+ <FontAwesomeIcon icon="home" />
+ </div>
+ </>
+ : (null)}
+
</div>
<div className="topbar-center" >
<div className="topbar-title" onClick={() => SelectionManager.SelectView(DocumentManager.Instance.getDocumentView(activeDashboard)!, false)}>
{activeDashboard ? StrCast(activeDashboard.title) : "Dash"}
</div>
<div className="topbar-button-icon" onClick={e => {
- const dashView = 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(Doc.UserDoc());
- batch.end();
- }, icon: "edit" });
- dashView?.showContextMenu(e.clientX+20, e.clientY+30);
+ const dashView = DocumentManager.Instance.getDocumentView(activeDashboard);
+ ContextMenu.Instance.addItem({
+ description: "Snapshot Dashboard", event: async () => {
+ const batch = UndoManager.StartBatch("snapshot");
+ await CurrentUserUtils.snapshotDashboard(Doc.UserDoc());
+ batch.end();
+ }, icon: "edit"
+ });
+ dashView?.showContextMenu(e.clientX + 20, e.clientY + 30);
}}>
- <FontAwesomeIcon color="white" size="lg" icon="bars" />
+ <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>
+ <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" >
- {CurrentUserUtils.ActiveDashboard ? <div className="topbar-button-text" onClick={() => {SharingManager.Instance.open(undefined, activeDashboard)}}>
- {/* TODO: if I have edit access to the dashboard, display share
+ {CurrentUserUtils.ActiveDashboard ? <div className="topbar-button-text" onClick={() => { SharingManager.Instance.open(undefined, activeDashboard) }}>
+ {/* TODO: if I have edit access to the dashboard, display share
if this is a shared dashboard, display "view original or view annotated" */}
- {/* { Doc.GetProto(CurrentUserUtils.ActiveDashboard)?.author === Doc.CurrentUserEmail ? "Share": "view original" } */}
- { GetEffectiveAcl(Doc.GetProto(CurrentUserUtils.ActiveDashboard)) === AclAdmin ? "Share": "view original" }
+ {/* { Doc.GetProto(CurrentUserUtils.ActiveDashboard)?.author === Doc.CurrentUserEmail ? "Share": "view original" } */}
+ {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")}>
@@ -82,7 +91,7 @@ export class TopBar extends React.Component {
</div>
</div>
</div>
-
+
);
}
} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-10 09:30:02 +0000