From e57c8ed3944bf737afdb2f564d159a53f8a6b1c6 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Mon, 25 Feb 2019 01:56:29 -0500 Subject: more css cleanup --- .../views/collections/CollectionSchemaView.scss | 73 ++++++++++------------ 1 file changed, 33 insertions(+), 40 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.scss') diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index ba9afee62..3bf84f3cd 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -14,16 +14,6 @@ background-color: rgba(0,0,0,.5); } - .collectionfreeformview-container { - border-width: 0px; - .collectionfreeformview > .jsx-parser{ - position:absolute - } - } - .imageBox-cont { - position:relative; - max-height:100%; - } .ReactTable { position: absolute; // display: inline-block; @@ -32,23 +22,40 @@ height: 100%; background: white; box-sizing: border-box; - } - .ReactTable .rt-table { - overflow-y: auto; - overflow-x: auto; - height: 100%; + .rt-table { + overflow-y: auto; + overflow-x: auto; + height: 100%; - display: -webkit-inline-box; - direction: ltr; - // direction:rtl; - // display:block; - } - .ReactTable .rt-tbody { - //direction: ltr; - direction: rtl; - } - .ReactTable .rt-tr-group { - direction: ltr; + display: -webkit-inline-box; + direction: ltr; + // direction:rtl; + // display:block; + } + .rt-tbody { + //direction: ltr; + direction: rtl; + } + .rt-tr-group { + direction: ltr; + } + .rt-td { + border-width: 1; + border-right-color: #aaa; + .imageBox-cont { + position:relative; + max-height:100%; + } + .imageBox-cont img { + object-fit: contain; + max-width: 100%; + height: 100% + } + } + .rt-tr-group { + border-width: 1; + border-bottom-color: #aaa + } } .ReactTable .rt-thead.-header { background:grey; @@ -61,24 +68,10 @@ border-bottom-style: solid; border-bottom-width: 1; } - .ReactTable .rt-td { - border-width: 1; - border-right-color: #aaa - } - .ReactTable .rt-tr-group { - border-width: 1; - border-bottom-color: #aaa - } - .imageBox-cont img { - object-fit: contain; - height: 100% - } .documentView-node:first-child { background: grey; .imageBox-cont img { object-fit: contain; - max-width: 100%; - height: 100% } } } -- cgit v1.2.3-70-g09d2 From bb418216efa9cc2e191b970e4cbe5080f4fd2b87 Mon Sep 17 00:00:00 2001 From: bob Date: Mon, 25 Feb 2019 17:00:31 -0500 Subject: drag and drop of main buttons. --- src/client/util/DragManager.ts | 2 + src/client/views/Main.tsx | 116 +++++++++------------ .../views/collections/CollectionDockingView.tsx | 8 +- .../views/collections/CollectionSchemaView.scss | 1 + 4 files changed, 58 insertions(+), 69 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.scss') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index fd026992b..aab23f91c 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -75,6 +75,8 @@ export namespace DragManager { let dragElement = ele.cloneNode(true) as HTMLElement; dragElement.style.opacity = "0.7"; dragElement.style.position = "absolute"; + dragElement.style.bottom = ""; + dragElement.style.left = ""; dragElement.style.transformOrigin = "0 0"; dragElement.style.zIndex = "1000"; dragElement.style.transform = `translate(${x}px, ${y}px) scale(${scaleX}, ${scaleY})`; diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 661a2ac20..61ad66c72 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -17,6 +17,7 @@ import { Transform } from '../util/Transform'; import { CollectionDockingView } from './collections/CollectionDockingView'; import { FieldWaiting } from '../../fields/Field'; import { UndoManager } from '../util/UndoManager'; +import { DragManager } from '../util/DragManager'; configure({ @@ -77,31 +78,47 @@ Documents.initProtos(() => { }, 0); } - let addImageNode = action(() => { - mainfreeform.GetList(KeyStore.Data, []).push(Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", { - x: 0, y: 300, width: 200, height: 200, title: "added note" - })); - }) - let addTextNode = action(() => { - mainfreeform.GetList(KeyStore.Data, []).push(Documents.TextDocument({ - x: 0, y: 300, width: 200, height: 200, title: "added note" - })); - }) - let addColNode = action(() => { - mainfreeform.GetList(KeyStore.Data, []).push(Documents.FreeformDocument([], { - x: 0, y: 300, width: 200, height: 200, title: "added note" - })); - }) - let addSchemaNode = action(() => { - mainfreeform.GetList(KeyStore.Data, []).push(Documents.SchemaDocument([Documents.TextDocument()], { - x: 0, y: 300, width: 200, height: 200, title: "added note" - })); - }) + let clearDatabase = action(() => Utils.Emit(Server.Socket, MessageStore.DeleteAll, {})) + let addTextNode = action(() => Documents.TextDocument({ width: 200, height: 200, title: "a text note" })) + let addColNode = action(() => Documents.FreeformDocument([], { width: 200, height: 200, title: "a feeform collection" })); + let addSchemaNode = action(() => Documents.SchemaDocument([Documents.TextDocument()], { width: 200, height: 200, title: "a schema collection" })); + let addImageNode = action(() => Documents.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", { + width: 200, height: 200, title: "an image of a cat" + })); - let clearDatabase = action(() => { - Utils.Emit(Server.Socket, MessageStore.DeleteAll, {}); - }) + let addClick = (creator: any) => action(() => { + var img = creator(); + img.SetNumber(KeyStore.X, 0); + img.SetNumber(KeyStore.Y, 0); + mainfreeform.GetList(KeyStore.Data, []).push(img); + }); + let imgRef = React.createRef(); + let textRef = React.createRef(); + let schemaRef = React.createRef(); + let colRef = React.createRef(); + let curMoveListener: any = null + let onRowMove = (creator: any, dragRef: any) => action((e: PointerEvent): void => { + e.stopPropagation(); + e.preventDefault(); + + document.removeEventListener("pointermove", curMoveListener); + document.removeEventListener('pointerup', onRowUp); + DragManager.StartDrag(dragRef.current!, { document: creator() }); + }); + let onRowUp = action((e: PointerEvent): void => { + document.removeEventListener("pointermove", curMoveListener); + document.removeEventListener('pointerup', onRowUp); + }); + let onRowDown = (creator: any, dragRef: any) => (e: React.PointerEvent) => { + if (e.shiftKey) { + CollectionDockingView.Instance.StartOtherDrag(dragRef.current!, creator()); + e.stopPropagation(); + } else { + document.addEventListener("pointermove", curMoveListener = onRowMove(creator, dragRef)); + document.addEventListener('pointerup', onRowUp); + } + } ReactDOM.render((
{ ContainingCollectionView={undefined} /> - - - - - - - +
+
+
+
+
+
+
+
+ + +
), document.getElementById('root')); }) diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index a0f457ef2..8926f4aca 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -36,8 +36,8 @@ export class CollectionDockingView extends React.Component(); private _fullScreen: any = null; @@ -48,7 +48,7 @@ export class CollectionDockingView extends React.Component Date: Mon, 25 Feb 2019 17:36:12 -0500 Subject: tweaks --- src/client/views/collections/CollectionSchemaView.scss | 5 +++-- src/client/views/collections/CollectionSchemaView.tsx | 14 ++++++++------ 2 files changed, 11 insertions(+), 8 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.scss') diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 74aa20e8b..0bd5a2ed3 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -38,6 +38,7 @@ } .rt-tr-group { direction: ltr; + max-height: 44px; } .rt-td { border-width: 1; @@ -61,13 +62,13 @@ background:grey; } .ReactTable .rt-th, .ReactTable .rt-td { - max-height: 75px; + max-height: 44; + padding: 3px 7px; } .ReactTable .rt-tbody .rt-tr-group:last-child { border-bottom: grey; border-bottom-style: solid; border-bottom-width: 1; - height: auto; } .documentView-node:first-child { background: grey; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index d5b82cbb6..38217d7c4 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -61,12 +61,14 @@ export class CollectionSchemaView extends CollectionViewBase { document.removeEventListener('pointerup', onRowUp); }); let onRowDown = (e: React.PointerEvent) => { - if (e.shiftKey) { - CollectionDockingView.Instance.StartOtherDrag(reference.current!, props.doc); - e.stopPropagation(); - } else { - document.addEventListener("pointermove", onRowMove); - document.addEventListener('pointerup', onRowUp); + if (this.props.isSelected() || this.props.isTopMost) { + if (e.shiftKey) { + CollectionDockingView.Instance.StartOtherDrag(reference.current!, props.doc); + e.stopPropagation(); + } else { + document.addEventListener("pointermove", onRowMove); + document.addEventListener('pointerup', onRowUp); + } } } return ( -- cgit v1.2.3-70-g09d2