moved filter to an icon

2 files changed, 23 insertions, 25 deletions

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 048b5fe76..4b2f8d0f6 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -894,6 +894,9 @@ export class CurrentUserUtils {
         doc["constants-snapThreshold"] = NumCast(doc["constants-snapThreshold"], 10); //
         doc["constants-dragThreshold"] = NumCast(doc["constants-dragThreshold"], 4); //
         Utils.DRAG_THRESHOLD = NumCast(doc["constants-dragThreshold"]);
+        if (doc["search-panel"] === undefined) {
+            doc["search-panel"] = new PrefetchProxy(Docs.Create.SearchDocument({ _width: 500, _height: 400, backgroundColor: "dimGray", ignoreClick: true, childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Schema, _chromeStatus: "disabled", title: "sidebar search stack", })) as any as Doc;
+        }
         this.setupDefaultIconTemplates(doc);  // creates a set of icon templates triggered by the document deoration icon
         this.setupDocTemplates(doc); // sets up the template menu of templates
         this.setupRightSidebar(doc);  // sets up the right sidebar collection for mobile upload documents and sharing
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 3b93b028e..2cb910f8b 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -1036,11 +1036,28 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                     <div style={{ position: "absolute", left: 15 }}>{Doc.CurrentUserEmail}</div>
                     <div style={{ display: "flex", alignItems: "center" }}>
                         <FontAwesomeIcon onPointerDown={SetupDrag(this.collectionRef, () => StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined)} icon={"search"} size="lg"
-                            style={{ color: "black", left: 24, padding: 1, position: "relative" }} />
-
+                            style={{ color: "black", padding: 1, left: 35, position: "relative" }} />
+
+                        <FontAwesomeIcon icon={"filter"} size="lg"
+                            style={{ right: 20, padding: 1, left: 250, position: "relative", backgroundColor: this.filter ? "white" : "lightgray", color: this.filter ? "black" : "white" }}
+                            onPointerDown={e => { e.stopPropagation(); SetupDrag(this.collectionRef, () => StrCast(this.layoutDoc._searchString) ? this.startDragCollection() : undefined); }}
+                            onClick={action(() => {
+                                this.filter = !this.filter && !this.scale;
+                                if (this.filter === true && this.currentSelectedCollection !== undefined) {
+                                    this.currentSelectedCollection.props.Document._searchDocs = new List<Doc>(this.docsforfilter);
+                                    this.currentSelectedCollection.props.Document._docFilters = new List<string>(Cast(this.props.Document._docFilters, listSpec("string"), []));
+                                    this.props.Document.selectedDoc = this.currentSelectedCollection.props.Document;
+                                }
+                                else if (this.filter === false && this.currentSelectedCollection !== undefined) {
+                                    this.currentSelectedCollection.props.Document._searchDocs = new List<Doc>([]);
+                                    this.currentSelectedCollection.props.Document._docFilters = undefined;
+                                    this.props.Document.selectedDoc = undefined;
+                                }
+                            }
+                            )} />
                         <input value={this.newsearchstring} autoComplete="off" onChange={this.onChange} type="text" placeholder="Search..." id="search-input" ref={this.inputRef}
                             className="searchBox-barChild searchBox-input" onPointerDown={this.openSearch} onKeyPress={this.enter} onFocus={this.openSearch}
-                            style={{ padding: 1, paddingLeft: 20, color: "black", height: 20, width: 200 }} />
+                            style={{ padding: 1, paddingLeft: 20, paddingRight: 20, color: "black", height: 20, width: 250 }} />
                         <div style={{
                             height: 25,
                             paddingLeft: "4px",
@@ -1050,28 +1067,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc
                             borderBottom: this.open === false ? "1px solid" : "none",
                         }}>
                             <form className="beta" style={{ justifyContent: "space-evenly", display: "flex" }}>
-                                <div className="checkbox" style={{ margin: 0 }}>
-                                    <label style={{ fontSize: 12, marginTop: 6 }}>
-                                        <input style={{ marginLeft: -16, marginTop: -1, color: this.scale == false ? "black" : "grey" }} checked={this.filter === true} onChange={() => {
-                                            runInAction(() => {
-                                                if (this.scale === false) {
-                                                    this.filter = !this.filter;
-                                                    if (this.filter === true && this.currentSelectedCollection !== undefined) {
-                                                        this.currentSelectedCollection.props.Document._searchDocs = new List<Doc>(this.docsforfilter);
-                                                        this.currentSelectedCollection.props.Document._docFilters = new List<string>(Cast(this.props.Document._docFilters, listSpec("string"), []));
-                                                        this.props.Document.selectedDoc = this.currentSelectedCollection.props.Document;
-                                                    }
-                                                    else if (this.filter === false && this.currentSelectedCollection !== undefined) {
-                                                        this.currentSelectedCollection.props.Document._searchDocs = new List<Doc>([]);
-                                                        this.currentSelectedCollection.props.Document._docFilters = undefined;
-                                                        this.props.Document.selectedDoc = undefined;
-                                                    }
-                                                }
-                                            })
-                                        }} type="checkbox"></input>
-                                            Filter
-                                        </label>
-                                </div>
                                 <div style={{ display: "contents" }}>
                                     <div className="radio" style={{ margin: 0 }}>
                                         <label style={{ fontSize: 12, marginTop: 6 }} >