From 0493f7f18a3eb49d0443f1742d53bb214bf9dd70 Mon Sep 17 00:00:00 2001 From: bob Date: Wed, 30 Jan 2019 17:36:30 -0500 Subject: drag drop fixes for docking --- src/views/collections/CollectionDockingView.scss | 25 +++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) (limited to 'src/views/collections/CollectionDockingView.scss') diff --git a/src/views/collections/CollectionDockingView.scss b/src/views/collections/CollectionDockingView.scss index 43af7c538..249f837f7 100644 --- a/src/views/collections/CollectionDockingView.scss +++ b/src/views/collections/CollectionDockingView.scss @@ -5,9 +5,11 @@ left: 0; overflow: hidden; .flexlayout__layout { - width: 100%; - height: 100%; - position: relative; + left: 0; + top: 0; + right: 0; + bottom: 0; + position: absolute; overflow:hidden; } @@ -79,9 +81,10 @@ .flexlayout__tab { overflow: auto; - position: absolute; + position:absolute; box-sizing: border-box; background-color: #222; + color:black; } .flexlayout__tab_button { @@ -137,7 +140,7 @@ .flexlayout__tab_button:hover .flexlayout__tab_button_trailing, .flexlayout__tab_button--selected .flexlayout__tab_button_trailing{ - //background: transparent url("../images/close_white.png") no-repeat center; + background: transparent url("../../../node_modules/flexlayout-react/images/close_white.png") no-repeat center; } .flexlayout__tab_button_overflow { @@ -150,7 +153,7 @@ font-size: 10px; color:lightgray; font-family: Arial, sans-serif; - //background: transparent url("../images/more.png") no-repeat left; + background: transparent url("../../../node_modules/flexlayout-react/images/more.png") no-repeat left; } .flexlayout__tabset_header @@ -185,12 +188,12 @@ .flexlayout__tabset-selected { - //background-image: linear-gradient(#111, #444); + background-image: linear-gradient(#111, #444); } .flexlayout__tabset-maximized { - //background-image: linear-gradient(#666, #333); + background-image: linear-gradient(#666, #333); } .flexlayout__tab_toolbar { @@ -208,7 +211,7 @@ height:20px; border:none; outline-width: 0; - //background: transparent url("../images/maximize.png") no-repeat center; + background: transparent url("../../../node_modules/flexlayout-react/images/maximize.png") no-repeat center; } .flexlayout__tab_toolbar_button-max { @@ -216,7 +219,7 @@ height:20px; border:none; outline-width: 0; - //background: transparent url("../images/restore.png") no-repeat center; + background: transparent url("../../../node_modules/flexlayout-react/images/restore.png") no-repeat center; } .flexlayout__popup_menu { @@ -339,7 +342,7 @@ .flexlayout__border_button:hover .flexlayout__border_button_trailing, .flexlayout__border_button--selected .flexlayout__border_button_trailing{ - //background: transparent url("../images/close_white.png") no-repeat center; + background: transparent url("../../../node_modules/flexlayout-react/images/close_white.png") no-repeat center; } -- cgit v1.2.3-70-g09d2 From 772af9c62ff6e96747c94190cae5f0b2a94d3485 Mon Sep 17 00:00:00 2001 From: bob Date: Thu, 31 Jan 2019 18:01:48 -0500 Subject: clean up --- src/views/collections/CollectionDockingView.scss | 14 +++++-- src/views/collections/CollectionDockingView.tsx | 47 ++++++++++++++---------- src/views/nodes/DocumentView.tsx | 4 ++ 3 files changed, 43 insertions(+), 22 deletions(-) (limited to 'src/views/collections/CollectionDockingView.scss') diff --git a/src/views/collections/CollectionDockingView.scss b/src/views/collections/CollectionDockingView.scss index 249f837f7..118662d89 100644 --- a/src/views/collections/CollectionDockingView.scss +++ b/src/views/collections/CollectionDockingView.scss @@ -4,6 +4,17 @@ top: 0; left: 0; overflow: hidden; + + .lm_controls>li { + opacity: 0.6; + transform: scale(1.2); + } + .lm_maximised .lm_controls .lm_maximise { + opacity:1; + transform: scale(0.8); + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==) !important; + } + .flexlayout__layout { left: 0; top: 0; @@ -110,12 +121,10 @@ } .flexlayout__tab_button_leading { - float: left; display:inline-block; } .flexlayout__tab_button_content { - float: left; display:inline-block; } @@ -130,7 +139,6 @@ } .flexlayout__tab_button_trailing { - float: left; display:inline-block; margin-left:5px; margin-top:3px; diff --git a/src/views/collections/CollectionDockingView.tsx b/src/views/collections/CollectionDockingView.tsx index e1d36864f..8c822fba4 100644 --- a/src/views/collections/CollectionDockingView.tsx +++ b/src/views/collections/CollectionDockingView.tsx @@ -16,7 +16,6 @@ import 'golden-layout/src/css/goldenlayout-dark-theme.css'; import * as GoldenLayout from "golden-layout"; import * as ReactDOM from 'react-dom'; import { DragManager } from "../../util/DragManager"; -import { CollectionFreeFormView } from "./CollectionFreeFormView"; @observer export class CollectionDockingView extends React.Component { @@ -69,11 +68,12 @@ export class CollectionDockingView extends React.Component componentDidMount: () => void = () => { if (this._containerRef.current && CollectionDockingView.UseGoldenLayout) { this.goldenLayoutFactory(); - window.addEventListener('resize', function (event) { - CollectionDockingView.myLayout.updateSize(window.innerWidth, window.innerHeight); - }); + window.addEventListener('resize', this.onResize); // bcz: would rather add this event to the parent node, but resize events only come from Window } } + componentWillUnmount: () => void = () => { + window.removeEventListener('resize', this.onResize); + } private nextId = (function () { var _next_id = 0; return function () { return _next_id++; } })(); @action @@ -94,6 +94,15 @@ export class CollectionDockingView extends React.Component ContextMenu.Instance.clearItems() } } + + @action + onResize = (event: any) => { + var cur = this.props.ContainingDocumentView!.MainContent.current; + + // bcz: since GoldenLayout isn't a React component itself, we need to notify it to resize when its document container's size has changed + CollectionDockingView.myLayout.updateSize(cur!.getBoundingClientRect().width, cur!.getBoundingClientRect().height); + } + @action onPointerDown = (e: React.PointerEvent): void => { if (e.button === 2 && this.active) { @@ -154,22 +163,11 @@ export class CollectionDockingView extends React.Component this._dragFakeElement = dragElement.cloneNode(true) as HTMLDivElement; this._dragParent!.appendChild(this._dragFakeElement); - // all of this must be undone when the document has been dropped (see registerComponent()) + // all of this must be undone when the document has been dropped (see tabCreated) } goldenLayoutFactory() { CollectionDockingView.myLayout = this.modelForGoldenLayout; - CollectionDockingView.myLayout.on('stackCreated', function (stack: any) { - stack.header.controlsContainer.find('.lm_popout').hide(); - stack.header.controlsContainer.find('.lm_close') //get the close icon - .off('click') //unbind the current click handler - .click(function () { - if (confirm('really close this?')) { - stack.remove(); - } - }); - }); - CollectionDockingView.myLayout.on('tabCreated', function (tab: any) { if (CollectionDockingView._dragDiv) { CollectionDockingView._dragDiv.removeChild(CollectionDockingView._dragElement); @@ -181,9 +179,20 @@ export class CollectionDockingView extends React.Component tab.setTitle(tab.contentItem.config.componentState.doc.Title); tab.closeElement.off('click') //unbind the current click handler .click(function () { - if (confirm('really close this?')) { - tab.contentItem.remove(); - } + //if (confirm('really close this?')) { + tab.contentItem.remove(); + //} + }); + }); + + CollectionDockingView.myLayout.on('stackCreated', function (stack: any) { + stack.header.controlsContainer.find('.lm_popout').hide(); + stack.header.controlsContainer.find('.lm_close') //get the close icon + .off('click') //unbind the current click handler + .click(function () { + //if (confirm('really close this?')) { + stack.remove(); + //} }); }); diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx index 5e72db492..a3d7d550e 100644 --- a/src/views/nodes/DocumentView.tsx +++ b/src/views/nodes/DocumentView.tsx @@ -96,6 +96,10 @@ export class DocumentView extends React.Component { return new DOMRect(); } + get MainContent() { + return this._mainCont; + } + @computed get x(): number { return this.props.Document.GetFieldValue(KeyStore.X, NumberField, Number(0)); -- cgit v1.2.3-70-g09d2