From 015a08f56f9dda8b63ab139750a9ade6a964eff6 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 24 Aug 2020 20:43:07 -0400
Subject: added lozenges to distinguish user & dashboard at top of workspace

---
 src/client/views/search/SearchBox.scss | 14 +++++++++++++-
 src/client/views/search/SearchBox.tsx  | 12 +++++++++++-
 2 files changed, 24 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 3f06ba7d3..b5557e0d9 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -11,7 +11,19 @@
     line-height: 1;
     overflow-y: auto;
     overflow-x: visible;
-    background: lightgrey,
+    background: lightgrey;
+
+    .searchBox-lozenge {
+        background-color: #313131;
+        border-radius: 5px;
+        height: 15px;
+        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;
+    }
 }
 
 .searchBox-bar {
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index bed6c83b4..4bffc89ea 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -489,7 +489,17 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
     render() {
         return (
             <div style={{ pointerEvents: "all" }} className="searchBox-container">
-                <div style={{ position: "absolute", left: 15, height: 32, alignItems: "center", display: "flex" }}>{`${Doc.CurrentUserEmail}/${Cast(Doc.UserDoc().activeDashboard, Doc, null)?.title}`}</div>
+                <div style={{ position: "absolute", left: 15, height: 32, alignItems: "center", display: "flex" }}>
+                    <div className="searchBox-lozenge">
+                        {`${Doc.CurrentUserEmail}`}
+                    </div>
+                    <div className="searchBox-lozenge">
+                        {`UI project`}
+                    </div>
+                    <div className="searchBox-lozenge"  >
+                        {`➱ ${Cast(Doc.UserDoc().activeDashboard, Doc, null)?.title}`}
+                    </div>
+                </div>
                 <div className="searchBox-bar">
                     <div style={{ position: "relative", display: "flex", width: 450 }}>
                         <input value={this.newsearchstring} autoComplete="off" onChange={this.onChange} type="text" placeholder="Search..." id="search-input" ref={this._inputRef}
-- 
cgit v1.2.3-70-g09d2