From 66e44646eafc8f66c4683e768b39f179950679d8 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Wed, 20 Nov 2019 23:05:26 -0500
Subject: fixed some layout issues with PDF boxes

---
 src/client/views/nodes/PDFBox.scss | 49 +++++++++++++++++++-------------------
 src/client/views/nodes/PDFBox.tsx  | 11 ++++-----
 2 files changed, 30 insertions(+), 30 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss
index 5a5f784a1..46af63a7d 100644
--- a/src/client/views/nodes/PDFBox.scss
+++ b/src/client/views/nodes/PDFBox.scss
@@ -1,3 +1,11 @@
+.pdfBox-ui {
+    position: absolute;
+     width: 100%; 
+     height:100%;
+     z-index: 1;
+     pointer-events: none;
+}
+
 .pdfBox-cont,
 .pdfBox-cont-interactive {
     display: inline-block;
@@ -134,14 +142,13 @@
 
 .pdfBox-overlayCont {
     position: absolute;
-    width: 100%;
-    height: 40px;
+    width: calc(100% - 40px);
+    height: 30px;
     background: #121721;
     bottom: 0;
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 20px;
     overflow: hidden;
     transition: left .5s;
     pointer-events: all;
@@ -171,30 +178,24 @@
         border-right: 15px solid #121721;
         transition: all 0.5s;
     }
+}
 
-    .pdfBox-overlayButton-iconCont,
-    .pdfBox-nextIcon, 
-    .pdfBox-prevIcon {
-        background: #121721;
-        height: 30px;
-        width: 70px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin-left: -2px;
-        border-radius: 3px;
-        position: absolute;
-        pointer-events: all;
-    }
+.pdfBox-overlayButton-iconCont,
+.pdfBox-nextIcon, 
+.pdfBox-prevIcon {
+    padding: 0;
+    background: #121721;
+    height: 30px;
+    width: 25px;
+    display: inline-block;
+    position: relative;
+    justify-content: center;
+    align-items: center;
+    margin-left: -2px;
+    border-radius: 3px;
+    pointer-events: all;
 }
 
 .pdfBox-overlayButton:hover {
     background: none;
 }
-
-.pdfBox-nextIcon {
-    left: 20; top: 5; height: 30px; position: absolute;
-}
-.pdfBox-prevIcon {
-    left: 50; top: 5; height: 30px; position: absolute;
-}
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index e7d8ac46c..23512543a 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -21,7 +21,6 @@ import { pageSchema } from "./ImageBox";
 import "./PDFBox.scss";
 import React = require("react");
 import { documentSchema } from '../../../new_fields/documentSchemas';
-import { SelectionManager } from '../../util/SelectionManager';
 
 type PdfDocument = makeInterface<[typeof documentSchema, typeof panZoomSchema, typeof pageSchema]>;
 const PdfDocument = makeInterface(documentSchema, panZoomSchema, pageSchema);
@@ -119,17 +118,17 @@ export class PDFBox extends DocAnnotatableComponent<FieldViewProps, PdfDocument>
     settingsPanel() {
         let pageBtns = <>
             <button className="pdfBox-overlayButton-iconCont" key="back" title="Page Back"
-                onPointerDown={e => e.stopPropagation()} onClick={this.backPage} style={{ left: 50, top: 5 }}>
+                onPointerDown={e => e.stopPropagation()} onClick={e => this.backPage()} style={{ left: 45, top: 5 }}>
                 <FontAwesomeIcon style={{ color: "white" }} icon={"arrow-left"} size="sm" />
             </button>
             <button className="pdfBox-overlayButton-iconCont" key="fwd" title="Page Forward"
-                onPointerDown={e => e.stopPropagation()} onClick={this.forwardPage} style={{ left: 80, top: 5 }}>
+                onPointerDown={e => e.stopPropagation()} onClick={e => this.forwardPage()} style={{ left: 45, top: 5 }}>
                 <FontAwesomeIcon style={{ color: "white" }} icon={"arrow-right"} size="sm" />
             </button>
         </>;
         return !this.active() ? (null) :
             (<div className="pdfBox-ui" onKeyDown={e => e.keyCode === KeyCodes.BACKSPACE || e.keyCode === KeyCodes.DELETE ? e.stopPropagation() : true}
-                onPointerDown={e => e.stopPropagation()} style={{ display: this.active() ? "flex" : "none", position: "absolute", width: "100%", height: "100%", zIndex: 1, pointerEvents: "none" }}>
+                onPointerDown={e => e.stopPropagation()} style={{ display: this.active() ? "flex" : "none" }}>
                 <div className="pdfBox-overlayCont" key="cont" onPointerDown={(e) => e.stopPropagation()} style={{ left: `${this._searching ? 0 : 100}%` }}>
                     <button className="pdfBox-overlayButton" title="Open Search Bar" />
                     <input className="pdfBox-searchBar" placeholder="Search" ref={this._searchRef} onChange={this.searchStringChanged} onKeyDown={e => e.keyCode === KeyCodes.ENTER && this.search(this._searchString, !e.shiftKey)} />
@@ -142,14 +141,14 @@ export class PDFBox extends DocAnnotatableComponent<FieldViewProps, PdfDocument>
                         <FontAwesomeIcon style={{ color: "white" }} icon={"arrow-down"} size="sm" />
                     </button>
                 </div>
-                <button className="pdfBox-overlayButton" key="search" onClick={action(() => this._searching = !this._searching)} title="Open Search Bar" style={{ bottom: 8, right: 0 }}>
+                <button className="pdfBox-overlayButton" key="search" onClick={action(() => this._searching = !this._searching)} title="Open Search Bar" style={{ bottom: 0, right: 0 }}>
                     <div className="pdfBox-overlayButton-arrow" onPointerDown={(e) => e.stopPropagation()}></div>
                     <div className="pdfBox-overlayButton-iconCont" onPointerDown={(e) => e.stopPropagation()}>
                         <FontAwesomeIcon style={{ color: "white", padding: 5 }} icon={this._searching ? "times" : "search"} size="3x" /></div>
                 </button>
                 <input value={`${(this.Document.curPage || 1)}`}
                     onChange={e => this.gotoPage(Number(e.currentTarget.value))}
-                    style={{ left: 20, top: 5, height: "30px", width: "30px", position: "absolute", pointerEvents: "all" }}
+                    style={{ left: 5, top: 5, height: "30px", width: "30px", position: "absolute", pointerEvents: "all" }}
                     onClick={action(() => this._pageControls = !this._pageControls)} />
                 {this._pageControls ? pageBtns : (null)}
                 <div className="pdfBox-settingsCont" key="settings" onPointerDown={(e) => e.stopPropagation()}>
-- 
cgit v1.2.3-70-g09d2