aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/SearchBox.tsx54
-rw-r--r--src/client/views/SearchItem.scss12
-rw-r--r--src/client/views/SearchItem.tsx21
3 files changed, 48 insertions, 39 deletions
diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx
index ed8dbbe51..8fb180273 100644
--- a/src/client/views/SearchBox.tsx
+++ b/src/client/views/SearchBox.tsx
@@ -96,34 +96,45 @@ export class SearchBox extends React.Component {
}
@action
- handleClickFilter = (e: Event): void => {
- var className = (e.target as any).className;
- var id = (e.target as any).id;
- if (className !== "filter-button" && className !== "filter-form") {
+ handleSearchClick = (e: Event): void => {
+ let element = document.getElementsByClassName((e.target as any).className)[0];
+ //handles case with filter button
+ if((e.target as any).className.includes("filter")){
+ this._resultsOpen = false;
+ this._open = true;}
+ else if (element && element.parentElement){
+ //if the filter element is found, show the form and hide the results
+ if(this.findAncestor(element, "filter-form")){
+ this._resultsOpen = false;
+ this._open = true;
+ }
+ //if in main search div, keep results open and close filter
+ else if(this.findAncestor(element, "main-searchDiv")){
+ this._resultsOpen = true;
+ this._open = false;
+ }
+ }
+ //not in either, close both
+ else{
+ this._resultsOpen = false;
this._open = false;
}
-
+
}
- @action
- handleClickResults = (e: Event): void => {
- var className = (e.target as any).className;
- var id = (e.target as any).id;
- if (id !== "result") {
- this._resultsOpen = false;
- this._results = [];
- }
+ //finds ancestor div that matches class name passed in, if not found false returned
+ findAncestor(curElement: any, cls: string) {
+ while ((curElement = curElement.parentElement) && !curElement.classList.contains(cls));
+ return curElement;
}
componentWillMount() {
- document.addEventListener('mousedown', this.handleClickFilter, false);
- document.addEventListener('mousedown', this.handleClickResults, false);
+ document.addEventListener('mousedown', this.handleSearchClick, false);
}
componentWillUnmount() {
- document.removeEventListener('mousedown', this.handleClickFilter, false);
- document.removeEventListener('mousedown', this.handleClickResults, false);
+ document.removeEventListener('mousedown', this.handleSearchClick, false);
}
@action
@@ -131,7 +142,7 @@ export class SearchBox extends React.Component {
this._open = !this._open;
}
- enter = (e: React.KeyboardEvent<HTMLInputElement>) => {
+ enter = (e: React.KeyboardEvent) => {
if (e.key === "Enter") {
this.submitSearch();
}
@@ -199,8 +210,8 @@ export class SearchBox extends React.Component {
</span>
<input value={this.searchString} onChange={this.onChange} type="text" placeholder="Search..."
className="searchBox-barChild searchBox-input" onKeyPress={this.enter}
- style={{ width: this._resultsOpen ? "500px" : undefined }} />
- <button className="searchBox-barChild searchBox-filter" onClick={this.toggleFilterDisplay}>Filter</button>
+ style={{ width: this._resultsOpen ? "500px" : "100px" }} />
+ <button className="searchBox-barChild searchBox-filter">Filter</button>
</div>
{this._resultsOpen ? (
<div className="searchBox-results">
@@ -208,11 +219,11 @@ export class SearchBox extends React.Component {
</div>
) : null}
</div>
+ {/* these all need class names in order to find ancestor - please do not delete */}
{this._open ? (
<div className="filter-form" id="filter" style={this._open ? { display: "flex" } : { display: "none" }}>
<div className="filter-form" id="header">Filter Search Results</div>
<div className="filter-form" id="option">
- filter by collection, key, type of node
<div className="required-words">
temp for making words required
</div>
@@ -238,7 +249,6 @@ export class SearchBox extends React.Component {
temp for filtering where in doc the keywords are found
</div>
</div>
-
</div>
) : null}
</div>
diff --git a/src/client/views/SearchItem.scss b/src/client/views/SearchItem.scss
index a6cd852b1..4c1d781e3 100644
--- a/src/client/views/SearchItem.scss
+++ b/src/client/views/SearchItem.scss
@@ -62,12 +62,12 @@
transition: all 0.2s ease;
color: black;
transform-origin: top right;
- // -webkit-transform: scale(0);
- // -ms-transform: scale(0);
- // transform: scale(0);
- -webkit-transform: scale(1);
- -ms-transform: scale(1);
- transform: scale(1);
+ -webkit-transform: scale(0);
+ -ms-transform: scale(0);
+ transform: scale(0);
+ // -webkit-transform: scale(1);
+ // -ms-transform: scale(1);
+ // transform: scale(1);
height: 100%
}
diff --git a/src/client/views/SearchItem.tsx b/src/client/views/SearchItem.tsx
index 16a2aa790..c80d9baa2 100644
--- a/src/client/views/SearchItem.tsx
+++ b/src/client/views/SearchItem.tsx
@@ -55,9 +55,7 @@ export class SelectorContextMenu extends React.Component<SearchItemProps> {
}
getOnClick({ col, target }: { col: Doc, target: Doc }) {
- console.log("hello world")
return () => {
- console.log("returning!")
col = Doc.IsPrototype(col) ? Doc.MakeDelegate(col) : col;
if (NumCast(col.viewType, CollectionViewType.Invalid) === CollectionViewType.Freeform) {
const newPanX = NumCast(target.x) + NumCast(target.width) / NumCast(target.zoomBasis, 1) / 2;
@@ -70,19 +68,20 @@ export class SelectorContextMenu extends React.Component<SearchItemProps> {
};
}
+ onClick = () => {
+ console.log("click");
+ }
+
+ //these all need class names in order to find ancestor - please do not delete
render() {
return (
- < div className="parents" onClick = {() => {console.log("hello there")}}>
- <p>Contexts:</p>
- {this._docs.map(doc => <div className="collection"><a onPointerDown={(e: React.PointerEvent) => {
- console.log("pointerdown");
- e.preventDefault();
- e.stopPropagation()
+ < div className="parents">
+ <p className = "contexts">Contexts:</p>
+ {this._docs.map(doc => <div onClick={this.onClick} className="collection"><a className= "title" onClick={(e: React.MouseEvent) => {
+ console.log("clicked");
this.getOnClick(doc)
}}>{doc.col.title}</a></div>)}
- {this._otherDocs.map(doc => <div className="collection"><a onClick={(e: React.MouseEvent) => {
- e.preventDefault();
- e.stopPropagation()
+ {this._otherDocs.map(doc => <div className="collection"><a className= "title" onClick={(e: React.MouseEvent) => {
console.log("clicked");
this.getOnClick(doc)
}}>{doc.col.title}</a></div>)}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-12 21:49:30 +0000