diff options
| -rw-r--r-- | src/client/util/CurrentUserUtils.ts | 6 | ||||
| -rw-r--r-- | src/client/views/DashboardView.scss | 9 | ||||
| -rw-r--r-- | src/client/views/DashboardView.tsx | 32 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionStackingView.scss | 5 | ||||
| -rw-r--r-- | src/client/views/topbar/TopBar.tsx | 4 |
5 files changed, 43 insertions, 13 deletions
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index c801a6f2f..e46bb3b3e 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -1214,6 +1214,10 @@ export class CurrentUserUtils { CurrentUserUtils.openDashboard(userDoc, copy); } + public static closeActiveDashboard = () => { + Doc.UserDoc().activeDashboard = undefined; + } + public static createNewDashboard = async (userDoc: Doc, id?: string) => { const presentation = Doc.MakeCopy(userDoc.emptyPresentation as Doc, true); const dashboards = await Cast(userDoc.myDashboards, Doc) as Doc; @@ -1239,7 +1243,7 @@ export class CurrentUserUtils { userDoc.activePresentation = presentation; Doc.AddDocToList(dashboards, "data", dashboardDoc); - CurrentUserUtils.openDashboard(userDoc, dashboardDoc); + // CurrentUserUtils.openDashboard(userDoc, 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 1896d7bfb..67587dd2b 100644 --- a/src/client/views/DashboardView.scss +++ b/src/client/views/DashboardView.scss @@ -17,7 +17,16 @@ } } +.text-button { + padding: 10px 0; + &:hover { + font-weight: 500; + } + &.selected { + font-weight: 700; + } +} .dashboard-container { border-radius: 10px; diff --git a/src/client/views/DashboardView.tsx b/src/client/views/DashboardView.tsx index e003968d6..efc1644fe 100644 --- a/src/client/views/DashboardView.tsx +++ b/src/client/views/DashboardView.tsx @@ -1,4 +1,4 @@ -import { observable } from "mobx"; +import { action, observable } from "mobx"; import { extname } from 'path'; import { observer } from "mobx-react"; import * as React from 'react'; @@ -9,11 +9,23 @@ import { CurrentUserUtils } from "../util/CurrentUserUtils"; import { UndoManager } from "../util/UndoManager"; import "./DashboardView.scss" +enum DashboardGroup { + MyDashboards, SharedDashboards +} + @observer export class DashboardView extends React.Component { //TODO: delete dashboard, share dashboard, etc. + @observable + private selectedDashboardGroup = DashboardGroup.MyDashboards; + + @action + selectDashboardGroup = (group: DashboardGroup) => { + this.selectedDashboardGroup = group + } + newDashboard = async () => { const batch = UndoManager.StartBatch("new dash"); await CurrentUserUtils.createNewDashboard(Doc.UserDoc()); @@ -27,15 +39,22 @@ export class DashboardView extends React.Component { } } + getDashboards = () => { + const allDashbaords = DocListCast(CurrentUserUtils.MyDashboards.data); + // TODO: filter the dashboards + // return allDashbaords.filter(...) + return allDashbaords + } + render() { - const myDashboards = DocListCast(CurrentUserUtils.MyDashboards.data); return <div className="dashboard-view"> <div className="left-menu"> - <div onClick={this.newDashboard}>New</div> - <div>All Dashboards</div> + <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"> - {myDashboards.map((dashboard) => { + {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> @@ -43,9 +62,6 @@ export class DashboardView extends React.Component { </div> })} - {myDashboards.map((dashboard) => { - console.log(dashboard.thumb) - })} </div> </div> diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss index 2f002736d..73572299a 100644 --- a/src/client/views/collections/CollectionStackingView.scss +++ b/src/client/views/collections/CollectionStackingView.scss @@ -30,11 +30,10 @@ width: 90%; margin: 5px; font-size: 11px; - background-color: $light-blue; color: $medium-blue; padding: 10px; - border-radius: 10px; - border: solid 2px $medium-blue; + border-radius: 5px; + border: solid .5px $medium-blue; } } diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx index 258891099..57ceac2dd 100644 --- a/src/client/views/topbar/TopBar.tsx +++ b/src/client/views/topbar/TopBar.tsx @@ -9,6 +9,7 @@ import { Cast, StrCast } from '../../../fields/Types'; import { Utils } from '../../../Utils'; import { CurrentUserUtils } from "../../util/CurrentUserUtils"; import { SettingsManager } from "../../util/SettingsManager"; +import { SharingManager } from "../../util/SharingManager"; import { undoBatch, UndoManager } from "../../util/UndoManager"; import { Borders, Colors } from "../global/globalEnums"; import { MainView } from "../MainView"; @@ -21,6 +22,7 @@ import "./TopBar.scss"; @observer export class TopBar extends React.Component { navigateToHome = () => { + CurrentUserUtils.closeActiveDashboard(); CurrentUserUtils.CaptureDashboardThumbnail()?.then(() => Doc.UserDoc().activePage = "home"); } render() { @@ -57,7 +59,7 @@ export class TopBar extends React.Component { <div className="topbar-right" > {/* TODO: if this is my dashboard, display share if this is a shared dashboard, display "view original or view annotated" */} - <div className="topbar-button-text" >Share</div> + <div className="topbar-button-text" onClick={() => {SharingManager.Instance.open(undefined, activeDashboard)}}>Share</div> </div> </div> </div> |