aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/linking/LinkEditor.scss4
-rw-r--r--src/client/views/linking/LinkEditor.tsx28
-rw-r--r--src/client/views/linking/LinkRelationshipSearch.tsx31
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