diff options
| -rw-r--r-- | src/client/views/DocumentButtonBar.tsx | 9 | ||||
| -rw-r--r-- | src/client/views/nodes/WebBox.scss | 4 | ||||
| -rw-r--r-- | src/client/views/nodes/WebBox.tsx | 26 |
3 files changed, 20 insertions, 19 deletions
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index 3624cdb6d..7ba47deb5 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -22,6 +22,7 @@ import React = require("react"); import { DragManager } from '../util/DragManager'; import { MetadataEntryMenu } from './MetadataEntryMenu'; import GoogleAuthenticationManager from '../apis/GoogleAuthenticationManager'; +import { Docs } from '../documents/Documents'; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -167,10 +168,14 @@ export class DocumentButtonBar extends React.Component<{ views: (DocumentView | return !targetDoc || !dataDoc || !dataDoc[GoogleRef] ? (null) : <div className="documentButtonBar-linker" title={`${!dataDoc.unchanged ? "Pull from" : "Fetch"} Google Docs`} style={{ backgroundColor: this.pullColor }} - onPointerEnter={e => e.altKey && runInAction(() => this.openHover = true)} + onPointerEnter={e => (e.altKey || e.shiftKey) && runInAction(() => this.openHover = true)} onPointerLeave={action(() => this.openHover = false)} onClick={e => { - if (e.altKey) { + if (e.shiftKey) { + e.preventDefault(); + CollectionDockingView.AddRightSplit(Docs.Create.WebDocument(`https://docs.google.com/document/d/${dataDoc[GoogleRef]}/edit`, + { _width: 600, _nativeWidth: 960, _nativeHeight: 800, isAnnotating: false })); + } else if (e.altKey) { e.preventDefault(); window.open(`https://docs.google.com/document/d/${dataDoc[GoogleRef]}/edit`); } else { diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss index af84a7d95..4c05d4627 100644 --- a/src/client/views/nodes/WebBox.scss +++ b/src/client/views/nodes/WebBox.scss @@ -3,6 +3,8 @@ .webBox-container, .webBox-container-dragging { transform-origin: top left; + width: 100%; + height: 100%; .webBox-outerContent { width: 100%; height: 100%; @@ -66,8 +68,6 @@ opacity: 0.9; z-index: 9001; transition: top .5s; - padding: 10px; - .urlEditor { display: grid; diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 4e383e468..80e15fd5f 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -51,7 +51,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum this._iframeRef.current!.contentDocument?.addEventListener('pointerdown', this.iframedown, false); this._iframeRef.current!.contentDocument?.addEventListener('scroll', this.iframeScrolled, false); this.layoutDoc.scrollHeight = this._iframeRef.current!.contentDocument?.children?.[0].scrollHeight || 1000; - this._iframeRef.current!.contentDocument!.children[0].scrollTop = NumCast(this.layoutDoc.scrollTop); + this._iframeRef.current!.contentDocument && (this._iframeRef.current!.contentDocument.children[0].scrollTop = NumCast(this.layoutDoc.scrollTop)); this._reactionDisposer?.(); this._reactionDisposer = reaction(() => this.layoutDoc.scrollY, (scrollY) => { @@ -141,14 +141,13 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum } urlEditor() { - const frozen = this.layoutDoc._nativeWidth && this.layoutDoc.isAnnotating; return ( <div className="webBox-urlEditor" style={{ top: this._collapsed ? -70 : 0 }}> <div className="urlEditor"> <div className="editorBase"> <button className="editor-collapse" style={{ - top: this._collapsed ? 70 : 10, + top: this._collapsed ? 70 : 0, transform: `rotate(${this._collapsed ? 180 : 0}deg) scale(${this._collapsed ? 0.5 : 1}) translate(${this._collapsed ? "-100%, -100%" : "0, 0"})`, opacity: (this._collapsed && !this.props.isSelected()) ? 0 : 0.9, left: (this._collapsed ? 0 : "unset"), @@ -157,10 +156,10 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum <FontAwesomeIcon icon="caret-up" size="2x" /> </button> <div className="webBox-buttons" style={{ display: this._collapsed ? "none" : "flex" }}> - <div className="webBox-freeze" title={"Annotate"} style={{ background: frozen ? "lightBlue" : "gray" }} onClick={this.toggleNativeDimensions} > + <div className="webBox-freeze" title={"Annotate"} style={{ background: this.layoutDoc.isAnnotating ? "lightBlue" : "gray" }} onClick={this.toggleNativeDimensions} > <FontAwesomeIcon icon={faPen} size={"2x"} /> </div> - <div className="webBox-freeze" title={"Select"} style={{ background: !frozen ? "lightBlue" : "gray" }} onClick={this.toggleNativeDimensions} > + <div className="webBox-freeze" title={"Select"} style={{ background: !this.layoutDoc.isAnnotating ? "lightBlue" : "gray" }} onClick={this.toggleNativeDimensions} > <FontAwesomeIcon icon={faMousePointer} size={"2x"} /> </div> <input className="webpage-urlInput" @@ -322,20 +321,16 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum } else { view = <iframe ref={this._iframeRef} src={"https://crossorigin.me/https://cs.brown.edu"} style={{ position: "absolute", width: "100%", height: "100%", top: 0 }} />; } - const content = - <div style={{ width: "100%", height: "100%", position: "absolute" }} onWheel={this.onPostWheel} onPointerDown={this.onPostPointer} onPointerMove={this.onPostPointer} onPointerUp={this.onPostPointer}> - {this.urlEditor()} - {view} - </div>; const decInteracting = DocumentDecorations.Instance?.Interacting; const frozen = !this.props.isSelected() || decInteracting; return (<> - <div className={"webBox-cont" + (this.props.isSelected() && InkingControl.Instance.selectedTool === InkTool.None && !decInteracting ? "-interactive" : "")} > - {content} - </div> + <div className={"webBox-cont" + (this.props.isSelected() && InkingControl.Instance.selectedTool === InkTool.None && !decInteracting ? "-interactive" : "")} + onWheel={this.onPostWheel} onPointerDown={this.onPostPointer} onPointerMove={this.onPostPointer} onPointerUp={this.onPostPointer}> + {view} + </div>; {!frozen ? (null) : <div className="webBox-overlay" style={{ pointerEvents: this.layoutDoc.isBackground ? undefined : "all" }} onWheel={this.onPreWheel} onPointerDown={this.onPrePointer} onPointerMove={this.onPrePointer} onPointerUp={this.onPrePointer}> @@ -344,6 +339,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum <div className="dragger" ref={this._iframeDragRef}></div> </div> </div>} + {this.urlEditor()} </>); } scrollXf = () => this.props.ScreenToLocalTransform().translate(0, NumCast(this.props.Document.scrollTop)); @@ -351,8 +347,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum return (<div className={`webBox-container`} style={{ transform: `scale(${this.props.ContentScaling()})`, - width: `${100 / this.props.ContentScaling()}%`, - height: `${100 / this.props.ContentScaling()}%`, + width: Number.isFinite(this.props.ContentScaling()) ? `${100 / this.props.ContentScaling()}%` : "100%", + height: Number.isFinite(this.props.ContentScaling()) ? `${100 / this.props.ContentScaling()}%` : "100%", pointerEvents: this.layoutDoc.isBackground ? "none" : undefined }} > {this.content} |