diff options
| -rw-r--r-- | src/client/views/LightboxView.tsx | 21 | ||||
| -rw-r--r-- | src/client/views/MainView.tsx | 11 |
2 files changed, 19 insertions, 13 deletions
diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx index 263117437..a1047fafc 100644 --- a/src/client/views/LightboxView.tsx +++ b/src/client/views/LightboxView.tsx @@ -13,7 +13,7 @@ import { DefaultStyleProvider } from './StyleProvider'; interface LightboxViewProps { PanelWidth: number; PanelHeight: number; - minBorder: number[]; + maxBorder: number[]; } @observer @@ -23,14 +23,14 @@ export class LightboxView extends React.Component<LightboxViewProps> { public static LightboxFuture: (Opt<Doc>)[] = []; public static LightboxDocView = React.createRef<DocumentView>(); public LightboxDocView = React.createRef<DocumentView>(); - lightboxWidth = () => this.props.PanelWidth - Math.min(this.props.PanelWidth / 4, this.props.minBorder[0]) * 2; - lightboxHeight = () => this.props.PanelHeight - Math.min(this.props.PanelHeight / 4, this.props.minBorder[1]) * 2; - lightboxScreenToLocal = () => new Transform(-Math.min(this.props.PanelWidth / 4, this.props.minBorder[0]), -Math.min(this.props.PanelHeight / 4, this.props.minBorder[1]), 1); + lightboxWidth = () => this.props.PanelWidth - Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]) * 2; + lightboxHeight = () => this.props.PanelHeight - Math.min(this.props.PanelHeight / 4, this.props.maxBorder[1]) * 2; + lightboxScreenToLocal = () => new Transform(-Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]), -Math.min(this.props.PanelHeight / 4, this.props.maxBorder[1]), 1); navBtn = (left: Opt<number>, icon: string, display: () => string, click: (e: React.MouseEvent) => void) => { return <div className="lightboxView-navBtn-frame" style={{ display: display(), left, - width: Math.min(this.props.PanelWidth / 4, this.props.minBorder[0]) + width: Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]) }}> <div className="lightboxView-navBtn" style={{ top: this.props.PanelHeight / 2 - 12.50 }} onClick={click}> @@ -40,6 +40,7 @@ export class LightboxView extends React.Component<LightboxViewProps> { } render() { + console.log("ph = " + this.props.PanelHeight); if (LightboxView.LightboxHistory.lastElement() !== LightboxView.LightboxDoc) LightboxView.LightboxHistory.push(LightboxView.LightboxDoc); let downx = 0, downy = 0; return !LightboxView.LightboxDoc ? (null) : @@ -53,10 +54,10 @@ export class LightboxView extends React.Component<LightboxViewProps> { } })} > <div className="lightboxView-contents" style={{ - left: Math.min(this.props.PanelWidth / 4, this.props.minBorder[0]), - top: Math.min(this.props.PanelHeight / 4, this.props.minBorder[1]), - width: this.props.PanelWidth - Math.min(this.props.PanelWidth / 4, this.props.minBorder[0]) * 2, - height: this.props.PanelHeight - Math.min(this.props.PanelHeight / 4, this.props.minBorder[1]) * 2 + left: Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]), + top: Math.min(this.props.PanelHeight / 4, this.props.maxBorder[1]), + width: this.props.PanelWidth - Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]) * 2, + height: this.props.PanelHeight - Math.min(this.props.PanelHeight / 4, this.props.maxBorder[1]) * 2 }}> <DocumentView ref={this.LightboxDocView} Document={LightboxView.LightboxDoc} @@ -91,7 +92,7 @@ export class LightboxView extends React.Component<LightboxViewProps> { if (LightboxView.LightboxHistory.lastElement() !== LightboxView.LightboxFuture.lastElement()) LightboxView.LightboxFuture.push(popped); LightboxView.LightboxDoc = LightboxView.LightboxHistory.lastElement(); }))} - {this.navBtn(this.props.PanelWidth - Math.min(this.props.PanelWidth / 4, this.props.minBorder[0]), "chevron-right", + {this.navBtn(this.props.PanelWidth - Math.min(this.props.PanelWidth / 4, this.props.maxBorder[0]), "chevron-right", () => LightboxView.LightboxDoc && LightboxView.LightboxFuture.length ? "" : "none", action(e => { e.stopPropagation(); diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index b3f5cc54f..44aa41f85 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -67,8 +67,9 @@ const _global = (window /* browser */ || global /* node */) as any; export class MainView extends React.Component { public static Instance: MainView; private _docBtnRef = React.createRef<HTMLDivElement>(); - private _mainViewRef = React.createRef<HTMLDivElement>(); @observable public LastButton: Opt<Doc>; + @observable private _windowWidth: number = 0; + @observable private _windowHeight: number = 0; @observable private _panelWidth: number = 0; @observable private _panelHeight: number = 0; @observable private _panelContent: string = "none"; @@ -609,7 +610,11 @@ export class MainView extends React.Component { } render() { - return (<div className={"mainView-container" + (this.darkScheme ? "-dark" : "")} onScroll={() => ((ele) => ele.scrollTop = ele.scrollLeft = 0)(document.getElementById("root")!)} ref={this._mainViewRef}> + return (<div className={"mainView-container" + (this.darkScheme ? "-dark" : "")} + onScroll={() => ((ele) => ele.scrollTop = ele.scrollLeft = 0)(document.getElementById("root")!)} + ref={r => { + r && new _global.ResizeObserver(action(() => { this._windowWidth = r.getBoundingClientRect().width; this._windowHeight = r.getBoundingClientRect().height; })).observe(r); + }}> {this.inkResources} <DictationOverlay /> <SharingManager /> @@ -636,7 +641,7 @@ export class MainView extends React.Component { <TimelineMenu /> {this.snapLines} <div className="mainView-webRef" ref={this.makeWebRef} /> - <LightboxView PanelWidth={this._panelWidth} PanelHeight={this._panelHeight} minBorder={[200, 100]} /> + <LightboxView PanelWidth={this._windowWidth} PanelHeight={this._windowHeight} maxBorder={[200, 100]} /> </div>); } |