diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/MarqueeView.tsx | 17 | ||||
| -rw-r--r-- | src/client/views/pdf/AnchorMenu.tsx | 264 |
2 files changed, 157 insertions, 124 deletions
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 4513ffb39..65a11cbcb 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -277,8 +277,8 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque const hideMarquee = () => { this.hideMarquee(); MarqueeOptionsMenu.Instance.fadeOut(true); - document.removeEventListener('pointerdown', hideMarquee); - document.removeEventListener('wheel', hideMarquee); + document.removeEventListener('pointerdown', hideMarquee, true); + document.removeEventListener('wheel', hideMarquee, true); }; if (PresBox.startMarquee) { this.pinWithView(); @@ -292,8 +292,8 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque MarqueeOptionsMenu.Instance.hideMarquee = this.hideMarquee; MarqueeOptionsMenu.Instance.jumpTo(e.clientX, e.clientY); MarqueeOptionsMenu.Instance.pinWithView = this.pinWithView; - document.addEventListener('pointerdown', hideMarquee); - document.addEventListener('wheel', hideMarquee); + document.addEventListener('pointerdown', hideMarquee, true); + document.addEventListener('wheel', hideMarquee, true); } else { this.hideMarquee(); } @@ -356,14 +356,9 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque }; @action - showMarquee = () => { - this._visible = true; - }; - + showMarquee = () => (this._visible = true); @action - hideMarquee = () => { - this._visible = false; - }; + hideMarquee = () => (this._visible = false); @undoBatch @action diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx index 29d068817..1a1120b6c 100644 --- a/src/client/views/pdf/AnchorMenu.tsx +++ b/src/client/views/pdf/AnchorMenu.tsx @@ -1,16 +1,16 @@ -import React = require("react"); -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { Tooltip } from "@material-ui/core"; -import { action, computed, observable, IReactionDisposer, reaction, ObservableMap } from "mobx"; -import { observer } from "mobx-react"; -import { ColorState } from "react-color"; -import { Doc, Opt } from "../../../fields/Doc"; -import { returnFalse, setupMoveUpEvents, unimplementedFunction, Utils } from "../../../Utils"; -import { AntimodeMenu, AntimodeMenuProps } from "../AntimodeMenu"; -import { ButtonDropdown } from "../nodes/formattedText/RichTextMenu"; -import "./AnchorMenu.scss"; -import { SelectionManager } from "../../util/SelectionManager"; -import { LinkPopup } from "../linking/LinkPopup"; +import React = require('react'); +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Tooltip } from '@material-ui/core'; +import { action, computed, IReactionDisposer, observable, ObservableMap, reaction } from 'mobx'; +import { observer } from 'mobx-react'; +import { ColorState } from 'react-color'; +import { Doc, Opt } from '../../../fields/Doc'; +import { returnFalse, setupMoveUpEvents, unimplementedFunction, Utils } from '../../../Utils'; +import { SelectionManager } from '../../util/SelectionManager'; +import { AntimodeMenu, AntimodeMenuProps } from '../AntimodeMenu'; +import { LinkPopup } from '../linking/LinkPopup'; +import { ButtonDropdown } from '../nodes/formattedText/RichTextMenu'; +import './AnchorMenu.scss'; @observer export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> { @@ -19,30 +19,31 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> { private _disposer: IReactionDisposer | undefined; private _commentCont = React.createRef<HTMLButtonElement>(); private _palette = [ - "rgba(208, 2, 27, 0.8)", - "rgba(238, 0, 0, 0.8)", - "rgba(245, 166, 35, 0.8)", - "rgba(248, 231, 28, 0.8)", - "rgba(245, 230, 95, 0.616)", - "rgba(139, 87, 42, 0.8)", - "rgba(126, 211, 33, 0.8)", - "rgba(65, 117, 5, 0.8)", - "rgba(144, 19, 254, 0.8)", - "rgba(238, 169, 184, 0.8)", - "rgba(224, 187, 228, 0.8)", - "rgba(225, 223, 211, 0.8)", - "rgba(255, 255, 255, 0.8)", - "rgba(155, 155, 155, 0.8)", - "rgba(0, 0, 0, 0.8)"]; - - @observable private _keyValue: string = ""; - @observable private _valueValue: string = ""; + 'rgba(208, 2, 27, 0.8)', + 'rgba(238, 0, 0, 0.8)', + 'rgba(245, 166, 35, 0.8)', + 'rgba(248, 231, 28, 0.8)', + 'rgba(245, 230, 95, 0.616)', + 'rgba(139, 87, 42, 0.8)', + 'rgba(126, 211, 33, 0.8)', + 'rgba(65, 117, 5, 0.8)', + 'rgba(144, 19, 254, 0.8)', + 'rgba(238, 169, 184, 0.8)', + 'rgba(224, 187, 228, 0.8)', + 'rgba(225, 223, 211, 0.8)', + 'rgba(255, 255, 255, 0.8)', + 'rgba(155, 155, 155, 0.8)', + 'rgba(0, 0, 0, 0.8)', + ]; + + @observable private _keyValue: string = ''; + @observable private _valueValue: string = ''; @observable private _added: boolean = false; - @observable private highlightColor: string = "rgba(245, 230, 95, 0.616)"; + @observable private highlightColor: string = 'rgba(245, 230, 95, 0.616)'; @observable private _showLinkPopup: boolean = false; @observable public Highlighting: boolean = false; - @observable public Status: "marquee" | "annotation" | "" = ""; + @observable public Status: 'marquee' | 'annotation' | '' = ''; public onMakeAnchor: () => Opt<Doc> = () => undefined; // Method to get anchor from text search @@ -57,7 +58,9 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> { public PinToPres: () => void = unimplementedFunction; public MakePushpin: () => void = unimplementedFunction; public IsPushpin: () => boolean = returnFalse; - public get Active() { return this._left > 0; } + public get Active() { + return this._left > 0; + } constructor(props: Readonly<{}>) { super(props); @@ -67,26 +70,40 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> { } componentDidMount() { - this._disposer = reaction(() => SelectionManager.Views(), + this._disposer = reaction( + () => SelectionManager.Views(), selected => { this._showLinkPopup = false; AnchorMenu.Instance.fadeOut(true); - }); + } + ); } pointerDown = (e: React.PointerEvent) => { - setupMoveUpEvents(this, e, (e: PointerEvent) => { - this.StartDrag(e, this._commentCont.current!); - return true; - }, returnFalse, e => this.OnClick?.(e)); - } + setupMoveUpEvents( + this, + e, + (e: PointerEvent) => { + this.StartDrag(e, this._commentCont.current!); + return true; + }, + returnFalse, + e => this.OnClick?.(e) + ); + }; cropDown = (e: React.PointerEvent) => { - setupMoveUpEvents(this, e, (e: PointerEvent) => { - this.StartCropDrag(e, this._commentCont.current!); - return true; - }, returnFalse, e => this.OnCrop?.(e)); - } + setupMoveUpEvents( + this, + e, + (e: PointerEvent) => { + this.StartCropDrag(e, this._commentCont.current!); + return true; + }, + returnFalse, + e => this.OnCrop?.(e) + ); + }; @action highlightClicked = (e: React.MouseEvent) => { @@ -94,41 +111,45 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> { this.Highlighting = !this.Highlighting; } AnchorMenu.Instance.fadeOut(true); - } + }; @action toggleLinkPopup = (e: React.MouseEvent) => { //ignore the potential null type error because this method cannot be called unless the user selects text and clicks the link button //change popup visibility field to visible this._showLinkPopup = !this._showLinkPopup; - } + }; @computed get highlighter() { - const button = + const button = ( <button className="antimodeMenu-button anchor-color-preview-button" title="" key="highlighter-button" onClick={this.highlightClicked}> - <div className="anchor-color-preview" > - <FontAwesomeIcon icon="highlighter" size="lg" style={{ transition: "transform 0.1s", transform: this.Highlighting ? "" : "rotate(-45deg)" }} /> + <div className="anchor-color-preview"> + <FontAwesomeIcon icon="highlighter" size="lg" style={{ transition: 'transform 0.1s', transform: this.Highlighting ? '' : 'rotate(-45deg)' }} /> <div className="color-preview" style={{ backgroundColor: this.highlightColor }}></div> </div> - </button>; + </button> + ); - const dropdownContent = + const dropdownContent = ( <div className="dropdown"> <p>Change highlighter color:</p> <div className="color-wrapper"> {this._palette.map(color => { if (color) { - return this.highlightColor === color ? - <button className="color-button active" key={`active ${color}`} style={{ backgroundColor: color }} onPointerDown={e => this.changeHighlightColor(color, e)}></button> : - <button className="color-button" key={`inactive ${color}`} style={{ backgroundColor: color }} onPointerDown={e => this.changeHighlightColor(color, e)}></button>; + return this.highlightColor === color ? ( + <button className="color-button active" key={`active ${color}`} style={{ backgroundColor: color }} onPointerDown={e => this.changeHighlightColor(color, e)}></button> + ) : ( + <button className="color-button" key={`inactive ${color}`} style={{ backgroundColor: color }} onPointerDown={e => this.changeHighlightColor(color, e)}></button> + ); } })} </div> - </div>; + </div> + ); return ( - <Tooltip key="highlighter" title={<div className="dash-tooltip">{"Click to Highlight"}</div>}> + <Tooltip key="highlighter" title={<div className="dash-tooltip">{'Click to Highlight'}</div>}> <div className="anchorMenu-highlighter"> - <ButtonDropdown key={"highlighter"} button={button} dropdownContent={dropdownContent} pdf={true} /> + <ButtonDropdown key={'highlighter'} button={button} dropdownContent={dropdownContent} pdf={true} /> </div> </Tooltip> ); @@ -136,70 +157,87 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> { @action changeHighlightColor = (color: string, e: React.PointerEvent) => { const col: ColorState = { - hex: color, hsl: { a: 0, h: 0, s: 0, l: 0, source: "" }, hsv: { a: 0, h: 0, s: 0, v: 0, source: "" }, - rgb: { a: 0, r: 0, b: 0, g: 0, source: "" }, oldHue: 0, source: "", + hex: color, + hsl: { a: 0, h: 0, s: 0, l: 0, source: '' }, + hsv: { a: 0, h: 0, s: 0, v: 0, source: '' }, + rgb: { a: 0, r: 0, b: 0, g: 0, source: '' }, + oldHue: 0, + source: '', }; e.preventDefault(); e.stopPropagation(); this.highlightColor = Utils.colorString(col); - } - - @action keyChanged = (e: React.ChangeEvent<HTMLInputElement>) => { this._keyValue = e.currentTarget.value; }; - @action valueChanged = (e: React.ChangeEvent<HTMLInputElement>) => { this._valueValue = e.currentTarget.value; }; + }; + + @action keyChanged = (e: React.ChangeEvent<HTMLInputElement>) => { + this._keyValue = e.currentTarget.value; + }; + @action valueChanged = (e: React.ChangeEvent<HTMLInputElement>) => { + this._valueValue = e.currentTarget.value; + }; @action addTag = (e: React.PointerEvent) => { if (this._keyValue.length > 0 && this._valueValue.length > 0) { this._added = this.AddTag(this._keyValue, this._valueValue); - setTimeout(action(() => this._added = false), 1000); + setTimeout( + action(() => (this._added = false)), + 1000 + ); } - } + }; render() { - const buttons = this.Status === "marquee" ? - [ - this.highlighter, - - <Tooltip key="annotate" title={<div className="dash-tooltip">{"Drag to Place Annotation"}</div>}> - <button className="antimodeMenu-button annotate" ref={this._commentCont} onPointerDown={this.pointerDown} style={{ cursor: "grab" }}> - <FontAwesomeIcon icon="comment-alt" size="lg" /> - </button> - </Tooltip>, - //NOTE: link popup is currently in progress - <Tooltip key="link" title={<div className="dash-tooltip">{"Find document to link to selected text"}</div>}> - <button className="antimodeMenu-button link" onPointerDown={this.toggleLinkPopup} style={{}}> - <FontAwesomeIcon style={{ position: "absolute", transform: "scale(1.5)" }} icon={"search"} size="lg" /> - <FontAwesomeIcon style={{ position: "absolute", transform: "scale(0.5)", transformOrigin: "top left", top: 12, left: 12 }} icon={"link"} size="lg" /> - </button> - </Tooltip>, - <LinkPopup key="popup" showPopup={this._showLinkPopup} linkFrom={this.onMakeAnchor} />, - AnchorMenu.Instance.StartCropDrag === unimplementedFunction ? <></> : <Tooltip key="crop" title={<div className="dash-tooltip">{"Click/Drag to create cropped image"}</div>}> - <button className="antimodeMenu-button annotate" onPointerDown={this.cropDown} style={{ cursor: "grab" }}> - <FontAwesomeIcon icon="image" size="lg" /> - </button> - </Tooltip>, - ] : [ - <Tooltip key="trash" title={<div className="dash-tooltip">{"Remove Link Anchor"}</div>}> - <button className="antimodeMenu-button" onPointerDown={this.Delete}> - <FontAwesomeIcon icon="trash-alt" size="lg" /> - </button> - </Tooltip>, - <Tooltip key="Pin" title={<div className="dash-tooltip">{"Pin to Presentation"}</div>}> - <button className="antimodeMenu-button" onPointerDown={this.PinToPres}> - <FontAwesomeIcon icon="map-pin" size="lg" /> - </button> - </Tooltip>, - <Tooltip key="pushpin" title={<div className="dash-tooltip">{"toggle pushpin behavior"}</div>}> - <button className="antimodeMenu-button" style={{ color: this.IsPushpin() ? "black" : "white", backgroundColor: this.IsPushpin() ? "white" : "black" }} onPointerDown={this.MakePushpin}> - <FontAwesomeIcon icon="thumbtack" size="lg" /> - </button> - </Tooltip>, - // <div key="7" className="anchorMenu-addTag" > - // <input onChange={this.keyChanged} placeholder="Key" style={{ gridColumn: 1 }} /> - // <input onChange={this.valueChanged} placeholder="Value" style={{ gridColumn: 3 }} /> - // </div>, - // <button key="8" className="antimodeMenu-button" title={`Add tag: ${this._keyValue} with value: ${this._valueValue}`} onPointerDown={this.addTag}> - // <FontAwesomeIcon style={{ transition: "all .2s" }} color={this._added ? "#42f560" : "white"} icon="check" size="lg" /></button>, - ]; + const buttons = + this.Status === 'marquee' + ? [ + this.highlighter, + + <Tooltip key="annotate" title={<div className="dash-tooltip">{'Drag to Place Annotation'}</div>}> + <button className="antimodeMenu-button annotate" ref={this._commentCont} onPointerDown={this.pointerDown} style={{ cursor: 'grab' }}> + <FontAwesomeIcon icon="comment-alt" size="lg" /> + </button> + </Tooltip>, + //NOTE: link popup is currently in progress + <Tooltip key="link" title={<div className="dash-tooltip">{'Find document to link to selected text'}</div>}> + <button className="antimodeMenu-button link" onPointerDown={this.toggleLinkPopup} style={{}}> + <FontAwesomeIcon style={{ position: 'absolute', transform: 'scale(1.5)' }} icon={'search'} size="lg" /> + <FontAwesomeIcon style={{ position: 'absolute', transform: 'scale(0.5)', transformOrigin: 'top left', top: 12, left: 12 }} icon={'link'} size="lg" /> + </button> + </Tooltip>, + <LinkPopup key="popup" showPopup={this._showLinkPopup} linkFrom={this.onMakeAnchor} />, + AnchorMenu.Instance.StartCropDrag === unimplementedFunction ? ( + <></> + ) : ( + <Tooltip key="crop" title={<div className="dash-tooltip">{'Click/Drag to create cropped image'}</div>}> + <button className="antimodeMenu-button annotate" onPointerDown={this.cropDown} style={{ cursor: 'grab' }}> + <FontAwesomeIcon icon="image" size="lg" /> + </button> + </Tooltip> + ), + ] + : [ + <Tooltip key="trash" title={<div className="dash-tooltip">{'Remove Link Anchor'}</div>}> + <button className="antimodeMenu-button" onPointerDown={this.Delete}> + <FontAwesomeIcon icon="trash-alt" size="lg" /> + </button> + </Tooltip>, + <Tooltip key="Pin" title={<div className="dash-tooltip">{'Pin to Presentation'}</div>}> + <button className="antimodeMenu-button" onPointerDown={this.PinToPres}> + <FontAwesomeIcon icon="map-pin" size="lg" /> + </button> + </Tooltip>, + <Tooltip key="pushpin" title={<div className="dash-tooltip">{'toggle pushpin behavior'}</div>}> + <button className="antimodeMenu-button" style={{ color: this.IsPushpin() ? 'black' : 'white', backgroundColor: this.IsPushpin() ? 'white' : 'black' }} onPointerDown={this.MakePushpin}> + <FontAwesomeIcon icon="thumbtack" size="lg" /> + </button> + </Tooltip>, + // <div key="7" className="anchorMenu-addTag" > + // <input onChange={this.keyChanged} placeholder="Key" style={{ gridColumn: 1 }} /> + // <input onChange={this.valueChanged} placeholder="Value" style={{ gridColumn: 3 }} /> + // </div>, + // <button key="8" className="antimodeMenu-button" title={`Add tag: ${this._keyValue} with value: ${this._valueValue}`} onPointerDown={this.addTag}> + // <FontAwesomeIcon style={{ transition: "all .2s" }} color={this._added ? "#42f560" : "white"} icon="check" size="lg" /></button>, + ]; return this.getElement(buttons); } -}
\ No newline at end of file +} |