From 639dee759e23083d269ab2a66f30e669b46a9aaf Mon Sep 17 00:00:00 2001 From: madelinegr Date: Thu, 13 Jun 2019 18:41:18 -0400 Subject: honestly no idea what is going on --- src/client/views/search/CheckBox.scss | 34 ++++++++ src/client/views/search/CheckBox.tsx | 40 +++++++++ src/client/views/search/IconBar.scss | 7 +- src/client/views/search/IconBar.tsx | 145 ++++++++++++++++++++++++++------ src/client/views/search/SearchBox.tsx | 31 ++++--- src/client/views/search/SearchItem.scss | 13 +++ src/client/views/search/SearchItem.tsx | 15 ++-- src/client/views/search/minus.svg | 5 ++ src/client/views/search/plus.svg | 5 ++ 9 files changed, 249 insertions(+), 46 deletions(-) create mode 100644 src/client/views/search/CheckBox.scss create mode 100644 src/client/views/search/CheckBox.tsx create mode 100644 src/client/views/search/minus.svg create mode 100644 src/client/views/search/plus.svg (limited to 'src') diff --git a/src/client/views/search/CheckBox.scss b/src/client/views/search/CheckBox.scss new file mode 100644 index 000000000..8eee9176b --- /dev/null +++ b/src/client/views/search/CheckBox.scss @@ -0,0 +1,34 @@ +@import "../globalCssVariables"; + +.checkbox { + display: flex; + + .check-box { + z-index: 900; + position: relative; + height: 20px; + width: 20px; + overflow: visible; + background-color: transparent; + border-style: solid; + border-color: $alt-accent; + border-width: 2px; + } + + .box:hover { + background-color: $intermediate-color; + } + + .checkmark { + z-index: 1000; + position: relative; + fill-opacity: 0; + stroke-width: 4px; + stroke: white; + } + +} + +.checkbox-title { + text-transform: uppercase; +} \ No newline at end of file diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx new file mode 100644 index 000000000..8b5f7d7c1 --- /dev/null +++ b/src/client/views/search/CheckBox.tsx @@ -0,0 +1,40 @@ +import * as React from 'react'; +import { observer } from 'mobx-react'; +import { observable, action, runInAction } from 'mobx'; +import "./CheckBox.scss"; + +interface CheckBoxProps { + originalStatus: boolean; + updateStatus(newStatus: boolean): void; + title: string; +} + +@observer +export class CheckBox extends React.Component{ + @observable _status: boolean; + + constructor(props: CheckBoxProps) { + super(props); + + this._status = this.props.originalStatus; + } + + onClick = () => { + this._status = !this._status; + this.props.updateStatus(this._status); + } + + render() { + return ( +
+
+ + + +
+
{this.props.title}
+
+ ) + } + +} \ No newline at end of file diff --git a/src/client/views/search/IconBar.scss b/src/client/views/search/IconBar.scss index e08e09702..3d38b7ac3 100644 --- a/src/client/views/search/IconBar.scss +++ b/src/client/views/search/IconBar.scss @@ -32,7 +32,8 @@ font-size: 2em; } -.type-icon.selected { + +.type-icon.add.selected { background-color: $alt-accent; opacity: 1; } @@ -47,6 +48,10 @@ width: 28px; } +.filter-description{ + text-transform: capitalize; +} + .type-icon.filter:hover { transform: scale(1.1); background-color: $alt-accent; diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx index 8fb7d0959..ba337dcab 100644 --- a/src/client/views/search/IconBar.tsx +++ b/src/client/views/search/IconBar.tsx @@ -9,7 +9,7 @@ import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMu import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { library } from '@fortawesome/fontawesome-svg-core'; import * as _ from "lodash"; -var classNames = require('classnames'); +import $ from 'jquery'; library.add(faSearch); library.add(faObjectGroup); @@ -25,7 +25,8 @@ library.add(faBan); export interface IconBarProps { updateIcon(icons: string[]): void; - getIcons(): string[]; + getSelectedTypes(): string[]; + getRemovedTypes(): string[]; } @observer @@ -45,13 +46,45 @@ export class IconBar extends React.Component { @observable webRef = React.createRef(); @observable allRefs: React.RefObject[] = [this.colRef, this.imgRef, this.textRef, this.pdfRef, this.vidRef, this.audioRef, this.linkRef, this.histRef, this.webRef]; - @observable originalFilteredNodes: string[] = this.props.getIcons(); + @observable originalSelectedNodes: string[] = this.props.getSelectedTypes(); + @observable originalRemovedNodes: string[] = this.props.getSelectedTypes(); + + @observable removeType: boolean = false; constructor(props: IconBarProps){ super(props); IconBar.Instance = this; } + @action + downKeyHandler = (e: KeyboardEvent) => { + if (e.key !== "Control") return; + this.removeType = true; + e.preventDefault(); + e.stopPropagation(); + + } + + @action + upKeyHandler = (e: KeyboardEvent) => { + e.preventDefault(); + e.stopPropagation(); + this.removeType = false; + } + + 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); + } + + componentDidMount = () => { //i KNOW this is bad i just can't get this to re render eeeeeeeek this.forceUpdate(); @@ -113,25 +146,40 @@ export class IconBar extends React.Component { this.allRefs.forEach(element => { if (element.current) { element.current.setAttribute("data-selected", "false"); + element.current.setAttribute("data-removed", "false"); } }); } @action.bound - alternateRef(ref: any) { + alternateSelectedRef(ref: any) { if (ref.getAttribute("data-selected") === "true") { ref.setAttribute("data-selected", "false"); } else { ref.setAttribute("data-selected", "true"); + ref.setAttribute("data-removed", "false") } } + //TODO: this needs help + @action.bound + alternateRemovedRef(ref: any) { + if (ref.getAttribute("data-removed") === "true") { + ref.setAttribute("data-removed", "false"); + } + else { + ref.setAttribute("data-removed", "true"); + ref.setAttribute("data-selected", "false") + } + } + + //TODO: this needs help @action.bound onClick = (value: string) => { - let icons: string[] = this.props.getIcons(); + let icons: string[] = this.props.getSelectedTypes(); let ref = this.getRef(value); - this.alternateRef(ref); + this.alternateSelectedRef(ref); if (value === DocTypes.NONE) { icons = []; // if its none, change the color of all the other circles @@ -164,107 +212,148 @@ export class IconBar extends React.Component { } } - getInitialStatus = (type: string) => { - if (this.originalFilteredNodes.includes(type)) { + //checks attribues of ref to return whether or not a type should be specifically included in the search + @action.bound + getInitialSelectedStatus = (type: string) => { + if (this.originalSelectedNodes.includes(type)) { return "true"; } return "false"; } + //checks attributes of ref to return whether or not it should be excluded from search results + @action.bound + isRemoved = (ref: React.RefObject) => { + if(ref.current){ + if(ref.current.getAttribute("data-removed") === "true") { + return true; + } + return false; + } + } + + //gets status upon mounting if a doc type should be removed from the results + @action.bound + getInitialRemovedStatus = (type: string) => { + if (this.originalRemovedNodes.includes(type)) { + return "true"; + } + return "false"; + } + + @action.bound + changeCursor() { + if(!this.removeType) + {document.body.style.cursor = 'url(".\noun_Plus_2224963.svg")';} + else{ + {document.body.style.cursor = 'url(".\noun_Plus_2224963.svg")';} + } + } + render() { return (
Filter by type of node
-
+
{ this.onClick(DocTypes.NONE); }}>
Clear
-
{ this.onClick(DocTypes.PDF); }}>
-
PDF
+
{DocTypes.PDF}
{ this.onClick(DocTypes.HIST); }}>
-
Histogram
+
{DocTypes.HIST}
{ this.onClick(DocTypes.COL); }}>
-
Collection
+
{DocTypes.COL}
{ this.onClick(DocTypes.IMG); }}>
-
Image
+
{DocTypes.IMG}
{ this.onClick(DocTypes.VID); }}>
-
Video
+
{DocTypes.VID}
{ this.onClick(DocTypes.WEB); }}>
-
Web
+
{DocTypes.WEB}
{ this.onClick(DocTypes.LINK); }}>
-
Link
+
{DocTypes.LINK}
{ this.onClick(DocTypes.AUDIO); }}>
-
Audio
+
{DocTypes.AUDIO}
{ this.onClick(DocTypes.TEXT); }}>
-
Text
+
{DocTypes.TEXT}
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 622fa27f0..fc54d87e2 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -23,7 +23,11 @@ import { findDOMNode } from 'react-dom'; import { ToggleBar } from './ToggleBar'; import { IconBar } from './IconBar'; import { type } from 'os'; +import { CheckBox } from './CheckBox'; +export enum Keys { + TITLE = "title", +} @observer export class SearchBox extends React.Component { @@ -64,8 +68,8 @@ export class SearchBox extends React.Component { @action.bound onChange(e: React.ChangeEvent) { this._searchString = e.target.value; - - if(this._searchString === ""){ + + if (this._searchString === "") { this._results = []; this._openNoResults = false; } @@ -86,12 +90,13 @@ export class SearchBox extends React.Component { query = newWords.join(" "); } - if(query === ""){ + if (query === "") { results = []; } - else{ + else { //gets json result into a list of documents that can be used - results = await this.getResults(query);} + results = await this.getResults(query); + } runInAction(() => { this._resultsOpen = true; @@ -250,6 +255,10 @@ export class SearchBox extends React.Component { this._pointerTime = e.timeStamp; } + updateCheckStatus(newStat: boolean) { + console.log("updating!") + } + // Useful queries: // Delegates of a document: {!join from=id to=proto_i}id:{protoId} // Documents in a collection: {!join from=data_l to=id}id:{collectionProtoId} @@ -268,10 +277,10 @@ export class SearchBox extends React.Component {
{this._resultsOpen ? (
- { (this._results.length !== 0) ? ( + {(this._results.length !== 0) ? ( this._results.map(result => ) - ) : - this._openNoResults ? (
No Search Results
) : null } + ) : + this._openNoResults ? (
No Search Results
) : null}
) : undefined} @@ -285,16 +294,16 @@ export class SearchBox extends React.Component {
- +
temp for filtering by collection
- temp for filtering where in doc the keywords are found +
- + ) : undefined} diff --git a/src/client/views/search/SearchItem.scss b/src/client/views/search/SearchItem.scss index 5afb69164..630d27cc3 100644 --- a/src/client/views/search/SearchItem.scss +++ b/src/client/views/search/SearchItem.scss @@ -131,4 +131,17 @@ -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); +} + +.search-label{ + text-transform: capitalize; + opacity: 0; + -webkit-transition: opacity 0.2s ease-in-out; + -moz-transition: opacity 0.2s ease-in-out; + -o-transition: opacity 0.2s ease-in-out; + transition: opacity 0.2s ease-in-out; +} + +.search-type:hover +.search-label{ + opacity: 1; } \ No newline at end of file diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx index fb0eade4b..c19057819 100644 --- a/src/client/views/search/SearchItem.tsx +++ b/src/client/views/search/SearchItem.tsx @@ -152,21 +152,24 @@ export class SearchItem extends React.Component { render() { return ( -
-
{ +
+
{ this.pointerDown; - SetupDrag(this.collectionRef, this.startDocDrag);}} > + SetupDrag(this.collectionRef, this.startDocDrag); + }} >
{this.props.doc.title}
{this.linkCount}
-
{this.linkString}
+
{this.linkString}
+
+
+
{this.DocumentIcon}
+
{this.props.doc.type}
-
{this.DocumentIcon}
-
Where Found: (i.e. title, body, etc)
diff --git a/src/client/views/search/minus.svg b/src/client/views/search/minus.svg new file mode 100644 index 000000000..63cd809f6 --- /dev/null +++ b/src/client/views/search/minus.svg @@ -0,0 +1,5 @@ +Created by Manaqib Sfrom the Noun Project \ No newline at end of file diff --git a/src/client/views/search/plus.svg b/src/client/views/search/plus.svg new file mode 100644 index 000000000..deb855637 --- /dev/null +++ b/src/client/views/search/plus.svg @@ -0,0 +1,5 @@ +Created by mohkamilfrom the Noun Project \ No newline at end of file -- cgit v1.2.3-70-g09d2