aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/DocumentDecorations.tsx5
-rw-r--r--src/client/views/GlobalKeyHandler.ts1
-rw-r--r--src/client/views/MainView.scss12
-rw-r--r--src/client/views/MainView.tsx42
-rw-r--r--src/client/views/collections/TabDocView.tsx5
-rw-r--r--src/client/views/collections/collectionFreeForm/MarqueeView.tsx6
-rw-r--r--src/client/views/linking/LinkMenuItem.tsx6
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) {