Merge branch 'master' into UI_Update_Eric_Ma

2 files changed, 276 insertions, 253 deletions

diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss
index a1131b92e..2237d5ac1 100644
--- a/src/client/views/topbar/TopBar.scss
+++ b/src/client/views/topbar/TopBar.scss
@@ -1,243 +1,240 @@
-@import "../global/globalCssVariables";
+@import '../global/globalCssVariables';
 
 
 .topbar-container {
-      flex-direction: column;
-      font-size: 10px;
-      line-height: 1;
-      overflow-y: auto;
-      overflow-x: visible;
-      background: $dark-gray;
-      overflow: visible;
-      z-index: 1000;
-      align-items: center;
-      height: $topbar-height;
-      background-color: $dark-gray;
-      border-bottom: $standard-border;
-      padding: 0px 10px;
-      cursor: default;
-      display: flex;
-        justify-content: center;
+    flex-direction: column;
+    font-size: 10px;
+    line-height: 1;
+    overflow-y: auto;
+    overflow-x: visible;
+    background: $dark-gray;
+    overflow: visible;
+    z-index: 1000;
+    align-items: center;
+    height: $topbar-height;
+    background-color: $dark-gray;
+    border-bottom: $standard-border;
+    padding: 0px 10px;
+    cursor: default;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+
+    .topbar-inner-container {
+        display: flex;
+        flex-direction: row;
+        position: relative;
+        display: grid;
+        grid-auto-columns: 33.3% 33.3% 33.3%;
         width: 100%;
+        align-items: center;
 
-      .topbar-inner-container {
-            display: flex;
-            flex-direction: row;
-            position: relative;
-            display: grid;
-            grid-auto-columns: 33.3% 33.3% 33.3%;
-            width: 100%;
-            align-items: center;
-
-            // &:first-child {
-            //       height: 20px;
-            // }
-      }
+        // &:first-child {
+        //       height: 20px;
+        // }
+    }
 
-      .topbar-button-text {
-            color: $white;
-            padding: 10px;
-            size: 15;
+    .topbar-button-text {
+        color: $white;
+        padding: 10px;
+        size: 15;
 
-            &:hover {
-                  font-weight: 500;
-            }
-      }
+        &:hover {
+            font-weight: 500;
+        }
+    }
 
-      .topbar-button-icon {
-            cursor: pointer;
-            width: fit-content;
+    .topbar-button-icon {
+        cursor: pointer;
+        width: fit-content;
+        display: flex;
+        justify-content: center;
+        gap: 4px;
+        align-items: center;
+        justify-self: center;
+        align-self: center;
+        padding: 5px;
+        transition: linear 0.2s;
+        color: $white;
+
+        &:hover {
+            background-color: darken($color: $light-gray, $amount: 20);
+            font-weight: 500;
+        }
+    }
+
+    .topbar-title {
+        color: $white;
+        font-size: 17;
+        font-weight: 500;
+    }
+
+    .topbar-center {
+        grid-column: 2;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        gap: 5px;
+
+        .topbar-dashboard-header {
+            font-weight: 600;
+        }
+    }
+
+    .topbar-right {
+        grid-column: 3;
+        position: relative;
+        display: flex;
+        justify-content: flex-end;
+        gap: 5px;
+        margin-right: 5px;
+    }
+
+    .topbar-left {
+        grid-column: 1;
+        color: black;
+        font-family: 'Roboto';
+        position: relative;
+        display: flex;
+        width: fit-content;
+        gap: 5px;
+
+        .logo-container {
+            font-size: 15;
             display: flex;
+            flex-direction: row;
             justify-content: center;
-            gap: 4px;
             align-items: center;
-            justify-self: center;
-            align-self: center;
-            padding: 5px;
-            transition: linear 0.2s;
-            color: $white;
-
-            &:hover {
-                  background-color: darken($color: $light-gray, $amount: 20);
-                  font-weight: 500;
+            -webkit-user-select: none;
+            -khtml-user-select: none;
+            -moz-user-select: none;
+            -o-user-select: none;
+            user-select: none;
+
+            .logo {
+                background-color: transparent;
+                width: 25px;
+                height: 25px;
+                margin-right: 5px;
             }
-      }
+        }
 
-      .topbar-title {
-            color: $white;
-            font-size: 17;
-            font-weight: 500;
-      }
-
-      .topbar-center {
-            grid-column: 2;
-            display: inline-flex;
-            justify-content: center;
-            align-items: center;
-            gap: 5px;
-
-            .topbar-dashboard-header {
-                font-weight: 600;
-            }
-      }
+        .topBar-icon:hover {
+            background-color: $close-red;
+        }
 
-
-      .topbar-right {
-            grid-column: 3;
-            position: relative;
-            display: flex;
-            justify-content: flex-end;
-            gap: 5px;
-            margin-right: 5px;
-      }
-
-      .topbar-left {
-            grid-column: 1;
-            color: black;
+        .topbar-lozenge-user,
+        .topbar-lozenge {
+            height: 23;
+            font-size: 12;
+            color: white;
             font-family: 'Roboto';
-            position: relative;
+            font-weight: 400;
+            padding: 4px;
+            align-self: center;
+            margin-left: 7px;
             display: flex;
-            width: fit-content;
-            gap: 5px;
-
-            .logo-container {
-                font-size: 15;
-                display: flex;
-                flex-direction: row;
-                justify-content: center;
-                align-items: center;
-                -webkit-user-select: none;
-                -khtml-user-select: none;
-                -moz-user-select: none;
-                -o-user-select: none;
-                user-select: none;
-
-                .logo {
-                    background-color: transparent;
-                    width: 25px;
-                    height: 25px;
-                    margin-right: 5px;
-                    
-                }
-            }
+            align-items: center;
 
-            .topBar-icon:hover {
-                  background-color: $close-red;
-            }
+            .topbar-dashSelect {
+                border: none;
+                background-color: transparent;
+                color: black;
+                font-family: 'Roboto';
+                font-size: 17;
+                font-weight: 500;
 
-            .topbar-lozenge-user,
-            .topbar-lozenge {
-                  height: 23;
-                  font-size: 12;
-                  color: white;
-                  font-family: 'Roboto';
-                  font-weight: 400;
-                  padding: 4px;
-                  align-self: center;
-                  margin-left: 7px;
-                  display: flex;
-                  align-items: center;
-
-                  .topbar-dashSelect {
-                        border: none;
-                        background-color: transparent;
-                        color: black;
-                        font-family: 'Roboto';
-                        font-size: 17;
-                        font-weight: 500;
-
-                        &:hover {
-                              cursor: pointer;
-                        }
-                  }
+                &:hover {
+                    cursor: pointer;
+                }
             }
+        }
+
+        .topbar-logoff {
+            border-radius: 3px;
+            background: olivedrab;
+            color: white;
+            display: none;
+            margin-left: 5px;
+            padding: 1px 2px 1px 2px;
+            cursor: pointer;
+        }
 
-            .topbar-logoff {
-                  border-radius: 3px;
-                  background: olivedrab;
-                  color: white;
-                  display: none;
-                  margin-left: 5px;
-                  padding: 1px 2px 1px 2px;
-                  cursor: pointer;
-            }
+        .topbar-logoff {
+            background: red;
+        }
 
+        .topbar-lozenge-user:hover {
             .topbar-logoff {
-                  background: red;
+                display: inline-block;
             }
-
-            .topbar-lozenge-user:hover {
-                  .topbar-logoff {
-                        display: inline-block;
-                  }
-            }
-      }
-
-      .topbar-barChild {
-
-            &.topbar-collection {
-                  flex: 0 1 auto;
-                  margin-left: 2px;
-                  margin-right: 2px
-            }
-
-            &.topbar-input {
-                  margin: 5px;
-                  border-radius: 20px;
-                  border: $dark-gray;
-                  display: block;
-                  width: 130px;
-                  -webkit-transition: width 0.4s;
-                  transition: width 0.4s;
-                  /* align-self: stretch; */
-                  outline: none;
-
-                  &:focus {
-                        width: 500px;
-                        outline: none;
-                  }
+        }
+    }
+
+    .topbar-barChild {
+        &.topbar-collection {
+            flex: 0 1 auto;
+            margin-left: 2px;
+            margin-right: 2px;
+        }
+
+        &.topbar-input {
+            margin: 5px;
+            border-radius: 20px;
+            border: $dark-gray;
+            display: block;
+            width: 130px;
+            -webkit-transition: width 0.4s;
+            transition: width 0.4s;
+            /* align-self: stretch; */
+            outline: none;
+
+            &:focus {
+                width: 500px;
+                outline: none;
             }
+        }
 
-            &.topbar-filter {
-                  align-self: stretch;
+        &.topbar-filter {
+            align-self: stretch;
 
-                  button {
-                        transform: none;
+            button {
+                transform: none;
 
-                        &:hover {
-                              transform: none;
-                        }
-                  }
+                &:hover {
+                    transform: none;
+                }
             }
+        }
 
-            &.topbar-submit {
-                  margin-left: 2px;
-                  margin-right: 2px
-            }
+        &.topbar-submit {
+            margin-left: 2px;
+            margin-right: 2px;
+        }
 
-            &.topbar-close {
-                  color: $white;
-                  max-height: $topbar-height;
-            }
-      }
+        &.topbar-close {
+            color: $white;
+            max-height: $topbar-height;
+        }
+    }
 }
 
 .topbar-results {
-      display: flex;
-      flex-direction: column;
-      top: 300px;
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      overflow: visible;
-
-      .no-result {
-            width: 500px;
-            background: $light-gray;
-            padding: 10px;
-            height: 50px;
-            text-transform: uppercase;
-            text-align: left;
-            font-weight: bold;
-      }
-}
\ No newline at end of file
+    display: flex;
+    flex-direction: column;
+    top: 300px;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: visible;
+
+    .no-result {
+        width: 500px;
+        background: $light-gray;
+        padding: 10px;
+        height: 50px;
+        text-transform: uppercase;
+        text-align: left;
+        font-weight: bold;
+    }
+}
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index 9bd2ba5ce..c194ede32 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -1,24 +1,27 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button, IconButton, Size } from 'browndash-components';
-import { action, computed, observable } from 'mobx';
+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 { AclAdmin, Doc } from '../../../fields/Doc';
+import { Doc, DocListCast } from '../../../fields/Doc';
+import { AclAdmin, DashVersion } from '../../../fields/DocSymbols';
 import { StrCast } from '../../../fields/Types';
 import { GetEffectiveAcl } from '../../../fields/util';
 import { DocumentManager } from '../../util/DocumentManager';
-import { ReportManager } from '../../util/ReportManager';
+import { PingManager } from '../../util/PingManager';
+import { ReportManager } from '../../util/reportManager/ReportManager';
 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';
+import { CurrentUserUtils } from '../../util/CurrentUserUtils';
 
 /**
  * ABOUT: This is the topbar in Dash, which included the current Dashboard as well as access to information on the user
@@ -33,8 +36,22 @@ export class TopBar extends React.Component {
         });
     };
 
-    @observable textColor: string = Colors.LIGHT_GRAY;
-    @observable backgroundColor: string = Colors.DARK_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 ? SettingsManager.Instance.userBackgroundColor : Colors.MEDIUM_GRAY;
+    }
+
+    @observable happyHeart: boolean = PingManager.Instance.IsBeating;
+    setHappyHeart = action((status: boolean) => (this.happyHeart = status));
+    dispose = reaction(
+        () => PingManager.Instance.IsBeating,
+        isBeating => this.setHappyHeart(isBeating)
+    );
 
     /**
      * Returns the left hand side of the topbar.
@@ -47,16 +64,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>
         );
@@ -83,36 +104,21 @@ 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' });
-                        ContextMenu.Instance.addItem({
-                            description: 'Snapshot Dashboard',
-                            event: async () => {
-                                const batch = UndoManager.StartBatch('snapshot');
-                                await DashboardView.snapshotDashboard();
-                                batch.end();
-                            },
-                            icon: 'edit',
-                        });
                         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();
@@ -131,13 +137,31 @@ export class TopBar extends React.Component {
      * and allows the user to access their account settings etc.
      */
     @computed get topbarRight() {
+        const upToDate = DashVersion === CurrentUserUtils.ServerVersion;
         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" />} />
-                {/* <Button text={'Logout'} borderRadius={5} hoverStyle={'gray'} backgroundColor={Colors.DARK_GRAY} color={this.textColor} fontSize={FontSize.SECONDARY} onClick={() => window.location.assign(Utils.prepend('/logout'))} /> */}
+                {Doc.ActiveDashboard ? (
+                    <Button
+                        text={GetEffectiveAcl(Doc.ActiveDashboard) === AclAdmin ? 'Share' : 'View Original'}
+                        type={Type.TERT}
+                        color={this.variantColor}
+                        onClick={() => {
+                            SharingManager.Instance.open(undefined, Doc.ActiveDashboard);
+                        }}
+                    />
+                ) : null}
+                <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 ' + (upToDate ? DashVersion : 'out of date version:' + DashVersion)}
+                    color={this.happyHeart ? (upToDate ? Colors.LIGHT_BLUE : Colors.YELLOW) : 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>
         );
     }
@@ -145,13 +169,15 @@ 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}