diff options
| -rw-r--r-- | src/client/views/pdf/PDFViewer.scss | 19 | ||||
| -rw-r--r-- | src/client/views/pdf/PDFViewer.tsx | 29 |
2 files changed, 35 insertions, 13 deletions
diff --git a/src/client/views/pdf/PDFViewer.scss b/src/client/views/pdf/PDFViewer.scss new file mode 100644 index 000000000..d8ff06406 --- /dev/null +++ b/src/client/views/pdf/PDFViewer.scss @@ -0,0 +1,19 @@ +.canvasContainer {} + +.viewer-button-cont { + position: absolute; + display: flex; + justify-content: space-evenly; + align-items: center; +} + +.viewer-previousPage, +.viewer-nextPage { + background: grey; + font-weight: bold; + opacity: 0.5; + padding: 0 10px; + border-radius: 5px; +} + +.viewer {}
\ No newline at end of file diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 558a4fab6..1b445eae4 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -4,6 +4,7 @@ import { observable, action, runInAction } from "mobx"; import { RouteStore } from "../../../server/RouteStore"; import * as Pdfjs from "pdfjs-dist"; import { Opt } from "../../../new_fields/Doc"; +import "./PDFViewer.scss"; interface IPDFViewerProps { url: string; @@ -46,15 +47,16 @@ class Viewer extends React.Component<IViewerProps> { console.log(numPages); return ( <div className="viewer"> - {/* {Array.from(Array(numPages).keys()).map((i) => ( */} - <Page - pdf={this.props.pdf} - numPages={numPages} - key={`${this.props.pdf ? this.props.pdf.fingerprint : "undefined"}`} - name={`${this.props.pdf ? this.props.pdf.fingerprint : "undefined"}`} - {...this.props} - /> - {/* ))} */} + {Array.from(Array(numPages).keys()).map((i) => ( + <Page + pdf={this.props.pdf} + page={i} + numPages={numPages} + key={`${this.props.pdf ? this.props.pdf.fingerprint + `page${i + 1}` : "undefined"}`} + name={`${this.props.pdf ? this.props.pdf.fingerprint + `page${i + 1}` : "undefined"}`} + {...this.props} + /> + ))} } </div> ); } @@ -64,6 +66,7 @@ interface IPageProps { pdf: Opt<Pdfjs.PDFDocumentProxy>; name: string; numPages: number; + page: number; } @observer @@ -74,7 +77,7 @@ class Page extends React.Component<IPageProps> { @observable _page: Opt<Pdfjs.PDFPageProxy>; canvas: React.RefObject<HTMLCanvasElement>; textLayer: React.RefObject<HTMLDivElement>; - @observable _currPage: number = 1; + @observable _currPage: number = this.props.page + 1; constructor(props: IPageProps) { super(props); @@ -172,11 +175,11 @@ class Page extends React.Component<IPageProps> { <div className="canvasContainer"> <canvas ref={this.canvas} /> </div> - <div className="textlayer" ref={this.textLayer} /> - <div className="viewer-button-cont" style={{ "width": this._width / 10, "height": this._height / 20, "left": this._width * .9, "top": this._height * .95 }}> + <div className="textlayer" ref={this.textLayer} style={{ "position": "relative", "top": `-${this._height}px`, "height": `${this._height}px` }} /> + {/* <div className="viewer-button-cont" style={{ "width": this._width / 10, "height": this._height / 20, "left": this._width * .9, "top": this._height * .95 }}> <div className="viewer-previousPage" onClick={this.prevPage}><</div> <div className="viewer-nextPage" onClick={this.nextPage}>></div> - </div> + </div> */} </div> ); } |