aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authormadelinegr <monika_hedman@brown.edu>2019-06-18 16:09:48 -0400
committermadelinegr <monika_hedman@brown.edu>2019-06-18 16:09:48 -0400
commitb7f40e897805e84186bb35b84192d3d043a8ebd7 (patch)
treea7a67b80e2247fda4ba9059e2c9c078c46c17839
parent5469707d07254b5895c2188846c0e35b6d776ab0 (diff)
pretty sure things are working - committing before i start cleaning things up
-rw-r--r--src/client/views/search/IconBar.tsx14
-rw-r--r--src/client/views/search/IconButton.tsx150
-rw-r--r--src/client/views/search/SearchBox.tsx14
-rw-r--r--src/client/views/search/SearchItem.scss2
4 files changed, 20 insertions, 160 deletions
diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx
index f343ec13f..71fd593ec 100644
--- a/src/client/views/search/IconBar.tsx
+++ b/src/client/views/search/IconBar.tsx
@@ -13,6 +13,7 @@ import $ from 'jquery';
import { array } from 'prop-types';
import { IconButton } from './IconButton';
import { list } from 'serializr';
+import { SearchBox } from './SearchBox';
library.add(faSearch);
library.add(faObjectGroup);
@@ -39,7 +40,7 @@ export class IconBar extends React.Component<IconBarProps> {
static Instance: IconBar;
allIcons: string[] = [DocTypes.AUDIO, DocTypes.COL, DocTypes.HIST, DocTypes.IMG, DocTypes.LINK, DocTypes.PDF, DocTypes.TEXT, DocTypes.VID, DocTypes.WEB];
- @observable typesToFind: string[];
+ // @observable typesToFind: string[] = SearchBox.Instance.getIcons();
@observable public ResetClicked: boolean = false;
@observable public SelectAllClicked: boolean = false;
public Reset: number = 0;
@@ -47,19 +48,20 @@ export class IconBar extends React.Component<IconBarProps> {
constructor(props: IconBarProps) {
super(props);
- this.typesToFind = [DocTypes.AUDIO, DocTypes.COL, DocTypes.HIST, DocTypes.IMG, DocTypes.LINK, DocTypes.PDF, DocTypes.TEXT, DocTypes.VID, DocTypes.WEB];
+ // console.log("seting")
IconBar.Instance = this;
}
@action.bound
getList = (): string[] => {
- return this.typesToFind;
+ return SearchBox.Instance.getIcons();
}
@action.bound
updateList(newList: string[]) {
- this.typesToFind = newList;
- console.log(newList)
+ // this.typesToFind = newList;
+ SearchBox.Instance.updateIcon(newList)
+ // console.log(newList)
}
@action.bound
@@ -87,7 +89,7 @@ export class IconBar extends React.Component<IconBarProps> {
<div className="filter-description">Select All</div>
</div>
{this.allIcons.map((type: string) =>
- <IconButton type={type} active={this.typesToFind.indexOf(type) !== -1} getList={this.getList} updateList={this.updateList} />
+ <IconButton type={type}/>
)}
<div className="filter type-outer">
<div className={"type-icon none not-selected"}
diff --git a/src/client/views/search/IconButton.tsx b/src/client/views/search/IconButton.tsx
index 71f1b7f0f..cdde10fa5 100644
--- a/src/client/views/search/IconButton.tsx
+++ b/src/client/views/search/IconButton.tsx
@@ -11,6 +11,8 @@ import '../globalCssVariables.scss';
import * as _ from "lodash";
import { IconBar } from './IconBar';
import { props } from 'bluebird';
+import { SearchBox } from './SearchBox';
+import { Search } from '../../../server/Search';
library.add(faSearch);
library.add(faObjectGroup);
@@ -26,10 +28,10 @@ library.add(faBan);
interface IconButtonProps {
type: string;
- getList(): string[];
- updateList(list: string[]): void;
+ // getList(): string[];
+ // updateList(list: string[]): void;
// updateSelectedList(type: string): void;
- active: boolean;
+ // active: boolean;
// getActiveType(): string;
// changeActiveType(value: string): void;
}
@@ -37,7 +39,7 @@ interface IconButtonProps {
@observer
export class IconButton extends React.Component<IconButtonProps>{
- @observable isSelected: boolean = this.props.active;
+ @observable isSelected: boolean = SearchBox.Instance.getIcons().indexOf(this.props.type) !== -1;
// @observable removeType = false;
@observable hover = false;
// @observable isRemoved: boolean = (this.props.getActiveType() === "remove");
@@ -53,6 +55,8 @@ export class IconButton extends React.Component<IconButtonProps>{
}
componentDidMount = () => {
+ // console.log(this.props.type, this.isSelected)
+
this._resetReaction = reaction(
() => IconBar.Instance.ResetClicked,
() => {
@@ -81,36 +85,6 @@ export class IconButton extends React.Component<IconButtonProps>{
)
}
- // @action
- // downKeyHandler = (e: KeyboardEvent) => {
- // if (e.key !== "Control") return;
- // this.removeType = true;
- // e.preventDefault();
- // e.stopPropagation();
- // document.body.style.cursor = "not-allowed";
- // }
-
- // @action
- // upKeyHandler = (e: KeyboardEvent) => {
- // e.preventDefault();
- // e.stopPropagation();
- // this.removeType = false;
- // document.body.style.cursor = "default";
-
- // }
-
- // componentWillMount() {
- // document.removeEventListener("keydown", this.downKeyHandler);
- // document.addEventListener("keydown", this.downKeyHandler);
- // document.removeEventListener("keyup", this.upKeyHandler);
- // document.addEventListener("keyup", this.upKeyHandler);
- // }
-
- // componentWillUnMount() {
- // document.removeEventListener("keyup", this.upKeyHandler);
- // document.removeEventListener("keydown", this.downKeyHandler);
- // }
-
@action.bound
getIcon() {
switch (this.props.type) {
@@ -139,25 +113,9 @@ export class IconButton extends React.Component<IconButtonProps>{
}
}
- // public getType(): string {
- // return this.props.type;
- // }
-
- // public getIsSelected(): boolean {
- // return this.isSelected;
- // }
-
- // public getIsRemoved() {
- // return this.isRemoved;
- // }
-
- // public getIsAdded() {
- // return this.isAdded;
- // }
-
@action.bound
onClick = () => {
- let newList: string[] = this.props.getList();
+ let newList: string[] = SearchBox.Instance.getIcons();
if(!this.isSelected){
this.isSelected = true;
@@ -168,84 +126,14 @@ export class IconButton extends React.Component<IconButtonProps>{
_.pull(newList, this.props.type)
}
- this.props.updateList(newList);
+ SearchBox.Instance.updateIcon(newList);
}
- // @action
- // onClick2 = () => {
- // let newList: string[] = this.props.getList();
-
- // // if(this.removeType && this.props.getActiveType() !== "remove"){
- // // this.props.changeActiveType("remove")
- // // // console.log("resetting")
- // // }
- // // else if(!this.removeType && this.props.getActiveType() !== "add"){
- // // this.props.changeActiveType("add");
- // // // console.log("resetting")
- // // }
-
- // //if it's not already selected
- // if (!this.isSelected) {
- // this.isSelected = true;
- // console.log("changing")
-
- // //if actions pertain to removal
- // if (this.removeType) {
- // this.isAdded = false;
- // if (!this.isRemoved) {
- // _.pull(newList, this.props.type);
- // this.isRemoved = true;
- // }
- // else {
- // newList.push(this.props.type);
- // this.isRemoved = false;
- // }
- // }
- // // if actions pertain to adding
- // else {
- // this.isRemoved = false;
- // if (!this.isAdded) {
- // if (newList.length === 9) {
- // newList = [];
- // newList.push(this.props.type)
- // } else {
- // newList.push(this.props.type);
- // }
- // this.isAdded = true;
- // }
- // else {
- // _.pull(newList, this.props.type);
- // this.isAdded = false;
- // }
- // }
- // }
- // //if it is selected already
- // else {
- // this.isSelected = false;
- // if (this.isAdded) {
- // this.isAdded = false;
- // _.pull(newList, this.props.type);
- // }
- // if (this.isRemoved) {
- // this.isRemoved = false;
- // newList.push(this.props.type)
- // }
- // this.props.changeActiveType("none")
- // }
- // this.props.updateList(newList)
- // console.log(this);
- // console.log(this.isAdded, this.isSelected)
- // }
-
selected = {
opacity: 1,
backgroundColor: "#c2c2c5" //$alt-accent
}
- // selectedRemoved = {
- // opacity: 0.2,
- // }
-
notSelected = {
opacity: 0.6,
}
@@ -255,20 +143,9 @@ export class IconButton extends React.Component<IconButtonProps>{
backgroundColor: "rgb(178, 206, 248)" //$darker-alt-accent
}
- // hoverRemoveStyle = {
- // opacity: 0.2,
- // backgroundColor: "transparent",
- // }
-
- // banStyle = {
- // opacity: 1,
- // }
-
@action.bound
public reset() {
this.isSelected = false;
- // this.isAdded = false;
- // this.isRemoved = false;
}
@action.bound
@@ -320,17 +197,10 @@ export class IconButton extends React.Component<IconButtonProps>{
onMouseLeave={this.onMouseLeave}
onClick={this.onClick}>
<div className="type-icon" id={this.props.type + "-icon"}
- // style={this.hover ? this.removeType ? this.hoverRemoveStyle : this.hoverStyle :
- // !this.isSelected ? this.notSelected :
- // this.isAdded ? this.selectedAdded :
- // this.isRemoved ? this.selectedRemoved : this.notSelected}
style = {this.hover ? this.hoverStyle : this.isSelected ? this.selected : this.notSelected}
>
{this.getFA()}
</div>
- {/* <div className="ban-icon"
- style={this.hover ? (this.removeType ? this.banStyle : { opacity: 0 }) : (this.isSelected ? this.isRemoved ? this.banStyle : { opacity: 0 } : { opacity: 0 })}>
- <FontAwesomeIcon className="fontawesome-icon" icon={faBan} /></div> */}
<div className="filter-description">{this.props.type}</div>
</div>
);
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 5d88615f6..0983cad3f 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -130,20 +130,6 @@ export class SearchBox extends React.Component {
return this.filterDocs(docs);
}
- // @action filterDocs2(docs: Doc[]) {
- // if (this._icons.length === 0) {
- // return docs;
- // }
- // let finalDocs: Doc[] = [];
- // docs.forEach(doc => {
- // let layoutresult = Cast(doc.type, "string", "");
- // if (this._icons.includes(layoutresult)) {
- // finalDocs.push(doc)
- // }
- // });
- // return finalDocs;
- // }
-
//this.icons will now include all the icons that need to be included
@action filterDocs(docs: Doc[]) {
let finalDocs: Doc[] = [];
diff --git a/src/client/views/search/SearchItem.scss b/src/client/views/search/SearchItem.scss
index 630d27cc3..6e88d1f44 100644
--- a/src/client/views/search/SearchItem.scss
+++ b/src/client/views/search/SearchItem.scss
@@ -134,6 +134,8 @@
}
.search-label{
+ text-align: right;
+ float: right;
text-transform: capitalize;
opacity: 0;
-webkit-transition: opacity 0.2s ease-in-out;