more ui updates -- don't need CollectionPDFview anymore...

6 files changed, 172 insertions, 111 deletions

diff --git a/src/client/views/collections/CollectionPDFView.scss b/src/client/views/collections/CollectionPDFView.scss
index a853e5ca6..62ec8a5be 100644
--- a/src/client/views/collections/CollectionPDFView.scss
+++ b/src/client/views/collections/CollectionPDFView.scss
@@ -1,26 +1,4 @@
-.collectionPdfView-buttonTray {
-    top: 15px;
-    left: 20px;
-    position: relative;
-    transform-origin: left top;
-    position: absolute;
-}
-
-.collectionPdfView-thumb {
-    width: 25px;
-    height: 25px;
-    transform-origin: left top;
-    position: absolute;
-    background: darkgray;
-}
 
-.collectionPdfView-slider {
-    width: 25px;
-    height: 25px;
-    transform-origin: left top;
-    position: absolute;
-    background: lightgray;
-}
 
 .collectionPdfView-cont {
     width: 100%;
@@ -31,21 +9,3 @@
     z-index: -1;
     overflow: hidden !important;
 }
-
-.collectionPdfView-backward {
-    color: white;
-    font-size: 24px;
-    top: 0px;
-    left: 0px;
-    position: absolute;
-    background-color: rgba(50, 50, 50, 0.2);
-}
-
-.collectionPdfView-forward {
-    color: white;
-    font-size: 24px;
-    top: 0px;
-    left: 45px;
-    position: absolute;
-    background-color: rgba(50, 50, 50, 0.2);
-}
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx
index 8f052db3c..cc8142ec0 100644
--- a/src/client/views/collections/CollectionPDFView.tsx
+++ b/src/client/views/collections/CollectionPDFView.tsx
@@ -1,10 +1,9 @@
-import { computed, trace } from "mobx";
+import { trace } from "mobx";
 import { observer } from "mobx-react";
 import { Id } from "../../../new_fields/FieldSymbols";
 import { emptyFunction } from "../../../Utils";
 import { ContextMenu } from "../ContextMenu";
 import { FieldView, FieldViewProps } from "../nodes/FieldView";
-import { PDFBox } from "../nodes/PDFBox";
 import { CollectionBaseView, CollectionRenderProps, CollectionViewType } from "./CollectionBaseView";
 import { CollectionFreeFormView } from "./collectionFreeForm/CollectionFreeFormView";
 import "./CollectionPDFView.scss";
@@ -17,32 +16,14 @@ export class CollectionPDFView extends React.Component<FieldViewProps> {
         return FieldView.LayoutString(CollectionPDFView, fieldKey, fieldExt);
     }
 
-    private _pdfBox?: PDFBox;
-    private _buttonTray: React.RefObject<HTMLDivElement> = React.createRef();
-
-    @computed
-    get uIButtons() {
-        return (
-            <div className="collectionPdfView-buttonTray" ref={this._buttonTray} key="tray" style={{ height: "100%" }}>
-                <button className="collectionPdfView-backward" onClick={() => this._pdfBox && this._pdfBox.BackPage()}>{"<"}</button>
-                <button className="collectionPdfView-forward" onClick={() => this._pdfBox && this._pdfBox.ForwardPage()}>{">"}</button>
-            </div>
-        );
-    }
-
     onContextMenu = (e: React.MouseEvent): void => {
         if (!e.isPropagationStopped() && this.props.Document[Id] !== "mainDoc") { // need to test this because GoldenLayout causes a parallel hierarchy in the React DOM for its children and the main document view7
             ContextMenu.Instance.addItem({ description: "PDFOptions", event: emptyFunction, icon: "file-pdf" });
         }
     }
 
-    setPdfBox = (pdfBox: PDFBox) => { this._pdfBox = pdfBox; };
-
     subView = (_type: CollectionViewType, renderProps: CollectionRenderProps) => {
-        return (<>
-            <CollectionFreeFormView {...this.props} {...renderProps} setPdfBox={this.setPdfBox} CollectionView={this} chromeCollapsed={true} />
-            {renderProps.active() ? this.uIButtons : (null)}
-        </>);
+        return (<CollectionFreeFormView {...this.props} {...renderProps} CollectionView={this} chromeCollapsed={true} />);
     }
 
     render() {
diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss
index cbea47e20..4ceda1986 100644
--- a/src/client/views/nodes/PDFBox.scss
+++ b/src/client/views/nodes/PDFBox.scss
@@ -106,4 +106,86 @@
             grid-template-columns: 47.5% 5% 47.5%;
         }
     }
