From c6a3faf616e68ede2d67580344e4337c3f0cfdc5 Mon Sep 17 00:00:00 2001 From: Jude Date: Sat, 9 Mar 2019 17:14:42 -0500 Subject: added some flair to freeform views --- .../views/collections/CollectionSchemaView.scss | 357 ++++++++++----------- 1 file changed, 178 insertions(+), 179 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 d40e6d314..2fd4a2df0 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -1,185 +1,140 @@ - - .collectionSchemaView-container { - border-style: solid; - box-sizing: border-box; + border-style: solid; + box-sizing: border-box; + position: absolute; + width: 100%; + height: 100%; + .collectionSchemaView-previewRegion { + position: relative; + background: black; + float: left; + height: 100%; + } + .collectionSchemaView-previewHandle { position: absolute; + height: 37px; + width: 20px; + z-index: 20; + right: 0; + top: 0; + background: Black; + } + .collectionSchemaView-dividerDragger { + position: relative; + background: black; + float: left; + height: 100%; + } + .collectionSchemaView-tableContainer { + position: relative; + float: left; + height: 100%; + } + + .ReactTable { + position: absolute; + // display: inline-block; + // overflow: auto; width: 100%; height: 100%; - .collectionSchemaView-previewRegion { - position: relative; - background: black; - float: left; - height: 100%; - } - .collectionSchemaView-previewHandle { - position: absolute; - height: 37px; - width: 20px; - z-index: 20; - right: 0; - top: 0; - background: Black ; - } - .collectionSchemaView-dividerDragger{ - position: relative; - background: black; - float: left; - height: 100%; - } - .collectionSchemaView-tableContainer { - position: relative; - float: left; - height: 100%; - } + background: white; + box-sizing: border-box; + .rt-table { + overflow-y: auto; + overflow-x: auto; + height: 100%; - .ReactTable { - position: absolute; - // display: inline-block; - // overflow: auto; - width: 100%; + display: -webkit-inline-box; + direction: ltr; + // direction:rtl; + // display:block; + } + .rt-tbody { + //direction: ltr; + direction: rtl; + } + .rt-tr-group { + direction: ltr; + max-height: 44px; + } + .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%; - background: white; - box-sizing: border-box; - .rt-table { - overflow-y: auto; - overflow-x: auto; - height: 100%; - - display: -webkit-inline-box; - direction: ltr; - // direction:rtl; - // display:block; - } - .rt-tbody { - //direction: ltr; - direction: rtl; - } - .rt-tr-group { - direction: ltr; - max-height: 44px; - } - .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; - } - .ReactTable .rt-th, .ReactTable .rt-td { - 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; - } - .documentView-node:first-child { - background: grey; - .imageBox-cont img { - object-fit: contain; - } - } + } + } + .rt-tr-group { + border-width: 1; + border-bottom-color: #aaa; + } + } + .ReactTable .rt-thead.-header { + background: grey; + } + .ReactTable .rt-th, + .ReactTable .rt-td { + 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; + } + .documentView-node:first-child { + background: grey; + .imageBox-cont img { + object-fit: contain; + } + } } .Resizer { - box-sizing: border-box; - background: #000; - opacity: 0.5; - z-index: 1; - background-clip: padding-box; - &.horizontal { - height: 11px; - margin: -5px 0; - border-top: 5px solid rgba(255, 255, 255, 0); - border-bottom: 5px solid rgba(255, 255, 255, 0); - cursor: row-resize; - width: 100%; - &:hover { - border-top: 5px solid rgba(0, 0, 0, 0.5); - border-bottom: 5px solid rgba(0, 0, 0, 0.5); - } - } - &.vertical { - width: 11px; - margin: 0 -5px; - border-left: 5px solid rgba(255, 255, 255, 0); - border-right: 5px solid rgba(255, 255, 255, 0); - cursor: col-resize; - &:hover { - border-left: 5px solid rgba(0, 0, 0, 0.5); - border-right: 5px solid rgba(0, 0, 0, 0.5); - } - } + box-sizing: border-box; + background: #000; + opacity: 0.5; + z-index: 1; + background-clip: padding-box; + &.horizontal { + height: 11px; + margin: -5px 0; + border-top: 5px solid rgba(255, 255, 255, 0); + border-bottom: 5px solid rgba(255, 255, 255, 0); + cursor: row-resize; + width: 100%; &:hover { - -webkit-transition: all 2s ease; - transition: all 2s ease; - } + border-top: 5px solid rgba(0, 0, 0, 0.5); + border-bottom: 5px solid rgba(0, 0, 0, 0.5); + } + } + &.vertical { + width: 11px; + margin: 0 -5px; + border-left: 5px solid rgba(255, 255, 255, 0); + border-right: 5px solid rgba(255, 255, 255, 0); + cursor: col-resize; + &:hover { + border-left: 5px solid rgba(0, 0, 0, 0.5); + border-right: 5px solid rgba(0, 0, 0, 0.5); + } + } + &:hover { + -webkit-transition: all 2s ease; + transition: all 2s ease; + } } .vertical { - section { - width: 100vh; - height: 100vh; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - } - header { - padding: 1rem; - background: #eee; - } - footer { - padding: 1rem; - background: #eee; - } -} - -.horizontal { - section { - width: 100vh; - height: 100vh; - display: flex; - flex-direction: column; - } - header { - padding: 1rem; - background: #eee; - } - footer { - padding: 1rem; - background: #eee; - } -} - -.parent { - width: 100%; - height: 100%; - -webkit-box-flex: 1; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; + section { + width: 100vh; + height: 100vh; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -189,19 +144,63 @@ -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; + } + header { + padding: 1rem; + background: #eee; + } + footer { + padding: 1rem; + background: #eee; + } +} + +.horizontal { + section { + width: 100vh; + height: 100vh; + display: flex; + flex-direction: column; + } + header { + padding: 1rem; + background: #eee; + } + footer { + padding: 1rem; + background: #eee; + } +} + +.parent { + width: 100%; + height: 100%; + -webkit-box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; } .header { - background: #aaa; - height: 3rem; - line-height: 3rem; + background: #aaa; + height: 3rem; + line-height: 3rem; } .wrapper { - background: #ffa; - margin: 5rem; - -webkit-box-flex: 1; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; -} \ No newline at end of file + background: #ffa; + margin: 5rem; + -webkit-box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; +} -- cgit v1.2.3-70-g09d2 From 872d9a57bdb5bf2b3f3a26acf17d77b72dcb5164 Mon Sep 17 00:00:00 2001 From: Jude Date: Sat, 9 Mar 2019 20:09:11 -0500 Subject: schema view improvements --- .../views/collections/CollectionSchemaView.scss | 46 +++++++++++++++------- .../views/collections/CollectionSchemaView.tsx | 2 +- 2 files changed, 33 insertions(+), 15 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 2fd4a2df0..cb0040657 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -1,12 +1,15 @@ +@import "../global_variables"; + .collectionSchemaView-container { - border-style: solid; + border: 1px solid $intermediate-color; + border-radius: $border-radius; box-sizing: border-box; position: absolute; width: 100%; height: 100%; .collectionSchemaView-previewRegion { position: relative; - background: black; + background: $light-color; float: left; height: 100%; } @@ -17,11 +20,13 @@ z-index: 20; right: 0; top: 0; - background: Black; + background: $main-accent; } .collectionSchemaView-dividerDragger { position: relative; - background: black; + box-sizing: border-box; + border-left: 1px solid $intermediate-color; + border-right: 1px solid $intermediate-color; float: left; height: 100%; } @@ -37,8 +42,9 @@ // overflow: auto; width: 100%; height: 100%; - background: white; + background: $light-color; box-sizing: border-box; + border: none !important; .rt-table { overflow-y: auto; overflow-x: auto; @@ -58,8 +64,8 @@ max-height: 44px; } .rt-td { - border-width: 1; - border-right-color: #aaa; + border-width: 1px; + border-right-color: $intermediate-color; .imageBox-cont { position: relative; max-height: 100%; @@ -70,26 +76,30 @@ height: 100%; } } - .rt-tr-group { - border-width: 1; - border-bottom-color: #aaa; - } } .ReactTable .rt-thead.-header { - background: grey; + background: $intermediate-color; + color: $light-color; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 12px; + height: 30px; + padding-top: 4px; } .ReactTable .rt-th, .ReactTable .rt-td { max-height: 44; padding: 3px 7px; + font-size: 13px; + text-align: center; } .ReactTable .rt-tbody .rt-tr-group:last-child { - border-bottom: grey; + border-bottom: $intermediate-color; border-bottom-style: solid; border-bottom-width: 1; } .documentView-node:first-child { - background: grey; + background: $light-color; .imageBox-cont img { object-fit: contain; } @@ -204,3 +214,11 @@ -ms-flex: 1; flex: 1; } + +.-even { + background: $light-color !important; +} + +.-odd { + background: $light-color-secondary !important; +} diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 49f95c014..19ed97391 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -24,7 +24,7 @@ import { setupDrag } from "../../util/DragManager"; @observer export class CollectionSchemaView extends CollectionViewBase { private _mainCont = React.createRef(); - private DIVIDER_WIDTH = 5; + private DIVIDER_WIDTH = 4; @observable _contentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ContentScaling prop of the DocumentView @observable _dividerX = 0; -- cgit v1.2.3-70-g09d2 From 43c96800f0a651247fdcaf2c77c710a30cb3f79d Mon Sep 17 00:00:00 2001 From: Jude Date: Sun, 10 Mar 2019 13:06:04 -0400 Subject: changed default sizing --- src/client/documents/Documents.ts | 8 +++--- src/client/views/Main.tsx | 14 ++++----- src/client/views/_global_variables.scss | 2 +- .../views/collections/CollectionFreeFormView.scss | 2 +- .../views/collections/CollectionSchemaView.scss | 2 ++ .../views/collections/CollectionSchemaView.tsx | 2 +- .../views/collections/CollectionTreeView.scss | 33 ++++++++++++---------- src/client/views/nodes/FormattedTextBox.tsx | 2 +- src/client/views/nodes/ImageBox.scss | 29 +++++++++---------- 9 files changed, 49 insertions(+), 45 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.scss') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index fc210e9a2..30a292502 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -113,7 +113,7 @@ export namespace Documents { function GetCollectionPrototype(): Document { return collProto ? collProto : collProto = setupPrototypeOptions(collProtoId, "COLLECTION_PROTO", CollectionView.LayoutString("DataKey"), - { panx: 0, pany: 0, scale: 1, layoutKeys: [KeyStore.Data] }); + { panx: 0, pany: 0, scale: 1, width: 500, height: 500, layoutKeys: [KeyStore.Data] }); } function GetKVPPrototype(): Document { @@ -125,9 +125,9 @@ export namespace Documents { export function ImageDocument(url: string, options: DocumentOptions = {}) { let doc = SetInstanceOptions(GetImagePrototype(), { ...options, layoutKeys: [KeyStore.Data, KeyStore.Annotations, KeyStore.Caption] }, new URL(url), ImageField); - doc.SetText(KeyStore.Caption, "my caption..."); - doc.SetText(KeyStore.BackgroundLayout, EmbeddedCaption()); - doc.SetText(KeyStore.OverlayLayout, FixedCaption()); + // doc.SetText(KeyStore.Caption, "my caption..."); + // doc.SetText(KeyStore.BackgroundLayout, EmbeddedCaption()); + // doc.SetText(KeyStore.OverlayLayout, FixedCaption()); return doc; } export function TextDocument(options: DocumentOptions = {}) { diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 1caaa1cba..79c5cb5aa 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -76,12 +76,12 @@ Documents.initProtos(mainDocId, (res?: Document) => { let pdfurl = "http://www.adobe.com/support/products/enterprise/knowledgecenter/media/c4611_sample_explain.pdf" let weburl = "https://cs.brown.edu/courses/cs166/"; 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 freeform collection" })); - let addSchemaNode = action(() => Documents.SchemaDocument([Documents.TextDocument()], { width: 200, height: 200, title: "a schema collection" })); - let addPDFNode = action(() => Documents.PdfDocument(pdfurl, { width: 200, height: 200, title: "a schema collection" })); + let addTextNode = action(() => Documents.TextDocument({ width: 230, height: 130, title: "a text note" })) + let addColNode = action(() => Documents.FreeformDocument([], { width: 300, height: 300, title: "a freeform collection" })); + let addSchemaNode = action(() => Documents.SchemaDocument([Documents.TextDocument()], { width: 450, height: 200, title: "a schema collection" })); + let addPDFNode = action(() => Documents.PdfDocument(pdfurl, { width: 300, height: 400, title: "a pdf" })); let addImageNode = action(() => Documents.ImageDocument(imgurl, { width: 200, height: 200, title: "an image of a cat" })); - let addWebNode = action(() => Documents.WebDocument(weburl, { width: 200, height: 200, title: "a sample web page" })); + let addWebNode = action(() => Documents.WebDocument(weburl, { width: 300, height: 400, title: "a sample web page" })); let addClick = (creator: () => Document) => action(() => @@ -100,7 +100,7 @@ Documents.initProtos(mainDocId, (res?: Document) => { ReactDOM.render((
-
— DASH —
+ {/*
— DASH —
*/} Transform.Identity} @@ -153,7 +153,7 @@ Documents.initProtos(mainDocId, (res?: Document) => {
- + {/* */} ), document.getElementById('root')); }) diff --git a/src/client/views/_global_variables.scss b/src/client/views/_global_variables.scss index 333fb3122..1c06ab44a 100644 --- a/src/client/views/_global_variables.scss +++ b/src/client/views/_global_variables.scss @@ -1,4 +1,4 @@ -@import url("https://fonts.googleapis.com/css?family=Roboto+Slab:300,700|Crimson+Text:400,400i,700"); +@import url("https://fonts.googleapis.com/css?family=Roboto+Slab:,700|Crimson+Text:400,400i,700"); // colors $light-color: #fcfbf7; diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss index 90caa0d14..7250c9241 100644 --- a/src/client/views/collections/CollectionFreeFormView.scss +++ b/src/client/views/collections/CollectionFreeFormView.scss @@ -41,7 +41,7 @@ background: $light-color-secondary; } - border: 0px solid $intermediate-color; + border: 0px solid transparent; border-radius: $border-radius; box-sizing: border-box; position: absolute; diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index cb0040657..b66fc7981 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -7,6 +7,8 @@ position: absolute; width: 100%; height: 100%; + overflow: hidden; + .collectionSchemaView-previewRegion { position: relative; background: $light-color; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 19ed97391..deb307fb3 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -31,7 +31,7 @@ export class CollectionSchemaView extends CollectionViewBase { @observable _panelWidth = 0; @observable _panelHeight = 0; @observable _selectedIndex = 0; - @observable _splitPercentage: number = 50; + @observable _splitPercentage: number = 100; renderCell = (rowProps: CellInfo) => { let props: FieldViewProps = { diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss index f8d580a7b..4b28ded45 100644 --- a/src/client/views/collections/CollectionTreeView.scss +++ b/src/client/views/collections/CollectionTreeView.scss @@ -1,37 +1,40 @@ +@import "../global_variables"; + #body { - padding: 20px; - background: #bbbbbb; + padding: 20px; + background: $light-color-secondary; } ul { - list-style: none; + list-style: none; } li { - margin: 5px 0; + margin: 5px 0; } .no-indent { - padding-left: 0; + padding-left: 0; } .bullet { - width: 1.5em; - display: inline-block; + width: 1.5em; + display: inline-block; } .collectionTreeView-dropTarget { - border-style: solid; - box-sizing: border-box; - height: 100%; + border: 0px solid $intermediate-color; + border-radius: $border-radius; + box-sizing: border-box; + height: 100%; } .docContainer { - display: inline-table; + display: inline-table; } .delete-button { - color: #999999; - float: right; - margin-left: 1em; -} \ No newline at end of file + color: $intermediate-color; + float: right; + margin-left: 1em; +} diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index a6cee9957..a375cfc48 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -31,7 +31,7 @@ import { ContextMenu } from "../../views/ContextMenu"; // and 'doc' property to the document that is being rendered // // When rendered() by React, this extracts the TextController from the Document stored at the -// specified Key and assigns it to an HTML input node. When changes are made tot his node, +// specified Key and assigns it to an HTML input node. When changes are made to this node, // this will edit the document and assign the new value to that field. //] export class FormattedTextBox extends React.Component { diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss index ea459b911..2cb460eea 100644 --- a/src/client/views/nodes/ImageBox.scss +++ b/src/client/views/nodes/ImageBox.scss @@ -1,22 +1,21 @@ - .imageBox-cont { - padding: 0vw; - position: relative; - text-align: center; - width: 100%; - height: auto; - max-width: 100%; - max-height: 100% + padding: 0vw; + position: relative; + text-align: center; + width: 100%; + height: auto; + max-width: 100%; + max-height: 100%; } .imageBox-cont img { - object-fit: contain; - height: 100%; + object-fit: contain; + height: 100%; } .imageBox-button { - padding : 0vw; - border: none; - width : 100%; - height: 100%; -} \ No newline at end of file + padding: 0vw; + border: none; + width: 100%; + height: 100%; +} -- cgit v1.2.3-70-g09d2 From 44d669b46616e561aef874471d2740a4f205d9f0 Mon Sep 17 00:00:00 2001 From: Fawn Date: Mon, 11 Mar 2019 21:25:13 -0400 Subject: column adding works, but render doesn't get called on add --- .../views/collections/CollectionSchemaView.scss | 91 +++++++++++++++------- .../views/collections/CollectionSchemaView.tsx | 42 +++++++++- src/fields/Document.ts | 5 ++ 3 files changed, 108 insertions(+), 30 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 d40e6d314..38da3505e 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -1,5 +1,3 @@ - - .collectionSchemaView-container { border-style: solid; box-sizing: border-box; @@ -7,36 +5,74 @@ width: 100%; height: 100%; .collectionSchemaView-previewRegion { - position: relative; - background: black; - float: left; + position: relative; + background: black; + float: left; height: 100%; } .collectionSchemaView-previewHandle { position: absolute; height: 37px; - width: 20px; - z-index: 20; - right: 0; - top: 0; - background: Black ; - } - .collectionSchemaView-dividerDragger{ - position: relative; - background: black; - float: left; + width: 20px; + z-index: 20; + right: 0; + top: 0; + background: Black; + } + .collectionSchemaView-dividerDragger { + position: relative; + background: black; + float: left; height: 100%; } .collectionSchemaView-tableContainer { position: relative; float: left; - height: 100%; + height: 100%; } - - .ReactTable { + .collectionSchemaView-addColumn { position: absolute; - // display: inline-block; - // overflow: auto; + z-index: 20px; + right: 10px; + bottom: 10px; + input { + display: none; + } + label { + background: red; + display: inline-block; + border-radius: 18px; + font-size: 25px; + width: 36px; + height: 36px; + margin-right: 10px; + text-align: center; + cursor: pointer; + } + input:not(:checked)~.addColumn-options { + display: none; + } + .addColumn-options { + position: absolute; + right: 70px; + bottom: 0; + width: 150px; + background-color: white; + ul { + padding: 0; + margin: 0; + } + li { + padding: 6px; + border: 1px solid gray; + width: 100%; + margin: 0; + } + } + } + .ReactTable { + position: absolute; // display: inline-block; + // overflow: auto; width: 100%; height: 100%; background: white; @@ -45,10 +81,8 @@ overflow-y: auto; overflow-x: auto; height: 100%; - display: -webkit-inline-box; - direction: ltr; - // direction:rtl; + direction: ltr; // direction:rtl; // display:block; } .rt-tbody { @@ -63,8 +97,8 @@ border-width: 1; border-right-color: #aaa; .imageBox-cont { - position:relative; - max-height:100%; + position: relative; + max-height: 100%; } .imageBox-cont img { object-fit: contain; @@ -78,9 +112,10 @@ } } .ReactTable .rt-thead.-header { - background:grey; - } - .ReactTable .rt-th, .ReactTable .rt-td { + background: grey; + } + .ReactTable .rt-th, + .ReactTable .rt-td { max-height: 44; padding: 3px 7px; } diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 04f017378..e1036e9b0 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -1,5 +1,5 @@ import React = require("react") -import { action, observable } from "mobx"; +import { action, observable, ObservableMap, runInAction } from "mobx"; import { observer } from "mobx-react"; import Measure from "react-measure"; import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults } from "react-table"; @@ -17,6 +17,8 @@ import "./CollectionSchemaView.scss"; import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; import { CollectionViewBase } from "./CollectionViewBase"; import { setupDrag } from "../../util/DragManager"; +import { Key } from "./../../../fields/Key"; + // bcz: need to add drag and drop of rows and columns. This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657 @@ -26,6 +28,7 @@ export class CollectionSchemaView extends CollectionViewBase { private _mainCont = React.createRef(); private DIVIDER_WIDTH = 5; + @observable _columns: Array = [KeyStore.Title, KeyStore.Data, KeyStore.Author]; @observable _contentScaling = 1; // used to transfer the dimensions of the content pane in the DOM to the ContentScaling prop of the DocumentView @observable _dividerX = 0; @observable _panelWidth = 0; @@ -102,6 +105,29 @@ export class CollectionSchemaView extends CollectionViewBase { }; } + @action + addColumn = (k: Key): void => { + this._columns.push(k); + console.log("adding", this._columns.length); + } + + findAllDocumentKeys = (docs: Array): Set => { + let keys = new Set(); + docs.forEach(doc => { + let fields: ObservableMap = doc.Fields; + Array.from(fields).map(item => { + let v: { key: Key, field: Field } = item[1]; + let k = v.key; + keys.add(k); + }) + }) + keys.delete(KeyStore.Title); + keys.delete(KeyStore.Data); + keys.delete(KeyStore.Author); + console.log("key set", keys); + return keys; + } + _startSplitPercent = 0; @action onDividerMove = (e: PointerEvent): void => { @@ -179,7 +205,7 @@ export class CollectionSchemaView extends CollectionViewBase { focusDocument = (doc: Document) => { } render() { - const columns = this.props.Document.GetList(KeyStore.ColumnsKey, [KeyStore.Title, KeyStore.Data, KeyStore.Author]) + const columns = this.props.Document.GetList(KeyStore.ColumnsKey, this._columns) const children = this.props.Document.GetList(this.props.fieldKey, []); const selected = children.length > this._selectedIndex ? children[this._selectedIndex] : undefined; let content = this._selectedIndex == -1 || !selected ? (null) : ( @@ -205,6 +231,7 @@ export class CollectionSchemaView extends CollectionViewBase {
); let dividerDragger = this._splitPercentage == 100 ? (null) :
+ return (
this.onDrop(e, {})} ref={this.createDropTarget}> @@ -231,6 +258,16 @@ export class CollectionSchemaView extends CollectionViewBase { }} getTrProps={this.getTrProps} /> +
+ + + +
+
    {Array.from(this.findAllDocumentKeys(children)).map(item => { + return
  • this.addColumn(item)}>{item.Name}
    • + })}
