diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/client/views/linking/LinkEditor.scss | 4 | ||||
-rw-r--r-- | src/client/views/linking/LinkEditor.tsx | 28 | ||||
-rw-r--r-- | src/client/views/linking/LinkRelationshipSearch.tsx | 31 |
3 files changed, 37 insertions, 26 deletions
diff --git a/src/client/views/linking/LinkEditor.scss b/src/client/views/linking/LinkEditor.scss index 875e1672d..abd413f57 100644 --- a/src/client/views/linking/LinkEditor.scss +++ b/src/client/views/linking/LinkEditor.scss @@ -118,6 +118,10 @@ cursor: pointer; border: 1px solid $medium-gray; } + + p:hover { + background: $light-blue; + } } .linkEditor-followingDropdown { diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx index 4e104549d..2d6a6942b 100644 --- a/src/client/views/linking/LinkEditor.tsx +++ b/src/client/views/linking/LinkEditor.tsx @@ -3,14 +3,12 @@ import { Tooltip } from "@material-ui/core"; import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; import { Doc, StrListCast } from "../../../fields/Doc"; -import { Cast, DateCast, StrCast } from "../../../fields/Types"; +import { DateCast, StrCast } from "../../../fields/Types"; import { LinkManager } from "../../util/LinkManager"; import { undoBatch } from "../../util/UndoManager"; import './LinkEditor.scss'; -import React = require("react"); -import { listSpec } from "../../../fields/Schema"; -import { List } from "../../../fields/List"; import { LinkRelationshipSearch } from "./LinkRelationshipSearch"; +import React = require("react"); interface LinkEditorProps { @@ -30,6 +28,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> { @observable private buttonColor: string = ""; @observable private relationshipButtonColor: string = ""; @observable private relationshipSearchVisibility: string = "none"; + @observable private searchIsActive: boolean = false; //@observable description = this.props.linkDoc.description ? StrCast(this.props.linkDoc.description) : "DESCRIPTION"; @@ -105,25 +104,35 @@ export class LinkEditor extends React.Component<LinkEditorProps> { onRelationshipDown = () => this.setRelationshipValue(this.relationship); onBlur = () => { - // this.toggleRelationshipResults(); + //only hide the search results if the user clicks out of the input AND not on any of the search results + // i.e. if search is not active + if (!this.searchIsActive) { + this.toggleRelationshipResults(); + } } onFocus = () => { this.toggleRelationshipResults(); } + toggleSearchIsActive = () => { + this.searchIsActive = !this.searchIsActive; + console.log("toggle search to " + this.searchIsActive) + } @action handleDescriptionChange = (e: React.ChangeEvent<HTMLInputElement>) => { this.description = e.target.value; } @action handleRelationshipChange = (e: React.ChangeEvent<HTMLInputElement>) => { - this.relationship = e.target.value; } @action handleRelationshipSearchChange = (result: string) => { + this.setRelationshipValue(result); + this.toggleRelationshipResults(); this.relationship = result; } @computed get editRelationship() { + //NOTE: confusingly, the classnames for the following relationship JSX elements are the same as the for the description elements for shared CSS return <div className="linkEditor-description"> <div className="linkEditor-description-label">Link Relationship:</div> <div className="linkEditor-description-input"> @@ -133,18 +142,16 @@ export class LinkEditor extends React.Component<LinkEditorProps> { id="input" value={this.relationship} placeholder={"Enter link relationship"} - // color={"rgb(88, 88, 88)"} onKeyDown={this.onRelationshipKey} onChange={this.handleRelationshipChange} - onClick={this.toggleRelationshipResults} + onFocus={this.onFocus} onBlur={this.onBlur} ></input> <LinkRelationshipSearch results={this.getRelationshipResults()} display={this.relationshipSearchVisibility} - setRelationshipValue={this.setRelationshipValue} - toggleRelationshipResults={this.toggleRelationshipResults} handleRelationshipSearchChange={this.handleRelationshipSearchChange} + toggleSearch={this.toggleSearchIsActive} /> </div> <div className="linkEditor-description-add-button" @@ -165,7 +172,6 @@ export class LinkEditor extends React.Component<LinkEditorProps> { id="input" value={this.description} placeholder={"Enter link description"} - // color={"rgb(88, 88, 88)"} onKeyDown={this.onDescriptionKey} onChange={this.handleDescriptionChange} ></input> diff --git a/src/client/views/linking/LinkRelationshipSearch.tsx b/src/client/views/linking/LinkRelationshipSearch.tsx index f8afa22e1..bb128f746 100644 --- a/src/client/views/linking/LinkRelationshipSearch.tsx +++ b/src/client/views/linking/LinkRelationshipSearch.tsx @@ -1,34 +1,33 @@ -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { Tooltip } from "@material-ui/core"; -import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; -import { Doc, StrListCast } from "../../../fields/Doc"; -import { LinkManager } from "../../util/LinkManager"; import './LinkEditor.scss'; import React = require("react"); -import { List } from "../../../fields/List"; interface LinkRelationshipSearchProps { results: string[] | undefined; display: string; - //callback fns to set rel + hide dropdown upon setting - setRelationshipValue: (value: string) => void; - toggleRelationshipResults: () => void; + //callback fn to set rel + hide dropdown upon setting handleRelationshipSearchChange: (result: string) => void; + toggleSearch: () => void; } @observer export class LinkRelationshipSearch extends React.Component<LinkRelationshipSearchProps> { + handleResultClick = (e: React.MouseEvent) => { console.log("click"); const relationship = (e.target as HTMLParagraphElement).textContent; if (relationship) { - console.log("new rel " + relationship); - this.props.setRelationshipValue(relationship); - this.props.toggleRelationshipResults(); this.props.handleRelationshipSearchChange(relationship) } } + handleMouseEnter = () => { + this.props.toggleSearch(); + } + + handleMouseLeave = () => { + this.props.toggleSearch(); + } + /** * Render an empty div to increase the height of LinkEditor to accommodate 2+ results */ @@ -41,7 +40,11 @@ export class LinkRelationshipSearch extends React.Component<LinkRelationshipSear render() { return ( <div className="linkEditor-relationship-dropdown-container"> - <div className="linkEditor-relationship-dropdown" style={{ display: this.props.display }}> + <div className="linkEditor-relationship-dropdown" + style={{ display: this.props.display }} + onMouseEnter={this.handleMouseEnter} + onMouseLeave={this.handleMouseLeave} + > { // return a dropdown of relationship results if there exist results this.props.results ? this.props.results.map(result => { @@ -50,14 +53,12 @@ export class LinkRelationshipSearch extends React.Component<LinkRelationshipSear </p>) }) : <p>No matching relationships</p> - } </div> {/*Render an empty div to increase the height of LinkEditor to accommodate 2+ results */} {this.emptyDiv()} </div> - ) } }
\ No newline at end of file |