-}
\ No newline at end of file
+}
+
+.pdfViewer-overlayCont {
+    position: absolute;
+    width: 100%;
+    height: 100px;
+    background: #121721;
+    bottom: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    overflow: hidden;
+    transition: left .5s;
+
+    .pdfViewer-overlaySearchBar {
+        width: 70%;
+        height: 100%;
+        font-size: 30px;
+        padding: 5px;
+    }
+}
+
+.pdfViewer-overlayButton {
+    border-bottom-left-radius: 50%;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    height: 70px;
+    background: none;
+    padding: 0;
+    position: absolute;
+
+    .pdfViewer-overlayButton-arrow {
+        width: 0;
+        height: 0;
+        border-top: 25px solid transparent;
+        border-bottom: 25px solid transparent;
+        border-right: 25px solid #121721;
+        transition: all 0.5s;
+    }
+
+    .pdfViewer-overlayButton-iconCont {
+        background: #121721;
+        height: 50px;
+        width: 70px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-left: -2px;
+        border-radius: 3px;
+    }
+}
+
+.pdfViewer-overlayButton:hover {
+    background: none;
+}
+.collectionPdfView-buttonTray {
+    top: 15px;
+    left: 20px;
+    position: relative;
+    transform-origin: left top;
+    position: absolute;
+}
+.collectionPdfView-backward {
+    color: white;
+    font-size: 24px;
+    top: 0px;
+    left: 0px;
+    position: absolute;
+    background-color: rgba(50, 50, 50, 0.2);
+}
+
+.collectionPdfView-forward {
+    color: white;
+    font-size: 24px;
+    top: 0px;
+    left: 45px;
+    position: absolute;
+    background-color: rgba(50, 50, 50, 0.2);
+}
+
+
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 12a5bc492..f57ec406c 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -62,6 +62,12 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
     public search(string: string) {
         this._pdfViewer && this._pdfViewer.search(string);
     }
