diff options
Diffstat (limited to 'src/client/views/topbar')
| -rw-r--r-- | src/client/views/topbar/TopBar.scss | 18 | ||||
| -rw-r--r-- | src/client/views/topbar/TopBar.tsx | 90 |
2 files changed, 47 insertions, 61 deletions
diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss index ede59a910..2237d5ac1 100644 --- a/src/client/views/topbar/TopBar.scss +++ b/src/client/views/topbar/TopBar.scss @@ -1,22 +1,6 @@ @import '../global/globalCssVariables'; -.iconButton-container.primary { - color: white; - .iconButton-background { - filter: unset; - background: transparent; - } -} -.topbarHeart-red { - .iconButton-container.primary { - .iconButton-content { - color: red; - } - .iconButton-background { - background: black; - } - } -} + .topbar-container { flex-direction: column; font-size: 10px; diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx index 20cf563c1..130e47a41 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 { Tooltip } from '@mui/material'; -import { Button, FontSize, IconButton, Size } from 'browndash-components'; +import { Button, IconButton, Size, Type, isDark } from 'browndash-components'; import { action, computed, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { FaBug, FaCamera, FaStamp } from 'react-icons/fa'; -import { Doc } from '../../../fields/Doc'; +import { Doc, DocListCast } from '../../../fields/Doc'; import { AclAdmin } from '../../../fields/DocSymbols'; import { StrCast } from '../../../fields/Types'; import { GetEffectiveAcl } from '../../../fields/util'; @@ -16,11 +15,11 @@ import { ServerStats } from '../../util/ServerStats'; import { SettingsManager } from '../../util/SettingsManager'; import { SharingManager } from '../../util/SharingManager'; import { UndoManager } from '../../util/UndoManager'; -import { CollectionDockingView } from '../collections/CollectionDockingView'; import { ContextMenu } from '../ContextMenu'; import { DashboardView } from '../DashboardView'; -import { Colors } from '../global/globalEnums'; import { MainView } from '../MainView'; +import { CollectionDockingView } from '../collections/CollectionDockingView'; +import { Colors } from '../global/globalEnums'; import './TopBar.scss'; /** @@ -36,9 +35,10 @@ export class TopBar extends React.Component { }); }; - @observable textColor: string = Colors.LIGHT_GRAY; + @computed get color() { return StrCast(Doc.UserDoc().userColor, Colors.LIGHT_GRAY); } + @computed get variantColor() { return StrCast(Doc.UserDoc().userVariantColor, Colors.MEDIUM_BLUE); } @computed get backgroundColor() { - return PingManager.Instance.IsBeating ? Colors.DARK_GRAY : Colors.MEDIUM_GRAY; + return PingManager.Instance.IsBeating ? StrCast(Doc.UserDoc().userBackgroundColor, Colors.DARK_GRAY) : Colors.MEDIUM_GRAY; } @observable happyHeart: boolean = PingManager.Instance.IsBeating; @@ -59,16 +59,20 @@ export class TopBar extends React.Component { return ( <div className="topbar-left"> {Doc.ActiveDashboard ? ( - <IconButton onClick={this.navigateToHome} icon={<FontAwesomeIcon icon="home" />} color={this.textColor} /> + <IconButton + onClick={this.navigateToHome} + icon={<FontAwesomeIcon icon={DocListCast(Doc.MySharedDocs.data_dashboards).some(dash => !DocListCast(Doc.MySharedDocs.viewed).includes(dash)) ? 'portrait' : 'home'} />} + color={this.color} + /> ) : ( <div className="logo-container"> <img className="logo" src="/assets/medium-blue-light-blue-circle.png" alt="dash logo"></img> - <span style={{ color: Colors.LIGHT_GRAY, fontWeight: 200 }}>brown</span> - <span style={{ color: Colors.LIGHT_BLUE, fontWeight: 500 }}>dash</span> + <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> )} {Doc.ActiveDashboard && ( - <Button text="Explore" tooltip="Browsing mode for directly navigating to documents" size={Size.SMALL} color={this.textColor} onClick={action(() => (MainView.Instance._exploreMode = !MainView.Instance._exploreMode))} /> + <Button text="Explore" tooltip="Browsing mode for directly navigating to documents" size={Size.SMALL} color={this.color} onClick={action(() => (MainView.Instance._exploreMode = !MainView.Instance._exploreMode))} /> )} </div> ); @@ -95,9 +99,10 @@ export class TopBar extends React.Component { <div className="topbar-center"> <Button text={StrCast(Doc.ActiveDashboard.title)} - tooltip="Browsing mode for directly navigating to documents" + tooltip="Open Dashboards" size={Size.SMALL} - color={'white'} + color={this.color} + style={{fontWeight: 700, fontSize: '1rem'}} onClick={(e: React.MouseEvent) => { const dashView = Doc.ActiveDashboard && DocumentManager.Instance.getDocumentView(Doc.ActiveDashboard); ContextMenu.Instance.addItem({ description: 'Open Dashboard View', event: this.navigateToHome, icon: 'edit' }); @@ -113,18 +118,11 @@ export class TopBar extends React.Component { dashView?.showContextMenu(e.clientX + 20, e.clientY + 30); }} /> - <Button - text={GetEffectiveAcl(Doc.GetProto(Doc.ActiveDashboard)) === AclAdmin ? 'Share' : 'View Original'} - onClick={() => { - SharingManager.Instance.open(undefined, Doc.ActiveDashboard); - }} - size={Size.SMALL} - /> {!Doc.noviceMode && ( <IconButton tooltip="Work on a copy of the dashboard layout" size={Size.SMALL} - color={this.textColor} + color={this.color} onClick={async () => { const batch = UndoManager.StartBatch('snapshot'); await DashboardView.snapshotDashboard(); @@ -145,22 +143,26 @@ export class TopBar extends React.Component { @computed get topbarRight() { return ( <div className="topbar-right"> - <IconButton size={Size.SMALL} color={Colors.LIGHT_GRAY} onClick={ServerStats.Instance.open} icon={<FaStamp />} /> - <IconButton size={Size.SMALL} color={Colors.LIGHT_GRAY} onClick={ReportManager.Instance.open} icon={<FaBug />} /> - <IconButton size={Size.SMALL} color={Colors.LIGHT_GRAY} onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/', '_blank')} icon={<FontAwesomeIcon icon="question-circle" />} /> - <IconButton size={Size.SMALL} color={Colors.LIGHT_GRAY} onClick={SettingsManager.Instance.open} icon={<FontAwesomeIcon icon="cog" />} /> - <Tooltip title={<div className="dash-tooltip">{'Server connection ' + (PingManager.Instance.IsBeating ? 'active' : 'broken')}</div>}> - <div className={'topbarHeart' + (this.happyHeart ? '' : '-red')}> - <IconButton - size={Size.SMALL} - onClick={PingManager.Instance.showAlert} - tooltip={'Server is ' + (PingManager.Instance.IsBeating ? '' : 'NOT ') + 'running'} - color={this.happyHeart ? Colors.LIGHT_BLUE : Colors.ERROR_RED} - icon={<FontAwesomeIcon icon={this.happyHeart ? 'heart' : 'heart-broken'} />} - /> - </div> - </Tooltip> - {/* <Button text={'Logout'} borderRadius={5} hoverStyle={'gray'} backgroundColor={Colors.DARK_GRAY} color={this.textColor} fontSize={FontSize.SECONDARY} onClick={() => window.location.assign(Utils.prepend('/logout'))} /> */} + <Button + text={GetEffectiveAcl(Doc.ActiveDashboard) === AclAdmin ? 'Share' : 'View Original'} + type={Type.TERT} + color={this.variantColor} + onClick={() => { + SharingManager.Instance.open(undefined, Doc.ActiveDashboard); + }} + /> + <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" />} /> + <IconButton tooltip={"Settings ⌘⇧S"} size={Size.SMALL} color={this.color} onClick={SettingsManager.Instance.open} icon={<FontAwesomeIcon icon="cog" />} /> + <IconButton + size={Size.SMALL} + onClick={ServerStats.Instance.open} + type={Type.TERT} + tooltip={'Server is ' + (PingManager.Instance.IsBeating ? '' : 'NOT ') + 'running'} + color={this.happyHeart ? Colors.LIGHT_BLUE : Colors.ERROR_RED} + icon={<FontAwesomeIcon icon={this.happyHeart ? 'heart' : 'heart-broken'} />} + /> + {/* <Button text={'Logout'} borderRadius={5} hoverStyle={'gray'} backgroundColor={Colors.DARK_GRAY} color={this.color} fontSize={FontSize.SECONDARY} onClick={() => window.location.assign(Utils.prepend('/logout'))} /> */} </div> ); } @@ -168,13 +170,13 @@ export class TopBar extends React.Component { render() { return ( //TODO:glr Add support for light / dark mode - <div style={{ pointerEvents: 'all' }} className="topbar-container"> - <div - className="topbar-inner-container" - style={{ - color: this.textColor, - background: this.backgroundColor, - }}> + <div style={{ + pointerEvents: 'all', + color: this.color, + background: this.backgroundColor, + // borderColor: this.color + }} className="topbar-container"> + <div className="topbar-inner-container"> {this.topbarLeft} {this.topbarCenter} {this.topbarRight} |