diff options
| -rw-r--r-- | src/client/views/search/SearchBox.scss | 6 | ||||
| -rw-r--r-- | src/client/views/search/SearchBox.tsx | 28 |
2 files changed, 21 insertions, 13 deletions
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"> |