+
+
} @@ -239,6 +276,7 @@ export class CollectionSchemaView extends CollectionViewBase { {content}
{previewHandle} +
) diff --git a/src/fields/Document.ts b/src/fields/Document.ts index 25e239417..6cf9c194e 100644 --- a/src/fields/Document.ts +++ b/src/fields/Document.ts @@ -38,6 +38,11 @@ export class Document extends Field { return this.GetText(KeyStore.Title, ""); } + @computed + public get Fields() { + return this.fields; + } + /** * Get the field in the document associated with the given key. If the * associated field has not yet been filled in from the server, a request -- cgit v1.2.3-70-g09d2 From e599b11d396bacad8310501ea55047f15f36eff2 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 14 Mar 2019 00:58:34 -0400 Subject: no idea why, but fixed display of videos in schema preview --- src/client/views/collections/CollectionFreeFormView.scss | 1 - src/client/views/collections/CollectionSchemaView.scss | 5 +++++ 2 files changed, 5 insertions(+), 1 deletion(-) (limited to 'src/client/views/collections/CollectionSchemaView.scss') diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss index ac2d18352..c382cf30c 100644 --- a/src/client/views/collections/CollectionFreeFormView.scss +++ b/src/client/views/collections/CollectionFreeFormView.scss @@ -44,7 +44,6 @@ border: 0px solid transparent; border-radius: $border-radius; box-sizing: border-box; - position: absolute; top: 0; left: 0; width: 100%; diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index b66fc7981..c9e1d431d 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -77,6 +77,11 @@ max-width: 100%; height: 100%; } + .videobox-cont { + object-fit: contain; + max-width: 100%; + height: 100%; + } } } .ReactTable .rt-thead.-header { -- cgit v1.2.3-70-g09d2 From f905d60fecaf7301c1ffb716529d6e5b86130798 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 14 Mar 2019 02:11:39 -0400 Subject: fixed marquee --- src/client/views/collections/CollectionPDFView.tsx | 3 ++- src/client/views/collections/CollectionSchemaView.scss | 5 +++++ src/client/views/collections/CollectionVideoView.tsx | 1 + src/client/views/collections/CollectionView.tsx | 5 ++--- 4 files changed, 10 insertions(+), 4 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.scss') diff --git a/src/client/views/collections/CollectionPDFView.tsx b/src/client/views/collections/CollectionPDFView.tsx index 91ffc9500..be3a281f2 100644 --- a/src/client/views/collections/CollectionPDFView.tsx +++ b/src/client/views/collections/CollectionPDFView.tsx @@ -1,4 +1,4 @@ -import { action, computed } from "mobx"; +import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; import { Document } from "../../../fields/Document"; import { KeyStore } from "../../../fields/KeyStore"; @@ -32,6 +32,7 @@ export class CollectionPDFView extends React.Component { } // "inherited" CollectionView API starts here... + @observable public SelectedDocs: FieldId[] = [] public active: () => boolean = () => CollectionView.Active(this); diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index d40e6d314..c4e6528e5 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -71,6 +71,11 @@ max-width: 100%; height: 100% } + .videobox-cont { + object-fit: contain; + max-width: 100%; + height: 100% + } } .rt-tr-group { border-width: 1; diff --git a/src/client/views/collections/CollectionVideoView.tsx b/src/client/views/collections/CollectionVideoView.tsx index 058325b21..9856a1284 100644 --- a/src/client/views/collections/CollectionVideoView.tsx +++ b/src/client/views/collections/CollectionVideoView.tsx @@ -23,6 +23,7 @@ export class CollectionVideoView extends React.Component { private _mainCont = React.createRef(); // "inherited" CollectionView API starts here... + @observable public SelectedDocs: FieldId[] = [] public active: () => boolean = () => CollectionView.Active(this); diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index bbb4a5d83..303379fc4 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -27,15 +27,14 @@ export const COLLECTION_BORDER_WIDTH = 2; @observer export class CollectionView extends React.Component { - @observable - public SelectedDocs: FieldId[] = []; - public static LayoutString(fieldKey: string = "DataKey") { return `<${CollectionView.name} Document={Document} ScreenToLocalTransform={ScreenToLocalTransform} fieldKey={${fieldKey}} panelWidth={PanelWidth} panelHeight={PanelHeight} isSelected={isSelected} select={select} bindings={bindings} isTopMost={isTopMost} SelectOnLoad={selectOnLoad} BackgroundView={BackgroundView} focus={focus}/>`; } + @observable + public SelectedDocs: FieldId[] = []; public active: () => boolean = () => CollectionView.Active(this); addDocument = (doc: Document): void => { CollectionView.AddDocument(this.props, doc); } removeDocument = (doc: Document): boolean => { return CollectionView.RemoveDocument(this.props, doc); } -- cgit v1.2.3-70-g09d2 From f5ae101d3faa696379aae2b2573c1f073f11621d Mon Sep 17 00:00:00 2001 From: bob Date: Thu, 14 Mar 2019 10:22:17 -0400 Subject: fixed schema scroll --- src/client/views/collections/CollectionPDFView.scss | 2 -- src/client/views/collections/CollectionSchemaView.scss | 7 ++++++- 2 files changed, 6 insertions(+), 3 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.scss') diff --git a/src/client/views/collections/CollectionPDFView.scss b/src/client/views/collections/CollectionPDFView.scss index 28878c6fa..cc1402498 100644 --- a/src/client/views/collections/CollectionPDFView.scss +++ b/src/client/views/collections/CollectionPDFView.scss @@ -1,6 +1,4 @@ .collectionPdfView-buttonTray { - width: 100%; - height: 100%; top : 25px; left : 20px; position: relative; diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index c4e6528e5..1c58c0cd8 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -8,10 +8,15 @@ height: 100%; .collectionSchemaView-previewRegion { position: relative; - background: black; float: left; height: 100%; } + .collectionSchemaView-content { + position: absolute; + height:100%; + width:100%; + overflow:auto; + } .collectionSchemaView-previewHandle { position: absolute; height: 37px; -- cgit v1.2.3-70-g09d2 From 487a74d28501cbdc86f0d02fef656754ed22ae19 Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 15 Mar 2019 13:30:22 -0400 Subject: fixed various issues with schema/videos --- src/client/views/EditableView.tsx | 2 +- .../views/collections/CollectionFreeFormView.tsx | 6 ++--- .../views/collections/CollectionSchemaView.scss | 2 +- .../views/collections/CollectionSchemaView.tsx | 28 ++++++++++++---------- src/client/views/collections/MarqueeView.tsx | 2 +- src/client/views/nodes/VideoBox.tsx | 16 ++++++------- src/fields/KeyStore.ts | 1 + 7 files changed, 28 insertions(+), 29 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.scss') diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 757bfeae6..3b54c0dbb 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -50,7 +50,7 @@ export class EditableView extends React.Component { style={{ display: "inline" }}> } else { return ( -
this.editing = true)}> {this.props.contents}
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx index c8b745254..a94539312 100644 --- a/src/client/views/collections/CollectionFreeFormView.tsx +++ b/src/client/views/collections/CollectionFreeFormView.tsx @@ -126,7 +126,7 @@ export class CollectionFreeFormView extends CollectionViewBase { onPointerUp = (e: PointerEvent): void => { e.stopPropagation(); - if (!this.MarqueeVisible && Math.abs(this.DownX - e.clientX) < 3 && Math.abs(this.DownY - e.clientY) < 3) { + if (Math.abs(this.DownX - e.clientX) < 4 && Math.abs(this.DownY - e.clientY) < 4) { //show preview text cursor on tap this.PreviewCursorVisible = true; //select is not already selected @@ -140,9 +140,8 @@ export class CollectionFreeFormView extends CollectionViewBase { @action onPointerMove = (e: PointerEvent): void => { if (!e.cancelBubble && this.props.active()) { - if (e.buttons != 2 && !e.altKey && !e.metaKey && !this.MarqueeVisible) { + if (e.buttons == 1 && !e.altKey && !e.metaKey) { this.MarqueeVisible = true; - this.PreviewCursorVisible = false; } if (this.MarqueeVisible) { e.stopPropagation(); @@ -152,7 +151,6 @@ export class CollectionFreeFormView extends CollectionViewBase { let x = this.props.Document.GetNumber(KeyStore.PanX, 0); let y = this.props.Document.GetNumber(KeyStore.PanY, 0); let [dx, dy] = this.getTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY); - this.PreviewCursorVisible = false; this.SetPan(x - dx, y - dy); this._lastX = e.pageX; this._lastY = e.pageY; diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index fdcad1355..0d615dc01 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -84,7 +84,7 @@ } .videobox-cont { object-fit: contain; - max-width: 100%; + width:auto; height: 100%; } } diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 14e1df8ca..8c1aeef2c 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -1,5 +1,5 @@ import React = require("react") -import { action, observable } from "mobx"; +import { action, observable, computed } from "mobx"; import { observer } from "mobx-react"; import Measure from "react-measure"; import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults } from "react-table"; @@ -31,7 +31,7 @@ export class CollectionSchemaView extends CollectionViewBase { @observable _panelWidth = 0; @observable _panelHeight = 0; @observable _selectedIndex = 0; - @observable _splitPercentage: number = 100; + @computed get splitPercentage() { return this.props.Document.GetNumber(KeyStore.SchemaSplitPercentage, 0); } renderCell = (rowProps: CellInfo) => { let props: FieldViewProps = { @@ -89,7 +89,8 @@ export class CollectionSchemaView extends CollectionViewBase { return { onClick: action((e: React.MouseEvent, handleOriginal: Function) => { that._selectedIndex = rowInfo.index; - this._splitPercentage += 0.05; // bcz - ugh - needed to force Measure to do its thing and call onResize + // bcz - ugh - needed to force Measure to do its thing and call onResize + this.props.Document.SetNumber(KeyStore.SchemaSplitPercentage, this.splitPercentage - 0.05) if (handleOriginal) { handleOriginal() @@ -106,18 +107,18 @@ export class CollectionSchemaView extends CollectionViewBase { @action onDividerMove = (e: PointerEvent): void => { let nativeWidth = this._mainCont.current!.getBoundingClientRect(); - this._splitPercentage = Math.round((e.clientX - nativeWidth.left) / nativeWidth.width * 100); + this.props.Document.SetNumber(KeyStore.SchemaSplitPercentage, 100 - Math.round((e.clientX - nativeWidth.left) / nativeWidth.width * 100)); } @action onDividerUp = (e: PointerEvent): void => { document.removeEventListener("pointermove", this.onDividerMove); document.removeEventListener('pointerup', this.onDividerUp); - if (this._startSplitPercent == this._splitPercentage) { - this._splitPercentage = this._splitPercentage == 1 ? 66 : 100; + if (this._startSplitPercent == this.splitPercentage) { + this.props.Document.SetNumber(KeyStore.SchemaSplitPercentage, this.splitPercentage == 0 ? 33 : 0); } } onDividerDown = (e: React.PointerEvent) => { - this._startSplitPercent = this._splitPercentage; + this._startSplitPercent = this.splitPercentage; e.stopPropagation(); e.preventDefault(); document.addEventListener("pointermove", this.onDividerMove); @@ -134,12 +135,12 @@ export class CollectionSchemaView extends CollectionViewBase { e.preventDefault(); document.removeEventListener("pointermove", this.onExpanderMove); document.removeEventListener('pointerup', this.onExpanderUp); - if (this._startSplitPercent == this._splitPercentage) { - this._splitPercentage = this._splitPercentage == 100 ? 66 : 100; + if (this._startSplitPercent == this.splitPercentage) { + this.props.Document.SetNumber(KeyStore.SchemaSplitPercentage, this.splitPercentage == 0 ? 33 : 0); } } onExpanderDown = (e: React.PointerEvent) => { - this._startSplitPercent = this._splitPercentage; + this._startSplitPercent = this.splitPercentage; e.stopPropagation(); e.preventDefault(); document.addEventListener("pointermove", this.onExpanderMove); @@ -203,7 +204,7 @@ export class CollectionSchemaView extends CollectionViewBase { ) let previewHandle = !this.props.active() ? (null) : (
); - let dividerDragger = this._splitPercentage == 100 ? (null) : + let dividerDragger = this.splitPercentage == 0 ? (null) :
return (
@@ -213,7 +214,8 @@ export class CollectionSchemaView extends CollectionViewBase { this._panelHeight = r.entry.height; })}> {({ measureRef }) => -
+
{dividerDragger} -
+
{content}
{previewHandle} diff --git a/src/client/views/collections/MarqueeView.tsx b/src/client/views/collections/MarqueeView.tsx index 67716f99a..65aaa837f 100644 --- a/src/client/views/collections/MarqueeView.tsx +++ b/src/client/views/collections/MarqueeView.tsx @@ -93,7 +93,7 @@ export class MarqueeView extends React.Component @action marqueeCommand = (e: KeyboardEvent) => { - if (e.key == "Backspace") { + if (e.key == "Backspace" || e.key == "Delete") { this.marqueeSelect().map(d => this.props.removeDocument(d)); this.props.container.props.Document.SetData(KeyStore.Ink, this.marqueeInkSelect(false), InkField); this.cleanupInteractions(); diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index fef278cec..8c1ee669f 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -48,16 +48,14 @@ export class VideoBox extends React.Component { //setTimeout(action(() => this._loaded = true), 500); return ( -
- - {({ measureRef }) => -
+ } + ) } } \ No newline at end of file diff --git a/src/fields/KeyStore.ts b/src/fields/KeyStore.ts index 0c8b7e260..06cdc8fc8 100644 --- a/src/fields/KeyStore.ts +++ b/src/fields/KeyStore.ts @@ -25,6 +25,7 @@ export namespace KeyStore { export const LayoutKeys = new Key("LayoutKeys"); export const LayoutFields = new Key("LayoutFields"); export const ColumnsKey = new Key("SchemaColumns"); + export const SchemaSplitPercentage = new Key("SchemaSplitPercentage"); export const Caption = new Key("Caption"); export const ActiveFrame = new Key("ActiveFrame"); export const DocumentText = new Key("DocumentText"); -- cgit v1.2.3-70-g09d2 From 6cc582d85317c35908d313b4f129617073c5ccac Mon Sep 17 00:00:00 2001 From: Tyler Schicke Date: Mon, 18 Mar 2019 03:37:22 -0400 Subject: Fixed columns, looks horrible though --- .../views/collections/CollectionSchemaView.scss | 2 +- .../views/collections/CollectionSchemaView.tsx | 90 ++++++++++++++++------ 2 files changed, 68 insertions(+), 24 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 37f4652a9..8d3eba696 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -42,7 +42,7 @@ height: 100%; } .ReactTable { - position: absolute; // display: inline-block; + // position: absolute; // display: inline-block; // overflow: auto; width: 100%; height: 100%; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 16432ebbc..654d13bf1 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -5,7 +5,7 @@ import Measure from "react-measure"; import ReactTable, { CellInfo, ComponentPropsGetterR, ReactTableDefaults } from "react-table"; import "react-table/react-table.css"; import { Document } from "../../../fields/Document"; -import { Field } from "../../../fields/Field"; +import { Field, Opt } from "../../../fields/Field"; import { KeyStore } from "../../../fields/KeyStore"; import { CompileScript, ToField } from "../../util/Scripting"; import { Transform } from "../../util/Transform"; @@ -18,11 +18,37 @@ import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; import { CollectionViewBase } from "./CollectionViewBase"; import { setupDrag } from "../../util/DragManager"; import { Key } from "./../../../fields/Key"; +import { Server } from "../../Server"; +import { ListField } from "../../../fields/ListField"; // bcz: need to add drag and drop of rows and columns. This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657 +@observer +class KeyToggle extends React.Component<{ keyId: string, checked: boolean, toggle: (key: Key) => void }> { + @observable + key: Key | undefined; + + componentWillReceiveProps() { + Server.GetField(this.props.keyId, action((field: Opt) => { + if (field instanceof Key) { + this.key = field; + } + })) + } + + render() { + if (this.key) { + return (
+ this.key && this.props.toggle(this.key)} />{this.key.Name} +
) + } else { + return
+ } + } +} + @observer export class CollectionSchemaView extends CollectionViewBase { private _mainCont = React.createRef(); @@ -106,26 +132,40 @@ export class CollectionSchemaView extends CollectionViewBase { }; } + get columns() { + return this.props.Document.GetList(KeyStore.ColumnsKey, []); + } + @action - addColumn = (k: Key): void => { - this._columns.push(k); - console.log("adding", this._columns.length); + toggleKey = (key: Key) => { + this.props.Document.GetOrCreateAsync>(KeyStore.ColumnsKey, ListField, + (field) => { + const index = field.Data.indexOf(key); + if (index === -1) { + this.columns.push(key); + } else { + this.columns.splice(index, 1); + } + + }) } - findAllDocumentKeys = (docs: Array): Set => { - let keys = new Set(); + @observable keys: Key[] = []; + + findAllDocumentKeys = (): { [id: string]: boolean } => { + const docs = this.props.Document.GetList(this.props.fieldKey, []); + let keys: { [id: string]: boolean } = {} docs.forEach(doc => { - let fields: ObservableMap = doc.Fields; - Array.from(fields).map(item => { - let v: { key: Key, field: Field } = item[1]; - let k = v.key; - keys.add(k); - }) + let protos = doc.GetAllPrototypes(); + for (const proto of protos) { + proto._proxies.forEach((val: any, key: string) => { + keys[key] = false + }) + } + }) + this.columns.forEach(key => { + keys[key.Id] = true; }) - keys.delete(KeyStore.Title); - keys.delete(KeyStore.Data); - keys.delete(KeyStore.Author); - console.log("key set", keys); return keys; } @@ -206,9 +246,10 @@ export class CollectionSchemaView extends CollectionViewBase { focusDocument = (doc: Document) => { } render() { - const columns = this.props.Document.GetList(KeyStore.ColumnsKey, this._columns) + const columns = this.columns; const children = this.props.Document.GetList(this.props.fieldKey, []); const selected = children.length > this._selectedIndex ? children[this._selectedIndex] : undefined; + const allKeys = this.findAllDocumentKeys(); let content = this._selectedIndex == -1 || !selected ? (null) : ( {({ measureRef }) => @@ -259,15 +300,18 @@ export class CollectionSchemaView extends CollectionViewBase { }} getTrProps={this.getTrProps} + style={{ height: "50%" }} /> -
- - +
+ {/* + */}
-
    {Array.from(this.findAllDocumentKeys(children)).map(item => { - return
  • this.addColumn(item)}>{item.Name}
    • - })}
