diff options
Diffstat (limited to 'src/client/views/topbar/TopBar.tsx')
| -rw-r--r-- | src/client/views/topbar/TopBar.tsx | 38 |
1 files changed, 22 insertions, 16 deletions
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx index eab33114e..9f97efcce 100644 --- a/src/client/views/topbar/TopBar.tsx +++ b/src/client/views/topbar/TopBar.tsx @@ -5,14 +5,13 @@ import { observer } from 'mobx-react'; import * as React from 'react'; import { Flip } from 'react-awesome-reveal'; import { FaBug } from 'react-icons/fa'; +import { returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../../../ClientUtils'; import { Doc, DocListCast } from '../../../fields/Doc'; import { AclAdmin, DashVersion } from '../../../fields/DocSymbols'; import { StrCast } from '../../../fields/Types'; import { GetEffectiveAcl } from '../../../fields/util'; -import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../../../Utils'; -import { CurrentUserUtils } from '../../util/CurrentUserUtils'; -import { DocumentManager } from '../../util/DocumentManager'; -import { dropActionType } from '../../util/DragManager'; +import { emptyFunction } from '../../../Utils'; +import { dropActionType } from '../../util/DropActionTypes'; import { PingManager } from '../../util/PingManager'; import { ReportManager } from '../../util/reportManager/ReportManager'; import { ServerStats } from '../../util/ServerStats'; @@ -24,7 +23,7 @@ import { CollectionDockingView } from '../collections/CollectionDockingView'; import { CollectionLinearView } from '../collections/collectionLinear'; import { DashboardView } from '../DashboardView'; import { Colors } from '../global/globalEnums'; -import { DocumentViewInternal, returnEmptyDocViewList } from '../nodes/DocumentView'; +import { DocumentView, DocumentViewInternal, returnEmptyDocViewList } from '../nodes/DocumentView'; import { ObservableReactComponent } from '../ObservableReactComponent'; import { DefaultStyleProvider } from '../StyleProvider'; import './TopBar.scss'; @@ -35,6 +34,7 @@ import './TopBar.scss'; */ @observer export class TopBar extends ObservableReactComponent<{}> { + // eslint-disable-next-line no-use-before-define static Instance: TopBar; @observable private _flipDocumentation = 0; constructor(props: any) { @@ -44,10 +44,12 @@ export class TopBar extends ObservableReactComponent<{}> { } navigateToHome = () => { - (CollectionDockingView.Instance?.CaptureThumbnail() ?? new Promise<void>(res => res())).then(() => { + (CollectionDockingView.Instance?.CaptureThumbnail() ?? + new Promise<void>(res => { res(); })) .then(() => + { Doc.ActivePage = 'home'; DashboardView.closeActiveDashboard(); // bcz: if we do this, we need some other way to keep track, for user convenience, of the last dashboard in use - }); + }); // prettier-ignore }; @computed get color() { @@ -61,7 +63,9 @@ export class TopBar extends ObservableReactComponent<{}> { } @observable happyHeart: boolean = PingManager.Instance.IsBeating; - setHappyHeart = action((status: boolean) => (this.happyHeart = status)); + setHappyHeart = action((status: boolean) => { + this.happyHeart = status; + }); dispose = reaction( () => PingManager.Instance.IsBeating, isBeating => this.setHappyHeart(isBeating) @@ -85,7 +89,7 @@ export class TopBar extends ObservableReactComponent<{}> { /> ) : ( <div className="logo-container"> - <img className="logo" src="/assets/medium-blue-light-blue-circle.png" alt="dash logo"></img> + <img className="logo" src="/assets/medium-blue-light-blue-circle.png" alt="dash logo" /> <span style={{ color: isDark(this.backgroundColor) ? Colors.LIGHT_GRAY : Colors.DARK_GRAY, fontWeight: 200 }}>brown</span> <span style={{ color: isDark(this.backgroundColor) ? Colors.LIGHT_BLUE : Colors.MEDIUM_BLUE, fontWeight: 500 }}>dash</span> </div> @@ -164,7 +168,7 @@ export class TopBar extends ObservableReactComponent<{}> { color={this.color} style={{ fontWeight: 700, fontSize: '1rem' }} onClick={(e: React.MouseEvent) => { - const dashView = Doc.ActiveDashboard && DocumentManager.Instance.getDocumentView(Doc.ActiveDashboard); + const dashView = Doc.ActiveDashboard && DocumentView.getDocumentView(Doc.ActiveDashboard); dashView?.showContextMenu(e.clientX + 20, e.clientY + 30); }} /> @@ -178,7 +182,7 @@ export class TopBar extends ObservableReactComponent<{}> { * and allows the user to access their account settings etc. */ @computed get topbarRight() { - const upToDate = DashVersion === CurrentUserUtils.ServerVersion; + const upToDate = DashVersion === SnappingManager.ServerVersion; return ( <div className="topbar-right"> {Doc.ActiveDashboard ? ( @@ -192,11 +196,11 @@ export class TopBar extends ObservableReactComponent<{}> { }} /> ) : null} - <IconButton tooltip={'Issue Reporter ⌘I'} size={Size.SMALL} color={this.color} onClick={ReportManager.Instance.open} icon={<FaBug />} /> + <IconButton tooltip="Issue Reporter ⌘I" size={Size.SMALL} color={this.color} onClick={ReportManager.Instance.open} icon={<FaBug />} /> <Flip key={this._flipDocumentation}> - <IconButton tooltip={'Documentation ⌘D'} size={Size.SMALL} color={this.color} onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/', '_blank')} icon={<FontAwesomeIcon icon="question-circle" />} /> + <IconButton tooltip="Documentation ⌘D" size={Size.SMALL} color={this.color} onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/', '_blank')} icon={<FontAwesomeIcon icon="question-circle" />} /> </Flip> - <IconButton tooltip={'Settings ⌘⇧S'} size={Size.SMALL} color={this.color} onClick={SettingsManager.Instance.open} icon={<FontAwesomeIcon icon="cog" />} /> + <IconButton tooltip="Settings ⌘⇧S" size={Size.SMALL} color={this.color} onClick={SettingsManager.Instance.openMgr} icon={<FontAwesomeIcon icon="cog" />} /> <IconButton size={Size.SMALL} onClick={ServerStats.Instance.open} @@ -213,11 +217,13 @@ export class TopBar extends ObservableReactComponent<{}> { /** * Make the documentation icon flip around to draw attention to it. */ - FlipDocumentationIcon = action(() => (this._flipDocumentation = this._flipDocumentation + 1)); + FlipDocumentationIcon = action(() => { + this._flipDocumentation += 1; + }); render() { return ( - //TODO:glr Add support for light / dark mode + // TODO:glr Add support for light / dark mode <div style={{ pointerEvents: 'all', |