From b78280f34fca6346ee1e9136d3e318c1564d5055 Mon Sep 17 00:00:00 2001 From: bobzel Date: Mon, 28 Sep 2020 15:10:40 -0400 Subject: fixed display of info about pdf annotations. made userColor change background color of settings dialogue. --- src/client/util/SettingsManager.tsx | 4 ++-- src/client/views/pdf/Annotation.scss | 9 --------- src/client/views/pdf/Annotation.tsx | 11 +++++------ src/client/views/pdf/PDFViewer.scss | 11 +++++++++++ src/client/views/pdf/PDFViewer.tsx | 19 ++++++++++++++++--- 5 files changed, 34 insertions(+), 20 deletions(-) (limited to 'src') diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index 17e93ad17..cd01fea5a 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -4,7 +4,7 @@ import { observer } from "mobx-react"; import * as React from "react"; import { ColorState, SketchPicker } from "react-color"; import { Doc } from "../../fields/Doc"; -import { BoolCast, StrCast } from "../../fields/Types"; +import { BoolCast, StrCast, Cast } from "../../fields/Types"; import { addStyleSheet, addStyleSheetRule, Utils } from "../../Utils"; import { GoogleAuthenticationManager } from "../apis/GoogleAuthenticationManager"; import { DocServer } from "../DocServer"; @@ -205,6 +205,6 @@ export class SettingsManager extends React.Component<{}> { isDisplayed={this.isOpen} interactive={true} closeOnExternalClick={this.close} - dialogueBoxStyle={{ width: "600px" }} />; + dialogueBoxStyle={{ width: "600px", background: Cast(Doc.UserDoc().userColor, "string", null) }} />; } } \ No newline at end of file diff --git a/src/client/views/pdf/Annotation.scss b/src/client/views/pdf/Annotation.scss index d42a0b478..8b242854d 100644 --- a/src/client/views/pdf/Annotation.scss +++ b/src/client/views/pdf/Annotation.scss @@ -4,13 +4,4 @@ position: absolute; background-color: rgba(146, 245, 95, 0.467); transition: opacity 0.5s; - .pdfAnnotation-info { - top: -17px; - pointer-events: none; - width: max-content; - height: 20px; - position: relative; - background: #8080804a; - border-radius: 5px; - } } \ No newline at end of file diff --git a/src/client/views/pdf/Annotation.tsx b/src/client/views/pdf/Annotation.tsx index a1b6c0547..b7c7dae38 100644 --- a/src/client/views/pdf/Annotation.tsx +++ b/src/client/views/pdf/Annotation.tsx @@ -9,7 +9,6 @@ import { DocumentManager } from "../../util/DocumentManager"; import { PDFMenu } from "./PDFMenu"; import "./Annotation.scss"; import { undoBatch } from "../../util/UndoManager"; -import { useIsFocusVisible } from "@material-ui/core"; interface IAnnotationProps { anno: Doc; @@ -18,6 +17,7 @@ interface IAnnotationProps { focus: (doc: Doc) => void; dataDoc: Doc; fieldKey: string; + showInfo: (anno: Doc) => void; } @observer @@ -30,6 +30,7 @@ export } interface IRegionAnnotationProps { + anno: Doc; x: number; y: number; width: number; @@ -39,6 +40,7 @@ interface IRegionAnnotationProps { document: Doc; dataDoc: Doc; fieldKey: string; + showInfo: (anno: Doc) => void; } @observer @@ -131,18 +133,15 @@ class RegionAnnotation extends React.Component { @observable _showInfo = false; render() { - return (
this._showInfo = true)} onPointerLeave={action(() => this._showInfo = false)} onPointerDown={this.onPointerDown} ref={this._mainCont} + return (
this.props.showInfo(this.props.anno))} onPointerLeave={action(() => this.props.showInfo(undefined))} onPointerDown={this.onPointerDown} ref={this._mainCont} style={{ top: this.props.y, left: this.props.x, width: this.props.width, height: this.props.height, - opacity: this._brushed ? 0.5 : undefined, + opacity: !this._showInfo && this._brushed ? 0.5 : undefined, backgroundColor: this._brushed ? "orange" : StrCast(this.props.document.backgroundColor), }} > - {!this._showInfo ? (null) :
- {this.props.anno.author + " " + Field.toString(this.props.anno.creationDate as Field)} -
}
); } } \ No newline at end of file diff --git a/src/client/views/pdf/PDFViewer.scss b/src/client/views/pdf/PDFViewer.scss index 70b4c417c..8a38c439d 100644 --- a/src/client/views/pdf/PDFViewer.scss +++ b/src/client/views/pdf/PDFViewer.scss @@ -63,6 +63,17 @@ .pdfViewerDash-overlay { pointer-events: none; } + + .pdfViewerDash-overlayAnno { + top: -17px; + pointer-events: none; + width: max-content; + height: 20px; + position: absolute; + background: #b8b8b8; + border-radius: 5px; + display: block; + } .pdfViewerDash-annotationLayer { position: absolute; diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 6784540cd..8da3d2026 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -3,7 +3,7 @@ import { observer } from "mobx-react"; import * as Pdfjs from "pdfjs-dist"; import "pdfjs-dist/web/pdf_viewer.css"; import { Dictionary } from "typescript-collections"; -import { AclAddonly, AclAdmin, AclEdit, DataSym, Doc, DocListCast, HeightSym, Opt, WidthSym } from "../../../fields/Doc"; +import { AclAddonly, AclAdmin, AclEdit, DataSym, Doc, DocListCast, HeightSym, Opt, WidthSym, Field } from "../../../fields/Doc"; import { documentSchema } from "../../../fields/documentSchemas"; import { Id } from "../../../fields/FieldSymbols"; import { InkTool } from "../../../fields/InkField"; @@ -26,7 +26,6 @@ import { undoBatch } from "../../util/UndoManager"; import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView"; import { CollectionView } from "../collections/CollectionView"; import { ViewBoxAnnotatableComponent } from "../DocComponent"; -import { DocumentDecorations } from "../DocumentDecorations"; import { Annotation } from "./Annotation"; import { PDFMenu } from "./PDFMenu"; import "./PDFViewer.scss"; @@ -35,6 +34,7 @@ import React = require("react"); import { LinkDocPreview } from "../nodes/LinkDocPreview"; import { FormattedTextBoxComment } from "../nodes/formattedText/FormattedTextBoxComment"; import { CurrentUserUtils } from "../../util/CurrentUserUtils"; +import { SharingManager } from "../../util/SharingManager"; const PDFJSViewer = require("pdfjs-dist/web/pdf_viewer"); const pdfjsLib = require("pdfjs-dist"); const _global = (window /* browser */ || global /* node */) as any; @@ -101,6 +101,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent; private _pdfViewer: any; private _styleRule: any; // stylesheet rule for making hyperlinks clickable @@ -689,10 +690,21 @@ export class PDFViewer extends ViewBoxAnnotatableComponent {this.nonDocAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y)).map(anno => - ) + ) }
; } + + @computed get overlayInfo() { + return !this._overlayAnnoInfo || this._overlayAnnoInfo.author === Doc.CurrentUserEmail ? (null) : +
+
users.user.email === this._overlayAnnoInfo!.author)?.userColor }}> + {this._overlayAnnoInfo.author + " " + Field.toString(this._overlayAnnoInfo.creationDate as Field)} +
+
+ } + + showInfo = action((anno: Doc) => this._overlayAnnoInfo = anno); overlayTransform = () => this.scrollXf().scale(1 / this._zoomed); panelWidth = () => (this.Document.scrollHeight || this.Document._nativeHeight || 0); panelHeight = () => this._pageSizes.length && this._pageSizes[0] ? this._pageSizes[0].width : (this.Document._nativeWidth || 0); @@ -758,6 +770,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent ; -- cgit v1.2.3-70-g09d2