+    public prevAnnotation() {
+        this._pdfViewer && this._pdfViewer.prevAnnotation();
+    }
+    public nextAnnotation() {
+        this._pdfViewer && this._pdfViewer.nextAnnotation();
+    }
 
     setPdfViewer = (pdfViewer: PDFViewer) => {
         this._pdfViewer = pdfViewer;
@@ -122,46 +128,88 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
     private newValueChange = (e: React.ChangeEvent<HTMLInputElement>) => this._valueValue = e.currentTarget.value;
     private newScriptChange = (e: React.ChangeEvent<HTMLInputElement>) => this._scriptValue = e.currentTarget.value;
 
+    searchStringChanged = (e: React.ChangeEvent<HTMLInputElement>) => this._searchString = e.currentTarget.value;
+    private _searchString: string = "";
     settingsPanel() {
         return !this.props.active() ? (null) :
-            (<div className="pdfBox-settingsCont" onPointerDown={(e) => e.stopPropagation()}>
-                <button className="pdfBox-settingsButton" onClick={action(() => this._flyout = !this._flyout)} title="Open Annotation Settings" >
-                    <div className="pdfBox-settingsButton-arrow"
-                        style={{
-                            borderTop: `25px solid ${this._flyout ? "#121721" : "transparent"}`,
-                            borderBottom: `25px solid ${this._flyout ? "#121721" : "transparent"}`,
-                            borderRight: `25px solid ${this._flyout ? "transparent" : "#121721"}`,
-                            transform: `scaleX(${this._flyout ? -1 : 1})`
-                        }} />
-                    <div className="pdfBox-settingsButton-iconCont">
-                        <FontAwesomeIcon style={{ color: "white" }} icon="cog" size="3x" />
-                    </div>
+            (<>
+                <div className="pdfViewer-overlayCont" key="cont" onPointerDown={(e) => e.stopPropagation()}
+                    style={{ bottom: 0, left: `${this._searching ? 0 : 100}%` }}>
+                    <button className="pdfViewer-overlayButton" title="Open Search Bar" />
+                    <input className="pdfViewer-overlaySearchBar" placeholder="Search" onChange={this.searchStringChanged}
+                        onKeyDown={(e: React.KeyboardEvent) => e.keyCode === KeyCodes.ENTER ? this.search(this._searchString) : e.keyCode === KeyCodes.BACKSPACE ? e.stopPropagation() : true} />
+                    <button title="Search" onClick={() => this.search(this._searchString)}>
+                        <FontAwesomeIcon icon="search" size="3x" color="white" /></button>
+                </div>
+                <button className="pdfViewer-overlayButton" key="search" onClick={action(() => this._searching = !this._searching)} title="Open Search Bar"
+                    style={{ bottom: 10, right: 0, display: this.props.active() ? "flex" : "none" }}>
+                    <div className="pdfViewer-overlayButton-arrow" onPointerDown={(e) => e.stopPropagation()}></div>
+                    <div className="pdfViewer-overlayButton-iconCont" onPointerDown={(e) => e.stopPropagation()}>
+                        <FontAwesomeIcon style={{ color: "white" }} icon={this._searching ? "times" : "search"} size="3x" /></div>
                 </button>
-                <div className="pdfBox-settingsFlyout" style={{ left: `${this._flyout ? -600 : 100}px` }} >
-                    <div className="pdfBox-settingsFlyout-title">
-                        Annotation View Settings
-                    </div>
-                    <div className="pdfBox-settingsFlyout-kvpInput">
-                        <input placeholder="Key" className="pdfBox-settingsFlyout-input" onChange={this.newKeyChange}
-                            style={{ gridColumn: 1 }} ref={this._keyRef} />
-                        <input placeholder="Value" className="pdfBox-settingsFlyout-input" onChange={this.newValueChange}
-                            style={{ gridColumn: 3 }} ref={this._valueRef} />
-                    </div>
-                    <div className="pdfBox-settingsFlyout-kvpInput">
-                        <input placeholder="Custom Script" onChange={this.newScriptChange} style={{ gridColumn: "1 / 4" }} ref={this._scriptRef} />
-                    </div>
-                    <div className="pdfBox-settingsFlyout-kvpInput">
-                        <button style={{ gridColumn: 1 }} onClick={this.resetFilters}>
-                            <FontAwesomeIcon style={{ color: "white" }} icon="trash" size="lg" />
-                            &nbsp; Reset Filters
-                        </button>
-                        <button style={{ gridColumn: 3 }} onClick={this.applyFilter}>
-                            <FontAwesomeIcon style={{ color: "white" }} icon="check" size="lg" />
-                            &nbsp; Apply
-                        </button>
+                <button className="pdfViewer-overlayButton-iconCont" title="Previous Annotation"
+                    onClick={e => { e.stopPropagation(); this.prevAnnotation(); }}
+                    onPointerDown={(e) => e.stopPropagation()}
+                    style={{ left: 110, top: 5, height: "30px", position: "absolute", display: this.props.active() ? "flex" : "none" }}>
+                    <FontAwesomeIcon style={{ color: "white" }} icon={"arrow-up"} size="sm" />
+                </button>
+                <button className="pdfViewer-overlayButton-iconCont" title="Next Annotation"
+                    onClick={e => { e.stopPropagation(); this.nextAnnotation(); }}
+                    onPointerDown={(e) => e.stopPropagation()}
+                    style={{ left: 80, top: 5, height: "30px", position: "absolute", display: this.props.active() ? "flex" : "none" }}>
+                    <FontAwesomeIcon style={{ color: "white" }} icon={"arrow-down"} size="sm" />
+                </button>
+                <button className="pdfViewer-overlayButton-iconCont" key="back" title="Page Back"
+                    onPointerDown={(e) => { e.stopPropagation() }}
+                    onClick={() => this.BackPage()}
+                    style={{ left: 20, top: 5, height: "30px", position: "absolute", pointerEvents: "all", display: this.props.active() ? "flex" : "none" }}>
+                    <FontAwesomeIcon style={{ color: "white" }} icon={"arrow-left"} size="sm" />
+                </button>
+                <button className="pdfViewer-overlayButton-iconCont" key="fwd" title="Page Forward"
+                    onPointerDown={(e) => e.stopPropagation()}
+                    onClick={() => this.ForwardPage()}
+                    style={{ left: 50, top: 5, height: "30px", position: "absolute", pointerEvents: "all", display: this.props.active() ? "flex" : "none" }}>
+                    <FontAwesomeIcon style={{ color: "white" }} icon={"arrow-right"} size="sm" />
+                </button>
+                <div className="pdfBox-settingsCont" key="settings" onPointerDown={(e) => e.stopPropagation()}>
+                    <button className="pdfBox-settingsButton" onClick={action(() => this._flyout = !this._flyout)} title="Open Annotation Settings" >
+                        <div className="pdfBox-settingsButton-arrow"
+                            style={{
+                                borderTop: `25px solid ${this._flyout ? "#121721" : "transparent"}`,
+                                borderBottom: `25px solid ${this._flyout ? "#121721" : "transparent"}`,
+                                borderRight: `25px solid ${this._flyout ? "transparent" : "#121721"}`,
+                                transform: `scaleX(${this._flyout ? -1 : 1})`
+                            }} />
+                        <div className="pdfBox-settingsButton-iconCont">
+                            <FontAwesomeIcon style={{ color: "white" }} icon="cog" size="3x" />
+                        </div>
+                    </button>
+                    <div className="pdfBox-settingsFlyout" style={{ left: `${this._flyout ? -600 : 100}px` }} >
+                        <div className="pdfBox-settingsFlyout-title">
+                            Annotation View Settings
+                        </div>
+                        <div className="pdfBox-settingsFlyout-kvpInput">
+                            <input placeholder="Key" className="pdfBox-settingsFlyout-input" onChange={this.newKeyChange}
+                                style={{ gridColumn: 1 }} ref={this._keyRef} />
+                            <input placeholder="Value" className="pdfBox-settingsFlyout-input" onChange={this.newValueChange}
+                                style={{ gridColumn: 3 }} ref={this._valueRef} />
+                        </div>
+                        <div className="pdfBox-settingsFlyout-kvpInput">
+                            <input placeholder="Custom Script" onChange={this.newScriptChange} style={{ gridColumn: "1 / 4" }} ref={this._scriptRef} />
+                        </div>
+                        <div className="pdfBox-settingsFlyout-kvpInput">
+                            <button style={{ gridColumn: 1 }} onClick={this.resetFilters}>
+                                <FontAwesomeIcon style={{ color: "white" }} icon="trash" size="lg" />
+                                &nbsp; Reset Filters
+                            </button>
+                            <button style={{ gridColumn: 3 }} onClick={this.applyFilter}>
+                                <FontAwesomeIcon style={{ color: "white" }} icon="check" size="lg" />
+                                &nbsp; Apply
+                            </button>
+                        </div>
                     </div>
                 </div>
-            </div>);
+            </>);
     }
 
     loaded = (nw: number, nh: number, np: number) => {
diff --git a/src/client/views/pdf/PDFViewer.scss b/src/client/views/pdf/PDFViewer.scss
index 4388bc64c..0ca3fa2d3 100644
--- a/src/client/views/pdf/PDFViewer.scss
+++ b/src/client/views/pdf/PDFViewer.scss
@@ -33,6 +33,8 @@
         }
     }
 
