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 From 67170e521366f8178645cc85aaf377e53b1a6f21 Mon Sep 17 00:00:00 2001 From: laurawilsonri Date: Mon, 18 Mar 2019 18:07:46 -0400 Subject: ui in place, needs refinement and more backend --- deploy/index.html | 2 + package-lock.json | 239 ++++++++++++++++++++- package.json | 7 +- src/client/views/DocumentDecorations.tsx | 4 +- .../views/collections/CollectionSchemaView.scss | 66 +++++- .../views/collections/CollectionSchemaView.tsx | 68 +++++- 6 files changed, 373 insertions(+), 13 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.scss') diff --git a/deploy/index.html b/deploy/index.html index e0892662a..94699126c 100644 --- a/deploy/index.html +++ b/deploy/index.html @@ -3,6 +3,8 @@ Dash Web + diff --git a/package-lock.json b/package-lock.json index 5b9cb598d..3d66773f2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -174,6 +174,52 @@ "resolved": "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz", "integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==" }, + "@react-bootstrap/react-popper": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@react-bootstrap/react-popper/-/react-popper-1.2.1.tgz", + "integrity": "sha512-4l3q7LcZEhrSkI4d3Ie3g4CdrXqqTexXX4PFT45CB0z5z2JUbaxgRwKNq7r5j2bLdVpZm+uvUGqxJw8d9vgbJQ==", + "requires": { + "babel-runtime": "6.x.x", + "create-react-context": "^0.2.1", + "popper.js": "^1.14.4", + "prop-types": "^15.6.1", + "typed-styles": "^0.0.5", + "warning": "^3.0.0" + } + }, + "@trendmicro/react-buttons": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@trendmicro/react-buttons/-/react-buttons-1.3.1.tgz", + "integrity": "sha512-9zvt/fdkqCb9kxUdZnvTZKmbmykM2wDQ3VEJFtztGcKAkm4Wkq4oZOQLJXKfUQ1vX3w+YDJob18LkNOzaHI1UQ==", + "requires": { + "classnames": "^2.2.5", + "prop-types": "^15.5.8" + } + }, + "@trendmicro/react-dropdown": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@trendmicro/react-dropdown/-/react-dropdown-1.3.0.tgz", + "integrity": "sha512-KwL0ksEZPay7qNsiGcPQ3aGmyfJCcUuIjiD9HZs6L66ScwSRoFkDlAjMTlRVLFcYVNhpuyUH4pPiFlKQQzDHGQ==", + "requires": { + "@trendmicro/react-buttons": "^1.3.0", + "chained-function": "^0.5.0", + "classnames": "^2.2.5", + "dom-helpers": "^3.3.1", + "prop-types": "^15.6.0", + "uncontrollable": "^5.0.0", + "warning": "^3.0.0" + }, + "dependencies": { + "uncontrollable": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-5.1.0.tgz", + "integrity": "sha512-5FXYaFANKaafg4IVZXUNtGyzsnYEvqlr9wQ3WpZxFpEUxl29A3H6Q4G1Dnnorvq9TGOGATBApWR4YpLAh+F5hw==", + "requires": { + "invariant": "^2.2.4" + } + } + } + }, "@types/anymatch": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz", @@ -1531,6 +1577,11 @@ } } }, + "bootstrap": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz", + "integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag==" + }, "boxen": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/boxen/-/boxen-1.3.0.tgz", @@ -1899,6 +1950,11 @@ "type-detect": "^4.0.5" } }, + "chained-function": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/chained-function/-/chained-function-0.5.0.tgz", + "integrity": "sha1-JWS73994AxlL6/daayvQQe3iOzo=" + }, "character-parser": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/character-parser/-/character-parser-2.2.0.tgz", @@ -3461,6 +3517,20 @@ "websocket-driver": ">=0.5.1" } }, + "fbjs": { + "version": "0.8.17", + "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz", + "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=", + "requires": { + "core-js": "^1.0.0", + "isomorphic-fetch": "^2.1.1", + "loose-envify": "^1.0.0", + "object-assign": "^4.1.0", + "promise": "^7.1.1", + "setimmediate": "^1.0.5", + "ua-parser-js": "^0.7.18" + } + }, "figgy-pudding": { "version": "3.5.1", "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz", @@ -3735,14 +3805,12 @@ "balanced-match": { "version": "1.0.0", "resolved": false, - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "optional": true + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" }, "brace-expansion": { "version": "1.1.11", "resolved": false, "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3762,8 +3830,7 @@ "concat-map": { "version": "0.0.1", "resolved": false, - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "optional": true + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" }, "console-control-strings": { "version": "1.1.0", @@ -3911,7 +3978,6 @@ "version": "3.0.4", "resolved": false, "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -4927,6 +4993,14 @@ "integrity": "sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==", "dev": true }, + "invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "invert-kv": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz", @@ -5440,6 +5514,11 @@ "resolved": "https://registry.npmjs.org/kareem/-/kareem-2.3.0.tgz", "integrity": "sha512-6hHxsp9e6zQU8nXsP+02HGWXwTkOEw6IROhF2ZA28cYbUk4eJ6QbtZvdqZOdD9YPKghG3apk5eOCvs+tLl3lRg==" }, + "keycode": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz", + "integrity": "sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ=" + }, "killable": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz", @@ -9983,6 +10062,11 @@ } } }, + "popper.js": { + "version": "1.14.7", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.7.tgz", + "integrity": "sha512-4q1hNvoUre/8srWsH7hnoSJ5xVmIL4qgz+s4qf2TnJIMyZFUFMGH+9vE7mXynAlHSZ/NdTmmow86muD0myUkVQ==" + }, "portfinder": { "version": "1.0.20", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz", @@ -10168,6 +10252,15 @@ "react-is": "^16.8.1" } }, + "prop-types-extra": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.0.tgz", + "integrity": "sha512-QFyuDxvMipmIVKD2TwxLVPzMnO4e5oOf1vr3tJIomL8E7d0lr6phTHd5nkPhFIzTD1idBLLEPeylL9g+rrTzRg==", + "requires": { + "react-is": "^16.3.2", + "warning": "^3.0.0" + } + }, "prosemirror-commands": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.0.7.tgz", @@ -10605,6 +10698,43 @@ "scheduler": "^0.13.4" } }, + "react-bootstrap": { + "version": "1.0.0-beta.5", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.0.0-beta.5.tgz", + "integrity": "sha512-Osm0OtTbYwfsT1rpu88ESWuAHZxfaHFNKFiW8w3w+6YY9/bLEPHbGRZA6W21fg5yvcuKN9hJKT857TTHgY7SoQ==", + "requires": { + "@babel/runtime": "^7.2.0", + "@react-bootstrap/react-popper": "1.2.1", + "classnames": "^2.2.6", + "dom-helpers": "^3.4.0", + "invariant": "^2.2.3", + "keycode": "^2.1.2", + "popper.js": "^1.14.6", + "prop-types": "^15.6.2", + "prop-types-extra": "^1.1.0", + "react-context-toolbox": "^2.0.2", + "react-overlays": "^1.0.0", + "react-prop-types": "^0.4.0", + "react-transition-group": "^2.5.1", + "uncontrollable": "^6.0.0", + "warning": "^4.0.1" + }, + "dependencies": { + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + } + } + }, + "react-bootstrap-dropdown-menu": { + "version": "1.1.15", + "resolved": "https://registry.npmjs.org/react-bootstrap-dropdown-menu/-/react-bootstrap-dropdown-menu-1.1.15.tgz", + "integrity": "sha512-o35fODF4GsNxEzmnRWZuoe29a6x3fXqRsLXOlAvS4d+TvO3yoLTM8iZnSZpJCkHQnjOOWRnGvDh5tryqJCKZ0w==" + }, "react-color": { "version": "2.17.0", "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.17.0.tgz", @@ -10618,6 +10748,11 @@ "tinycolor2": "^1.4.1" } }, + "react-context-toolbox": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/react-context-toolbox/-/react-context-toolbox-2.0.2.tgz", + "integrity": "sha512-tY4j0imkYC3n5ZlYSgFkaw7fmlCp3IoQQ6DxpqeNHzcD0hf+6V+/HeJxviLUZ1Rv1Yn3N3xyO2EhkkZwHn0m1A==" + }, "react-dimensions": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/react-dimensions/-/react-dimensions-1.3.1.tgz", @@ -10714,6 +10849,31 @@ "threads": "^0.8.0" } }, + "react-overlays": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-1.2.0.tgz", + "integrity": "sha512-i/FCV8wR6aRaI+Kz/dpJhOdyx+ah2tN1RhT9InPrexyC4uzf3N4bNayFTGtUeQVacj57j1Mqh1CwV60/5153Iw==", + "requires": { + "classnames": "^2.2.6", + "dom-helpers": "^3.4.0", + "prop-types": "^15.6.2", + "prop-types-extra": "^1.1.0", + "react-context-toolbox": "^2.0.2", + "react-popper": "^1.3.2", + "uncontrollable": "^6.0.0", + "warning": "^4.0.2" + }, + "dependencies": { + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + } + } + }, "react-pdf": { "version": "4.0.5", "resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-4.0.5.tgz", @@ -10791,6 +10951,51 @@ "resolved": "https://registry.npmjs.org/react-pointable/-/react-pointable-1.1.3.tgz", "integrity": "sha512-7skalWy38NLyKk1HcITmuloqCe2INPh69cFHbN7NcCn+Wfb0Ha4XGwGN0iVa4ZzqIHSqFRYOmV0loYNHrZ5/Sg==" }, + "react-popper": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.3.tgz", + "integrity": "sha512-ynMZBPkXONPc5K4P5yFWgZx5JGAUIP3pGGLNs58cfAPgK67olx7fmLp+AdpZ0+GoQ+ieFDa/z4cdV6u7sioH6w==", + "requires": { + "@babel/runtime": "^7.1.2", + "create-react-context": "<=0.2.2", + "popper.js": "^1.14.4", + "prop-types": "^15.6.1", + "typed-styles": "^0.0.7", + "warning": "^4.0.2" + }, + "dependencies": { + "create-react-context": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.2.tgz", + "integrity": "sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A==", + "requires": { + "fbjs": "^0.8.0", + "gud": "^1.0.0" + } + }, + "typed-styles": { + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz", + "integrity": "sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==" + }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + } + } + }, + "react-prop-types": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/react-prop-types/-/react-prop-types-0.4.0.tgz", + "integrity": "sha1-+ZsL+0AGkpya8gUefBQUpcdbk9A=", + "requires": { + "warning": "^3.0.0" + } + }, "react-rnd": { "version": "7.4.3", "resolved": "https://registry.npmjs.org/react-rnd/-/react-rnd-7.4.3.tgz", @@ -10800,6 +11005,15 @@ "react-draggable": "^3.0.5" } }, + "react-simple-dropdown": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/react-simple-dropdown/-/react-simple-dropdown-3.2.3.tgz", + "integrity": "sha512-NmyyvA0D4wph5ctzkn8U4wmblOacavJMl9gTOhQR3v8I997mc1FL1NFKkj3Mx+HNysBKRD/HI+kpxXCAgXumPw==", + "requires": { + "classnames": "^2.1.2", + "prop-types": "^15.5.8" + } + }, "react-split-pane": { "version": "0.1.85", "resolved": "https://registry.npmjs.org/react-split-pane/-/react-split-pane-0.1.85.tgz", @@ -12453,6 +12667,11 @@ "mime-types": "~2.1.18" } }, + "typed-styles": { + "version": "0.0.5", + "resolved": "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.5.tgz", + "integrity": "sha512-ht+rEe5UsdEBAa3gr64+QjUOqjOLJfWLvl5HZR5Ev9uo/OnD3p43wPeFSB1hNFc13GXQF/JU1Bn0YHLUqBRIlw==" + }, "typedarray": { "version": "0.0.6", "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", @@ -12526,6 +12745,14 @@ "random-bytes": "~1.0.0" } }, + "uncontrollable": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-6.1.0.tgz", + "integrity": "sha512-2TzEm0pLKauMBZfAZXsgQvLpZHEp95891frCZdGDrSG7dWYaIQhedwLAzi0X8pR8KHNqlmuYEb2cEgbQzr050A==", + "requires": { + "invariant": "^2.2.4" + } + }, "undefsafe": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.2.tgz", diff --git a/package.json b/package.json index 3bbaf72ad..3a1928632 100644 --- a/package.json +++ b/package.json @@ -35,9 +35,10 @@ "dependencies": { "@fortawesome/fontawesome-free-solid": "^5.0.13", "@fortawesome/fontawesome-svg-core": "^1.2.15", - "@hig/flyout": "^1.0.3", "@fortawesome/free-solid-svg-icons": "^5.7.2", "@fortawesome/react-fontawesome": "^0.1.4", + "@hig/flyout": "^1.0.3", + "@trendmicro/react-dropdown": "^1.3.0", "@types/bcrypt-nodejs": "0.0.30", "@types/bluebird": "^3.5.25", "@types/body-parser": "^1.17.0", @@ -78,6 +79,7 @@ "bcrypt-nodejs": "0.0.3", "bluebird": "^3.5.3", "body-parser": "^1.18.3", + "bootstrap": "^4.3.1", "connect-mongo": "^2.0.3", "express": "^4.16.4", "express-flash": "0.0.2", @@ -116,6 +118,8 @@ "pug": "^2.0.3", "raw-loader": "^1.0.0", "react": "^16.8.4", + "react-bootstrap": "^1.0.0-beta.5", + "react-bootstrap-dropdown-menu": "^1.1.15", "react-color": "^2.17.0", "react-dimensions": "^1.3.1", "react-dom": "^16.8.4", @@ -127,6 +131,7 @@ "react-pdf": "^4.0.2", "react-pdf-highlighter": "^2.1.2", "react-pdf-js": "^4.0.2", + "react-simple-dropdown": "^3.2.3", "react-split-pane": "^0.1.85", "react-table": "^6.9.2", "request": "^2.88.0", diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index dc62f97cf..1aa6d1936 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -10,8 +10,8 @@ import { DragManager } from "../util/DragManager"; import { LinkMenu } from "./nodes/LinkMenu"; import { ListField } from "../../fields/ListField"; const higflyout = require("@hig/flyout"); -const { anchorPoints } = higflyout; -const Flyout = higflyout.default; +export const { anchorPoints } = higflyout; +export const Flyout = higflyout.default; @observer export class DocumentDecorations extends React.Component { diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index d40e6d314..ab906cf4b 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -1,5 +1,65 @@ +//options menu styling +#schemaOptionsMenuBtn { + position: absolute; + height: 15px; + width: 15px; + border-radius: 50%; + z-index: 21; + right: 3px; + top: 3px; + pointer-events: auto; + background-color:red; +} + +.dd-item-containter:hover { + background-color: rgb(204, 204, 204); +} + +.dd-item { + color: black; + padding-left: 6px; + padding-bottom: 0px; + padding-top: 4px; + font-size: 12px; + margin: 0px; + display: block; + width: 100%; + height: 25px; + z-index: 100; +} +.dd-item:hover { + color: black; + font-weight: 500; +} + +.dropdown-menu { + height: 100px; + overflow-y: scroll; + } +#dropdown-basic-button { + background-color: #fff; + border: .75px solid #bbbbbb; + border-radius: 0; + -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + margin:10px; + margin-top: 8px; + color: black; + display: inline-block; + width: 160px; + height: 25px; + font-size: 15px; + padding: 0px; + border-radius: 3px; + font-size: 12px; + } + #options-flyout-div { + text-align: center; + padding:0px; + } + .collectionSchemaView-container { border-style: solid; box-sizing: border-box; @@ -14,11 +74,11 @@ } .collectionSchemaView-previewHandle { position: absolute; - height: 37px; - width: 20px; + height: 15px; + width: 15px; z-index: 20; right: 0; - top: 0; + top: 20px; background: Black ; } .collectionSchemaView-dividerDragger{ diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 04f017378..7c87ef744 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -1,4 +1,4 @@ -import React = require("react") +import React = require("react"); import { action, observable } from "mobx"; import { observer } from "mobx-react"; import Measure from "react-measure"; @@ -17,6 +17,16 @@ import "./CollectionSchemaView.scss"; import { COLLECTION_BORDER_WIDTH } from "./CollectionView"; import { CollectionViewBase } from "./CollectionViewBase"; import { setupDrag } from "../../util/DragManager"; +import '../DocumentDecorations.scss'; +import { Flyout, anchorPoints } from "../DocumentDecorations"; +import { DropdownButton, Dropdown } from 'react-bootstrap'; +import { ListField } from "../../../fields/ListField"; +import { Key } from "../../../fields/Key"; +//import { Server } from "http"; +//import { Server } from "http"; +import { Server } from "../../Server"; + +//import { MenuItem } from 'react-bootstrap'; // bcz: need to add drag and drop of rows and columns. This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657 @@ -178,6 +188,19 @@ export class CollectionSchemaView extends CollectionViewBase { focusDocument = (doc: Document) => { } + keyDropDownOnSelect = (keyId: string) => { + const columns = this.props.Document.GetList(KeyStore.ColumnsKey, [KeyStore.Title, KeyStore.Data, KeyStore.Author]); + const listOfFields = this.props.Document.GetList(this.props.fieldKey, [])[1].fields; + if (listOfFields.has(keyId)) { + let index = columns.push(listOfFields!.get(keyId)!.key); + this.props.Document.SetData(KeyStore.ColumnsKey, columns, ListField); + } + } + + dropdownItemOnPointerDown = (e: React.PointerEvent): void => { + //(e.currentTarget.children[0] as Dropdown.Item ).onSelect(); + } + render() { const columns = this.props.Document.GetList(KeyStore.ColumnsKey, [KeyStore.Title, KeyStore.Data, KeyStore.Author]) const children = this.props.Document.GetList(this.props.fieldKey, []); @@ -205,6 +228,47 @@ export class CollectionSchemaView extends CollectionViewBase {
); let dividerDragger = this._splitPercentage == 100 ? (null) :
+ + //get the union of all childrens' keys + let addFields: { id: string, name: string }[] = []; + let removeFields: { id: string, name: string }[] = []; + //children.forEach((child) => { + // for (var keyId in fields.keys) { + // if (!allFields.includes(keyId)) { + // allFields.push(keyId); + // } + // } + // }); + let optionsMenu = null; + if (this.props.active()) { + let protos = this.props.Document.GetAllPrototypes(); + for (const proto of protos) { + proto._proxies.forEach((val, key) => { + if (!(key in addFields.keys)) { + let this_name: string = proto.fields!.get(key)!.key.Name; + addFields.push({ id: key, name: this_name }); + } + }) + } + optionsMenu = !this.props.active() ? (null) : (
Options
+ + {addFields.map(({ id, name }) => ( +
{name}
))} + + + {addFields.map(({ id, name }) => ( +
{name}
))} + +
+ }> +
+ ); + } + + + return (
this.onDrop(e, {})} ref={this.createDropTarget}> @@ -239,6 +303,8 @@ export class CollectionSchemaView extends CollectionViewBase { {content}
{previewHandle} + {optionsMenu} +
) -- cgit v1.2.3-70-g09d2 From f2fa6d6d28f2011a13f9034f5685b08301c291e4 Mon Sep 17 00:00:00 2001 From: laurawilsonri Date: Tue, 19 Mar 2019 16:48:10 -0400 Subject: ui much better --- src/client/views/Main.tsx | 1 + .../views/collections/CollectionSchemaView.scss | 87 ++++++------- .../views/collections/CollectionSchemaView.tsx | 143 ++++++--------------- 3 files changed, 77 insertions(+), 154 deletions(-) (limited to 'src/client/views/collections/CollectionSchemaView.scss') diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 26a07fdfe..a6b893eca 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -78,6 +78,7 @@ export class Main extends React.Component { library.add(faFilm); library.add(faMusic); + this.initEventListeners(); Documents.initProtos(() => { this.initAuthenticationRouters(); diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index d16f0edf9..8c2f62d43 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -1,66 +1,57 @@ +@import "../global_variables"; + //options menu styling #schemaOptionsMenuBtn { position: absolute; - height: 15px; - width: 15px; + height: 20px; + width: 20px; border-radius: 50%; z-index: 21; - right: 3px; - top: 3px; + right: 4px; + top: 4px; pointer-events: auto; - background-color:red; -} - -.dd-item-containter:hover { - background-color: rgb(204, 204, 204); + background-color:black; + display:inline-block; + padding: 0px; + font-size: 100%; } - -.dd-item { - color: black; - padding-left: 6px; - padding-bottom: 0px; - padding-top: 4px; - font-size: 12px; +#schema-options-header { + text-align: center; + padding: 0px; margin: 0px; - display: block; - width: 100%; - height: 25px; - z-index: 100; } -.dd-item:hover { - color: black; - font-weight: 500; +.schema-options-subHeader { + color: $intermediate-color; + margin-bottom: 5px; +} +#schemaOptionsMenuBtn:hover { + transform: scale(1.15); } -.dropdown-menu { - height: 100px; - overflow-y: scroll; - } - -#dropdown-basic-button { - background-color: #fff; - border: .75px solid #bbbbbb; - border-radius: 0; - -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); - margin:10px; - margin-top: 8px; - color: black; - display: inline-block; - width: 160px; - height: 25px; - font-size: 15px; - padding: 0px; - border-radius: 3px; - font-size: 12px; - } +#preview-schema-checkbox-div { + margin-left: 20px; + font-size: 11px; +} #options-flyout-div { - text-align: center; + text-align: left; padding:0px; + z-index: 100; + font-family: $sans-serif; + padding-left: 5px; + } + + #schema-col-checklist { + overflow: scroll; + text-align: left; + //background-color: $light-color-secondary; + line-height: 25px; + max-height: 175px; + font-family: $sans-serif; + font-size: 12px; } -@import "../global_variables"; + .collectionSchemaView-container { border: 1px solid $intermediate-color; border-radius: $border-radius; @@ -68,7 +59,7 @@ position: absolute; width: 100%; height: 100%; - overflow: hidden; + .collectionSchemaView-content { position: absolute; height: 100%; diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index da38d54c4..07b4d150a 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -19,10 +19,12 @@ import { CollectionViewBase } from "./CollectionViewBase"; import { setupDrag } from "../../util/DragManager"; import '../DocumentDecorations.scss'; import { Flyout, anchorPoints } from "../DocumentDecorations"; -import { DropdownButton, Dropdown } from 'react-bootstrap'; import { ListField } from "../../../fields/ListField"; import { Key } from "../../../fields/Key"; import { Server } from "../../Server"; +import { library } from '@fortawesome/fontawesome-svg-core'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faCog } from '@fortawesome/free-solid-svg-icons'; // bcz: need to add drag and drop of rows and columns. This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657 @@ -44,7 +46,7 @@ class KeyToggle extends React.Component<{ keyId: string, checked: boolean, toggl render() { if (this.key) { return (
- this.key && this.props.toggle(this.key)} />{this.key.Name} + this.key && this.props.toggle(this.key)} /> {this.key.Name}
) } else { return
@@ -66,6 +68,7 @@ export class CollectionSchemaView extends CollectionViewBase { @observable _columnsPercentage = 0; @computed get splitPercentage() { return this.props.Document.GetNumber(KeyStore.SchemaSplitPercentage, 0); } + renderCell = (rowProps: CellInfo) => { let props: FieldViewProps = { doc: rowProps.value[0], @@ -156,6 +159,15 @@ export class CollectionSchemaView extends CollectionViewBase { }) } + //toggles preview side-panel of schema + @action + toggleExpander = (event: React.ChangeEvent) => { + this._startSplitPercent = this.splitPercentage; + if (this._startSplitPercent == this.splitPercentage) { + this.props.Document.SetNumber(KeyStore.SchemaSplitPercentage, this.splitPercentage == 0 ? 33 : 0); + } + } + @observable keys: Key[] = []; findAllDocumentKeys = (): { [id: string]: boolean } => { @@ -220,37 +232,6 @@ export class CollectionSchemaView extends CollectionViewBase { e.stopPropagation(); e.preventDefault(); } - @action - onExpanderUp = (e: PointerEvent): void => { - e.stopPropagation(); - 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); - document.addEventListener('pointerup', this.onExpanderUp); - } - - onPointerDown = (e: React.PointerEvent) => { - // if (e.button === 2 && this.active) { - // e.stopPropagation(); - // e.preventDefault(); - // } else - { - // if (e.buttons === 1) { - // if (this.props.isSelected()) { - // e.stopPropagation(); - // } - // } - } - } @action onColumnsMove = (e: PointerEvent): void => { @@ -291,23 +272,16 @@ export class CollectionSchemaView extends CollectionViewBase { focusDocument = (doc: Document) => { } - keyDropDownOnSelect = (keyId: string) => { - const columns = this.props.Document.GetList(KeyStore.ColumnsKey, [KeyStore.Title, KeyStore.Data, KeyStore.Author]); - const listOfFields = this.props.Document.GetList(this.props.fieldKey, [])[1].fields; - if (listOfFields.has(keyId)) { - let index = columns.push(listOfFields!.get(keyId)!.key); - this.props.Document.SetData(KeyStore.ColumnsKey, columns, ListField); - } - } - - dropdownItemOnPointerDown = (e: React.PointerEvent): void => { - //(e.currentTarget.children[0] as Dropdown.Item ).onSelect(); + onPointerDown = (e: React.PointerEvent): void => { + // } render() { + library.add(faCog); const columns = this.columns; const children = this.props.Document.GetList(this.props.fieldKey, []); const selected = children.length > this._selectedIndex ? children[this._selectedIndex] : undefined; + //all the keys/columns that will be displayed in the schema const allKeys = this.findAllDocumentKeys(); let content = this._selectedIndex == -1 || !selected ? (null) : ( @@ -328,53 +302,28 @@ export class CollectionSchemaView extends CollectionViewBase { } ) - let previewHandle = !this.props.active() ? (null) : ( -
); - let columnsHandle = !this.props.active() ? (null) : ( -
); let dividerDragger = this.splitPercentage == 0 ? (null) :
- //get the union of all childrens' keys - let addFields: { id: string, name: string }[] = []; - let removeFields: { id: string, name: string }[] = []; - let optionsMenu = null; - if (this.props.active()) { - let protos = this.props.Document.GetAllPrototypes(); - for (const proto of protos) { - proto._proxies.forEach((val, key) => { - if (!(key in addFields.keys)) { - let this_name: string = proto.fields!.get(key)!.key.Name; - addFields.push({ id: key, name: this_name }); - } - }) - } - /* - {addFields.map(({ id, name }) => ( -
{name}
))} - - - {addFields.map(({ id, name }) => ( -
{name}
))} - */ - optionsMenu = !this.props.active() ? (null) : (
Options
-
-
    - {Array.from(Object.keys(allKeys)).map(item => { - return () - })} -
-
+ //options button and menu + let optionsMenu = !this.props.active() ? (null) : ( +
Options
+
+
Preview Window
+
Show Preview
+
Displayed Columns
+
    + {Array.from(Object.keys(allKeys)).map(item => { + return () + })} +
- }> -
- ); - } - - let colDividerDragger = this._columnsPercentage == 0 ? (null) : -
+
+ }> + + ); return (
@@ -412,27 +361,9 @@ export class CollectionSchemaView extends CollectionViewBase {
{content}
- {previewHandle} - - {columnsHandle} {optionsMenu}
) } -} -/* -{colDividerDragger} -
- {/* - } - -
-
    - {Array.from(Object.keys(allKeys)).map(item => { - return () - })} -
-
-
- */ \ No newline at end of file +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 0d430943b0bab1d63f014aaa3ddf3460785c640e Mon Sep 17 00:00:00 2001 From: laurawilsonri Date: Tue, 19 Mar 2019 18:12:07 -0400 Subject: changed font size --- src/client/views/collections/CollectionSchemaView.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (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 8c2f62d43..c3a2e88ac 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -30,7 +30,7 @@ #preview-schema-checkbox-div { margin-left: 20px; - font-size: 11px; + font-size: 12px; } #options-flyout-div { -- cgit v1.2.3-70-g09d2