diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/client/views/DocumentDecorations.tsx | 5 | ||||
-rw-r--r-- | src/client/views/GlobalKeyHandler.ts | 1 | ||||
-rw-r--r-- | src/client/views/MainView.scss | 12 | ||||
-rw-r--r-- | src/client/views/MainView.tsx | 42 | ||||
-rw-r--r-- | src/client/views/collections/TabDocView.tsx | 5 | ||||
-rw-r--r-- | src/client/views/collections/collectionFreeForm/MarqueeView.tsx | 6 | ||||
-rw-r--r-- | src/client/views/linking/LinkMenuItem.tsx | 6 |
7 files changed, 71 insertions, 6 deletions
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 8d8f4cd3b..b8500c263 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -26,6 +26,7 @@ import { InkStrokeProperties } from './InkStrokeProperties'; import { DocumentView } from "./nodes/DocumentView"; import React = require("react"); import e = require('express'); +import { MainView } from './MainView'; @observer export class DocumentDecorations extends React.Component<{ boundsLeft: number, boundsTop: number }, { value: string }> { @@ -171,8 +172,10 @@ export class DocumentDecorations extends React.Component<{ boundsLeft: number, b alias.x = -alias[WidthSym]() / 2; alias.y = -alias[HeightSym]() / 2; CollectionDockingView.AddSplit(Docs.Create.FreeformDocument([alias], { title: "Tab for " + alias.title }), "right"); - } else { // open same document in new tab + } else if (e.altKey) { // open same document in new tab CollectionDockingView.ToggleSplit(Cast(selectedDocs[0].props.Document._fullScreenView, Doc, null) || selectedDocs[0].props.Document, "right"); + } else { + runInAction(() => MainView.Instance.LightboxDoc = selectedDocs[0].props.Document); } } } diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts index e56ba38dd..de73004a0 100644 --- a/src/client/views/GlobalKeyHandler.ts +++ b/src/client/views/GlobalKeyHandler.ts @@ -114,6 +114,7 @@ export class KeyManager { DocumentLinksButton.StartLink = undefined; DocumentLinksButton.StartLinkView = undefined; InkStrokeProperties.Instance && (InkStrokeProperties.Instance._controlBtn = false); + MainView.Instance.LightboxDoc = undefined; Doc.SetSelectedTool(InkTool.None); var doDeselect = true; diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index 8ccb64744..fc375f6a2 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -67,6 +67,18 @@ background: #cacaca; color: black; } + + .mainView-lightBoxFrame { + position: absolute; + top: 0; left: 0; + width: 100%; + height: 100%; + background: #000000bb; + z-index: 10000; + } + .mainView-lightBoxContents { + position: absolute; + } } .mainView-container-dark { diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index bd5db62ef..08d590fd4 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -68,6 +68,7 @@ export class MainView extends React.Component { private _docBtnRef = React.createRef<HTMLDivElement>(); private _mainViewRef = React.createRef<HTMLDivElement>(); @observable public LastButton: Opt<Doc>; + @observable public LightboxDoc: Opt<Doc>; @observable private _panelWidth: number = 0; @observable private _panelHeight: number = 0; @observable private _panelContent: string = "none"; @@ -593,6 +594,44 @@ export class MainView extends React.Component { </div>; } + lightboxWidth = () => window.innerWidth - Math.min(window.innerWidth / 4, 200) * 2; + lightboxHeight = () => window.innerHeight - Math.min(window.innerHeight / 4, 100) * 2; + @computed get lightboxView() { + return !this.LightboxDoc ? (null) : + <div className="mainView-lightBoxFrame" onPointerDown={action(() => this.LightboxDoc = undefined)} > + <div className="mainView-lightBoxContents" style={{ + left: Math.min(window.innerWidth / 4, 200), + top: Math.min(window.innerHeight / 4, 100), + width: window.innerWidth - Math.min(window.innerWidth / 4, 200) * 2, + height: window.innerHeight - Math.min(window.innerHeight / 4, 100) * 2 + }}> + <DocumentView + Document={this.LightboxDoc} + DataDoc={undefined} + addDocument={undefined} + addDocTab={this.addDocTabFunc} + pinToPres={emptyFunction} + rootSelected={returnTrue} + removeDocument={undefined} + styleProvider={DefaultStyleProvider} + ScreenToLocalTransform={Transform.Identity} + PanelWidth={this.lightboxWidth} + PanelHeight={this.lightboxHeight} + focus={emptyFunction} + parentActive={returnTrue} + whenActiveChanged={emptyFunction} + bringToFront={emptyFunction} + docFilters={returnEmptyFilter} + docRangeFilters={returnEmptyFilter} + searchFilterDocs={returnEmptyDoclist} + ContainingCollectionView={undefined} + ContainingCollectionDoc={undefined} + renderDepth={0} /> + </div> + </div>; + } + + render() { return (<div className={"mainView-container" + (this.darkScheme ? "-dark" : "")} onScroll={() => ((ele) => ele.scrollTop = ele.scrollLeft = 0)(document.getElementById("root")!)} ref={this._mainViewRef}> {this.inkResources} @@ -621,7 +660,8 @@ export class MainView extends React.Component { <TimelineMenu /> {this.snapLines} <div className="mainView-webRef" ref={this.makeWebRef} /> - </div >); + {this.lightboxView} + </div>); } makeWebRef = (ele: HTMLDivElement) => { diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index c66734556..d291a703b 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -33,6 +33,7 @@ import { CollectionViewType } from './CollectionView'; import "./TabDocView.scss"; import React = require("react"); import Color = require('color'); +import { MainView } from '../MainView'; const _global = (window /* browser */ || global /* node */) as any; interface TabDocViewProps { @@ -279,7 +280,9 @@ export class TabDocView extends React.Component<TabDocViewProps> { case "replace": return CollectionDockingView.ReplaceTab(doc, locationParams, this.stack); case "inPlace": case "add": - default: return CollectionDockingView.AddSplit(doc, locationParams, this.stack); + default: runInAction(() => MainView.Instance.LightboxDoc = doc); + if (MainView.Instance.LightboxDoc) return true; + return CollectionDockingView.AddSplit(doc, locationParams, this.stack); } } diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 0edbfe7a5..f7fb2b83d 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -643,7 +643,11 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque render() { return <div className="marqueeView" - style={{ overflow: (!this.props.ContainingCollectionView && this.props.isAnnotationOverlay) ? "visible" : StrCast(this.props.Document._overflow), cursor: MarqueeView.DragMarquee && this ? "crosshair" : "hand" }} + style={{ + overflow: (!this.props.ContainingCollectionView && this.props.isAnnotationOverlay) ? "visible" : + StrCast(this.props.Document._overflow), + cursor: MarqueeView.DragMarquee && this ? "crosshair" : "hand" + }} onDragOver={e => e.preventDefault()} onScroll={(e) => e.currentTarget.scrollTop = e.currentTarget.scrollLeft = 0} onClick={this.onClick} onPointerDown={this.onPointerDown}> {this._visible ? this.marqueeDiv : null} diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx index 19ef03a31..e9a0486d1 100644 --- a/src/client/views/linking/LinkMenuItem.tsx +++ b/src/client/views/linking/LinkMenuItem.tsx @@ -106,13 +106,15 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> { } } - onLinkButtonUp = (e: PointerEvent): void => { + onLinkButtonUp = action((e: PointerEvent): void => { document.removeEventListener("pointermove", this.onLinkButtonMoved); document.removeEventListener("pointerup", this.onLinkButtonUp); LinkManager.FollowLink(this.props.linkDoc, this.props.sourceDoc, this.props.docView.props, false); + LinkDocPreview.LinkInfo = undefined; + DocumentLinksButton.EditLink = undefined; e.stopPropagation(); - } + }); onLinkButtonMoved = async (e: PointerEvent) => { if (this._drag.current !== null && Math.abs((e.clientX - this._downX) * (e.clientX - this._downX) + (e.clientY - this._downY) * (e.clientY - this._downY)) > 5) { |