From 54d41e1eae499459e14d6d3a729127f231520f98 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Mon, 10 Jun 2019 14:51:52 -0400 Subject: thigns working --- src/client/documents/Documents.ts | 35 +++++-- src/client/views/SearchBox.scss | 15 ++- src/client/views/SearchBox.tsx | 193 ++++++++++++++++++++++++++++---------- src/client/views/SearchItem.tsx | 19 ++-- 4 files changed, 192 insertions(+), 70 deletions(-) (limited to 'src') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 2da4c8d88..8884bcc52 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -38,6 +38,21 @@ import { RouteStore } from "../../server/RouteStore"; var requestImageSize = require('request-image-size'); var path = require('path'); +export enum DocTypes { + NONE = "none", + IMG = "image", + HIST = "histogram", + ICON = "icon", + TEXT = "text", + PDF = "pdf", + WEB = "web", + COL = "collection", + KVP = "kvp", + VID = "video", + AUDIO = "audio", + LINK = "link" +} + export interface DocumentOptions { x?: number; y?: number; @@ -155,54 +170,54 @@ export namespace Docs { function CreateImagePrototype(): Doc { let imageProto = setupPrototypeOptions(imageProtoId, "IMAGE_PROTO", CollectionView.LayoutString("annotations"), - { x: 0, y: 0, nativeWidth: 600, width: 300, backgroundLayout: ImageBox.LayoutString(), curPage: 0, type: "image" }); + { x: 0, y: 0, nativeWidth: 600, width: 300, backgroundLayout: ImageBox.LayoutString(), curPage: 0, type: DocTypes.IMG }); return imageProto; } function CreateHistogramPrototype(): Doc { let histoProto = setupPrototypeOptions(histoProtoId, "HISTO PROTO", CollectionView.LayoutString("annotations"), - { x: 0, y: 0, width: 300, height: 300, backgroundColor: "black", backgroundLayout: HistogramBox.LayoutString(), type: "histogram" }); + { x: 0, y: 0, width: 300, height: 300, backgroundColor: "black", backgroundLayout: HistogramBox.LayoutString(), type: DocTypes.HIST }); return histoProto; } function CreateIconPrototype(): Doc { let iconProto = setupPrototypeOptions(iconProtoId, "ICON_PROTO", IconBox.LayoutString(), - { x: 0, y: 0, width: Number(MINIMIZED_ICON_SIZE), height: Number(MINIMIZED_ICON_SIZE), type: "icon" }); + { x: 0, y: 0, width: Number(MINIMIZED_ICON_SIZE), height: Number(MINIMIZED_ICON_SIZE), type: DocTypes.ICON }); return iconProto; } function CreateTextPrototype(): Doc { let textProto = setupPrototypeOptions(textProtoId, "TEXT_PROTO", FormattedTextBox.LayoutString(), - { x: 0, y: 0, width: 300, height: 150, backgroundColor: "#f1efeb", type: "text" }); + { x: 0, y: 0, width: 300, height: 150, backgroundColor: "#f1efeb", type: DocTypes.TEXT }); return textProto; } function CreatePdfPrototype(): Doc { let pdfProto = setupPrototypeOptions(pdfProtoId, "PDF_PROTO", CollectionPDFView.LayoutString("annotations"), - { x: 0, y: 0, nativeWidth: 1200, width: 300, backgroundLayout: PDFBox.LayoutString(), curPage: 1, type: "pdf" }); + { x: 0, y: 0, nativeWidth: 1200, width: 300, backgroundLayout: PDFBox.LayoutString(), curPage: 1, type: DocTypes.PDF }); return pdfProto; } function CreateWebPrototype(): Doc { let webProto = setupPrototypeOptions(webProtoId, "WEB_PROTO", WebBox.LayoutString(), - { x: 0, y: 0, width: 300, height: 300, type: "web" }); + { x: 0, y: 0, width: 300, height: 300, type: DocTypes.WEB }); return webProto; } function CreateCollectionPrototype(): Doc { let collProto = setupPrototypeOptions(collProtoId, "COLLECTION_PROTO", CollectionView.LayoutString("data"), - { panX: 0, panY: 0, scale: 1, width: 500, height: 500, type: "collection" }); + { panX: 0, panY: 0, scale: 1, width: 500, height: 500, type: DocTypes.COL }); return collProto; } function CreateKVPPrototype(): Doc { let kvpProto = setupPrototypeOptions(kvpProtoId, "KVP_PROTO", KeyValueBox.LayoutString(), - { x: 0, y: 0, width: 300, height: 150, type: "kvp" }); + { x: 0, y: 0, width: 300, height: 150, type: DocTypes.KVP }); return kvpProto; } function CreateVideoPrototype(): Doc { let videoProto = setupPrototypeOptions(videoProtoId, "VIDEO_PROTO", CollectionVideoView.LayoutString("annotations"), - { x: 0, y: 0, nativeWidth: 600, width: 300, backgroundLayout: VideoBox.LayoutString(), curPage: 0, type: "video" }); + { x: 0, y: 0, nativeWidth: 600, width: 300, backgroundLayout: VideoBox.LayoutString(), curPage: 0, type: DocTypes.VID }); return videoProto; } function CreateAudioPrototype(): Doc { let audioProto = setupPrototypeOptions(audioProtoId, "AUDIO_PROTO", AudioBox.LayoutString(), - { x: 0, y: 0, width: 300, height: 150, type: "audio" }); + { x: 0, y: 0, width: 300, height: 150, type: DocTypes.AUDIO }); return audioProto; } diff --git a/src/client/views/SearchBox.scss b/src/client/views/SearchBox.scss index 8ec440fca..91d17d001 100644 --- a/src/client/views/SearchBox.scss +++ b/src/client/views/SearchBox.scss @@ -82,12 +82,19 @@ } .type-icon{ - margin-right: 5px; - margin-left: 5px; - height: 40px; - width: 40px; + height: 50px; + width: 50px; color: $light-color; border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + background-color: "#121721"; + } + + .fontawesome-icon{ + height: 28px; + width: 28px; } .type-icon:hover{ diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx index d959826a1..c2ac0c06c 100644 --- a/src/client/views/SearchBox.tsx +++ b/src/client/views/SearchBox.tsx @@ -11,11 +11,16 @@ import { DocServer } from '../DocServer'; import { Doc } from '../../new_fields/Doc'; import { Id } from '../../new_fields/FieldSymbols'; import { SetupDrag } from '../util/DragManager'; -import { Docs } from '../documents/Documents'; +import { Docs, DocTypes } from '../documents/Documents'; import { RouteStore } from '../../server/RouteStore'; import { NumCast } from '../../new_fields/Types'; import { SearchUtil } from '../util/SearchUtil'; import * as anime from 'animejs'; +import { updateFunction } from '../../new_fields/util'; +import * as _ from "lodash"; +// import "./globalCssVariables.scss"; +import { findDOMNode } from 'react-dom'; + // import * as anime from '../../../node_modules/@types'; // const anime = require('lib/anime.js'); // import anime from 'animejs/lib/anime.es'; @@ -34,17 +39,117 @@ library.add(faChartBar); library.add(faGlobeAsia); library.add(faBan); +export interface IconBarProps { + updateIcon(newIcons: string[]): void; + getIcons(): string[]; +} + +@observer +export class IconBar extends React.Component { + + @observable newIcons: string[] = []; + + //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(".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" + } + }) + ); + + } + + onClick = (value: string) => { + let oldIcons = this.props.getIcons() + if (value === "none") { + this.newIcons = [value]; + } + else { + if (oldIcons.includes(value)) { + this.newIcons = _.remove(oldIcons, value); + if (this.newIcons.length === 0) { + this.newIcons = ["none"]; + } + } + else { + this.newIcons = oldIcons; + if (this.newIcons.length === 1 && this.newIcons[0] === "none") { + this.newIcons = [value] + } + else { this.newIcons.push(value); } + } + } + this.props.updateIcon(this.newIcons) + + } + + render() { + + return ( +
+
+
{ this.onClick(DocTypes.NONE) }}> + +
+
{ this.onClick(DocTypes.PDF) }}> + +
+
{ this.onClick(DocTypes.HIST) }}> + +
+
{ this.onClick(DocTypes.COL) }}> + +
+
{ this.onClick(DocTypes.IMG) }}> + +
+
{ this.onClick(DocTypes.VID) }}> + +
+
{ this.onClick(DocTypes.WEB) }}> + +
+
{ this.onClick(DocTypes.LINK) }}> + +
+
{ this.onClick(DocTypes.AUDIO) }}> + +
+
{ this.onClick(DocTypes.TEXT) }}> + +
+
+
+ ) + } +} + export interface ToggleBarProps { //false = right, true = left // status: boolean; changeStatus(value: boolean): void; optionOne: string; optionTwo: string; - //addDocTab(doc: Doc, location: string): void; } //TODO: justify content will align to specific side. Maybe do status passed in and out? - @observer export class ToggleBar extends React.Component{ @@ -55,12 +160,14 @@ export class ToggleBar extends React.Component{ constructor(props: ToggleBarProps) { super(props); this._toggleButton = React.createRef(); - this.timeline = anime.timeline({autoplay: false, - direction: "reverse"}); + this.timeline = anime.timeline({ + autoplay: false, + direction: "reverse" + }); } componentDidMount = () => { - + let bar = document.getElementById("toggle-bar"); let tog = document.getElementById("toggle-button"); let barwidth = 0; @@ -68,7 +175,6 @@ export class ToggleBar extends React.Component{ if (bar && tog) { barwidth = bar.clientWidth; togwidth = tog.clientWidth; - console.log(togwidth) } let totalWidth = (barwidth - togwidth - 10); @@ -80,11 +186,10 @@ export class ToggleBar extends React.Component{ duration: 500 }); } - + @action.bound onclick() { this._status = !this._status; - console.log("sttaus should be:", this._status) this.props.changeStatus(this._status); this.timeline.play(); this.timeline.reverse(); @@ -93,13 +198,13 @@ export class ToggleBar extends React.Component{ render() { return (
-
-
{this.props.optionOne}
-
{this.props.optionTwo}
-
-
-
-
+
+
{this.props.optionOne}
+
{this.props.optionTwo}
+
+
+
+
); }; @@ -108,25 +213,21 @@ export class ToggleBar extends React.Component{ @observer export class SearchBox extends React.Component { - @observable - searchString: string = ""; + @observable _searchString: string = ""; @observable _wordStatus: boolean = true; - + @observable _icons: string[] = ["none"]; @observable private _open: boolean = false; @observable private _resultsOpen: boolean = false; - - @observable - private _results: Doc[] = []; - + @observable private _results: Doc[] = []; @action.bound onChange(e: React.ChangeEvent) { - this.searchString = e.target.value; + this._searchString = e.target.value; } @action submitSearch = async () => { - let query = this.searchString; + let query = this._searchString; //gets json result into a list of documents that can be used const results = await this.getResults(query); @@ -176,8 +277,9 @@ export class SearchBox extends React.Component { @action handleSearchClick = (e: Event): void => { let element = document.getElementsByClassName((e.target as any).className)[0]; + let name: string = (e.target as any).className; //handles case with filter button - if ((e.target as any).className.includes("filter")) { + if (String(name).indexOf("filter") !== -1 || String(name).indexOf("SVG") !== -1) { this._resultsOpen = false; this._open = true; } @@ -195,13 +297,13 @@ export class SearchBox extends React.Component { } //not in either, close both else { + console.log("not either") this._resultsOpen = false; this._open = false; } } - //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)); @@ -224,7 +326,7 @@ export class SearchBox extends React.Component { collectionRef = React.createRef(); startDragCollection = async () => { - const results = await this.getResults(this.searchString); + const results = await this.getResults(this._searchString); const docs = results.map(doc => { const isProto = Doc.GetT(doc, "isPrototype", "boolean", true); if (isProto) { @@ -257,7 +359,7 @@ export class SearchBox extends React.Component { y += 300; } } - return Docs.FreeformDocument(docs, { width: 400, height: 400, panX: 175, panY: 175, backgroundColor: "grey", title: `Search Docs: "${this.searchString}"` }); + return Docs.FreeformDocument(docs, { width: 400, height: 400, panX: 175, panY: 175, backgroundColor: "grey", title: `Search Docs: "${this._searchString}"` }); } @action @@ -272,7 +374,16 @@ export class SearchBox extends React.Component { handleWordQueryChange = (value: boolean) => { this._wordStatus = value; - console.log("changed toL:", this._wordStatus) + } + + @action.bound + updateIcon(newArray: string[]) { + this._icons = newArray; + } + + @action.bound + getIcons(): string[] { + return this._icons; } // Useful queries: @@ -286,7 +397,7 @@ export class SearchBox extends React.Component { - @@ -295,7 +406,7 @@ export class SearchBox extends React.Component {
{this._results.map(result => )}
- ) : null} + ) : undefined}
{/* these all need class names in order to find ancestor - please do not delete */} {this._open ? ( @@ -303,23 +414,11 @@ export class SearchBox extends React.Component {
- +
temp for filtering by a type of node -
- {/* hoping to ultimately animate a reorder when an icon is chosen */} - - - - - - - - - - -
+
temp for filtering by collection @@ -329,7 +428,7 @@ export class SearchBox extends React.Component {
- ) : null} + ) : undefined} ); } diff --git a/src/client/views/SearchItem.tsx b/src/client/views/SearchItem.tsx index 8e6a4010a..acb7eeac4 100644 --- a/src/client/views/SearchItem.tsx +++ b/src/client/views/SearchItem.tsx @@ -14,6 +14,7 @@ import { CollectionDockingView } from "./collections/CollectionDockingView"; import { observer } from "mobx-react"; import "./SearchItem.scss"; import { CollectionViewType } from "./collections/CollectionBaseView"; +import { DocTypes } from "../documents/Documents"; export interface SearchItemProps { doc: Doc; @@ -92,15 +93,15 @@ export class SearchItem extends React.Component { public DocumentIcon() { let layoutresult = Cast(this.props.doc.type, "string", ""); - let button = layoutresult.indexOf("pdf") !== -1 ? faFilePdf : - layoutresult.indexOf("image") !== -1 ? faImage : - layoutresult.indexOf("text") !== -1 ? faStickyNote : - layoutresult.indexOf("video") !== -1 ? faFilm : - layoutresult.indexOf("collection") !== -1 ? faObjectGroup : - layoutresult.indexOf("audio") !== -1 ? faMusic : - layoutresult.indexOf("link") !== -1 ? faLink : - layoutresult.indexOf("histogram") !== -1 ? faChartBar : - layoutresult.indexOf("web") !== -1 ? faGlobeAsia : + let button = layoutresult.indexOf(DocTypes.PDF) !== -1 ? faFilePdf : + layoutresult.indexOf(DocTypes.IMG) !== -1 ? faImage : + layoutresult.indexOf(DocTypes.TEXT) !== -1 ? faStickyNote : + layoutresult.indexOf(DocTypes.VID) !== -1 ? faFilm : + layoutresult.indexOf(DocTypes.COL) !== -1 ? faObjectGroup : + layoutresult.indexOf(DocTypes.AUDIO) !== -1 ? faMusic : + layoutresult.indexOf(DocTypes.LINK) !== -1 ? faLink : + layoutresult.indexOf(DocTypes.HIST) !== -1 ? faChartBar : + layoutresult.indexOf(DocTypes.WEB) !== -1 ? faGlobeAsia : faCaretUp; return ; } -- cgit v1.2.3-70-g09d2