+
    + {Array.from(Object.keys(allKeys)).map(item => { + return () + })} +
-- cgit v1.2.3-70-g09d2 From da576c10538c025f247a50ed8561b112f78f828e Mon Sep 17 00:00:00 2001 From: bob Date: Mon, 18 Mar 2019 14:02:21 -0400 Subject: added column dividers --- .../views/collections/CollectionSchemaView.scss | 17 ++++ .../views/collections/CollectionSchemaView.tsx | 90 ++++++++++++++++------ 2 files changed, 84 insertions(+), 23 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 8d3eba696..863bb256a 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -28,6 +28,23 @@ top: 0; background: $main-accent; } + .collectionSchemaView-columnsHandle { + position: absolute; + height: 37px; + width: 20px; + z-index: 20; + left: 0; + bottom: 0; + background: $main-accent; + } + .collectionSchemaView-colDividerDragger { + position: relative; + box-sizing: border-box; + border-top: 1px solid $intermediate-color; + border-bottom: 1px solid $intermediate-color; + float: top; + width: 100%; + } .collectionSchemaView-dividerDragger { position: relative; box-sizing: border-box; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 654d13bf1..76ee421d6 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -60,6 +60,7 @@ export class CollectionSchemaView extends CollectionViewBase { @observable _panelWidth = 0; @observable _panelHeight = 0; @observable _selectedIndex = 0; + @observable _columnsPercentage = 0; @computed get splitPercentage() { return this.props.Document.GetNumber(KeyStore.SchemaSplitPercentage, 0); } renderCell = (rowProps: CellInfo) => { @@ -190,6 +191,25 @@ export class CollectionSchemaView extends CollectionViewBase { document.addEventListener("pointermove", this.onDividerMove); document.addEventListener('pointerup', this.onDividerUp); } + + + @action + onColDividerMove = (e: PointerEvent): void => { + let nativeWidth = this._mainCont.current!.getBoundingClientRect(); + this._columnsPercentage = 100 - (e.clientY - nativeWidth.top) / nativeWidth.height * 100; + } + @action + onColDividerUp = (e: PointerEvent): void => { + document.removeEventListener("pointermove", this.onColDividerMove); + document.removeEventListener('pointerup', this.onColDividerUp); + } + onColDividerDown = (e: React.PointerEvent) => { + e.stopPropagation(); + e.preventDefault(); + document.addEventListener("pointermove", this.onColDividerMove); + document.addEventListener('pointerup', this.onColDividerUp); + } + @action onExpanderMove = (e: PointerEvent): void => { e.stopPropagation(); @@ -201,12 +221,8 @@ export class CollectionSchemaView extends CollectionViewBase { e.preventDefault(); document.removeEventListener("pointermove", this.onExpanderMove); document.removeEventListener('pointerup', this.onExpanderUp); - if (this._startSplitPercent == this.splitPercentage) { - this.props.Document.SetNumber(KeyStore.SchemaSplitPercentage, this.splitPercentage == 0 ? 33 : 0); - } } onExpanderDown = (e: React.PointerEvent) => { - this._startSplitPercent = this.splitPercentage; e.stopPropagation(); e.preventDefault(); document.addEventListener("pointermove", this.onExpanderMove); @@ -227,6 +243,27 @@ export class CollectionSchemaView extends CollectionViewBase { } } + @action + onColumnsMove = (e: PointerEvent): void => { + e.stopPropagation(); + e.preventDefault(); + } + @action + onColumnsUp = (e: PointerEvent): void => { + e.stopPropagation(); + e.preventDefault(); + document.removeEventListener("pointermove", this.onColumnsMove); + document.removeEventListener('pointerup', this.onColumnsUp); + this._columnsPercentage = this._columnsPercentage ? 0 : 50; + } + onColumnsDown = (e: React.PointerEvent) => { + this._startSplitPercent = this.splitPercentage; + e.stopPropagation(); + e.preventDefault(); + document.addEventListener("pointermove", this.onColumnsMove); + document.addEventListener('pointerup', this.onColumnsUp); + } + @action setScaling = (r: any) => { const children = this.props.Document.GetList(this.props.fieldKey, []); @@ -271,8 +308,12 @@ export class CollectionSchemaView extends CollectionViewBase { ) let previewHandle = !this.props.active() ? (null) : (
); + let columnsHandle = !this.props.active() ? (null) : ( +
); let dividerDragger = this.splitPercentage == 0 ? (null) :
+ let colDividerDragger = this._columnsPercentage == 0 ? (null) : +
return (
@@ -284,30 +325,32 @@ export class CollectionSchemaView extends CollectionViewBase { {({ measureRef }) =>
- ({ - Header: col.Name, - accessor: (doc: Document) => [doc, col], - id: col.Id - }))} - column={{ - ...ReactTableDefaults.column, - Cell: this.renderCell, +
+ ({ + Header: col.Name, + accessor: (doc: Document) => [doc, col], + id: col.Id + }))} + column={{ + ...ReactTableDefaults.column, + Cell: this.renderCell, - }} - getTrProps={this.getTrProps} - style={{ height: "50%" }} - /> -
+ }} + getTrProps={this.getTrProps} + /> +
+ {colDividerDragger} +
{/* */}
-
    +
      {Array.from(Object.keys(allKeys)).map(item => { return () })} @@ -322,6 +365,7 @@ export class CollectionSchemaView extends CollectionViewBase { {content}
{previewHandle} + {columnsHandle}
-- cgit v1.2.3-70-g09d2