diff options
Diffstat (limited to 'src/client/views/search')
| -rw-r--r-- | src/client/views/search/SearchBox.scss | 6 | ||||
| -rw-r--r-- | src/client/views/search/SearchBox.tsx | 43 |
2 files changed, 31 insertions, 18 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 260ddfc90..3612bd7c4 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 @@ -103,9 +104,9 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps, SearchBoxDoc * This method is called when the user clicks on a search result. The _selectedResult is * updated accordingly and the doc is highlighted with the selectElement method. */ - onResultClick = action((doc: Doc) => { - this.selectElement(doc); + onResultClick = action(async (doc: Doc) => { this._selectedResult = doc; + this.selectElement(doc, () => DocumentManager.Instance.getFirstDocumentView(doc)?.ComponentView?.search?.(this._searchString, undefined, false)); }); makeLink = action((linkTo: Doc) => { @@ -114,7 +115,7 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps, SearchBoxDoc const linkFrom = this.props.linkFrom(); if (linkFrom) { console.log(linkFrom.title); - DocUtils.MakeLink({ doc: linkFrom }, { doc: linkTo }); + DocUtils.MakeLink({ doc: linkFrom }, { doc: linkTo }, "Link"); } } }); @@ -268,8 +269,8 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps, SearchBoxDoc * This method selects a doc by either jumping to it (centering/zooming in on it) * or opening it in a new tab. */ - selectElement = async (doc: Doc) => { - await DocumentManager.Instance.jumpToDocument(doc, true); + selectElement = async (doc: Doc, finishFunc: () => void) => { + await DocumentManager.Instance.jumpToDocument(doc, true, undefined, undefined, undefined, undefined, undefined, finishFunc); } /** @@ -299,20 +300,30 @@ 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]) : + e => { + this.onResultClick(result[0]); + e.stopPropagation(); + }} 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 +338,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"> |