From d7a3ba60aa2e9363eb1f9ad8ac2245395e2c6b70 Mon Sep 17 00:00:00 2001 From: Jude Date: Sat, 9 Mar 2019 11:41:50 -0500 Subject: minor improvements --- .../views/collections/CollectionFreeFormView.scss | 97 ++++++++++++---------- 1 file changed, 53 insertions(+), 44 deletions(-) (limited to 'src/client/views/collections/CollectionFreeFormView.scss') diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss index b059163ed..4d0619c54 100644 --- a/src/client/views/collections/CollectionFreeFormView.scss +++ b/src/client/views/collections/CollectionFreeFormView.scss @@ -1,68 +1,77 @@ +@import "../global_variables"; + .collectionfreeformview-container { + .collectionfreeformview > .jsx-parser { + position: absolute; + height: 100%; + width: 100%; + } - .collectionfreeformview > .jsx-parser{ - position:absolute; - height: 100%; - width: 100%; - } - - border-style: solid; - box-sizing: border-box; - position: relative; + border-style: solid; + box-sizing: border-box; + position: relative; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; + .collectionfreeformview { + position: absolute; top: 0; left: 0; width: 100%; height: 100%; - overflow: hidden; - .collectionfreeformview { - position: absolute; - top: 0; - left: 0; - width:100%; - height: 100%; - } + } } .collectionfreeformview-overlay { + .collectionfreeformview > .jsx-parser { + position: absolute; + height: 100%; + } + .formattedTextBox-cont { + background: $light-color-secondary; + } - .collectionfreeformview > .jsx-parser{ - position:absolute; - height: 100%; - } - .formattedTextBox-cont { - background:yellow; - } - - border-style: solid; - box-sizing: border-box; + border-style: solid; + border-radius: $border-radius; + box-sizing: border-box; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; + .collectionfreeformview { position: absolute; top: 0; left: 0; width: 100%; height: 100%; - overflow: hidden; - .collectionfreeformview { - position: absolute; - top: 0; - left: 0; - width:100%; - height: 100%; - } + } } +// selection border...? .border { - border-style: solid; - box-sizing: border-box; - width: 100%; - height: 100%; + border-style: solid; + box-sizing: border-box; + width: 98%; + height: 98%; + border-radius: $border-radius; } //this is an animation for the blinking cursor! @keyframes blink { - 0% {opacity: 0} - 49%{opacity: 0} - 50% {opacity: 1} + 0% { + opacity: 0; + } + 49% { + opacity: 0; + } + 50% { + opacity: 1; + } } #prevCursor { - animation: blink 1s infinite; -} \ No newline at end of file + animation: blink 1s infinite; +} -- cgit v1.2.3-70-g09d2 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 --- src/client/views/ContextMenu.scss | 6 +- src/client/views/DocumentDecorations.scss | 6 +- src/client/views/DocumentDecorations.tsx | 9 +- src/client/views/InkingControl.tsx | 2 +- src/client/views/Main.scss | 15 +- src/client/views/Main.tsx | 2 + src/client/views/_global_variables.scss | 3 +- .../views/collections/CollectionFreeFormView.scss | 13 +- .../views/collections/CollectionSchemaView.scss | 357 ++++++++++----------- src/client/views/nodes/DocumentView.scss | 42 +-- src/client/views/nodes/FieldTextBox.scss | 14 +- src/client/views/nodes/FormattedTextBox.scss | 4 +- 12 files changed, 248 insertions(+), 225 deletions(-) (limited to 'src/client/views/collections/CollectionFreeFormView.scss') diff --git a/src/client/views/ContextMenu.scss b/src/client/views/ContextMenu.scss index ecb3cc8c8..3565a929a 100644 --- a/src/client/views/ContextMenu.scss +++ b/src/client/views/ContextMenu.scss @@ -3,7 +3,7 @@ position: absolute; display: flex; z-index: 1000; - box-shadow: #aaaaaa 0.2vw 0.2vw 0.4vw; + box-shadow: $intermediate-color 0.2vw 0.2vw 0.4vw; flex-direction: column; } @@ -23,7 +23,7 @@ transition: all 0.1s; border-width: 0.11px; border-style: none; - border-color: #aaaaaa; + border-color: $intermediate-color; border-bottom-style: solid; padding: 10px; white-space: nowrap; @@ -32,7 +32,7 @@ .contextMenu-item:hover { transition: all 0.1s; - background: $alt-accent; + background: $lighter-alt-accent; } .contextMenu-description { diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss index dc8c3a0cc..722980019 100644 --- a/src/client/views/DocumentDecorations.scss +++ b/src/client/views/DocumentDecorations.scss @@ -3,8 +3,8 @@ position: absolute; display: grid; z-index: 1000; - grid-template-rows: 10px 1fr 10px; - grid-template-columns: 10px 1fr 10px; + grid-template-rows: 8px 1fr 8px; + grid-template-columns: 8px 1fr 8px; pointer-events: none; #documentDecorations-centerCont { background: none; @@ -12,7 +12,7 @@ .documentDecorations-resizer { pointer-events: auto; background: $alt-accent; - opacity: 0.4; + opacity: 0.8; } #documentDecorations-topLeftResizer, #documentDecorations-bottomRightResizer { diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 36395ed0d..406d6a234 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -11,6 +11,7 @@ export class DocumentDecorations extends React.Component { static Instance: DocumentDecorations private _resizer = "" private _isPointerDown = false; + private _resizeBorderWidth = 16; @observable private _hidden = false; constructor(props: Readonly<{}>) { @@ -149,10 +150,10 @@ export class DocumentDecorations extends React.Component { } return (
e.preventDefault()}>
e.preventDefault()}>
diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx index 929fb42a1..fc6a266e4 100644 --- a/src/client/views/InkingControl.tsx +++ b/src/client/views/InkingControl.tsx @@ -49,7 +49,7 @@ export class InkingControl extends React.Component { selected = (tool: InkTool) => { if (this._selectedTool === tool) { - return { backgroundColor: "black", color: "white" } + return { backgroundColor: "#61aaa3", color: "white" } } return {} } diff --git a/src/client/views/Main.scss b/src/client/views/Main.scss index 89a9e1bd1..3e2ab6ff7 100644 --- a/src/client/views/Main.scss +++ b/src/client/views/Main.scss @@ -10,6 +10,16 @@ body { margin: 0; } +#dash-title { + position: absolute; + right: 46.5%; + letter-spacing: 3px; + top: 9px; + font-size: 12px; + color: $alt-accent; + z-index: 9999; +} + h1 { font-size: 50px; position: fixed; @@ -65,7 +75,7 @@ button:hover { .clear-db-button { position: absolute; - left: 47%; + right: 45%; bottom: 1em; font-size: 50%; } @@ -119,7 +129,7 @@ button:hover { height: 36px; margin-right: 10px; cursor: pointer; - transition: transform 0.5s; + transition: transform 0.2s; } label p { padding-left: 10.5px; @@ -127,6 +137,7 @@ button:hover { } label:hover { background: $main-accent; + transform: scale(1.15); } input { display: none; diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx index 38a3d4b69..1caaa1cba 100644 --- a/src/client/views/Main.tsx +++ b/src/client/views/Main.tsx @@ -100,6 +100,8 @@ Documents.initProtos(mainDocId, (res?: Document) => { ReactDOM.render((
+
— DASH —
+ Transform.Identity} ContentScaling={() => 1} diff --git a/src/client/views/_global_variables.scss b/src/client/views/_global_variables.scss index c91000bf0..333fb3122 100644 --- a/src/client/views/_global_variables.scss +++ b/src/client/views/_global_variables.scss @@ -4,7 +4,8 @@ $light-color: #fcfbf7; $light-color-secondary: rgb(241, 239, 235); $main-accent: #61aaa3; -$alt-accent: #afcbff; +$alt-accent: #cdd5ec; +$lighter-alt-accent: rgb(207, 220, 240); $intermediate-color: #9c9396; $dark-color: #121721; diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss index 4d0619c54..90caa0d14 100644 --- a/src/client/views/collections/CollectionFreeFormView.scss +++ b/src/client/views/collections/CollectionFreeFormView.scss @@ -7,7 +7,15 @@ width: 100%; } - border-style: solid; + //nested freeform views + .collectionfreeformview-container { + background-image: linear-gradient(to right, $light-color-secondary 1px, transparent 1px), + linear-gradient(to bottom, $light-color-secondary 1px, transparent 1px); + background-size: 30px 30px; + } + + border: 0px solid $light-color-secondary; + border-radius: $border-radius; box-sizing: border-box; position: relative; top: 0; @@ -15,6 +23,7 @@ width: 100%; height: 100%; overflow: hidden; + box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw; .collectionfreeformview { position: absolute; top: 0; @@ -32,7 +41,7 @@ background: $light-color-secondary; } - border-style: solid; + border: 0px solid $intermediate-color; 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 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; +} diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss index 5797fde45..85a115f1c 100644 --- a/src/client/views/nodes/DocumentView.scss +++ b/src/client/views/nodes/DocumentView.scss @@ -1,23 +1,23 @@ @import "../global_variables"; .documentView-node { - position: absolute; - background: $light-color; //overflow: hidden; - &.minimized { - width: 30px; - height: 30px; - } - .top { - background: #232323; - height: 20px; - cursor: pointer; - } - .content { - padding: 20px 20px; - height: auto; - box-sizing: border-box; - } - .scroll-box { - overflow-y: scroll; - height: calc(100% - 20px); - } -} \ No newline at end of file + position: absolute; + background: $light-color; //overflow: hidden; + &.minimized { + width: 30px; + height: 30px; + } + .top { + background: #232323; + height: 20px; + cursor: pointer; + } + .content { + padding: 20px 20px; + height: auto; + box-sizing: border-box; + } + .scroll-box { + overflow-y: scroll; + height: calc(100% - 20px); + } +} diff --git a/src/client/views/nodes/FieldTextBox.scss b/src/client/views/nodes/FieldTextBox.scss index b6ce2fabc..d2cd61b0d 100644 --- a/src/client/views/nodes/FieldTextBox.scss +++ b/src/client/views/nodes/FieldTextBox.scss @@ -1,14 +1,14 @@ .ProseMirror { - margin-top: -1em; - width: 100%; - height: 100%; + margin-top: -1em; + width: 100%; + height: 100%; } .ProseMirror:focus { - outline: none !important + outline: none !important; } .fieldTextBox-cont { - background: white; - padding: 1vw; -} \ No newline at end of file + background: white; + padding: 1vw; +} diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss index 1b10cfff7..32da2632e 100644 --- a/src/client/views/nodes/FormattedTextBox.scss +++ b/src/client/views/nodes/FormattedTextBox.scss @@ -12,8 +12,8 @@ .formattedTextBox-cont { background: $light-color-secondary; - padding: 0.7em; - border-width: 1px; + padding: 0.9em; + border-width: 0px; border-radius: $border-radius; border-color: $intermediate-color; box-sizing: border-box; -- 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/CollectionFreeFormView.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 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/CollectionFreeFormView.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 8aeb0c98eb9291ffbfd70cc9dd6541c8e06e7fcd Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 14 Mar 2019 01:03:49 -0400 Subject: from last --- src/client/views/collections/CollectionFreeFormView.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/client/views/collections/CollectionFreeFormView.scss') diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss index c382cf30c..87d685716 100644 --- a/src/client/views/collections/CollectionFreeFormView.scss +++ b/src/client/views/collections/CollectionFreeFormView.scss @@ -60,7 +60,7 @@ border-style: solid; box-sizing: border-box; - position: absolute; + position: static; top: 0; left: 0; width: 100%; -- cgit v1.2.3-70-g09d2 From 0eca487586cb52f8d729479f50f9f8d40484998d Mon Sep 17 00:00:00 2001 From: bob Date: Thu, 14 Mar 2019 10:34:12 -0400 Subject: fixed video controls layout --- src/client/views/collections/CollectionFreeFormView.scss | 1 + src/client/views/collections/CollectionPDFView.scss | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) (limited to 'src/client/views/collections/CollectionFreeFormView.scss') diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss index 2ec0dc371..a00c01898 100644 --- a/src/client/views/collections/CollectionFreeFormView.scss +++ b/src/client/views/collections/CollectionFreeFormView.scss @@ -41,6 +41,7 @@ background: $light-color-secondary; } + position:absolute; border: 0px solid transparent; border-radius: $border-radius; box-sizing: border-box; diff --git a/src/client/views/collections/CollectionPDFView.scss b/src/client/views/collections/CollectionPDFView.scss index cc1402498..107f9bbbe 100644 --- a/src/client/views/collections/CollectionPDFView.scss +++ b/src/client/views/collections/CollectionPDFView.scss @@ -20,7 +20,7 @@ .collectionPdfView-forward { color : white; top :0px; - left : 25px; + left : 35px; position: absolute; background-color: rgba(50, 50, 50, 0.2); } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 914114aaffbbd492f68c5e580acf6a28f43dc2c7 Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 15 Mar 2019 18:14:28 -0400 Subject: fixed freeformview background --- src/client/views/_global_variables.scss | 2 +- src/client/views/collections/CollectionFreeFormView.scss | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) (limited to 'src/client/views/collections/CollectionFreeFormView.scss') diff --git a/src/client/views/_global_variables.scss b/src/client/views/_global_variables.scss index b448d43f0..44a819b79 100644 --- a/src/client/views/_global_variables.scss +++ b/src/client/views/_global_variables.scss @@ -5,7 +5,7 @@ $light-color-secondary: rgb(241, 239, 235); $main-accent: #61aaa3; // $alt-accent: #cdd5ec; // $alt-accent: #cdeceb; -$alt-accent: #f9e1db; +$alt-accent: #59dff7; $lighter-alt-accent: rgb(207, 220, 240); $intermediate-color: #9c9396; $dark-color: #121721; diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss index a00c01898..9c7a03b52 100644 --- a/src/client/views/collections/CollectionFreeFormView.scss +++ b/src/client/views/collections/CollectionFreeFormView.scss @@ -9,9 +9,9 @@ //nested freeform views .collectionfreeformview-container { - background-image: linear-gradient(to right, $light-color-secondary 1px, transparent 1px), - linear-gradient(to bottom, $light-color-secondary 1px, transparent 1px); - background-size: 30px 30px; + // background-image: linear-gradient(to right, $light-color-secondary 1px, transparent 1px), + // linear-gradient(to bottom, $light-color-secondary 1px, transparent 1px); + // background-size: 30px 30px; } border: 0px solid $light-color-secondary; @@ -44,14 +44,13 @@ position:absolute; border: 0px solid transparent; border-radius: $border-radius; + overflow: hidden; box-sizing: border-box; top: 0; left: 0; width: 100%; height: 100%; - overflow: hidden; .collectionfreeformview { - overflow: hidden; .collectionfreeformview > .jsx-parser{ position:absolute; height: 100%; @@ -60,8 +59,9 @@ background:yellow; } - border-style: solid; - box-sizing: border-box; + // overflow: hidden; + // border-style: solid; + // box-sizing: border-box; position: absolute; top: 0; left: 0; -- cgit v1.2.3-70-g09d2