diff options
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | src/client/views/search/IconBar.scss | 4 | ||||
| -rw-r--r-- | src/client/views/search/IconBar.tsx | 85 | ||||
| -rw-r--r-- | src/client/views/search/SearchBox.scss | 11 | ||||
| -rw-r--r-- | src/client/views/search/SearchBox.tsx | 14 |
5 files changed, 27 insertions, 88 deletions
diff --git a/package.json b/package.json index 1376f0a85..1dd8f65ec 100644 --- a/package.json +++ b/package.json @@ -103,7 +103,6 @@ "body-parser": "^1.18.3", "bootstrap": "^4.3.1", "class-transformer": "^0.2.0", - "classnames": "^2.2.6", "connect-flash": "^0.1.1", "connect-mongo": "^2.0.3", "cookie-parser": "^1.4.4", diff --git a/src/client/views/search/IconBar.scss b/src/client/views/search/IconBar.scss index d8625e95b..eb7b45754 100644 --- a/src/client/views/search/IconBar.scss +++ b/src/client/views/search/IconBar.scss @@ -25,9 +25,9 @@ .type-icon.selected{ background-color: $alt-accent; } - + .type-icon.not-selected{ - background-color: red; + background-color: transparent; } .fontawesome-icon{ diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx index 0c2624715..bf98e1ef3 100644 --- a/src/client/views/search/IconBar.tsx +++ b/src/client/views/search/IconBar.tsx @@ -24,21 +24,13 @@ library.add(faGlobeAsia); library.add(faBan); export interface IconBarProps { - updateIcon(newIcons: string[]): void; + updateIcon(icons: string[]): void; getIcons(): string[]; } @observer export class IconBar extends React.Component<IconBarProps> { - @observable newIcons: string[] = []; - // @observable selectedStyle = { - // backgroundColor: "#121721" - // } - // @observable unselectedStyle = { - // backgroundColor: "#c2c2c5" - // } - @observable noneRef = React.createRef<HTMLDivElement>(); @observable colRef = React.createRef<HTMLDivElement>(); @observable imgRef = React.createRef<HTMLDivElement>(); @@ -51,23 +43,6 @@ export class IconBar extends React.Component<IconBarProps> { @observable webRef = React.createRef<HTMLDivElement>(); @observable allRefs: React.RefObject<HTMLDivElement>[] = [this.colRef, this.imgRef, this.textRef, this.pdfRef, this.vidRef, this.audioRef, this.linkRef, this.histRef, this.webRef]; - //changes colors of buttons on click - not sure if this is the best method (it probably isn't) - //but i spent a ton of time on it and this is the only thing i could get to work - // componentDidMount = () => { - - // let buttons = document.querySelectorAll<HTMLDivElement>(".type-icon").forEach(node => - // node.addEventListener('click', function () { - // if (this.style.backgroundColor === "rgb(194, 194, 197)") { - // this.style.backgroundColor = "#121721"; - // } - // else { - // this.style.backgroundColor = "#c2c2c5" - // } - // }) - // ); - - // } - //gets ref associated with given string @action.bound getRef = (value: string) => { @@ -108,7 +83,6 @@ export class IconBar extends React.Component<IconBarProps> { break; } - // console.log(toReturn) return toReturn; } @@ -123,78 +97,41 @@ export class IconBar extends React.Component<IconBarProps> { @action.bound alternateRef(ref: any) { - // console.log("alternating") - // console.log("before") - // console.log(ref.getAttribute("data-selected")); - // console.log(ref.getAttribute("class")); - // console.log(ref) if (ref.getAttribute("data-selected") === "true") { - // console.log("is true") ref.setAttribute("data-selected", "false") } else { - // console.log("is false") ref.setAttribute("data-selected", "true") } - // console.log("after") - // console.log(ref.getAttribute("data-selected")); - // console.log(ref.getAttribute("class")); - // console.log(ref) } @action.bound onClick = (value: string) => { - // console.log("clicking") - let oldIcons = this.props.getIcons() + let icons: string[] = this.props.getIcons() let ref = this.getRef(value); this.alternateRef(ref); if (value === DocTypes.NONE) { - this.newIcons = [value]; - this.unselectAllRefs(); - + icons = []; // if its none, change the color of all the other circles - // document.querySelectorAll<HTMLDivElement>(".type-icon").forEach(node => { - // if (node.id === "none") { - // node.style.backgroundColor = "#c2c2c5"; - // } - // else { - // node.style.backgroundColor = "#121721"; - // } - // } - // ); + this.unselectAllRefs(); } else { - //turns "none" button off - // let noneDoc = document.getElementById(DocTypes.NONE) - // if (noneDoc) { - // noneDoc.style.backgroundColor = "#121721"; - // } - if (oldIcons.includes(value)) { - this.newIcons = _.remove(oldIcons, value); - if (this.newIcons.length === 0) { - this.newIcons = [DocTypes.NONE]; - if (this.noneRef.current) { - this.noneRef.current.setAttribute("data-selected", "true"); - } - } + //if it's already selected, unselect it + if (icons.includes(value)) { + icons = _.without(icons, value); } + //if it's not yet selected, select it else { - if (this.noneRef.current) { - this.noneRef.current.setAttribute("data-selected", "false"); - } - this.newIcons = oldIcons; - if (this.newIcons.length === 1 && this.newIcons[0] === DocTypes.NONE) { - this.newIcons = [value] - } - else { this.newIcons.push(value); } + icons.push(value); } } - this.props.updateIcon(this.newIcons); + this.props.updateIcon(icons); //ok i know that this is bad but i dont know how else to get it to rerender and change the classname, //any help here is greatly appreciated thanks frens this.forceUpdate(); } + //checks if option is selected based on the attribute data-selected @action.bound isRefSelected(ref: React.RefObject<HTMLDivElement>) { if (ref.current) { diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss index 589dd58c9..4ce40614f 100644 --- a/src/client/views/search/SearchBox.scss +++ b/src/client/views/search/SearchBox.scss @@ -57,9 +57,9 @@ height: 40px; } -#option { - height: 20px; -} +// #option { +// height: 20px; +// } .searchBox-results { top: 300px; @@ -69,11 +69,14 @@ } .type-of-node{ - height: 50px; + height: 60px; } .required-words{ height: 110px; +} + +.filter-div{ margin-top: 5px; margin-bottom: 5px; } diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 4c4a223cc..329643464 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -28,7 +28,7 @@ import { IconBar } from './IconBar'; export class SearchBox extends React.Component { @observable _searchString: string = ""; @observable _wordStatus: boolean = true; - @observable _icons: string[] = ["none"]; + @observable _icons: string[] = []; @observable private _open: boolean = false; @observable private _resultsOpen: boolean = false; @observable private _results: Doc[] = []; @@ -224,18 +224,18 @@ export class SearchBox extends React.Component { {/* 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"> - <div className="required-words"> + <div className="filter-form filter-div" id="header">Filter Search Results</div> + <div className="filter-form " id="option"> + <div className="required-words filter-div"> <ToggleBar optionOne={"Include Any Keywords"} optionTwo={"Include All Keywords"} changeStatus={this.handleWordQueryChange} /> </div> - <div className="type-of-node"> + <div className="type-of-node filter-div"> <IconBar updateIcon={this.updateIcon} getIcons={this.getIcons}/> </div> - <div className="filter-collection"> + <div className="filter-collection filter-div"> temp for filtering by collection </div> - <div className="where-in-doc"> + <div className="where-in-doc filter-div"> temp for filtering where in doc the keywords are found </div> </div> |