From 0777ad8db317999a4a878a4ab91ff706426303b7 Mon Sep 17 00:00:00 2001
From: vellichora <fangrui_tong@brown.edu>
Date: Sat, 7 Mar 2020 15:27:49 -0500
Subject: search ui changes

---
 src/client/views/search/IconButton.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

(limited to 'src/client/views/search/IconButton.tsx')

diff --git a/src/client/views/search/IconButton.tsx b/src/client/views/search/IconButton.tsx
index f01508141..bea8cc0a7 100644
--- a/src/client/views/search/IconButton.tsx
+++ b/src/client/views/search/IconButton.tsx
@@ -11,7 +11,6 @@ import '../globalCssVariables.scss';
 import * as _ from "lodash";
 import { IconBar } from './IconBar';
 import { props } from 'bluebird';
-import { FilterBox } from './FilterBox';
 import { Search } from '../../../server/Search';
 import { gravity } from 'sharp';
 
@@ -34,7 +33,7 @@ interface IconButtonProps {
 @observer
 export class IconButton extends React.Component<IconButtonProps>{
 
-    @observable private _isSelected: boolean = FilterBox.Instance.getIcons().indexOf(this.props.type) !== -1;
+    @observable private _isSelected: boolean = IconBar.Instance.getIcons().indexOf(this.props.type) !== -1;
     @observable private _hover = false;
     private _resetReaction?: IReactionDisposer;
     private _selectAllReaction?: IReactionDisposer;
@@ -108,7 +107,7 @@ export class IconButton extends React.Component<IconButtonProps>{
 
     @action.bound
     onClick = () => {
-        const newList: string[] = FilterBox.Instance.getIcons();
+        const newList: string[] = IconBar.Instance.getIcons();
 
         if (!this._isSelected) {
             this._isSelected = true;
@@ -119,7 +118,7 @@ export class IconButton extends React.Component<IconButtonProps>{
             _.pull(newList, this.props.type);
         }
 
-        FilterBox.Instance.updateIcon(newList);
+        IconBar.Instance.updateIcon(newList);
     }
 
     selected = {
@@ -186,7 +185,7 @@ export class IconButton extends React.Component<IconButtonProps>{
                 >
                     {this.getFA()}
                 </div>
-                <div className="filter-description">{this.props.type}</div>
+                {/* <div className="filter-description">{this.props.type}</div> */}
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2


From b33ba2eb7a4bb6744f07c3ee8d86c55ec7b599b5 Mon Sep 17 00:00:00 2001
From: Andy Rickert <andrew_rickert@brown.edu>
Date: Tue, 31 Mar 2020 16:15:10 -0700
Subject: more settings ui + huge bugfixes with document dragging and selection

---
 src/client/documents/Documents.ts                  |  2 +-
 src/client/util/DragManager.ts                     |  1 +
 src/client/util/SelectionManager.ts                |  1 +
 src/client/views/nodes/DocumentView.tsx            | 15 ++++++
 src/client/views/nodes/QueryBox.tsx                | 61 +++++++++++++++++++---
 src/client/views/search/IconButton.tsx             |  7 ++-
 src/client/views/search/SearchBox.scss             |  8 ++-
 src/client/views/search/SearchBox.tsx              | 28 +++++-----
 .../authentication/models/current_user_utils.ts    |  2 +-
 9 files changed, 101 insertions(+), 24 deletions(-)

(limited to 'src/client/views/search/IconButton.tsx')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 96830d8dc..247f7fa3e 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -261,7 +261,7 @@ export namespace Docs {
                 options: { backgroundColor: "transparent" }
             }],
             [DocumentType.SEARCHBOX, {
-                layout: { view: SearchBox },
+                layout: { view: SearchBox, dataField:data},
                 options: { width: 200, height: 200 },
             }]
         ]);
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 5d2f1bc06..deb2da939 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -267,6 +267,7 @@ export namespace DragManager {
     }
 
     function StartDrag(eles: HTMLElement[], dragData: { [id: string]: any }, downX: number, downY: number, options?: DragOptions, finishDrag?: (dropData: DragCompleteEvent) => void) {
+        console.log("drag");
         eles = eles.filter(e => e);
         if (!dragDiv) {
             dragDiv = document.createElement("div");
diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index 4fd8abb12..89b900115 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -16,6 +16,7 @@ export namespace SelectionManager {
 
         @action
         SelectDoc(docView: DocumentView, ctrlPressed: boolean): void {
+            console.log("select");
             // if doc is not in SelectedDocuments, add it
             if (!manager.SelectedDocuments.get(docView)) {
                 if (!ctrlPressed) {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index aa07db2a0..c359be090 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -277,8 +277,16 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     }
 
     onClick = async (e: React.MouseEvent | React.PointerEvent) => {
+        console.log(this.props.Document[Id])
+        console.log(e.nativeEvent.cancelBubble);
+        console.log(CurrentUserUtils.MainDocId !== this.props.Document[Id]);
+        console.log(Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD);
+        console.log(Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD);
+
         if (!e.nativeEvent.cancelBubble && !this.Document.ignoreClick && CurrentUserUtils.MainDocId !== this.props.Document[Id] &&
             (Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD && Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD)) {
+            console.log("click");
+
             e.stopPropagation();
             let preventDefault = true;
             if (this._doubleTap && this.props.renderDepth && !this.onClickHandler?.script) { // disable double-click to show full screen for things that have an on click behavior since clicking them twice can be misinterpreted as a double click
@@ -292,11 +300,17 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
             } else if (this.onClickHandler && this.onClickHandler.script) {
                 this.onClickHandler.script.run({ this: this.Document.isTemplateForField && this.props.DataDoc ? this.props.DataDoc : this.props.Document, containingCollection: this.props.ContainingCollectionDoc }, console.log);
             } else if (this.Document.type === DocumentType.BUTTON) {
+                console.log("button");
+
                 ScriptBox.EditButtonScript("On Button Clicked ...", this.props.Document, "onClick", e.clientX, e.clientY);
             } else if (this.props.Document.isButton === "Selector") {  // this should be moved to an OnClick script
                 FormattedTextBoxComment.Hide();
+                console.log("button2");
+
                 this.Document.links?.[0] instanceof Doc && (Doc.UserDoc().SelectedDocs = new List([Doc.LinkOtherAnchor(this.Document.links[0], this.props.Document)]));
             } else if (this.Document.isButton) {
+                console.log("button3");
+
                 SelectionManager.SelectDoc(this, e.ctrlKey); // don't think this should happen if a button action is actually triggered.
                 this.buttonClick(e.altKey, e.ctrlKey);
             } else {
@@ -465,6 +479,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     }
 
     onPointerDown = (e: React.PointerEvent): void => {
+        console.log("ting");
         if (this.onPointerDownHandler && this.onPointerDownHandler.script) {
             this.onPointerDownHandler.script.run({ this: this.Document.isTemplateForField && this.props.DataDoc ? this.props.DataDoc : this.props.Document }, console.log);
             document.removeEventListener("pointerup", this.onPointerUp);
diff --git a/src/client/views/nodes/QueryBox.tsx b/src/client/views/nodes/QueryBox.tsx
index b2f9ca8fe..995effd1b 100644
--- a/src/client/views/nodes/QueryBox.tsx
+++ b/src/client/views/nodes/QueryBox.tsx
@@ -1,12 +1,22 @@
 import React = require("react");
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faArrowLeft, faArrowRight, faEdit, faMinus, faPlay, faPlus, faStop, faTimes } from '@fortawesome/free-solid-svg-icons';
-import { IReactionDisposer } from "mobx";
+import { IReactionDisposer, computed } from "mobx";
 import { observer } from "mobx-react";
 import { FilterBox } from "../search/FilterBox";
 import { FieldView, FieldViewProps } from './FieldView';
 import "./PresBox.scss";
 import { SearchBox } from "../search/SearchBox";
+import { SelectionManager } from "../../util/SelectionManager";
+import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView";
+import { emptyFunction, returnOne } from "../../../Utils";
+import { DocAnnotatableComponent } from '../DocComponent';
+import { makeInterface, createSchema } from "../../../new_fields/Schema";
+import { documentSchema } from "../../../new_fields/documentSchemas";
+import { TraceMobx } from "../../../new_fields/util";
+import { Id } from '../../../new_fields/FieldSymbols';
+
+
 
 library.add(faArrowLeft);
 library.add(faArrowRight);
@@ -17,8 +27,19 @@ library.add(faTimes);
 library.add(faMinus);
 library.add(faEdit);
 
+export const pageSchema = createSchema({
+    curPage: "number",
+    fitWidth: "boolean",
+    googlePhotosUrl: "string",
+    googlePhotosTags: "string"
+});
+
+
+type QueryDocument = makeInterface<[typeof pageSchema, typeof documentSchema]>;
+const QueryDocument = makeInterface(pageSchema, documentSchema);
+
 @observer
-export class QueryBox extends React.Component<FieldViewProps> {
+export class QueryBox extends DocAnnotatableComponent<FieldViewProps, QueryDocument>(QueryDocument) {
     public static LayoutString(fieldKey: string) { return FieldView.LayoutString(QueryBox, fieldKey); }
     _docListChangedReaction: IReactionDisposer | undefined;
     componentDidMount() {
@@ -28,12 +49,38 @@ export class QueryBox extends React.Component<FieldViewProps> {
         this._docListChangedReaction && this._docListChangedReaction();
     }
 
-    render() {
-        return <div style={{ width: "100%", height: "100%", position: "absolute", pointerEvents: "all" }}>
-            <div style={{ display: "flex", flexDirection: "row-reverse" }}>
-                <SearchBox />
-            </div>
+    @computed get content() {
+        let key = this.props.Document[Id];
+        return <SearchBox id={key}/>
+    }
+    contentFunc = () => [this.content];
 
+
+    render() {
+        const dragging = !SelectionManager.GetIsDragging() ? "" : "-dragging";
+        return <div className={`queryBox${dragging}`} style={{ width: "100%", height: "100%", position: "absolute", pointerEvents: "all" }} >
+            {/* <CollectionFreeFormView {...this.props}
+                PanelHeight={this.props.PanelHeight}
+                PanelWidth={this.props.PanelWidth}
+                annotationsKey={this.annotationKey}
+                isAnnotationOverlay={true}
+                focus={this.props.focus}
+                isSelected={this.props.isSelected}
+                select={emptyFunction}
+                active={this.active}
+                ContentScaling={returnOne}
+                whenActiveChanged={this.whenActiveChanged}
+                removeDocument={this.removeDocument}
+                moveDocument={this.moveDocument}
+                addDocument={this.addDocument}
+                CollectionView={undefined}
+                ScreenToLocalTransform={this.props.ScreenToLocalTransform}
+                renderDepth={this.props.renderDepth + 1}
+                ContainingCollectionDoc={this.props.ContainingCollectionDoc}
+                chromeCollapsed={true}>
+                {this.contentFunc}
+            </CollectionFreeFormView> */}
+                {this.contentFunc()}
         </div >;
     }
 }
\ No newline at end of file
diff --git a/src/client/views/search/IconButton.tsx b/src/client/views/search/IconButton.tsx
index bea8cc0a7..4f94139d9 100644
--- a/src/client/views/search/IconButton.tsx
+++ b/src/client/views/search/IconButton.tsx
@@ -123,16 +123,19 @@ export class IconButton extends React.Component<IconButtonProps>{
 
     selected = {
         opacity: 1,
-        backgroundColor: "rgb(128, 128, 128)"
+        backgroundColor: "#121721",
+        //backgroundColor: "rgb(128, 128, 128)"
     };
 
     notSelected = {
         opacity: 0.2,
+        backgroundColor: "#121721",
     };
 
     hoverStyle = {
         opacity: 1,
-        backgroundColor: "rgb(178, 206, 248)" //$darker-alt-accent
+        backgroundColor: "rgb(128, 128, 128)"
+        //backgroundColor: "rgb(178, 206, 248)" //$darker-alt-accent
     };
 
     @action.bound
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 1b36912d1..1559efe09 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -44,6 +44,10 @@
 
         &.searchBox-filter {
             align-self: stretch;
+            button:hover{
+                transform:scale(1.0);
+                background:"#121721";
+            }
         }
 
         &.searchBox-submit {
@@ -88,7 +92,7 @@
 
 .filter-form {
     position: relative;
-    background: black;
+    background: #121721;
     flex-direction: column;
     transform-origin: top;
     transition: height 0.3s ease, display 0.6s ease;
@@ -112,6 +116,8 @@
 
         .filter-item {
             position: relative;
+            border:1px solid grey;
+            border-radius: 16px;
 
         }
     }
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 2e7e95b60..ae8261861 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -22,8 +22,11 @@ import { FieldView } from '../nodes/FieldView';
 
 library.add(faTimes);
 
+export interface SearchProps {
+    id:string;
+}
 @observer
-export class SearchBox extends React.Component {
+export class SearchBox extends React.Component<SearchProps> {
 
     @observable private _searchString: string = "";
     @observable private _resultsOpen: boolean = false;
@@ -260,7 +263,7 @@ export class SearchBox extends React.Component {
         }
         //return Docs.Create.TreeDocument(docs, { _width: 200, _height: 400, backgroundColor: "grey", title: `Search Docs: "${this._searchString}"` });
         //return Docs.Create.SearchDocument(docs, { _width: 200, _height: 400, searchText: this._searchString, title: `Search Docs: "${this._searchString}"` });
-        return Docs.Create.QueryDocument({
+        return Docs.Create.QueryDocument({_autoHeight: true, title: "-typed text-"
         });
     }
 
@@ -376,10 +379,10 @@ export class SearchBox extends React.Component {
     handleNodeChange = () => {
         this._nodeStatus = !this._nodeStatus;
         if (this._nodeStatus){
-            this.expandSection("node")
+            this.expandSection(`node${this.props.id}`)
         }
         else{
-            this.collapseSection("node")
+            this.collapseSection(`node${this.props.id}`)
         }
     }
 
@@ -392,11 +395,11 @@ export class SearchBox extends React.Component {
     handleFilterChange=() =>{
         this._filterOpen=!this._filterOpen;
         if (this._filterOpen){
-            this.expandSection("filterhead");
-            document.getElementById("filterhead")!.style.padding="5";        
+            this.expandSection(`filterhead${this.props.id}`);
+            document.getElementById(`filterhead${this.props.id}`)!.style.padding="5";        
         }
         else{
-            this.collapseSection("filterhead");
+            this.collapseSection(`filterhead${this.props.id}`);
                     
 
         }
@@ -411,6 +414,7 @@ export class SearchBox extends React.Component {
 
 
     collapseSection(thing:string) {
+        let id = this.props.id;
         let element= document.getElementById(thing)!;
         // get the height of the element's inner content, regardless of its actual size
         var sectionHeight = element.scrollHeight;
@@ -430,7 +434,7 @@ export class SearchBox extends React.Component {
           // have the element transition to height: 0
           requestAnimationFrame(function() {
             element.style.height = 0 + 'px';
-            thing == "filterhead"? document.getElementById("filterhead")!.style.padding="0" : null;
+            thing == `filterhead${id}`? document.getElementById(`filterhead${id}`)!.style.padding="0" : null;
           });
         });
         
@@ -478,7 +482,7 @@ export class SearchBox extends React.Component {
     render() {
 
         return (
-            <div className="searchBox-container" onPointerDown={e => { e.stopPropagation(); e.preventDefault(); }}>
+            <div className="searchBox-container">
                 <div className="searchBox-bar">
                     <span className="searchBox-barChild searchBox-collection" onPointerDown={SetupDrag(this.collectionRef, () => this._searchString ? this.startDragCollection() : undefined)} ref={this.collectionRef} title="Drag Results as Collection">
                         <FontAwesomeIcon icon="object-group" size="lg" />
@@ -489,13 +493,13 @@ export class SearchBox extends React.Component {
                     <button className="searchBox-barChild searchBox-filter" title="Advanced Filtering Options" onClick={() => this.handleFilterChange()}><FontAwesomeIcon icon="ellipsis-v" color="white" /></button>
                 </div>
 
-                <div id="filterhead" className="filter-form" >
-                    <div id="filterhead2" className="filter-header" style={this._filterOpen ? { } : { }}>
+                <div id={`filterhead${this.props.id}`} className="filter-form" >
+                    <div id={`filterhead2${this.props.id}`} className="filter-header" style={this._filterOpen ? { } : { }}>
                         <button className="filter-item" style={this._basicWordStatus ? { background: "#aaaaa3", } : {}} onClick={this.handleWordQueryChange}>Keywords</button>
                         <button className="filter-item" style={this._keyStatus ? { background: "#aaaaa3" } : {}} onClick={this.handleKeyChange}>Keys</button>
                         <button className="filter-item" style={this._nodeStatus ? { background: "#aaaaa3" } : {}} onClick={this.handleNodeChange}>Nodes</button>
                     </div>
-                    <div id="node" className="filter-body" style={this._nodeStatus ? {  } : { }}>
+                    <div id={`node${this.props.id}`} className="filter-body" style={this._nodeStatus ? {  } : { }}>
                         <IconBar />
                     </div>
                     <div style={this._keyStatus ? { display: "flex" } : { display: "none" }}>
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index 58958f1fc..8c357884e 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -204,7 +204,7 @@ export class CurrentUserUtils {
             _width: 50, _height: 25, backgroundColor: "lightgrey", color: "rgb(34, 34, 34)", title: "Search", fontSize: 10,
             letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)",
             sourcePanel: Docs.Create.QueryDocument({
-                title: "search stack", ignoreClick: true
+                title: "search stack",
             }),
             targetContainer: sidebarContainer,
             lockedPosition: true,
-- 
cgit v1.2.3-70-g09d2

