From 301652c454f3b74815aa7be2f2159e0a61d14e0b Mon Sep 17 00:00:00 2001
From: dg314 <david_grossman@brown.edu>
Date: Tue, 14 Sep 2021 15:31:31 -0400
Subject: addition of tooltips and minor formatting improvements in search
 panel

---
 src/client/views/search/SearchBox.scss |  6 ++++--
 src/client/views/search/SearchBox.tsx  | 28 +++++++++++++++++-----------
 2 files changed, 21 insertions(+), 13 deletions(-)

(limited to 'src')

diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 2586ef2ee..e8865b918 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -78,8 +78,10 @@
                 .searchBox-result-title {
                     display: relative;
                     float: left;
-                    width: calc(100% - 60px);
+                    width: calc(100% - 45px);
                     text-align: left;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
                 }
 
                 .searchBox-result-type {
@@ -87,7 +89,7 @@
                     margin-top: 6px;
                     display: relative;
                     float: right;
-                    width: 60px;
+                    width: 45px;
                     text-align: right;
                     color: #222;
                 }
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index e70b2bc19..dbd641550 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -13,6 +13,7 @@ import { FieldView, FieldViewProps } from '../nodes/FieldView';
 import "./SearchBox.scss";
 import { DocumentManager } from '../../util/DocumentManager';
 import { DocUtils } from '../../documents/Documents';
+import { Tooltip } from "@material-ui/core";
 
 export const searchSchema = createSchema({
     Document: Doc
@@ -299,20 +300,25 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps, SearchBoxDoc
                 className += " searchBox-results-scroll-view-result-selected";
             }
 
+            const formattedType = SearchBox.formatType(StrCast(result[0].type));
+            const title = result[0].title
+
             if (this._docTypeString === "all" || this._docTypeString === result[0].type) {
                 validResults++;
                 return (
-                    <div key={result[0][Id]} onClick={isLinkSearch ? () => this.makeLink(result[0]) : () => this.onResultClick(result[0])} className={className}>
-                        <div className="searchBox-result-title">
-                            {result[0].title}
-                        </div>
-                        <div className="searchBox-result-type">
-                            {SearchBox.formatType(StrCast(result[0].type))}
+                    <Tooltip key={result[0][Id]} placement={"right"} title={<><div className="dash-tooltip">{title}</div></>}>
+                        <div onClick={isLinkSearch ? () => this.makeLink(result[0]) : () => this.onResultClick(result[0])} className={className}>
+                            <div className="searchBox-result-title">
+                                {title}
+                            </div>
+                            <div className="searchBox-result-type">
+                                {formattedType}
+                            </div>
+                            <div className="searchBox-result-keys">
+                                {result[1].join(", ")}
+                            </div>
                         </div>
-                        <div className="searchBox-result-keys">
-                            {result[1].join(", ")}
-                        </div>
-                    </div>
+                    </Tooltip>
                 );
             }
 
@@ -327,7 +333,7 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps, SearchBoxDoc
                     {isLinkSearch ? (null) : <select name="type" id="searchBox-type" className="searchBox-type" onChange={this.onSelectChange}>
                         {this.selectOptions}
                     </select>}
-                    <input defaultValue={""} autoComplete="off" onChange={this.onInputChange} type="text" placeholder="Search..." id="search-input" className="searchBox-input" style={{ width: isLinkSearch ? "100%" : undefined, borderRadius: isLinkSearch ? "5px" : undefined }} ref={this._inputRef} />
+                    <input defaultValue={""} autoComplete="off" onChange={this.onInputChange} onKeyPress={e => e.key === "Enter" ? this.submitSearch() : null} type="text" placeholder="Search..." id="search-input" className="searchBox-input" style={{ width: isLinkSearch ? "100%" : undefined, borderRadius: isLinkSearch ? "5px" : undefined }} ref={this._inputRef} />
                 </div >
                 <div className="searchBox-results-container">
                     <div className="searchBox-results-count">
-- 
cgit v1.2.3-70-g09d2