diff options
| -rw-r--r-- | src/client/views/topbar/TopBar.tsx | 23 |
1 files changed, 20 insertions, 3 deletions
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx index 0952dda20..230a85d32 100644 --- a/src/client/views/topbar/TopBar.tsx +++ b/src/client/views/topbar/TopBar.tsx @@ -1,6 +1,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Button, IconButton, isDark, Size, Type } from 'browndash-components'; -import { action, computed, observable, reaction } from 'mobx'; +import { action, computed, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { FaBug } from 'react-icons/fa'; @@ -26,13 +26,23 @@ import { DocumentViewInternal, returnEmptyDocViewList } from '../nodes/DocumentV import { DefaultStyleProvider } from '../StyleProvider'; import './TopBar.scss'; import { dropActionType } from '../../util/DragManager'; +import { Flip } from 'react-awesome-reveal'; +import { ObservableReactComponent } from '../ObservableReactComponent'; /** * ABOUT: This is the topbar in Dash, which included the current Dashboard as well as access to information on the user * and settings and help buttons. Future scope for this bar is to include the collaborators that are on the same Dashboard. */ @observer -export class TopBar extends React.Component { +export class TopBar extends ObservableReactComponent<{}> { + static Instance: TopBar; + @observable private _flipDocumentation = 0; + constructor(props: any) { + super(props); + makeObservable(this); + TopBar.Instance = this; + } + navigateToHome = () => { (CollectionDockingView.Instance?.CaptureThumbnail() ?? new Promise<void>(res => res())).then(() => { Doc.ActivePage = 'home'; @@ -162,7 +172,6 @@ export class TopBar extends React.Component { </div> ) : null; } - /** * Returns the right hand side of the topbar. * This part of the topbar includes information about the current user, @@ -184,6 +193,9 @@ export class TopBar extends React.Component { /> ) : null} <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" />} /> + </Flip> <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={'Settings ⌘⇧S'} size={Size.SMALL} color={this.color} onClick={SettingsManager.Instance.open} icon={<FontAwesomeIcon icon="cog" />} /> <IconButton @@ -199,6 +211,11 @@ export class TopBar extends React.Component { ); } + /** + * Make the documentation icon flip around to draw attention to it. + */ + FlipDocumentationIcon = action(() => (this._flipDocumentation = this._flipDocumentation + 1)); + render() { return ( //TODO:glr Add support for light / dark mode |