added dropdown dashboards input at top left + new & snapshot

2 files changed, 71 insertions, 7 deletions

diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index b5557e0d9..aa5180c96 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -6,23 +6,69 @@
     flex-direction: column;
     width: 100%;
     height: 100%;
-    position: absolute;
+    position: relative;
     font-size: 10px;
     line-height: 1;
     overflow-y: auto;
     overflow-x: visible;
     background: lightgrey;
+    overflow: visible;
+    z-index: 10000;
 
+    .searchBox-lozenge-user,
+    .searchBox-lozenge-dashboard,
     .searchBox-lozenge {
         background-color: #313131;
         border-radius: 5px;
-        height: 15px;
+        height: 18px;
         padding: 4px;
         box-shadow: lightgrey 0.15em 0.15em 0.1em;
         margin: 2px;
         margin-bottom: 4px;
         border-top: dimgrey 1px solid;
         border-left: dimgrey 1px solid;
+        display: flex;
+        .searchBox-logoff,
+        .searchBox-dashboards {
+            border-radius: 3px;
+            background: olivedrab;
+            color: white;
+            position: relative;
+            display: none;
+            margin-left: 3px;
+            padding-left: 2px;
+            padding-right: 2px;
+            padding-bottom: 11px;
+            cursor: default;
+        }
+        .searchBox-logoff {
+            background: red;
+        }
+
+        .searchBox-dashSelect{
+            background-color: black;
+            color: white;
+            font-size: 9;
+            margin-right: 6;
+            border-radius: 5px;
+            position: relative;
+            height: 15px;
+            transform: translate(0,-3px);
+
+            &:hover {
+                cursor: pointer;
+            }
+        }
+    }
+    .searchBox-lozenge-user:hover {
+        .searchBox-logoff {
+            display:inline-block;
+        }
+    }
+    .searchBox-lozenge-dashboard:hover {
+        .searchBox-dashboards {
+            display:inline-block;
+        }
     }
 }
 
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 5739c2a67..7e233ecbb 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -5,14 +5,15 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Doc, DocListCast, Field, Opt } from '../../../fields/Doc';
 import { documentSchema } from "../../../fields/documentSchemas";
-import { Id, Copy } from '../../../fields/FieldSymbols';
+import { Copy, Id } from '../../../fields/FieldSymbols';
 import { List } from '../../../fields/List';
 import { createSchema, listSpec, makeInterface } from '../../../fields/Schema';
 import { SchemaHeaderField } from '../../../fields/SchemaHeaderField';
 import { Cast, NumCast, StrCast } from '../../../fields/Types';
-import { returnFalse, returnZero, setupMoveUpEvents, emptyFunction } from '../../../Utils';
+import { emptyFunction, returnFalse, returnZero, setupMoveUpEvents, Utils } from '../../../Utils';
 import { Docs } from '../../documents/Documents';
 import { DocumentType } from "../../documents/DocumentTypes";
+import { CurrentUserUtils } from "../../util/CurrentUserUtils";
 import { SetupDrag } from '../../util/DragManager';
 import { SearchUtil } from '../../util/SearchUtil';
 import { Transform } from '../../util/Transform';
@@ -22,6 +23,7 @@ import { CollectionViewType } from '../collections/CollectionView';
 import { ViewBoxBaseComponent } from "../DocComponent";
 import { FieldView, FieldViewProps } from '../nodes/FieldView';
 import "./SearchBox.scss";
+import { undoBatch } from "../../util/UndoManager";
 
 export const searchSchema = createSchema({ Document: Doc });
 
@@ -486,18 +488,34 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
             collectionView.props.Document._docFilters = docsForFilter?.length && docFilters?.length ? new List<string>(docFilters) : undefined;
         }
     }
+    showLogout = () => {
+
+    }
     render() {
+        const myDashboards = DocListCast(Cast(Doc.UserDoc().myDashboards, Doc, null).data);
         return (
             <div style={{ pointerEvents: "all" }} className="searchBox-container">
                 <div style={{ position: "absolute", left: 15, height: 32, alignItems: "center", display: "flex" }}>
-                    <div className="searchBox-lozenge">
+                    <div className="searchBox-lozenge-user">
                         {`${Doc.CurrentUserEmail}`}
+                        <div className="searchBox-logoff" onClick={() => window.location.assign(Utils.prepend("/logout"))}>
+                            Logoff
+                        </div>
                     </div>
                     <div className="searchBox-lozenge">
                         {`UI project`}
                     </div>
-                    <div className="searchBox-lozenge"  >
-                        {`➱ ${Cast(Doc.UserDoc().activeDashboard, Doc, null)?.title}`}
+                    <div className="searchBox-lozenge-dashboard"  >
+                        <select className="searchBox-dashSelect" onChange={e => CurrentUserUtils.openDashboard(Doc.UserDoc(), myDashboards[Number(e.target.value)])}
+                            value={myDashboards.indexOf(Cast(Doc.UserDoc().activeDashboard, Doc, null)!)}>
+                            {myDashboards.map((dash, i) => <option key={dash[Id]} value={i}> {StrCast(dash.title)} </option>)}
+                        </select>
+                        <div className="searchBox-dashboards" onClick={undoBatch(() => CurrentUserUtils.createNewDashboard(Doc.UserDoc()))}>
+                            New
+                        </div>
+                        <div className="searchBox-dashboards" onClick={undoBatch(() => CurrentUserUtils.snapshotDashboard(Doc.UserDoc()))}>
+                            Snapshot
+                        </div>
                     </div>
                 </div>
                 <div className="searchBox-bar">