diff options
Diffstat (limited to 'src/client/views/topbar')
| -rw-r--r-- | src/client/views/topbar/TopBar.scss | 7 | ||||
| -rw-r--r-- | src/client/views/topbar/TopBar.tsx | 68 |
2 files changed, 59 insertions, 16 deletions
diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss index ca177c746..9bae92586 100644 --- a/src/client/views/topbar/TopBar.scss +++ b/src/client/views/topbar/TopBar.scss @@ -238,3 +238,10 @@ font-weight: bold; } } + +.topbar-right .dropdown-container { + width: 30px !important; + display: inline-flex !important; + margin: 0 !important; + padding: 0 !important; +} diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx index 18e30b3c2..9b24219cf 100644 --- a/src/client/views/topbar/TopBar.tsx +++ b/src/client/views/topbar/TopBar.tsx @@ -1,11 +1,10 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Button, IconButton, isDark, Size, Type } from '@dash/components'; +import { Button, Dropdown, DropdownType, IconButton, isDark, Size, Type } from '@dash/components'; import { action, computed, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { Flip } from 'react-awesome-reveal'; import { FaBug } from 'react-icons/fa'; -import { returnEmptyFilter, returnFalse, returnTrue } from '../../../ClientUtils'; +import { ClientUtils, returnEmptyFilter, returnFalse, returnTrue } from '../../../ClientUtils'; import { Doc, DocListCast, returnEmptyDoclist } from '../../../fields/Doc'; import { AclAdmin, DashVersion } from '../../../fields/DocSymbols'; import { StrCast } from '../../../fields/Types'; @@ -27,6 +26,8 @@ import { DocumentView, DocumentViewInternal } from '../nodes/DocumentView'; import { ObservableReactComponent } from '../ObservableReactComponent'; import { DefaultStyleProvider, returnEmptyDocViewList } from '../StyleProvider'; import './TopBar.scss'; +import { OpenWhere } from '../nodes/OpenWhere'; +import { Docs } from '../../documents/Documents'; /** * ABOUT: This is the topbar in Dash, which included the current Dashboard as well as access to information on the user @@ -84,7 +85,7 @@ export class TopBar extends ObservableReactComponent<object> { {Doc.ActiveDashboard ? ( <IconButton onClick={this.navigateToHome} - icon={<FontAwesomeIcon icon={DocListCast(Doc.MySharedDocs.data_dashboards).some(dash => !DocListCast(Doc.MySharedDocs.viewed).includes(dash)) ? 'portrait' : 'home'} />} + icon={<FontAwesomeIcon icon={DocListCast(Doc.MySharedDocs?.data_dashboards)?.some(dash => !DocListCast(Doc.MySharedDocs?.viewed)?.includes(dash)) ? 'portrait' : 'home'} />} color={this.color} background={this.backgroundColor} /> @@ -196,18 +197,53 @@ export class TopBar extends ObservableReactComponent<object> { onClick={() => SharingManager.Instance.open(undefined, Doc.ActiveDashboard)} /> ) : null} - <IconButton tooltip="Issue Reporter ⌘I" size={Size.SMALL} color={this.color} background={this.backgroundColor} onClick={ReportManager.Instance.open} icon={<FaBug />} /> - <Flip key={this._flipDocumentation}> - <IconButton - tooltip="Documentation ⌘D" - size={Size.SMALL} - color={this.color} - background={this.backgroundColor} - 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} background={this.backgroundColor} onClick={SettingsManager.Instance.openMgr} icon={<FontAwesomeIcon icon="cog" />} /> + <IconButton tooltip="Issue Reporter ⌘I" size={Size.SMALL} color={this.color} onClick={ReportManager.Instance.open} icon={<FaBug />} /> + {/* <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" />} /> */} + <Dropdown + iconProvider={() => <FontAwesomeIcon icon="question-circle" />} + dropdownType={DropdownType.CLICK} + background={this.backgroundColor} + style={{ padding: 0, minWidth: 'unset', margin: 0, width: 30, display: 'inline-flex' }} + toolTip="Help" + placement="bottom" + items={[ + { + val: 'documentation', + text: 'Documentation', + tooltip: 'Documentation ⌘D', + onClick: () => { + window.open('https://brown-dash.github.io/Dash-Documentation/', '_blank'); + }, + }, + { + val: 'tutorial', + text: 'Tutorial', + onClick: () => { + Doc.IsInfoUIDisabled = false; + }, + }, + { + val: 'tutorialagent', + text: 'Ask AI!', + onClick: () => { + const userEmail = ClientUtils.CurrentUserEmail(); + const userName = userEmail.split('@')[0]; + const doc = Docs.Create.ChatDocument({ + chat: 'Welcome to your help assistant for Dash. Ask any Dash-related questions to get started.', + title: `${userName}'s Dash Help Assistant`, + is_dash_doc_assistant: 'true', + }); + DocumentViewInternal.addDocTabFunc(doc, OpenWhere.addRight); + }, + }, + ]} + width={30} + size={Size.SMALL} + color={this.color} + closeOnSelect={true} + onPointerLeave={() => {}} + /> + <IconButton tooltip="Settings ⌘⇧S" size={Size.SMALL} color={this.color} onClick={SettingsManager.Instance.openMgr} icon={<FontAwesomeIcon icon="cog" />} style={{ margin: 0, padding: 0 }} /> <IconButton size={Size.SMALL} onClick={ServerStats.Instance.open} |