From 78d9ea53fcf13a42445f2b2cd9b8a76fef0fdfea Mon Sep 17 00:00:00 2001
From: yipstanley <stanley_yip@brown.edu>
Date: Sat, 28 Sep 2019 15:26:27 -0400
Subject: sidebar now flies out

---
 src/client/views/MainView.tsx | 65 ++++++++++++++++++++++++++++++++++++-------
 1 file changed, 55 insertions(+), 10 deletions(-)

(limited to 'src/client/views/MainView.tsx')

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 244b217ed..afc3612f6 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -1,5 +1,5 @@
 import { IconName, library } from '@fortawesome/fontawesome-svg-core';
-import { faLink, faArrowDown, faArrowUp, faBolt, faCaretUp, faCat, faCheck, faClone, faCloudUploadAlt, faCommentAlt, faCut, faExclamation, faFilePdf, faFilm, faFont, faGlobeAsia, faLongArrowAltRight, faMusic, faObjectGroup, faPause, faPenNib, faPlay, faPortrait, faRedoAlt, faThumbtack, faTree, faUndoAlt, faTv } from '@fortawesome/free-solid-svg-icons';
+import { faLink, faArrowDown, faArrowUp, faBolt, faCaretUp, faCat, faCheck, faClone, faCloudUploadAlt, faCommentAlt, faCut, faExclamation, faFilePdf, faFilm, faFont, faGlobeAsia, faLongArrowAltRight, faMusic, faObjectGroup, faPause, faPenNib, faPlay, faPortrait, faRedoAlt, faThumbtack, faTree, faUndoAlt, faTv, faChevronRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, configure, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
@@ -195,6 +195,7 @@ export class MainView extends React.Component {
         library.add(faArrowUp);
         library.add(faCloudUploadAlt);
         library.add(faBolt);
+        library.add(faChevronRight);
         this.initEventListeners();
         this.initAuthenticationRouters();
     }
@@ -311,12 +312,14 @@ export class MainView extends React.Component {
     }
 
     @observable flyoutWidth: number = 250;
+    @observable flyoutTranslate: boolean = true;
     @computed get dockingContent() {
         let flyoutWidth = this.flyoutWidth;
+        let countWidth = this.flyoutTranslate;
         let mainCont = this.mainContainer;
         return <Measure offset onResize={this.onResize}>
             {({ measureRef }) =>
-                <div ref={measureRef} id="mainContent-div" style={{ width: `calc(100% - ${flyoutWidth}px`, transform: `translate(${flyoutWidth}px, 0px)` }} onDrop={this.onDrop}>
+                <div ref={measureRef} id="mainContent-div" style={{ width: `calc(100% - ${countWidth ? flyoutWidth : 0}px`, transform: `translate(${countWidth ? flyoutWidth : 0}px, 0px)` }} onDrop={this.onDrop}>
                     {!mainCont ? (null) :
                         <DocumentView Document={mainCont}
                             DataDoc={undefined}
@@ -356,6 +359,23 @@ export class MainView extends React.Component {
         e.stopPropagation();
         e.preventDefault();
     }
+
+    @action
+    pointerOverDragger = () => {
+        if (this.flyoutWidth === 0) {
+            this.flyoutWidth = 250;
+            this.flyoutTranslate = false;
+        }
+    }
+
+    @action
+    pointerLeaveDragger = () => {
+        if (!this.flyoutTranslate) {
+            this.flyoutWidth = 0;
+            this.flyoutTranslate = true;
+        }
+    }
+
     @action
     onPointerMove = (e: PointerEvent) => {
         this.flyoutWidth = Math.max(e.clientX, 0);
@@ -411,18 +431,34 @@ export class MainView extends React.Component {
             getScale={returnOne}>
         </DocumentView>;
     }
+
     @computed
     get mainContent() {
         let sidebar = CurrentUserUtils.UserDocument.sidebar;
         if (!(sidebar instanceof Doc)) return (null);
         return <div className="mainContent" style={{ width: "100%", height: "100%", position: "absolute" }}>
-            <div className="mainView-libraryHandle"
-                style={{ cursor: "ew-resize", left: `${this.flyoutWidth - 10}px`, backgroundColor: `${StrCast(sidebar.backgroundColor, "lightGray")}` }}
-                onPointerDown={this.onPointerDown}>
-                <span title="library View Dragger" style={{ width: "100%", height: "100%", position: "absolute" }} />
-            </div>
-            <div className="mainView-libraryFlyout" style={{ width: `${this.flyoutWidth}px`, zIndex: 1 }}>
-                {this.flyout}
+            <div onPointerLeave={this.pointerLeaveDragger}>
+                <div className="mainView-libraryHandle"
+                    style={{ cursor: "ew-resize", left: `${(this.flyoutWidth * (this.flyoutTranslate ? 1 : 0)) - 10}px`, backgroundColor: `${StrCast(sidebar.backgroundColor, "lightGray")}` }}
+                    onPointerDown={this.onPointerDown} onPointerOver={this.pointerOverDragger}>
+                    <span title="library View Dragger" style={{
+                        width: (this.flyoutWidth !== 0 && this.flyoutTranslate) ? "100%" : "5vw",
+                        height: (this.flyoutWidth !== 0 && this.flyoutTranslate) ? "100%" : "30vh",
+                        position: "absolute",
+                        top: (this.flyoutWidth !== 0 && this.flyoutTranslate) ? "" : "-10vh"
+                    }} />
+                </div>
+                <div className="mainView-libraryFlyout" style={{
+                    width: `${this.flyoutWidth}px`,
+                    zIndex: 1,
+                    transformOrigin: this.flyoutTranslate ? "" : "left center",
+                    transition: this.flyoutTranslate ? "" : "width .5s",
+                    transform: `scale(${this.flyoutTranslate ? 1 : 0.8})`,
+                    boxShadow: this.flyoutTranslate ? "" : "rgb(156, 147, 150) 0.2vw 0.2vw 0.8vw"
+                }}>
+                    {this.flyout}
+                    {this.expandButton}
+                </div>
             </div>
             {this.dockingContent}
         </div>;
@@ -478,7 +514,7 @@ export class MainView extends React.Component {
         ];
         if (!ClientUtils.RELEASE) btns.unshift([React.createRef<HTMLDivElement>(), "cat", "Add Cat Image", addImageNode]);
 
-        return < div id="add-nodes-menu" style={{ left: this.flyoutWidth + 20, bottom: 20 }} >
+        return < div id="add-nodes-menu" style={{ left: (this.flyoutTranslate ? this.flyoutWidth : 0) + 20, bottom: 20 }} >
 
             <input type="checkbox" id="add-menu-toggle" ref={this.addMenuToggle} />
             <label htmlFor="add-menu-toggle" style={{ marginTop: 2 }} title="Close Menu"><p>+</p></label>
@@ -569,6 +605,15 @@ export class MainView extends React.Component {
         return !PresBox.CurrentPresentation || !PresBox.CurrentPresentation.presMode ? (null) : <PresModeMenu next={next} back={back} presStatus={PresBox.CurrentPresentation.presStatus} startOrResetPres={startOrResetPres} closePresMode={closePresMode} > </PresModeMenu>;
     }
 
+    @computed get expandButton() {
+        return !this.flyoutTranslate ? (<div className="expandFlyoutButton" title="Re-attach sidebar" onPointerDown={() => {
+            runInAction(() => {
+                this.flyoutWidth = 250;
+                this.flyoutTranslate = true;
+            });
+        }}><FontAwesomeIcon icon="chevron-right" color="grey" size="lg" /></div>) : (null);
+    }
+
     render() {
         return (
             <div id="main-div">
-- 
cgit v1.2.3-70-g09d2


From 2d3deb7291b7d98acf71566a67c4d648a90ef5af Mon Sep 17 00:00:00 2001
From: yipstanley <stanley_yip@brown.edu>
Date: Sat, 28 Sep 2019 16:00:44 -0400
Subject: search bar filtering updatesA

---
 src/client/views/MainView.tsx          |  3 ++-
 src/client/views/search/SearchBox.scss |  9 +++++++++
 src/client/views/search/SearchBox.tsx  | 11 ++++++++---
 3 files changed, 19 insertions(+), 4 deletions(-)

(limited to 'src/client/views/MainView.tsx')

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index afc3612f6..ffbba3a20 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -1,5 +1,5 @@
 import { IconName, library } from '@fortawesome/fontawesome-svg-core';
-import { faLink, faArrowDown, faArrowUp, faBolt, faCaretUp, faCat, faCheck, faClone, faCloudUploadAlt, faCommentAlt, faCut, faExclamation, faFilePdf, faFilm, faFont, faGlobeAsia, faLongArrowAltRight, faMusic, faObjectGroup, faPause, faPenNib, faPlay, faPortrait, faRedoAlt, faThumbtack, faTree, faUndoAlt, faTv, faChevronRight } from '@fortawesome/free-solid-svg-icons';
+import { faLink, faArrowDown, faArrowUp, faBolt, faCaretUp, faCat, faCheck, faClone, faCloudUploadAlt, faCommentAlt, faCut, faExclamation, faFilePdf, faFilm, faFont, faGlobeAsia, faLongArrowAltRight, faMusic, faObjectGroup, faPause, faPenNib, faPlay, faPortrait, faRedoAlt, faThumbtack, faTree, faUndoAlt, faTv, faChevronRight, faEllipsisV } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, configure, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
@@ -196,6 +196,7 @@ export class MainView extends React.Component {
         library.add(faCloudUploadAlt);
         library.add(faBolt);
         library.add(faChevronRight);
+        library.add(faEllipsisV);
         this.initEventListeners();
         this.initAuthenticationRouters();
     }
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 5ed33a596..0dd4d3dc5 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -34,6 +34,9 @@
 
         &.searchBox-filter {
             align-self: stretch;
+        }
+
+        &.searchBox-submit {
             margin-left: 2px;
             margin-right: 2px
         }
@@ -45,6 +48,12 @@
     }
 }
 
+.searchBox-quickFilter {
+    width: 500px;
+    margin-left: 25px;
+    margin-top: 10px;
+}
+
 .searchBox-results {
     margin-right: 136px;
     top: 300px;
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 0d50124dd..1b8177842 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -18,6 +18,7 @@ import { FilterBox } from './FilterBox';
 import "./FilterBox.scss";
 import "./SearchBox.scss";
 import { SearchItem } from './SearchItem';
+import { IconBar } from './IconBar';
 
 library.add(faTimes);
 
@@ -231,7 +232,7 @@ export class SearchBox extends React.Component {
     }
 
     @action.bound
-    openSearch(e: React.PointerEvent) {
+    openSearch(e: React.SyntheticEvent) {
         e.stopPropagation();
         this._openNoResults = false;
         FilterBox.Instance.closeFilter();
@@ -337,12 +338,16 @@ export class SearchBox extends React.Component {
                         <FontAwesomeIcon icon="object-group" size="lg" />
                     </span>
                     <input value={this._searchString} onChange={this.onChange} type="text" placeholder="Search..." id="search-input" ref={this.inputRef}
-                        className="searchBox-barChild searchBox-input" onPointerDown={this.openSearch} onKeyPress={this.enter}
+                        className="searchBox-barChild searchBox-input" onPointerDown={this.openSearch} onKeyPress={this.enter} onFocus={this.openSearch}
                         style={{ width: this._searchbarOpen ? "500px" : "100px" }} />
+                    <button className="searchBox-barChild searchBox-filter" title="Advanced Filtering Options" onClick={FilterBox.Instance.openFilter} onPointerDown={FilterBox.Instance.stopProp}><FontAwesomeIcon icon="ellipsis-v" color="white" /></button>
                     <button className="searchBox-barChild searchBox-submit" onClick={this.submitSearch} onPointerDown={FilterBox.Instance.stopProp}>Submit</button>
-                    <button className="searchBox-barChild searchBox-filter" onClick={FilterBox.Instance.openFilter} onPointerDown={FilterBox.Instance.stopProp}>Filter</button>
                     <button className="searchBox-barChild searchBox-close" title={"Close Search Bar"} onPointerDown={MainView.Instance.toggleSearch}><FontAwesomeIcon icon={faTimes} size="lg" /></button>
                 </div>
+                {(this._numTotalResults > 0 || !this._searchbarOpen) ? (null) :
+                    (<div className="searchBox-quickFilter" onPointerDown={this.openSearch}>
+                        <div className="filter-panel"><IconBar /></div>
+                    </div>)}
                 <div className="searchBox-results" onScroll={this.resultsScrolled} style={{
                     display: this._resultsOpen ? "flex" : "none",
                     height: this.resFull ? "560px" : this.resultHeight, overflow: this.resFull ? "auto" : "visible"
-- 
cgit v1.2.3-70-g09d2