From 4fd53320c87313c9add8f551154f8df3e2522b5f Mon Sep 17 00:00:00 2001 From: madelinegr Date: Tue, 4 Jun 2019 18:15:54 -0400 Subject: end of day 6/4 --- src/client/documents/Documents.ts | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) (limited to 'src/client/documents') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index ab61b915c..2da4c8d88 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -41,6 +41,7 @@ var path = require('path'); export interface DocumentOptions { x?: number; y?: number; + type?: string; ink?: InkField; width?: number; height?: number; @@ -73,7 +74,7 @@ export namespace DocUtils { let protoSrc = source.proto ? source.proto : source; let protoTarg = target.proto ? target.proto : target; UndoManager.RunInBatch(() => { - let linkDoc = Docs.TextDocument({ width: 100, height: 30, borderRounding: -1 }); + let linkDoc = Docs.TextDocument({ width: 100, height: 30, borderRounding: -1, type: "link" }); //let linkDoc = new Doc; linkDoc.proto!.title = "-link name-"; linkDoc.proto!.linkDescription = ""; @@ -154,54 +155,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 }); + { x: 0, y: 0, nativeWidth: 600, width: 300, backgroundLayout: ImageBox.LayoutString(), curPage: 0, type: "image" }); 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() }); + { x: 0, y: 0, width: 300, height: 300, backgroundColor: "black", backgroundLayout: HistogramBox.LayoutString(), type: "histogram" }); 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) }); + { x: 0, y: 0, width: Number(MINIMIZED_ICON_SIZE), height: Number(MINIMIZED_ICON_SIZE), type: "icon" }); return iconProto; } function CreateTextPrototype(): Doc { let textProto = setupPrototypeOptions(textProtoId, "TEXT_PROTO", FormattedTextBox.LayoutString(), - { x: 0, y: 0, width: 300, height: 150, backgroundColor: "#f1efeb" }); + { x: 0, y: 0, width: 300, height: 150, backgroundColor: "#f1efeb", type: "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 }); + { x: 0, y: 0, nativeWidth: 1200, width: 300, backgroundLayout: PDFBox.LayoutString(), curPage: 1, type: "pdf" }); return pdfProto; } function CreateWebPrototype(): Doc { let webProto = setupPrototypeOptions(webProtoId, "WEB_PROTO", WebBox.LayoutString(), - { x: 0, y: 0, width: 300, height: 300 }); + { x: 0, y: 0, width: 300, height: 300, type: "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 }); + { panX: 0, panY: 0, scale: 1, width: 500, height: 500, type: "collection" }); return collProto; } function CreateKVPPrototype(): Doc { let kvpProto = setupPrototypeOptions(kvpProtoId, "KVP_PROTO", KeyValueBox.LayoutString(), - { x: 0, y: 0, width: 300, height: 150 }); + { x: 0, y: 0, width: 300, height: 150, type: "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 }); + { x: 0, y: 0, nativeWidth: 600, width: 300, backgroundLayout: VideoBox.LayoutString(), curPage: 0, type: "video" }); return videoProto; } function CreateAudioPrototype(): Doc { let audioProto = setupPrototypeOptions(audioProtoId, "AUDIO_PROTO", AudioBox.LayoutString(), - { x: 0, y: 0, width: 300, height: 150 }); + { x: 0, y: 0, width: 300, height: 150, type: "audio" }); return audioProto; } -- cgit v1.2.3-70-g09d2 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 ++-- tsconfig.json | 1 + 5 files changed, 193 insertions(+), 70 deletions(-) (limited to 'src/client/documents') 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 ; } diff --git a/tsconfig.json b/tsconfig.json index f3b87cac9..7f96e406e 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,7 @@ { "compilerOptions": { "target": "es5", + // "module": "system", "removeComments": true, "experimentalDecorators": true, "allowSyntheticDefaultImports": true, -- cgit v1.2.3-70-g09d2 From 09e40959ec0d47ae3bff2e9f1797ea2b0cbc1034 Mon Sep 17 00:00:00 2001 From: madelinegr Date: Wed, 12 Jun 2019 22:45:20 -0400 Subject: end of day 6/12 --- src/client/documents/Documents.ts | 6 +++--- src/client/util/DocumentManager.ts | 26 +++++++++++++++++++++++++- src/client/views/MainView.tsx | 4 ++-- src/client/views/search/IconBar.scss | 15 ++++++++++++++- src/client/views/search/IconBar.tsx | 16 +++++++++++++++- src/client/views/search/SearchBox.tsx | 25 +++++++++++++++++-------- src/client/views/search/SearchItem.tsx | 22 +++++++++++++++++----- src/client/views/search/ToggleBar.tsx | 16 ++++++++++++++-- 8 files changed, 107 insertions(+), 23 deletions(-) (limited to 'src/client/documents') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 9d83f0e36..2da5eed43 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -89,11 +89,13 @@ export namespace DocUtils { let protoSrc = source.proto ? source.proto : source; let protoTarg = target.proto ? target.proto : target; UndoManager.RunInBatch(() => { - let linkDoc = Docs.TextDocument({ width: 100, height: 30, borderRounding: -1 }); + let linkDoc = Docs.TextDocument({ width: 100, height: 30, borderRounding: -1}); + // linkDoc.type = DocTypes.LINK; let linkDocProto = Doc.GetProto(linkDoc); linkDocProto.title = source.title + " to " + target.title; linkDocProto.linkDescription = ""; linkDocProto.linkTags = "Default"; + linkDocProto.type = DocTypes.LINK; linkDocProto.linkedTo = target; linkDocProto.linkedFrom = source; @@ -110,8 +112,6 @@ export namespace DocUtils { return linkDoc; }, "make link"); } - - } export namespace Docs { diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts index 76ca4b99b..40928ecae 100644 --- a/src/client/util/DocumentManager.ts +++ b/src/client/util/DocumentManager.ts @@ -30,12 +30,36 @@ export class DocumentManager { // this.DocumentViews = new Array(); } + //gets all views + public getDocumentViewsById(id: string) { + let toReturn: DocumentView[] = []; + DocumentManager.Instance.DocumentViews.map(view => { + if (view.props.Document[Id] === id) { + toReturn.push(view); + } + }); + if (toReturn.length === 0) { + DocumentManager.Instance.DocumentViews.map(view => { + let doc = view.props.Document.proto; + if (doc && doc[Id]) { + if(doc[Id] === id) + {toReturn.push(view);} + } + }); + } + return toReturn; + } + + public getAllDocumentViews(doc: Doc){ + return this.getDocumentViewsById(doc[Id]); + } + public getDocumentViewById(id: string, preferredCollection?: CollectionView | CollectionPDFView | CollectionVideoView): DocumentView | null { let toReturn: DocumentView | null = null; let passes = preferredCollection ? [preferredCollection, undefined] : [undefined]; - for(let i = 0; i < passes.length; i++) { + for (let i = 0; i < passes.length; i++) { DocumentManager.Instance.DocumentViews.map(view => { if (view.props.Document[Id] === id && (!passes[i] || view.props.ContainingCollectionView === preferredCollection)) { toReturn = view; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index f30755711..c612d4b00 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -10,7 +10,7 @@ import * as request from 'request'; import { CurrentUserUtils } from '../../server/authentication/models/current_user_utils'; import { RouteStore } from '../../server/RouteStore'; import { emptyFunction, returnTrue, Utils, returnOne, returnZero } from '../../Utils'; -import { Docs } from '../documents/Documents'; +import { Docs, DocTypes } from '../documents/Documents'; import { SetupDrag, DragManager } from '../util/DragManager'; import { Transform } from '../util/Transform'; import { UndoManager } from '../util/UndoManager'; @@ -243,7 +243,7 @@ export class MainView extends React.Component { let audiourl = "http://techslides.com/demos/samples/sample.mp3"; let videourl = "http://techslides.com/demos/sample-videos/small.mp4"; - let addTextNode = action(() => Docs.TextDocument({ borderRounding: -1, width: 200, height: 200, title: "a text note" })); + let addTextNode = action(() => Docs.TextDocument({ borderRounding: -1, width: 200, height: 200, title: "a text note", type: DocTypes.TEXT })); let addColNode = action(() => Docs.FreeformDocument([], { width: this.pwidth * .7, height: this.pheight, title: "a freeform collection" })); let addSchemaNode = action(() => Docs.SchemaDocument(["title"], [], { width: 200, height: 200, title: "a schema collection" })); let addTreeNode = action(() => CurrentUserUtils.UserDocument); diff --git a/src/client/views/search/IconBar.scss b/src/client/views/search/IconBar.scss index 98b4e50a6..e08e09702 100644 --- a/src/client/views/search/IconBar.scss +++ b/src/client/views/search/IconBar.scss @@ -34,10 +34,12 @@ .type-icon.selected { background-color: $alt-accent; + opacity: 1; } .type-icon.not-selected { background-color: transparent; + opacity: .4; } .fontawesome-icon { @@ -45,9 +47,20 @@ width: 28px; } -.type-icon:hover { +.type-icon.filter:hover { transform: scale(1.1); background-color: $alt-accent; + opacity: 1; + + +.filter-description { + opacity: 1; + } +} + +.type-icon.none:hover { + transform: scale(1.1); + // background-color: $alt-accent; + opacity: 1; +.filter-description { opacity: 1; diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx index f3741a5de..8fb7d0959 100644 --- a/src/client/views/search/IconBar.tsx +++ b/src/client/views/search/IconBar.tsx @@ -31,6 +31,8 @@ export interface IconBarProps { @observer export class IconBar extends React.Component { + static Instance: IconBar; + @observable noneRef = React.createRef(); @observable colRef = React.createRef(); @observable imgRef = React.createRef(); @@ -45,11 +47,23 @@ export class IconBar extends React.Component { @observable originalFilteredNodes: string[] = this.props.getIcons(); + constructor(props: IconBarProps){ + super(props); + IconBar.Instance = this; + } + componentDidMount = () => { //i KNOW this is bad i just can't get this to re render eeeeeeeek this.forceUpdate(); } + @action.bound + resetIconFilters = () => { + this.unselectAllRefs(); + // lmao sorry + this.forceUpdate(); + } + //gets ref associated with given string @action.bound getRef = (value: string) => { @@ -163,7 +177,7 @@ export class IconBar extends React.Component {
Filter by type of node
-
{ this.onClick(DocTypes.NONE); }}> diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 319573adf..622fa27f0 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -53,6 +53,14 @@ export class SearchBox extends React.Component { }); } + @action.bound + resetFilters = () => { + ToggleBar.Instance.resetToggle(); + IconBar.Instance.resetIconFilters(); + // this._wordStatus = true; + this._icons = []; + } + @action.bound onChange(e: React.ChangeEvent) { this._searchString = e.target.value; @@ -66,22 +74,24 @@ export class SearchBox extends React.Component { @action submitSearch = async () => { let query = this._searchString; + let results: Doc[]; if (!this._wordStatus) { let oldWords = query.split(" "); let newWords: string[] = []; - console.log(oldWords); oldWords.forEach(word => { let newWrd = "+" + word; newWords.push(newWrd); }); - console.log(newWords); - query = newWords.join(" "); } - //gets json result into a list of documents that can be used - const results = await this.getResults(query); + if(query === ""){ + results = []; + } + else{ + //gets json result into a list of documents that can be used + results = await this.getResults(query);} runInAction(() => { this._resultsOpen = true; @@ -151,6 +161,7 @@ export class SearchBox extends React.Component { closeSearch = () => { this._open = false; this._resultsOpen = false; + this._results = []; } @action @@ -227,14 +238,12 @@ export class SearchBox extends React.Component { stopProp = (e: React.PointerEvent) => { e.stopPropagation(); - console.log('stopping prop') this._pointerTime = e.timeStamp; } @action.bound openSearch(e: React.PointerEvent) { e.stopPropagation(); - this._results = []; this._openNoResults = false; this._open = false; this._resultsOpen = true; @@ -285,7 +294,7 @@ export class SearchBox extends React.Component { temp for filtering where in doc the keywords are found
- +
) : undefined} diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx index 65f4dfd31..fb0eade4b 100644 --- a/src/client/views/search/SearchItem.tsx +++ b/src/client/views/search/SearchItem.tsx @@ -3,7 +3,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'; import { faCaretUp, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Cast, NumCast } from "../../../new_fields/Types"; -import { observable, runInAction, computed } from "mobx"; +import { observable, runInAction, computed, action } from "mobx"; import { listSpec } from "../../../new_fields/Schema"; import { Doc } from "../../../new_fields/Doc"; import { DocumentManager } from "../../util/DocumentManager"; @@ -16,6 +16,7 @@ import "./SearchItem.scss"; import { CollectionViewType } from "../collections/CollectionBaseView"; import { DocTypes } from "../../documents/Documents"; import { SearchBox } from "./SearchBox"; +import { DocumentView } from "../nodes/DocumentView"; export interface SearchItemProps { doc: Doc; @@ -84,11 +85,8 @@ export class SelectorContextMenu extends React.Component { export class SearchItem extends React.Component { @observable _selected: boolean = false; - @observable hover = false; onClick = () => { - // DocumentManager.Instance.jumpToDocument(this.props.doc); - console.log(Cast(this.props.doc.type, "string", "")) CollectionDockingView.Instance.AddRightSplit(this.props.doc); } @@ -138,10 +136,24 @@ export class SearchItem extends React.Component { SearchBox.Instance.openSearch(e); } + highlightDoc = (e: React.PointerEvent) => { + let docViews: DocumentView[] = DocumentManager.Instance.getAllDocumentViews(this.props.doc); + docViews.forEach(element => { + element.props.Document.libraryBrush = true; + }); + } + + unHighlightDoc = (e: React.PointerEvent) => { + let docViews: DocumentView[] = DocumentManager.Instance.getAllDocumentViews(this.props.doc); + docViews.forEach(element => { + element.props.Document.libraryBrush = false; + }); + } + render() { return (
-
{ +
{ this.pointerDown; SetupDrag(this.collectionRef, this.startDocDrag);}} >
diff --git a/src/client/views/search/ToggleBar.tsx b/src/client/views/search/ToggleBar.tsx index e7fd86d30..32f7a63dd 100644 --- a/src/client/views/search/ToggleBar.tsx +++ b/src/client/views/search/ToggleBar.tsx @@ -15,6 +15,7 @@ export interface ToggleBarProps { @observer export class ToggleBar extends React.Component{ + static Instance: ToggleBar; @observable forwardTimeline: anime.AnimeTimelineInstance; @observable _toggleButton: React.RefObject; @@ -23,6 +24,7 @@ export class ToggleBar extends React.Component{ constructor(props: ToggleBarProps) { super(props); + ToggleBar.Instance = this; this._toggleButton = React.createRef(); this.forwardTimeline = anime.timeline({ loop: false, @@ -76,12 +78,22 @@ export class ToggleBar extends React.Component{ this.props.changeStatus(); } + @action.bound + public resetToggle = () => { + if (!this._curStatus) { + this.forwardTimeline.play() + this.forwardTimeline.reverse(); + this.props.changeStatus(); + this._curStatus = true; + } + } + render() { return (
-
{this.props.optionOne}
-
{this.props.optionTwo}
+
{this.props.optionOne}
+
{this.props.optionTwo}
-- cgit v1.2.3-70-g09d2 From 25561f70206871432ebb24e787e7222e98584a49 Mon Sep 17 00:00:00 2001 From: yipstanley Date: Thu, 20 Jun 2019 19:43:25 -0400 Subject: artgh --- src/client/documents/Documents.ts | 2 +- src/client/views/nodes/PDFBox.tsx | 24 ++--- src/client/views/pdf/PDFViewer.tsx | 173 +++++-------------------------------- 3 files changed, 33 insertions(+), 166 deletions(-) (limited to 'src/client/documents') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index fcd1010c6..084e155e1 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -200,7 +200,7 @@ export namespace Docs { return audioProto; } - function CreateInstance(proto: Doc, data: Field, options: DocumentOptions, delegId?: string) { + export function CreateInstance(proto: Doc, data: Field, options: DocumentOptions, delegId?: string) { const { omit: protoProps, extract: delegateProps } = OmitKeys(options, delegateKeys); if (!("author" in protoProps)) { protoProps.author = CurrentUserUtils.email; diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 8daea2541..10a346269 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -1,7 +1,7 @@ import { action, IReactionDisposer, observable, reaction, trace, untracked } from 'mobx'; import { observer } from "mobx-react"; import 'react-image-lightbox/style.css'; -import { WidthSym } from "../../../new_fields/Doc"; +import { WidthSym, Doc } from "../../../new_fields/Doc"; import { makeInterface } from "../../../new_fields/Schema"; import { Cast, NumCast } from "../../../new_fields/Types"; import { PdfField } from "../../../new_fields/URLField"; @@ -17,6 +17,8 @@ import { FieldView, FieldViewProps } from './FieldView'; import { pageSchema } from "./ImageBox"; import "./PDFBox.scss"; import React = require("react"); +import { CompileScript } from '../../util/Scripting'; +import { ScriptField } from '../../../fields/ScriptField'; type PdfDocument = makeInterface<[typeof positionSchema, typeof pageSchema]>; const PdfDocument = makeInterface(positionSchema, pageSchema); @@ -42,25 +44,15 @@ export class PDFBox extends DocComponent(PdfDocumen } } ); + + let script = CompileScript("return this.page === 2", { params: { this: Doc.name } }); + if (script.compiled) { + this.props.Document.filterScript = new ScriptField(script); + } } - @action componentDidMount() { if (this.props.setPdfBox) this.props.setPdfBox(this); - - this._scrollY = NumCast(this.Document.startY); - this.props.Document.scrollY = this.Document.startY; - // let ccv = this.props.ContainingCollectionView; - // if (ccv) { - // ccv.props.Document.scrollY = this.Document.startY; - // } - } - - componentWillUnmount() { - let ccv = this.props.ContainingCollectionView; - if (ccv) { - ccv.props.Document.scrollY = this.Document.startY; - } } public GetPage() { diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index bb549a743..75a8b042d 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -10,7 +10,7 @@ import { List } from "../../../new_fields/List"; import { BoolCast, Cast, NumCast, StrCast, FieldValue } from "../../../new_fields/Types"; import { emptyFunction } from "../../../Utils"; import { DocServer } from "../../DocServer"; -import { Docs, DocUtils } from "../../documents/Documents"; +import { Docs, DocUtils, DocumentOptions } from "../../documents/Documents"; import { DocumentManager } from "../../util/DocumentManager"; import { DragManager } from "../../util/DragManager"; import { DocumentView } from "../nodes/DocumentView"; @@ -20,6 +20,8 @@ import "./PDFViewer.scss"; import React = require("react"); import PDFMenu from "./PDFMenu"; import { UndoManager } from "../../util/UndoManager"; +import { ScriptField } from "../../../fields/ScriptField"; +import { CompileScript, CompiledScript } from "../../util/Scripting"; export const scale = 2; interface IPDFViewerProps { @@ -75,12 +77,14 @@ class Viewer extends React.Component { @observable private _pageSizes: { width: number, height: number }[] = []; @observable private _annotations: Doc[] = []; @observable private _savedAnnotations: Dictionary = new Dictionary(); + @observable private _script: ScriptField | undefined = this.props.parent.Document.filterScript; private _pageBuffer: number = 1; private _annotationLayer: React.RefObject = React.createRef(); private _reactionDisposer?: IReactionDisposer; private _annotationReactionDisposer?: IReactionDisposer; private _dropDisposer?: DragManager.DragDropDisposer; + private _filterReactionDisposer?: IReactionDisposer; componentDidUpdate = (prevProps: IViewerProps) => { if (this.scrollY !== prevProps.scrollY) { @@ -103,6 +107,15 @@ class Viewer extends React.Component { (annotations: Doc[]) => annotations && annotations.length && this.renderAnnotations(annotations, true), { fireImmediately: true }); + + if (this.props.parent.props.ContainingCollectionView) { + this._filterReactionDisposer = reaction( + () => this.props.parent.Document.filterScript || this.props.parent.props.ContainingCollectionView!.props.Document.filterScript, + () => { + this._script = Cast(this.props.parent.Document.filterScript, ScriptField); + } + ); + } } componentWillUnmount = () => { @@ -125,10 +138,15 @@ class Viewer extends React.Component { runInAction(() => Array.from(Array((this._pageSizes = pageSizes).length).keys()).map(this.getPlaceholderPage)); this.props.loaded(Math.max(...pageSizes.map(i => i.width)), pageSizes[0].height, this.props.pdf.numPages); + // this.props.loaded(Math.max(...pageSizes.map(i => i.width)), pageSizes[0].height, this.props.pdf.numPages); let startY = NumCast(this.props.parent.Document.startY); - this.props.parent.Document.scrollY = startY; - // this.props.loaded(Math.max(...pageSizes.map(i => i.width)), pageSizes[0].height, this.props.pdf.numPages); + let ccv = this.props.parent.props.ContainingCollectionView; + if (ccv) { + ccv.props.Document.panY = startY; + } + this.props.parent.Document.scrollY = 0; + this.props.parent.Document.scrollY = startY + 1; } } @@ -144,7 +162,7 @@ class Viewer extends React.Component { let mainAnnoDoc = new Doc(); this._savedAnnotations.forEach((key: number, value: HTMLDivElement[]) => { for (let anno of value) { - let annoDoc = new Doc(); + let annoDoc = Docs.CreateInstance(new Doc(), this.props.parent.Document, {}); if (anno.style.left) annoDoc.x = parseInt(anno.style.left) / scale; if (anno.style.top) annoDoc.y = parseInt(anno.style.top) / scale; if (anno.style.height) annoDoc.height = parseInt(anno.style.height) / scale; @@ -290,28 +308,6 @@ class Viewer extends React.Component { return this._savedAnnotations.getValue(page); } - // createPinAnnotation = (x: number, y: number, page: number): void => { - // let targetDoc = Docs.TextDocument({ width: 100, height: 50, title: "New Pin Annotation" }); - // let pinAnno = new Doc(); - // pinAnno.x = x; - // pinAnno.y = y + this.getScrollFromPage(page); - // pinAnno.width = pinAnno.height = PinRadius; - // pinAnno.page = page; - // pinAnno.target = targetDoc; - // pinAnno.type = AnnotationTypes.Pin; - // // this._annotations.push(pinAnno); - // let annoDoc = new Doc(); - // annoDoc.annotations = new List([pinAnno]); - // let annotations = DocListCast(this.props.parent.Document.annotations); - // if (annotations && annotations.length) { - // annotations.push(annoDoc); - // this.props.parent.Document.annotations = new List(annotations); - // } - // else { - // this.props.parent.Document.annotations = new List([annoDoc]); - // } - // } - // get the page index that the vertical offset passed in is on getPageFromScroll = (vOffset: number) => { let index = 0; @@ -364,6 +360,7 @@ class Viewer extends React.Component { } render() { + let compiled = this._script ? CompileScript(this._script.scriptString, { params: { this: Doc.name } }) : CompileScript("return true"); return (
@@ -375,7 +372,7 @@ class Viewer extends React.Component { pointerEvents: this.props.parent.props.active() ? "none" : "all" }}>
- {this._annotations.map(anno => this.renderAnnotation(anno))} + {this._annotations.filter(anno => compiled.compiled ? compiled.run(anno) : true).map(anno => this.renderAnnotation(anno))}
@@ -396,119 +393,6 @@ interface IAnnotationProps { document: Doc; } -// @observer -// class PinAnnotation extends React.Component { -// @observable private _backgroundColor: string = "green"; -// @observable private _display: string = "initial"; - -// private _mainCont: React.RefObject; - -// constructor(props: IAnnotationProps) { -// super(props); -// this._mainCont = React.createRef(); -// } - -// componentDidMount = () => { -// let selected = this.props.document.selected; -// if (!BoolCast(selected)) { -// runInAction(() => { -// this._backgroundColor = "red"; -// this._display = "none"; -// }); -// } -// if (selected) { -// if (BoolCast(selected)) { -// runInAction(() => { -// this._backgroundColor = "green"; -// this._display = "initial"; -// }); -// } -// else { -// runInAction(() => { -// this._backgroundColor = "red"; -// this._display = "none"; -// }); -// } -// } -// else { -// runInAction(() => { -// this._backgroundColor = "red"; -// this._display = "none"; -// }); -// } -// } - -// @action -// pointerDown = (e: React.PointerEvent) => { -// let selected = this.props.document.selected; -// if (selected && BoolCast(selected)) { -// this._backgroundColor = "red"; -// this._display = "none"; -// this.props.document.selected = false; -// } -// else { -// this._backgroundColor = "green"; -// this._display = "initial"; -// this.props.document.selected = true; -// } -// e.preventDefault(); -// e.stopPropagation(); -// } - -// @action -// doubleClick = (e: React.MouseEvent) => { -// if (this._mainCont.current) { -// let annotations = DocListCast(this.props.parent.props.parent.Document.annotations); -// if (annotations && annotations.length) { -// let index = annotations.indexOf(this.props.document); -// annotations.splice(index, 1); -// this.props.parent.props.parent.Document.annotations = new List(annotations); -// } -// // this._mainCont.current.childNodes.forEach(e => e.remove()); -// this._mainCont.current.style.display = "none"; -// // if (this._mainCont.current.parentElement) { -// // this._mainCont.current.remove(); -// // } -// } -// e.stopPropagation(); -// } - -// render() { -// let targetDoc = Cast(this.props.document.target, Doc); -// if (targetDoc instanceof Doc) { -// return ( -//
-//
-// 1} -// PanelWidth={() => NumCast(this.props.parent.props.parent.Document.nativeWidth)} -// PanelHeight={() => NumCast(this.props.parent.props.parent.Document.nativeHeight)} -// focus={emptyFunction} -// selectOnLoad={false} -// parentActive={this.props.parent.props.parent.props.active} -// whenActiveChanged={this.props.parent.props.parent.props.whenActiveChanged} -// bringToFront={emptyFunction} -// addDocTab={this.props.parent.props.parent.props.addDocTab} -// /> -//
-//
-// ); -// } -// return null; -// } -// } - class RegionAnnotation extends React.Component { @observable private _backgroundColor: string = "red"; @@ -555,15 +439,6 @@ class RegionAnnotation extends React.Component { PDFMenu.Instance.fadeOut(true); } - - // annotateThis = (e: PointerEvent) => { - // e.preventDefault(); - // e.stopPropagation(); - // // document that this annotation is linked to - // let targetDoc = Docs.TextDocument({ width: 200, height: 200, title: "New Annotation" }); - // let group = FieldValue(Cast(this.props.document.group, Doc)); - // } - @action onPointerDown = (e: React.PointerEvent) => { if (e.button === 0) { -- cgit v1.2.3-70-g09d2 From cfb2e001ab6df21558fb5d7f9c18e47c7b6c21bb Mon Sep 17 00:00:00 2001 From: Monika Date: Mon, 24 Jun 2019 15:59:08 -0400 Subject: searching updates --- src/client/documents/Documents.ts | 6 +++--- src/client/views/search/CheckBox.scss | 10 ++++----- src/client/views/search/CollectionFilters.tsx | 12 ++++++----- src/client/views/search/SearchBox.tsx | 30 +++++++-------------------- src/client/views/search/ToggleBar.tsx | 4 ++-- 5 files changed, 25 insertions(+), 37 deletions(-) (limited to 'src/client/documents') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 1d137b9ff..2ace6a4cc 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -88,7 +88,7 @@ export namespace DocUtils { let protoTarg = target.proto ? target.proto : target; UndoManager.RunInBatch(() => { let linkDoc = Docs.TextDocument({ width: 100, height: 30, borderRounding: -1}); - // linkDoc.type = DocTypes.LINK; + linkDoc.type = DocTypes.LINK; let linkDocProto = Doc.GetProto(linkDoc); linkDocProto.title = title === "" ? source.title + " to " + target.title : title; linkDocProto.linkDescription = description; @@ -179,12 +179,12 @@ export namespace Docs { } function CreateTextPrototype(): Doc { let textProto = setupPrototypeOptions(textProtoId, "TEXT_PROTO", FormattedTextBox.LayoutString(), - { x: 0, y: 0, width: 300, backgroundColor: "#f1efeb" }); + { x: 0, y: 0, width: 300, backgroundColor: "#f1efeb", type: DocTypes.TEXT }); return textProto; } function CreatePdfPrototype(): Doc { let pdfProto = setupPrototypeOptions(pdfProtoId, "PDF_PROTO", CollectionPDFView.LayoutString("annotations"), - { x: 0, y: 0, width: 300, height: 300, backgroundLayout: PDFBox.LayoutString(), curPage: 1 }); + { x: 0, y: 0, width: 300, height: 300, backgroundLayout: PDFBox.LayoutString(), curPage: 1, type: DocTypes.PDF }); return pdfProto; } function CreateWebPrototype(): Doc { diff --git a/src/client/views/search/CheckBox.scss b/src/client/views/search/CheckBox.scss index 9b0af68d5..e8e7708f4 100644 --- a/src/client/views/search/CheckBox.scss +++ b/src/client/views/search/CheckBox.scss @@ -9,7 +9,7 @@ display: flex; position: relative; justify-content: center; - align-items: center; + align-items: center; margin-top: 0px; } @@ -24,12 +24,12 @@ border-color: $alt-accent; border-width: 2px; -webkit-transition: all 0.2s ease-in-out; - -moz-transition: all 0.2s ease-in-out; - -o-transition: all 0.2s ease-in-out; - transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; } - .check-container:hover ~ .check-box { + .check-container:hover~.check-box { background-color: $intermediate-color; } diff --git a/src/client/views/search/CollectionFilters.tsx b/src/client/views/search/CollectionFilters.tsx index 6019154a6..58b46ca29 100644 --- a/src/client/views/search/CollectionFilters.tsx +++ b/src/client/views/search/CollectionFilters.tsx @@ -8,6 +8,8 @@ import "./SearchBox.scss"; import "./CollectionFilters.scss"; import { FieldFilters } from './FieldFilters'; import * as anime from 'animejs'; +import { DocumentView } from '../nodes/DocumentView'; +import { SelectionManager } from '../../util/SelectionManager'; interface CollectionFilterProps { collectionStatus: boolean; @@ -48,7 +50,7 @@ export class CollectionFilters extends React.Component { opacity: 1, }); - if(this.collectionsSelected){ + if (this.collectionsSelected) { this.timeline.play(); this.timeline.reverse(); } @@ -61,10 +63,10 @@ export class CollectionFilters extends React.Component { updateColStat(val: boolean) { this.props.updateCollectionStatus(val); - if (this.collectionsSelected !== val) { - this.timeline.play(); - this.timeline.reverse(); - } + if (this.collectionsSelected !== val) { + this.timeline.play(); + this.timeline.reverse(); + } this.collectionsSelected = val; } diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index e8b5f35da..30bd0c3d9 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -71,25 +71,6 @@ export class SearchBox extends React.Component { this.closeSearch(); } }); - - //empties search query after 30 seconds of the search bar/filter box not being open - // if (!this._resultsOpen && !this._filterOpen) { - // setTimeout(this.clearSearchQuery, 30000); - // } - } - - closeFilterVisual() { - $('document').ready(function () { - var form = document.getElementById("filter-form"); - - if(form){ - if(form.style.maxHeight) { - form.style.maxHeight = null; - form.style - } - - } - }); } setupAccordion() { @@ -227,11 +208,9 @@ export class SearchBox extends React.Component { else { selectedDocs.forEach(async element => { let layout: string = StrCast(element.props.Document.baseLayout); - // console.log("doc title:", element.props.Document.title) //checks if selected view (element) is a collection. if it is, adds to list to search through if (layout.indexOf("Collection") > -1) { console.log("current doc is a collection") - // console.log(element.props.Document) //makes sure collections aren't added more than once if (!collections.includes(element.props.Document)) { collections.push(element.props.Document); @@ -262,7 +241,6 @@ export class SearchBox extends React.Component { //if this._wordstatus is false, all words are required and a + is added before each if (!this._basicWordStatus) { query = this.basicRequireWords(query); - console.log(query) query = query.replace(/\s+/g, ' ').trim(); } @@ -271,6 +249,7 @@ export class SearchBox extends React.Component { query = this.addCollectionFilter(query); query = query.replace(/\s+/g, ' ').trim(); } + console.log(query) return query; } @@ -297,6 +276,7 @@ export class SearchBox extends React.Component { let results: Doc[]; query = this.getFinalQuery(query); + console.log(query) //if there is no query there should be no result if (query === "") { @@ -307,6 +287,8 @@ export class SearchBox extends React.Component { results = await this.getResults(query); } + console.log(results); + runInAction(() => { this._resultsOpen = true; this._results = results; @@ -330,14 +312,18 @@ export class SearchBox extends React.Component { docs.push(field); } } + console.log(docs) return this.filterDocsByType(docs); } //this.icons will now include all the icons that need to be included @action filterDocsByType(docs: Doc[]) { + console.log(this._icons) let finalDocs: Doc[] = []; docs.forEach(doc => { + console.log(doc.layout) let layoutresult = Cast(doc.type, "string", ""); + console.log(layoutresult) if (this._icons.includes(layoutresult)) { finalDocs.push(doc); } diff --git a/src/client/views/search/ToggleBar.tsx b/src/client/views/search/ToggleBar.tsx index b0a061270..96536794d 100644 --- a/src/client/views/search/ToggleBar.tsx +++ b/src/client/views/search/ToggleBar.tsx @@ -100,8 +100,8 @@ export class ToggleBar extends React.Component{
{this.props.optionOne}
{this.props.optionTwo}
-
-
+
+
); -- cgit v1.2.3-70-g09d2