+
+
     .pdfViewer-overlayButton {
         border-bottom-left-radius: 50%;
         display: flex;
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index 899a0f5aa..01f19ebf6 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -238,8 +238,7 @@ export class PDFViewer extends React.Component<IViewerProps> {
     }
 
     @action
-    prevAnnotation = (e: React.MouseEvent) => {
-        e.stopPropagation();
+    prevAnnotation = () => {
         this.Index = Math.max(this.Index - 1, 0);
         let scrollToAnnotation = this.allAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y))[this.Index];
         this.allAnnotations.forEach(d => Doc.UnBrushDoc(d));
@@ -248,8 +247,7 @@ export class PDFViewer extends React.Component<IViewerProps> {
     }
 
     @action
-    nextAnnotation = (e: React.MouseEvent) => {
-        e.stopPropagation();
+    nextAnnotation = () => {
         this.Index = Math.min(this.Index + 1, this.allAnnotations.length - 1);
         let scrollToAnnotation = this.allAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y))[this.Index];
         this.allAnnotations.forEach(d => Doc.UnBrushDoc(d));
@@ -529,16 +527,6 @@ export class PDFViewer extends React.Component<IViewerProps> {
                 {this.nonDocAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y)).map((anno, index) =>
                     <Annotation {...this.props} anno={anno} key={`${anno[Id]}-annotation`} />)}
             </div>
-            <button className="pdfViewer-overlayButton" onClick={this.prevAnnotation} title="Previous Annotation"
-                style={{ bottom: 280, right: 10, display: this.props.active() ? "flex" : "none" }}>
-                <div className="pdfViewer-overlayButton-iconCont" onPointerDown={(e) => e.stopPropagation()}>
-                    <FontAwesomeIcon style={{ color: "white" }} icon={"arrow-up"} size="3x" /></div>
-            </button>
-            <button className="pdfViewer-overlayButton" onClick={this.nextAnnotation} title="Next Annotation"
-                style={{ bottom: 200, right: 10, display: this.props.active() ? "flex" : "none" }}>
-                <div className="pdfViewer-overlayButton-iconCont" onPointerDown={(e) => e.stopPropagation()}>
-                    <FontAwesomeIcon style={{ color: "white" }} icon={"arrow-down"} size="3x" /></div>
-            </button>
         </div >);
     }
 }