From 5cc576d424fc25cb9a2573914de6438c723245cf Mon Sep 17 00:00:00 2001 From: ljungster Date: Thu, 21 Apr 2022 09:48:56 -0400 Subject: committing to mess around with styles --- .../collections/CollectionNoteTakingView.scss | 541 +++++++++++++++++++++ 1 file changed, 541 insertions(+) create mode 100644 src/client/views/collections/CollectionNoteTakingView.scss (limited to 'src/client/views/collections/CollectionNoteTakingView.scss') diff --git a/src/client/views/collections/CollectionNoteTakingView.scss b/src/client/views/collections/CollectionNoteTakingView.scss new file mode 100644 index 000000000..b6bb8ce2b --- /dev/null +++ b/src/client/views/collections/CollectionNoteTakingView.scss @@ -0,0 +1,541 @@ +@import "../global/globalCssVariables"; + +.collectionNoteTakingView-DocumentButtons { + display: flex; + justify-content: space-between; + margin: auto; +} + +.collectionNoteTakingView-addDocumentButton { + display: flex; + overflow: hidden; + margin: auto; + width: 100%; + overflow: ellipses; + + .editableView-container-editing-oneLine, + .editableView-container-editing { + color: grey; + padding: 10px; + width: 100%; + } + + .editableView-input:hover, + .editableView-container-editing:hover, + .editableView-container-editing-oneLine:hover { + cursor: text + } + + .editableView-input { + outline-color: black; + letter-spacing: 2px; + color: grey; + border: 0px; + padding: 12px 10px 11px 10px; + } + + font-size: 75%; + letter-spacing: 2px; + cursor: pointer; + + .editableView-input { + outline-color: black; + letter-spacing: 2px; + color: grey; + border: 0px; + padding: 12px 10px 11px 10px; + } +} + +.collectionMasonryView { + display: inline; +} + +.collectionStackingView { + display: flex; +} + +.collectionStackingMasonry-cont { + position: relative; + height: 100%; + width: 100%; +} + +// TODO:glr Turn this into a seperate class +.documentButtonMenu { + position: relative; + height: fit-content; + border-bottom: $standard-border; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + align-content: center; + padding: 5px 0 5px 0; + + .documentExplanation { + width: 90%; + margin: 5px; + font-size: 11px; + background-color: $light-blue; + color: $medium-blue; + padding: 10px; + border-radius: 10px; + border: solid 2px $medium-blue; + } +} + +.collectionStackingView, +.collectionMasonryView { + height: 100%; + width: 100%; + position: absolute; + top: 0; + overflow-y: auto; + overflow-x: hidden; + flex-wrap: wrap; + transition: top .5s; + + >div { + position: relative; + display: block; + } + + .collectionStackingViewFieldColumn { + height: max-content; + } + + .collectionStackingViewFieldColumnDragging { + height: 100%; + } + + .collectionSchemaView-previewDoc { + height: 100%; + position: absolute; + } + + .collectionStackingView-docView-container { + width: 45%; + margin: 5% 2.5%; + padding-left: 2.5%; + height: auto; + } + + .collectionStackingView-flexCont { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: center; + } + + .collectionStackingView-masonrySingle, + .collectionStackingView-masonryGrid { + width: 100%; + display: grid; + top: 0; + left: 0; + } + + .collectionStackingView-masonrySingle { + height: 100%; + position: absolute; + } + + .collectionStackingView-masonryGrid { + margin: auto; + height: max-content; + position: relative; + grid-auto-rows: 0px; + } + + .collectionStackingView-masonrySingle { + width: 100%; + height: 100%; + position: absolute; + display: flex; + flex-direction: column; + top: 0; + left: 0; + width: 100%; + position: absolute; + } + + .collectionStackingView-description { + font-size: 100%; + margin-bottom: 1vw; + padding: 10px; + height: 2vw; + width: 100%; + font-family: $sans-serif; + background: $dark-gray; + color: $white; + } + + .collectionStackingView-columnDragger { + width: 15; + height: 15; + position: absolute; + margin-left: -5; + } + + // Documents in stacking view + .collectionStackingView-columnDoc { + display: flex; + // margin: auto; // Removed auto so that it is no longer center aligned - this could be something we change + position: relative; + + &:hover { + .hoverButtons{ + opacity: 1; + } + } + + .hoverButtons { + display: flex; + opacity: 0; + position: absolute; + height: 100%; + left: -35px; + justify-content: center; + align-items: center; + padding: 0px 10px; + + .buttonWrapper { + padding: 3px; + border-radius: 3px; + + &:hover { + background: rgba(0, 0, 0, 0.26); + } + } + } + } + + .collectionStackingView-masonryDoc { + transform-origin: top left; + grid-column-end: span 1; + height: 100%; + margin: auto; + display: inline-grid; + } + + .collectionStackingView-masonrySection { + margin: auto; + } + + .collectionStackingView-collapseBar { + margin-left: 2px; + margin-right: 2px; + margin-top: 2px; + background: $medium-gray; + height: 5px; + + &.active { + margin-left: 0; + margin-right: 0; + background: red; + } + } + + .collectionStackingView-miniHeader { + width: 100%; + + .editableView-container-editing-oneLine { + min-height: 20px; + display: flex; + align-items: center; + flex-direction: row; + } + + span::before, + span::after { + content: ""; + width: 50%; + border-top: dashed gray 1px; + position: relative; + display: inline-block; + } + + span::before { + margin-right: 10px; + } + + span::after { + margin-left: 10px; + } + + span { + position: relative; + text-align: center; + white-space: nowrap; + overflow: visible; + width: 100%; + display: flex; + color: gray; + align-items: center; + } + } + + .collectionStackingView-sectionHeader { + text-align: center; + margin: auto; + margin-bottom: 10px; + background: $medium-gray; + // overflow: hidden; overflow is visible so the color menu isn't hidden -ftong + + .editableView-input { + color: $dark-gray; + } + + .editableView-input:hover, + .editableView-container-editing:hover, + .editableView-container-editing-oneLine:hover { + cursor: text + } + + .collectionStackingView-sectionHeader-subCont { + outline: none; + border: 0px; + width: 100%; + letter-spacing: 2px; + font-size: 75%; + transition: transform 0.2s; + position: relative; + height: 30px; + display: flex; + align-items: center; + justify-content: center; + color: $dark-gray; + + .editableView-container-editing-oneLine, + .editableView-container-editing { + color: grey; + padding: 10px; + } + + .editableView-input:hover, + .editableView-container-editing:hover, + .editableView-container-editing-oneLine:hover { + cursor: text; + } + + .editableView-input { + padding: 12px 10px 11px 10px; + border: 0px; + color: grey; + text-align: center; + letter-spacing: 2px; + outline-color: black; + } + } + + .collectionStackingView-sectionColor { + position: absolute; + left: 0; + top: 0; + height: 100%; + display: none; + + [class*="css"] { + max-width: 102px; + } + + .collectionStackingView-sectionColorButton { + height: 30px; + display: inherit; + } + + .collectionStackingView-colorPicker { + width: 78px; + z-index: 10; + position: relative; + background: white; + + .colorOptions { + display: flex; + flex-wrap: wrap; + } + + .colorPicker { + cursor: pointer; + width: 20px; + height: 20px; + border-radius: 10px; + margin: 3px; + + &.active { + border: 2px solid white; + box-shadow: 0 0 0 2px lightgray; + } + } + } + } + + .collectionStackingView-sectionOptions { + position: absolute; + right: 0; + top: 0; + height: 100%; + display: none; + + [class*="css"] { + max-width: 102px; + } + + .collectionStackingView-sectionOptionButton { + height: 30px; + } + + .collectionStackingView-optionPicker { + + .optionOptions { + display: inline; + } + + .optionPicker { + cursor: pointer; + height: 20px; + border-radius: 10px; + margin: 3px; + width: max-content; + + &.active { + color: red; + } + } + } + } + + .collectionStackingView-sectionDelete { + position: absolute; + right: 25px; + top: 0; + height: 100%; + display: none; + } + } + + .collectionStackingView-sectionHeader:hover { + .collectionStackingView-sectionColor { + display: unset; + } + + .collectionStackingView-sectionOptions { + display: unset; + } + + .collectionStackingView-sectionDelete { + display: unset; + } + } + + .collectionStackingView-addDocumentButton, + .collectionStackingView-addGroupButton { + display: flex; + overflow: hidden; + margin: auto; + width: 90%; + overflow: ellipses; + + .editableView-container-editing-oneLine, + .editableView-container-editing { + color: grey; + padding: 10px; + width: 100%; + } + + .editableView-input:hover, + .editableView-container-editing:hover, + .editableView-container-editing-oneLine:hover { + cursor: text + } + + .editableView-input { + outline-color: black; + letter-spacing: 2px; + color: grey; + border: 0px; + padding: 12px 10px 11px 10px; + } + } + + .collectionStackingView-addDocumentButton { + font-size: 75%; + letter-spacing: 2px; + cursor: pointer; + + .editableView-input { + outline-color: black; + letter-spacing: 2px; + color: grey; + border: 0px; + padding: 12px 10px 11px 10px; + } + } + + .collectionStackingView-addGroupButton { + background: rgb(238, 238, 238); + font-size: 75%; + text-align: center; + letter-spacing: 2px; + height: fit-content; + } + + .rc-switch { + position: absolute; + display: inline-block; + bottom: 4px; + right: 4px; + width: 70px; + height: 30px; + border-radius: 40px 40px; + background-color: lightslategrey; + } + + .rc-switch:after { + position: absolute; + width: 22px; + height: 22px; + left: 3px; + top: 4px; + border-radius: 50% 50%; + background-color: #fff; + content: " "; + cursor: pointer; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); + -webkit-transform: scale(1); + transform: scale(1); + transition: left 0.3s cubic-bezier(0.35, 0, 0.25, 1); + -webkit-animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1); + animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1); + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + } + + .rc-switch-checked:after { + left: 44px; + } + + .rc-switch-inner { + color: #fff; + font-size: 12px; + position: absolute; + left: 28px; + top: 8px; + } + + .rc-switch-checked .rc-switch-inner { + left: 8px; + } +} + +@media only screen and (max-device-width: 480px) { + + .collectionStackingView .collectionStackingView-columnDragger, + .collectionMasonryView .collectionStackingView-columnDragger { + width: 0.1; + height: 0.1; + opacity: 0; + font-size: 0; + } +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From c4fe80267042de738ea18f2dadd4046d9a8607e3 Mon Sep 17 00:00:00 2001 From: ljungster Date: Thu, 21 Apr 2022 10:54:45 -0400 Subject: cleaned up --- .../collections/CollectionNoteTakingView.scss | 112 +++++----------- .../views/collections/CollectionNoteTakingView.tsx | 146 ++++++--------------- .../CollectionNoteTakingViewFieldColumn.tsx | 129 ++++++++---------- 3 files changed, 126 insertions(+), 261 deletions(-) (limited to 'src/client/views/collections/CollectionNoteTakingView.scss') diff --git a/src/client/views/collections/CollectionNoteTakingView.scss b/src/client/views/collections/CollectionNoteTakingView.scss index b6bb8ce2b..c0297a648 100644 --- a/src/client/views/collections/CollectionNoteTakingView.scss +++ b/src/client/views/collections/CollectionNoteTakingView.scss @@ -47,20 +47,10 @@ } } -.collectionMasonryView { - display: inline; -} - -.collectionStackingView { +.collectionNoteTakingView { display: flex; } -.collectionStackingMasonry-cont { - position: relative; - height: 100%; - width: 100%; -} - // TODO:glr Turn this into a seperate class .documentButtonMenu { position: relative; @@ -85,8 +75,7 @@ } } -.collectionStackingView, -.collectionMasonryView { +.collectionNoteTakingView { height: 100%; width: 100%; position: absolute; @@ -101,11 +90,11 @@ display: block; } - .collectionStackingViewFieldColumn { + .collectionNoteTakingViewFieldColumn { height: max-content; } - .collectionStackingViewFieldColumnDragging { + .collectionNoteTakingViewFieldColumnDragging { height: 100%; } @@ -114,41 +103,14 @@ position: absolute; } - .collectionStackingView-docView-container { + .collectionNoteTakingView-docView-container { width: 45%; margin: 5% 2.5%; padding-left: 2.5%; height: auto; } - .collectionStackingView-flexCont { - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: center; - } - - .collectionStackingView-masonrySingle, - .collectionStackingView-masonryGrid { - width: 100%; - display: grid; - top: 0; - left: 0; - } - - .collectionStackingView-masonrySingle { - height: 100%; - position: absolute; - } - - .collectionStackingView-masonryGrid { - margin: auto; - height: max-content; - position: relative; - grid-auto-rows: 0px; - } - - .collectionStackingView-masonrySingle { + .collectionNoteTakingView-Nodes { width: 100%; height: 100%; position: absolute; @@ -160,7 +122,7 @@ position: absolute; } - .collectionStackingView-description { + .collectionNoteTakingView-description { font-size: 100%; margin-bottom: 1vw; padding: 10px; @@ -171,15 +133,15 @@ color: $white; } - .collectionStackingView-columnDragger { + .collectionNoteTakingView-columnDragger { width: 15; height: 15; position: absolute; margin-left: -5; } - // Documents in stacking view - .collectionStackingView-columnDoc { + // Documents in NoteTaking view + .collectionNoteTakingView-columnDoc { display: flex; // margin: auto; // Removed auto so that it is no longer center aligned - this could be something we change position: relative; @@ -211,19 +173,7 @@ } } - .collectionStackingView-masonryDoc { - transform-origin: top left; - grid-column-end: span 1; - height: 100%; - margin: auto; - display: inline-grid; - } - - .collectionStackingView-masonrySection { - margin: auto; - } - - .collectionStackingView-collapseBar { + .collectionNoteTakingView-collapseBar { margin-left: 2px; margin-right: 2px; margin-top: 2px; @@ -237,7 +187,7 @@ } } - .collectionStackingView-miniHeader { + .collectionNoteTakingView-miniHeader { width: 100%; .editableView-container-editing-oneLine { @@ -276,7 +226,7 @@ } } - .collectionStackingView-sectionHeader { + .collectionNoteTakingView-sectionHeader { text-align: center; margin: auto; margin-bottom: 10px; @@ -293,7 +243,7 @@ cursor: text } - .collectionStackingView-sectionHeader-subCont { + .collectionNoteTakingView-sectionHeader-subCont { outline: none; border: 0px; width: 100%; @@ -329,7 +279,7 @@ } } - .collectionStackingView-sectionColor { + .collectionNoteTakingView-sectionColor { position: absolute; left: 0; top: 0; @@ -340,12 +290,12 @@ max-width: 102px; } - .collectionStackingView-sectionColorButton { + .collectionNoteTakingView-sectionColorButton { height: 30px; display: inherit; } - .collectionStackingView-colorPicker { + .collectionNoteTakingView-colorPicker { width: 78px; z-index: 10; position: relative; @@ -371,7 +321,7 @@ } } - .collectionStackingView-sectionOptions { + .collectionNoteTakingView-sectionOptions { position: absolute; right: 0; top: 0; @@ -382,11 +332,11 @@ max-width: 102px; } - .collectionStackingView-sectionOptionButton { + .collectionNoteTakingView-sectionOptionButton { height: 30px; } - .collectionStackingView-optionPicker { + .collectionNoteTakingView-optionPicker { .optionOptions { display: inline; @@ -406,7 +356,7 @@ } } - .collectionStackingView-sectionDelete { + .collectionNoteTakingView-sectionDelete { position: absolute; right: 25px; top: 0; @@ -415,22 +365,22 @@ } } - .collectionStackingView-sectionHeader:hover { - .collectionStackingView-sectionColor { + .collectionNoteTakingView-sectionHeader:hover { + .collectionNoteTakingView-sectionColor { display: unset; } - .collectionStackingView-sectionOptions { + .collectionNoteTakingView-sectionOptions { display: unset; } - .collectionStackingView-sectionDelete { + .collectionNoteTakingView-sectionDelete { display: unset; } } - .collectionStackingView-addDocumentButton, - .collectionStackingView-addGroupButton { + .collectionNoteTakingView-addDocumentButton, + .collectionNoteTakingView-addGroupButton { display: flex; overflow: hidden; margin: auto; @@ -459,7 +409,7 @@ } } - .collectionStackingView-addDocumentButton { + .collectionNoteTakingView-addDocumentButton { font-size: 75%; letter-spacing: 2px; cursor: pointer; @@ -473,7 +423,7 @@ } } - .collectionStackingView-addGroupButton { + .collectionNoteTakingView-addGroupButton { background: rgb(238, 238, 238); font-size: 75%; text-align: center; @@ -531,8 +481,8 @@ @media only screen and (max-device-width: 480px) { - .collectionStackingView .collectionStackingView-columnDragger, - .collectionMasonryView .collectionStackingView-columnDragger { + .collectionNoteTakingView .collectionNoteTakingView-columnDragger, + .collectionNoteTakingView-columnDragger { width: 0.1; height: 0.1; opacity: 0; diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index 35f27a862..ff9e22ce1 100644 --- a/src/client/views/collections/CollectionNoteTakingView.tsx +++ b/src/client/views/collections/CollectionNoteTakingView.tsx @@ -45,14 +45,9 @@ export class CollectionNoteTakingView extends CollectionSubView(); // keeping track of documents. Updated on internal and external drops. What's the difference? - _docXfs: { height: () => number, width: () => number, stackedDocTransform: () => Transform }[] = []; - // Doesn't look like this field is being used anywhere. Obsolete? - _columnStart: number = 0; - // map of node headers to their heights. Used in Masonry - @observable _heightMap = new Map(); + _docXfs: { height: () => number, width: () => number, noteTakingDocTransform: () => Transform }[] = []; // Assuming that this is the current css cursor style @observable _cursor: CursorProperty = "grab"; // gets reset whenever we scroll. Not sure what it is @@ -71,19 +66,8 @@ export class CollectionNoteTakingView extends CollectionSubView { const height = () => this.getDocHeight(d); const width = () => this.getDocWidth(d); - // assuming we need to get rowSpan because we might be dealing with many columns. Grid gap makes sense if multiple columns - const rowSpan = Math.ceil((height() + this.gridGap) / this.gridGap); - // added 50 to width. May need to change that elsewhere later - const style = this.isStackingView ? { width: width(), marginTop: i ? this.gridGap : 0, height: height() } : { gridRowEnd: `span ${rowSpan}` }; - // So we're choosing whether we're going to render a column or a masonry doc - return
+ const style = { width: width(), marginTop: i ? this.gridGap : 0, height: height() }; + return
{this.getDisplayDoc(d, width)}
; }); } - // @action - // setDocHeight = (key: string, sectionHeight: number) => { - // this._heightMap.set(key, sectionHeight); - // } get Sections() { // appears that pivot field IS actually for sorting if (!this.pivotField || this.columnHeaders instanceof Promise) return new Map(); - - // Shouldn't need, since we instantiate them in the constructor - // if (this.columnHeaders === undefined) { - // setTimeout(() => this.layoutDoc._columnHeaders = new List(), 0); - // return new Map(); - // } const columnHeaders = Array.from(this.columnHeaders); const fields = new Map(columnHeaders.map(sh => [sh, []] as [SchemaHeaderField, []])); let changed = false; @@ -187,9 +157,7 @@ export class CollectionNoteTakingView extends CollectionSubView this.layoutDoc._autoHeight, autoHeight => autoHeight && this.props.setHeight(Math.min(NumCast(this.layoutDoc._maxHeight, Number.MAX_SAFE_INTEGER), - this.headerMargin + (this.isStackingView ? - Math.max(...this.refList.map(r => Number(getComputedStyle(r).height.replace("px", "")))) : - this.refList.reduce((p, r) => p + Number(getComputedStyle(r).height.replace("px", "")), 0))))); + this.headerMargin + Math.max(...this.refList.map(r => Number(getComputedStyle(r).height.replace("px", ""))))))); } componentWillUnmount() { @@ -262,8 +230,8 @@ export class CollectionNoteTakingView extends CollectionSubView this.getDocHeight(doc); let dref: Opt; - const stackedDocTransform = () => this.getDocTransform(doc, dref); - this._docXfs.push({ stackedDocTransform, width, height }); + const noteTakingDocTransform = () => this.getDocTransform(doc, dref); + this._docXfs.push({ noteTakingDocTransform, width, height }); //DocumentView is how the node will be rendered return dref = r || undefined} Document={doc} @@ -293,7 +261,7 @@ export class CollectionNoteTakingView extends CollectionSubView - -
; - } + //TODO: currently unused. How can we make use of it? + // @computed get columnDragger() { + // return
+ // + //
; + // } resizeColumns = (n: number) => { const totalWidth = this.props.PanelWidth() @@ -402,8 +371,8 @@ export class CollectionNoteTakingView extends CollectionSubView { //TODO need to write your own function for this, or make sure you're properly updating the fields - const pos = cd.stackedDocTransform().inverse().transformPoint(0, -2 * this.gridGap); - const pos1 = cd.stackedDocTransform().inverse().transformPoint(0, cd.height()); + const pos = cd.noteTakingDocTransform().inverse().transformPoint(0, -2 * this.gridGap); + const pos1 = cd.noteTakingDocTransform().inverse().transformPoint(0, cd.height()); // checking whethere the copied element is in between the top of the doc and the grid gap // (meaning that this is the index it will be taking) const yCoordInBetween = clientY > pos[1] && (clientY < pos1[1] || i == this._docXfs.length - 1) @@ -470,19 +439,18 @@ export class CollectionNoteTakingView extends CollectionSubView { - const pos = cd.stackedDocTransform().inverse().transformPoint(-2 * this.gridGap, -2 * this.gridGap); - const pos1 = cd.stackedDocTransform().inverse().transformPoint(cd.width(), cd.height()); + const pos = cd.noteTakingDocTransform().inverse().transformPoint(-2 * this.gridGap, -2 * this.gridGap); + const pos1 = cd.noteTakingDocTransform().inverse().transformPoint(cd.width(), cd.height()); // const top = cd.height(); - // const pos = cd.stackedDocTransform().transformPoint(0, cd.height()); + // const pos = cd.noteTakingDocTransform().transformPoint(0, cd.height()); // TODO: plan // Get the top of the box // Check if there could possibly be a box below - // const pos1 = cd.stackedDocTransform().transformPoint(0, cd.height()); + // const pos1 = cd.noteTakingDocTransform().transformPoint(0, cd.height()); // if (where[0] > pos[0] && where[0] < pos1[0] && where[1] > pos[1] && (i === this._docXfs.length - 1 || where[1] < pos1[1])) { if (where[1] > pos[1] && (i === this._docXfs.length - 1 || where[1] < pos1[1])) { dropInd = i; - // const axis = this.isStackingView ? 1 : 0; const axis = 1; dropAfter = where[axis] > (pos[axis] + pos1[axis]) / 2 ? 1 : 0; } @@ -538,8 +506,8 @@ export class CollectionNoteTakingView extends CollectionSubView { - const pos = cd.stackedDocTransform().inverse().transformPoint(-2 * this.gridGap, -2 * this.gridGap); - const pos1 = cd.stackedDocTransform().inverse().transformPoint(cd.width(), cd.height()); + const pos = cd.noteTakingDocTransform().inverse().transformPoint(-2 * this.gridGap, -2 * this.gridGap); + const pos1 = cd.noteTakingDocTransform().inverse().transformPoint(cd.width(), cd.height()); if (where[0] > pos[0] && where[0] < pos1[0] && where[1] > pos[1] && where[1] < pos1[1]) { targInd = i; } @@ -558,7 +526,7 @@ export class CollectionNoteTakingView extends CollectionSubView Array.from(this.Sections); refList: any[] = []; - sectionStacking = (heading: SchemaHeaderField | undefined, docList: Doc[]) => { + sectionNoteTaking = (heading: SchemaHeaderField | undefined, docList: Doc[]) => { // const key = this.pivotField; const type = "number"; return this.isStackingView ? this.sectionStacking(section[0], section[1]) : this.sectionMasonry(section[0], section[1], i === 0)); //TODO need to add the divs in const eles: JSX.Element[] = [] for (let i = 0; i < sections.length; i++) { - const col = this.sectionStacking(sections[i][0], sections[i][1]) + const col = this.sectionNoteTaking(sections[i][0], sections[i][1]) eles.push(col) //TODO make this look pretty // if (i < sections.length - 1) { // eles.push( - //
+ //
// new div //
// ) // } } return eles - // return sections.map((section) => this.sectionStacking(section[0], section[1])); + // return sections.map((section) => this.sectionNoteTaking(section[0], section[1])); } @computed get buttonMenu() { @@ -716,13 +682,6 @@ export class CollectionNoteTakingView extends CollectionSubView "", - // SetValue: this.addGroup, - // // I don't recall ever seeing this add a group button - // contents: "+ ADD A COLUMN" - // }; const buttonMenu = this.rootDoc.buttonMenu; const noviceExplainer = this.rootDoc.explainer; return ( @@ -736,39 +695,20 @@ export class CollectionNoteTakingView extends CollectionSubView : null} -
-
this._scroll = e.currentTarget.scrollTop)} - onPointerOver={this.onPointerOver} - onPointerDown={this.onPointerDown} - onDrop={this.onExternalDrop.bind(this)} - onContextMenu={this.onContextMenu} - // Todo: what is wheel? Are we talking about a mouse wheel? - onWheel={e => this.props.isContentActive(true) && e.stopPropagation()} > - {/* so it appears that we are actually rendering the sections. Maybe this is what we're looking for? */} - {this.renderedSections} - {/* I think that showAddGroup must be passed in as false, which is why we can't find what Mehek showed - Or it's because we aren't passing a pivot field */} - {/* {!this.showAddAGroup ? (null) : -
- -
} */} - {/* {this.chromeHidden || !this.props.isSelected() ? (null) : - } */} -
+
this._scroll = e.currentTarget.scrollTop)} + onPointerOver={this.onPointerOver} + onPointerDown={this.onPointerDown} + onDrop={this.onExternalDrop.bind(this)} + onContextMenu={this.onContextMenu} + onWheel={e => this.props.isContentActive(true) && e.stopPropagation()} > + {this.renderedSections}
diff --git a/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx index 605ee4b41..b4e0aac60 100644 --- a/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx +++ b/src/client/views/collections/CollectionNoteTakingViewFieldColumn.tsx @@ -3,13 +3,14 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; import { Doc, DocListCast, Opt } from "../../../fields/Doc"; +import { Id } from "../../../fields/FieldSymbols"; import { RichTextField } from "../../../fields/RichTextField"; -import { PastelSchemaPalette, SchemaHeaderField } from "../../../fields/SchemaHeaderField"; +import { SchemaHeaderField } from "../../../fields/SchemaHeaderField"; import { ScriptField } from "../../../fields/ScriptField"; -import { Cast, NumCast, StrCast } from "../../../fields/Types"; +import { NumCast } from "../../../fields/Types"; import { ImageField } from "../../../fields/URLField"; import { TraceMobx } from "../../../fields/util"; -import { emptyFunction, setupMoveUpEvents, returnFalse, returnEmptyString } from "../../../Utils"; +import { emptyFunction, returnEmptyString, setupMoveUpEvents } from "../../../Utils"; import { Docs, DocUtils } from "../../documents/Documents"; import { DocumentType } from "../../documents/DocumentTypes"; import { DragManager } from "../../util/DragManager"; @@ -19,9 +20,8 @@ import { undoBatch } from "../../util/UndoManager"; import { ContextMenu } from "../ContextMenu"; import { ContextMenuProps } from "../ContextMenuItem"; import { EditableView } from "../EditableView"; -import "./CollectionNoteTakingView.scss"; import { FormattedTextBox } from "../nodes/formattedText/FormattedTextBox"; -import { Id } from "../../../fields/FieldSymbols"; +import "./CollectionNoteTakingView.scss"; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -42,7 +42,6 @@ interface CSVFieldColumnProps { gridGap: number; type: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function" | undefined; headings: () => object[]; - // I think that stacking view actually has a single column and then supposedly you can add more columns? Unsure renderChildren: (docs: Doc[]) => JSX.Element[]; addDocument: (doc: Doc | Doc[]) => boolean; createDropTarget: (ele: HTMLDivElement) => void; @@ -60,7 +59,6 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component = React.createRef(); - @observable _paletteOn = false; @observable _heading = this.props.headingObject ? this.props.headingObject.heading : this.props.heading; @observable _color = this.props.headingObject ? this.props.headingObject.color : "#f1efeb"; _ele: HTMLElement | null = null; @@ -75,16 +73,17 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component { const drop = { docs: de.complete.docDragData?.droppedDocuments, val: this.getValue(this._heading) }; drop.docs?.forEach(d => Doc.SetInPlace(d, this.props.pivotField, drop.val, false)); }); + getValue = (value: string): any => { const parsed = parseInt(value); if (!isNaN(parsed)) return parsed; @@ -110,12 +109,6 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component { - this.props.headingObject?.setColor(color); - this._color = color; - } - @action pointerEntered = () => SnappingManager.GetIsDragging() && (this._background = "#b4b4b4"); @action pointerLeave = () => this._background = "inherit"; textCallback = (char: string) => this.addNewTextDoc("-typed text-", false, true); @@ -154,12 +147,6 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component { - this.props.headingObject?.setCollapsed(!this.props.headingObject.collapsed); - this.toggleVisibility(); - } - headerDown = (e: React.PointerEvent) => setupMoveUpEvents(this, e, this.startDrag, emptyFunction, emptyFunction); //TODO: I think this is where I'm supposed to edit stuff @@ -181,10 +168,6 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component this.collapsed = !this.collapsed); - menuCallback = (x: number, y: number) => { ContextMenu.Instance.clearItems(); const layoutItems: ContextMenuProps[] = []; @@ -234,9 +217,9 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component headings.indexOf(i) === idx); const evContents = heading ? heading : "25"; const headingView = this.props.headingObject ? -
- {/*
*/} - {/* the default bucket (no key value) has a tooltip that describes what it is. - Further, it does not have a color and cannot be deleted. */} -
@@ -264,57 +244,52 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component - {/* {evContents === `0` ? (null) : <>} */} + />
: (null); const templatecols = `${this.props.columnWidth / this.props.numGroupColumns}px `; const type = this.props.Document.type; return <> - {this.props.Document._columnsHideIfEmpty ? (null) : headingView} - { - this.collapsed ? (null) : -
-
- {this.props.renderChildren(this.props.docList)} -
- - {!this.props.chromeHidden && type !== DocumentType.PRES ? -
-
- -
-
- -
- {(this.props.columnHeaders?.length && this.props.columnHeaders.length > 1) && - - } -
- : null} + {headingView} + {
+
+ {this.props.renderChildren(this.props.docList)} +
-
+ {!this.props.chromeHidden && type !== DocumentType.PRES ? +
+
+ +
+
+ +
+ {(this.props.columnHeaders?.length && this.props.columnHeaders.length > 1) && + + } +
+ : null} +
} ; } @@ -326,9 +301,9 @@ export class CollectionNoteTakingViewFieldColumn extends React.Component headings.indexOf(i) === idx); return ( -
Date: Sat, 7 May 2022 10:31:59 -0400 Subject: images correct width --- .../collections/CollectionNoteTakingView.scss | 1 + .../views/collections/CollectionNoteTakingView.tsx | 37 +++++++--------------- 2 files changed, 12 insertions(+), 26 deletions(-) (limited to 'src/client/views/collections/CollectionNoteTakingView.scss') diff --git a/src/client/views/collections/CollectionNoteTakingView.scss b/src/client/views/collections/CollectionNoteTakingView.scss index c0297a648..a878033ed 100644 --- a/src/client/views/collections/CollectionNoteTakingView.scss +++ b/src/client/views/collections/CollectionNoteTakingView.scss @@ -116,6 +116,7 @@ position: absolute; display: flex; flex-direction: column; + align-items: center; top: 0; left: 0; width: 100%; diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index d3b3778a7..50390957a 100644 --- a/src/client/views/collections/CollectionNoteTakingView.tsx +++ b/src/client/views/collections/CollectionNoteTakingView.tsx @@ -1,7 +1,6 @@ import React = require("react"); -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { CursorProperty } from "csstype"; -import { action, computed, IReactionDisposer, observable, reaction, runInAction } from "mobx"; +import { action, computed, IReactionDisposer, observable, reaction } from "mobx"; import { observer } from "mobx-react"; import { DataSym, Doc, HeightSym, Opt, WidthSym } from "../../../fields/Doc"; import { Id } from "../../../fields/FieldSymbols"; @@ -10,8 +9,9 @@ import { listSpec } from "../../../fields/Schema"; import { SchemaHeaderField } from "../../../fields/SchemaHeaderField"; import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from "../../../fields/Types"; import { TraceMobx } from "../../../fields/util"; -import { emptyFunction, returnEmptyDoclist, returnFalse, returnTrue, returnZero, setupMoveUpEvents, smoothScroll, Utils } from "../../../Utils"; +import { emptyFunction, returnEmptyDoclist, returnFalse, returnTrue, returnZero, smoothScroll, Utils } from "../../../Utils"; import { Docs, DocUtils } from "../../documents/Documents"; +import { DocumentType } from '../../documents/DocumentTypes'; import { DragManager, dropActionType } from "../../util/DragManager"; import { SnappingManager } from "../../util/SnappingManager"; import { Transform } from "../../util/Transform"; @@ -22,11 +22,11 @@ import { LightboxView } from "../LightboxView"; import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; import { DocFocusOptions, DocumentView, DocumentViewProps, ViewAdjustment } from "../nodes/DocumentView"; import { StyleProp } from "../StyleProvider"; -import { CollectionNoteTakingViewFieldColumn } from "./CollectionNoteTakingViewFieldColumn"; import "./CollectionNoteTakingView.scss"; +import CollectionNoteTakingViewDivider from "./CollectionNoteTakingViewDivider"; +import { CollectionNoteTakingViewFieldColumn } from "./CollectionNoteTakingViewFieldColumn"; import { CollectionSubView } from "./CollectionSubView"; import { CollectionViewType } from "./CollectionView"; -import CollectionNoteTakingViewDivider from "./CollectionNoteTakingViewDivider"; const _global = (window /* browser */ || global /* node */) as any; @@ -310,7 +310,12 @@ export class CollectionNoteTakingView extends CollectionSubView { if (DragManager.docsBeingDragged.length && this.childDocList) { - const col = this.getClientColumn(e) - const colStartXCoords = this.columnStartXCoords - // console.log(col) const clientY = e.clientY - // const clientX = e.clientX let dropInd = -1; let dropAfter = 0; - const length = this._docXfs.length //TODO get the nodes in the doc this._docXfs.forEach((cd, i) => { //TODO need to write your own function for this, or make sure you're properly updating the fields @@ -400,7 +399,6 @@ export class CollectionNoteTakingView extends CollectionSubView this.filteredChildren.find((fdoc, i) => ndoc === fdoc && i < insertInd) ? off + 1 : off, 0); @@ -410,17 +408,6 @@ export class CollectionNoteTakingView extends CollectionSubView { - - } - - //plj added this - @action - onPointerDown = (e: React.PointerEvent) => { - - } - getClientColumn = (e: React.PointerEvent): number => { const clientX = e.clientX const numColumns = this.columnHeaders.length @@ -652,7 +639,6 @@ export class CollectionNoteTakingView extends CollectionSubView this._scroll = e.currentTarget.scrollTop)} onPointerOver={this.onPointerOver} - onPointerDown={this.onPointerDown} onDrop={this.onExternalDrop.bind(this)} onContextMenu={this.onContextMenu} onWheel={e => this.props.isContentActive(true) && e.stopPropagation()} -- cgit v1.2.3-70-g09d2 From 29d0c334b0bb28b6ae6e1f94fae12d1b4ee0e545 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 3 Aug 2022 18:59:00 -0400 Subject: fixed dragging external documents onto notetaking view --- .../collections/CollectionNoteTakingView.scss | 152 ++++++++++----------- .../views/collections/CollectionNoteTakingView.tsx | 66 +++------ .../collections/CollectionNoteTakingViewColumn.tsx | 3 +- 3 files changed, 94 insertions(+), 127 deletions(-) (limited to 'src/client/views/collections/CollectionNoteTakingView.scss') diff --git a/src/client/views/collections/CollectionNoteTakingView.scss b/src/client/views/collections/CollectionNoteTakingView.scss index a878033ed..fe98f307e 100644 --- a/src/client/views/collections/CollectionNoteTakingView.scss +++ b/src/client/views/collections/CollectionNoteTakingView.scss @@ -1,50 +1,50 @@ -@import "../global/globalCssVariables"; +@import '../global/globalCssVariables'; .collectionNoteTakingView-DocumentButtons { - display: flex; - justify-content: space-between; - margin: auto; + display: flex; + justify-content: space-between; + margin: auto; } .collectionNoteTakingView-addDocumentButton { - display: flex; - overflow: hidden; - margin: auto; - width: 100%; - overflow: ellipses; - - .editableView-container-editing-oneLine, - .editableView-container-editing { - color: grey; - padding: 10px; - width: 100%; - } - - .editableView-input:hover, - .editableView-container-editing:hover, - .editableView-container-editing-oneLine:hover { - cursor: text - } - - .editableView-input { - outline-color: black; - letter-spacing: 2px; - color: grey; - border: 0px; - padding: 12px 10px 11px 10px; - } - - font-size: 75%; - letter-spacing: 2px; - cursor: pointer; - - .editableView-input { - outline-color: black; - letter-spacing: 2px; - color: grey; - border: 0px; - padding: 12px 10px 11px 10px; - } + display: flex; + overflow: hidden; + margin: auto; + width: 100%; + overflow: ellipses; + + .editableView-container-editing-oneLine, + .editableView-container-editing { + color: grey; + padding: 10px; + width: 100%; + } + + .editableView-input:hover, + .editableView-container-editing:hover, + .editableView-container-editing-oneLine:hover { + cursor: text; + } + + .editableView-input { + outline-color: black; + letter-spacing: 2px; + color: grey; + border: 0px; + padding: 12px 10px 11px 10px; + } + + font-size: 75%; + letter-spacing: 2px; + cursor: pointer; + + .editableView-input { + outline-color: black; + letter-spacing: 2px; + color: grey; + border: 0px; + padding: 12px 10px 11px 10px; + } } .collectionNoteTakingView { @@ -83,21 +83,13 @@ overflow-y: auto; overflow-x: hidden; flex-wrap: wrap; - transition: top .5s; + transition: top 0.5s; - >div { + > div { position: relative; display: block; } - .collectionNoteTakingViewFieldColumn { - height: max-content; - } - - .collectionNoteTakingViewFieldColumnDragging { - height: 100%; - } - .collectionSchemaView-previewDoc { height: 100%; position: absolute; @@ -144,33 +136,33 @@ // Documents in NoteTaking view .collectionNoteTakingView-columnDoc { display: flex; - // margin: auto; // Removed auto so that it is no longer center aligned - this could be something we change + // margin: auto; // Removed auto so that it is no longer center aligned - this could be something we change position: relative; &:hover { - .hoverButtons{ - opacity: 1; - } + .hoverButtons { + opacity: 1; + } } .hoverButtons { - display: flex; - opacity: 0; - position: absolute; - height: 100%; - left: -35px; - justify-content: center; - align-items: center; - padding: 0px 10px; - - .buttonWrapper { - padding: 3px; - border-radius: 3px; - - &:hover { - background: rgba(0, 0, 0, 0.26); + display: flex; + opacity: 0; + position: absolute; + height: 100%; + left: -35px; + justify-content: center; + align-items: center; + padding: 0px 10px; + + .buttonWrapper { + padding: 3px; + border-radius: 3px; + + &:hover { + background: rgba(0, 0, 0, 0.26); + } } - } } } @@ -200,7 +192,7 @@ span::before, span::after { - content: ""; + content: ''; width: 50%; border-top: dashed gray 1px; position: relative; @@ -241,7 +233,7 @@ .editableView-input:hover, .editableView-container-editing:hover, .editableView-container-editing-oneLine:hover { - cursor: text + cursor: text; } .collectionNoteTakingView-sectionHeader-subCont { @@ -287,7 +279,7 @@ height: 100%; display: none; - [class*="css"] { + [class*='css'] { max-width: 102px; } @@ -329,7 +321,7 @@ height: 100%; display: none; - [class*="css"] { + [class*='css'] { max-width: 102px; } @@ -338,7 +330,6 @@ } .collectionNoteTakingView-optionPicker { - .optionOptions { display: inline; } @@ -398,7 +389,7 @@ .editableView-input:hover, .editableView-container-editing:hover, .editableView-container-editing-oneLine:hover { - cursor: text + cursor: text; } .editableView-input { @@ -451,7 +442,7 @@ top: 4px; border-radius: 50% 50%; background-color: #fff; - content: " "; + content: ' '; cursor: pointer; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); -webkit-transform: scale(1); @@ -481,7 +472,6 @@ } @media only screen and (max-device-width: 480px) { - .collectionNoteTakingView .collectionNoteTakingView-columnDragger, .collectionNoteTakingView-columnDragger { width: 0.1; @@ -489,4 +479,4 @@ opacity: 0; font-size: 0; } -} \ No newline at end of file +} diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index 1854a4213..989719c80 100644 --- a/src/client/views/collections/CollectionNoteTakingView.tsx +++ b/src/client/views/collections/CollectionNoteTakingView.tsx @@ -363,30 +363,30 @@ export class CollectionNoteTakingView extends CollectionSubView { - if (DragManager.docsBeingDragged.length && this.childDocList) { + onPointerOver = (ex: number, ey: number) => { + console.log('Pover9ing = '); + if (this.childDocList) { // get the current docs for the column based on the mouse's x coordinate // will use again later, which is why we're saving as local - const xCoord = this.props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY)[0] - 2 * this.gridGap; + const xCoord = this.props.ScreenToLocalTransform().transformPoint(ex, ey)[0] - 2 * this.gridGap; const colDocs = this.getDocsFromXCoord(xCoord); // get the index for where you need to insert the doc you are currently dragging - const clientY = this.props.ScreenToLocalTransform().transformPoint(e.clientX, e.clientY)[1]; + const clientY = this.props.ScreenToLocalTransform().transformPoint(ex, ey)[1]; let dropInd = -1; let pos0 = (this.refList.lastElement() as HTMLDivElement).children[0].getBoundingClientRect().height + this.yMargin * 2; colDocs.forEach((doc, i) => { let pos1 = this.getDocHeight(doc) + 2 * this.gridGap; pos1 += pos0; // updating drop position based on y coordinates - const yCoordInBetween = clientY > pos0 && (clientY < pos1 || i == colDocs.length - 1); - if (yCoordInBetween) { + const yCoordInBetween = clientY > pos0 && clientY < pos1; + if (yCoordInBetween || (clientY < pos0 && i === 0)) { dropInd = i; - // dropAfter = 0; - if (clientY > (pos0 + pos1) / 2) { - // dropAfter = 1; - } + } else if (i === colDocs.length - 1 && dropInd === -1) { + dropInd = !colDocs.includes(DragManager.docsBeingDragged.lastElement()) ? i + 1 : i; } pos0 = pos1; }); + console.log('Pover = ' + dropInd + ' ' + this.getColumnFromXCoord(xCoord)); // we alter the pivot fields of the docs in case they are moved to a new column. const colIndex = this.getColumnFromXCoord(xCoord); const colHeader = StrCast(this.columnHeaders[colIndex].heading); @@ -495,43 +495,20 @@ export class CollectionNoteTakingView extends CollectionSubView => { - const where = [e.clientX, e.clientY]; - let targInd = -1; - const docs = this.getDocsFromXCoord(where[0]); - docs.map((d, i) => { - const pos0 = this.getDocTransform(d) - .inverse() - .transformPoint(-2 * this.gridGap, -2 * this.gridGap); - const pos1 = this.getDocTransform(d).inverse().transformPoint(this.getDocWidth(d), this.getDocHeight(d)); - // const pos0 = cd.noteTakingDocTransform().inverse().transformPoint(-2 * this.gridGap, -2 * this.gridGap); - // const pos1 = cd.noteTakingDocTransform().inverse().transformPoint(cd.width(), cd.height()); - if (where[0] > pos0[0] && where[0] < pos1[0] && where[1] > pos0[1] && where[1] < pos1[1]) { - targInd = i; - } - }); - // this._docXfs.map((cd, i) => { - // const pos = cd.noteTakingDocTransform().inverse().transformPoint(-2 * this.gridGap, -2 * this.gridGap); - // const pos1 = cd.noteTakingDocTransform().inverse().transformPoint(cd.width(), cd.height()); - // if (where[0] > pos[0] && where[0] < pos1[0] && where[1] > pos[1] && where[1] < pos1[1]) { - // targInd = i; - // } - // }); - super.onExternalDrop(e, {}, () => { - if (targInd !== -1) { - const newDoc = this.childDocs[this.childDocs.length - 1]; - const docs = this.childDocList; - if (docs) { - docs.splice(docs.length - 1, 1); - docs.splice(targInd, 0, newDoc); - } + const targInd = this.docsDraggedRowCol?.[0] || 0; + super.onExternalDrop(e, {}, docus => { + this.onPointerOver(e.clientX, e.clientY); + docus?.map(doc => this.addDocument(doc)); + const newDoc = this.childDocs.lastElement(); + const docs = this.childDocList; + if (docs && targInd !== -1) { + docs.splice(docs.length - 1, 1); + docs.splice(targInd, 0, newDoc); } + this.removeDocDragHighlight(); }); }; - // setDocsForColHeader = (key: string, docs: Doc[]) => { - // this._docsByColumnHeader = new Map(this._docsByColumnHeader.set(key, docs)) - // } - headings = () => Array.from(this.Sections); refList: any[] = []; @@ -723,7 +700,8 @@ export class CollectionNoteTakingView extends CollectionSubView (this._scroll = e.currentTarget.scrollTop))} - onPointerOver={this.onPointerOver} + onPointerLeave={action(e => (this.docsDraggedRowCol.length = 0))} + onPointerOver={e => this.onPointerOver(e.clientX, e.clientY)} onDrop={this.onExternalDrop.bind(this)} onContextMenu={this.onContextMenu} onWheel={e => this.props.isContentActive(true) && e.stopPropagation()}> diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx index 55d032498..5ba262418 100644 --- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx +++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx @@ -286,7 +286,7 @@ export class CollectionNoteTakingViewColumn extends React.Component {headingView} { -
+
Date: Thu, 25 Aug 2022 17:04:53 -0400 Subject: fixed issues with reloading notetaking view and having columns be exactly the same. fixed adding columns so that changes are actually propagated to the DB. SchemaHeaderFields are bad news... --- .../collections/CollectionNoteTakingView.scss | 32 +++++--- .../views/collections/CollectionNoteTakingView.tsx | 42 +++++----- .../collections/CollectionNoteTakingViewColumn.tsx | 89 +++++++++------------- .../CollectionNoteTakingViewDivider.tsx | 1 - 4 files changed, 80 insertions(+), 84 deletions(-) (limited to 'src/client/views/collections/CollectionNoteTakingView.scss') diff --git a/src/client/views/collections/CollectionNoteTakingView.scss b/src/client/views/collections/CollectionNoteTakingView.scss index fe98f307e..5582fd391 100644 --- a/src/client/views/collections/CollectionNoteTakingView.scss +++ b/src/client/views/collections/CollectionNoteTakingView.scss @@ -1,7 +1,7 @@ @import '../global/globalCssVariables'; .collectionNoteTakingView-DocumentButtons { - display: flex; + display: none; justify-content: space-between; margin: auto; } @@ -51,6 +51,17 @@ display: flex; } +.collectionNoteTakingViewFieldColumn { + height: 100%; + display: flex; + flex-direction: colum; +} +.collectionNoteTakingViewFieldColumn:hover { + .collectionNoteTakingView-DocumentButtons { + display: flex; + } +} + // TODO:glr Turn this into a seperate class .documentButtonMenu { position: relative; @@ -82,7 +93,6 @@ top: 0; overflow-y: auto; overflow-x: hidden; - flex-wrap: wrap; transition: top 0.5s; > div { @@ -133,6 +143,16 @@ margin-left: -5; } + .collectionNoteTakingView-sectionDelete { + display: none; + position: absolute; + right: 0; + width: max-content; + height: max-content; + top: 10; + padding: 2; + } + // Documents in NoteTaking view .collectionNoteTakingView-columnDoc { display: flex; @@ -347,14 +367,6 @@ } } } - - .collectionNoteTakingView-sectionDelete { - position: absolute; - right: 25px; - top: 0; - height: 100%; - display: none; - } } .collectionNoteTakingView-sectionHeader:hover { diff --git a/src/client/views/collections/CollectionNoteTakingView.tsx b/src/client/views/collections/CollectionNoteTakingView.tsx index 5a6d899ef..615141485 100644 --- a/src/client/views/collections/CollectionNoteTakingView.tsx +++ b/src/client/views/collections/CollectionNoteTakingView.tsx @@ -3,7 +3,7 @@ import { CursorProperty } from 'csstype'; import { action, computed, IReactionDisposer, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import { DataSym, Doc, Field, HeightSym, Opt, WidthSym } from '../../../fields/Doc'; -import { Id } from '../../../fields/FieldSymbols'; +import { Copy, Id } from '../../../fields/FieldSymbols'; import { List } from '../../../fields/List'; import { listSpec } from '../../../fields/Schema'; import { SchemaHeaderField } from '../../../fields/SchemaHeaderField'; @@ -42,7 +42,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { _masonryGridRef: HTMLDivElement | null = null; _draggerRef = React.createRef(); notetakingCategoryField = 'NotetakingCategory'; - dividerWidth = 16; + public DividerWidth = 16; @observable docsDraggedRowCol: number[] = []; @observable _cursor: CursorProperty = 'grab'; @observable _scroll = 0; @@ -53,10 +53,11 @@ export class CollectionNoteTakingView extends CollectionSubView() { @computed get columnHeaders() { const columnHeaders = Cast(this.dataDoc.columnHeaders, listSpec(SchemaHeaderField), null); const needsUnsetCategory = this.childDocs.some(d => !d[this.notetakingCategoryField] && !columnHeaders?.find(sh => sh.heading === 'unset')); - if (needsUnsetCategory) { + if (needsUnsetCategory || columnHeaders === undefined || columnHeaders.length === 0) { setTimeout(() => { + const columnHeaders = Cast(this.dataDoc.columnHeaders, listSpec(SchemaHeaderField), null); const needsUnsetCategory = this.childDocs.some(d => !d[this.notetakingCategoryField] && !columnHeaders?.find(sh => sh.heading === 'unset')); - if (needsUnsetCategory) { + if (needsUnsetCategory || columnHeaders === undefined || columnHeaders.length === 0) { if (columnHeaders) columnHeaders.push(new SchemaHeaderField('unset', undefined, undefined, 1)); else this.dataDoc.columnHeaders = new List(); } @@ -68,10 +69,10 @@ export class CollectionNoteTakingView extends CollectionSubView() { return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.HeaderMargin); } @computed get xMargin() { - return NumCast(this.layoutDoc._xMargin, 2 * Math.min(this.gridGap, 0.05 * this.props.PanelWidth())); + return NumCast(this.layoutDoc._xMargin, 5); } @computed get yMargin() { - return this.props.yPadding || NumCast(this.layoutDoc._yMargin, 5); + return NumCast(this.layoutDoc._yMargin, 5); } @computed get gridGap() { return NumCast(this.layoutDoc._gridGap, 10); @@ -86,13 +87,13 @@ export class CollectionNoteTakingView extends CollectionSubView() { } // maxColWidth returns the maximum column width, which is slightly less than the total available space. @computed get maxColWidth() { - return this.props.PanelWidth() - 2 * this.xMargin; + return this.props.PanelWidth(); } // availableWidth is the total amount of non-divider width. Since widths are stored relatively, // we use availableWidth to convert from a percentage to a pixel count. @computed get availableWidth() { const numDividers = this.numGroupColumns - 1; - return this.maxColWidth - numDividers * this.dividerWidth; + return this.maxColWidth - numDividers * this.DividerWidth; } // children is passed as a prop to the NoteTakingField, which uses this function @@ -295,12 +296,9 @@ export class CollectionNoteTakingView extends CollectionSubView() { const heading = !d[this.notetakingCategoryField] ? 'unset' : Field.toString(d[this.notetakingCategoryField] as Field); const existingHeader = this.columnHeaders.find(sh => sh.heading === heading); const existingWidth = existingHeader?.width ? existingHeader.width : 0; - const maxWidth = existingWidth > 0 ? existingWidth * this.availableWidth - 2 * this.xMargin : this.maxColWidth - 2 * this.xMargin; - if (d.type === DocumentType.RTF) { - return maxWidth; - } - const width = d[WidthSym](); - return width < maxWidth ? width : maxWidth; + const maxWidth = existingWidth > 0 ? existingWidth * this.availableWidth : this.maxColWidth; + const width = d.fitWidth ? maxWidth : d[WidthSym](); + return Math.min(maxWidth - CollectionNoteTakingViewColumn.ColumnMargin, width < maxWidth ? width : maxWidth); } // how to get the height of a document. Nothing special here. @@ -312,8 +310,6 @@ export class CollectionNoteTakingView extends CollectionSubView() { const nw = Doc.NativeWidth(childLayoutDoc, childDataDoc) || (!(childLayoutDoc._fitWidth || this.props.childFitWidth?.(d)) ? d[WidthSym]() : 0); const nh = Doc.NativeHeight(childLayoutDoc, childDataDoc) || (!(childLayoutDoc._fitWidth || this.props.childFitWidth?.(d)) ? d[HeightSym]() : 0); if (nw && nh) { - // const colWid = this.columnWidth / this.numGroupColumns; - // const docWid = this.layoutDoc._columnsFill ? colWid : Math.min(this.getDocWidth(d), colWid); const docWid = this.getDocWidth(d); return Math.min(maxHeight, (docWid * nh) / nw); } @@ -390,7 +386,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { let colStartXCoord = 0; for (let i = 0; i < numColumns; i++) { coords.push(colStartXCoord); - colStartXCoord += this.columnHeaders[i].width * this.availableWidth + this.dividerWidth; + colStartXCoord += this.columnHeaders[i].width * this.availableWidth + this.DividerWidth; } coords.push(this.PanelWidth); for (let i = 0; i < numColumns; i++) { @@ -543,7 +539,7 @@ export class CollectionNoteTakingView extends CollectionSubView() { numGroupColumns={this.numGroupColumns} gridGap={this.gridGap} pivotField={this.notetakingCategoryField} - dividerWidth={this.dividerWidth} + dividerWidth={this.DividerWidth} maxColWidth={this.maxColWidth} availableWidth={this.availableWidth} PanelWidth={this.PanelWidth} @@ -576,7 +572,9 @@ export class CollectionNoteTakingView extends CollectionSubView() { } const columnHeaders = Cast(this.props.Document.columnHeaders, listSpec(SchemaHeaderField), null); const newColWidth = 1 / (this.numGroupColumns + 1); - return value && columnHeaders?.push(new SchemaHeaderField(value, undefined, undefined, newColWidth)) && this.resizeColumns(true, newColWidth, this.columnHeaders.length - 1) ? true : false; + value && columnHeaders?.push(new SchemaHeaderField(value, undefined, undefined, newColWidth)) && this.resizeColumns(true, newColWidth, this.columnHeaders.length - 1); + this.dataDoc.columnHeaders = new List(columnHeaders.map(header => header[Copy]())); + return true; }; onContextMenu = (e: React.MouseEvent): void => { @@ -621,10 +619,10 @@ export class CollectionNoteTakingView extends CollectionSubView() { @computed get buttonMenu() { const menuDoc: Doc = Cast(this.rootDoc.buttonMenuDoc, Doc, null); if (menuDoc) { - const width: number = NumCast(menuDoc._width, 30); - const height: number = NumCast(menuDoc._height, 30); + const width = NumCast(menuDoc._width, 30); + const height = NumCast(menuDoc._height, 30); return ( -
+
= React.createRef(); + public static ColumnMargin = 10; @observable _heading = this.props.headingObject ? this.props.headingObject.heading : this.props.heading; @observable _color = this.props.headingObject ? this.props.headingObject.color : '#f1efeb'; _ele: HTMLElement | null = null; @@ -153,14 +144,14 @@ export class CollectionNoteTakingViewColumn extends React.Component(acolumnHeaders.map(header => header[Copy]())); // needed for undo to work properly. otherwise we end up changing field values in the undo stack since they are shared by reference + const columnHeaders = acolumnHeaders; // new List(acolumnHeaders.map(header => header[Copy]())); // needed for undo to work properly. otherwise we end up changing field values in the undo stack since they are shared by reference const newColIndex = index > 0 ? index - 1 : 1; const newColHeader = this.props.columnHeaders ? this.props.columnHeaders[newColIndex] : undefined; const newHeading = newColHeader ? newColHeader.heading : 'unset'; this.props.docList.forEach(d => (d[this.props.pivotField] = newHeading)); const colWidth = this.props.columnHeaders ? this.props.columnHeaders[index].width : 0; columnHeaders.splice(index, 1); - Doc.GetProto(this.props.Document).columnHeaders = columnHeaders; + //Doc.GetProto(this.props.Document).columnHeaders = columnHeaders; this.props.resizeColumns(false, colWidth, index); } }; @@ -251,9 +242,7 @@ export class CollectionNoteTakingViewColumn extends React.Component
evContents} SetValue={this.headingChanged} contents={evContents} oneLine={true} />
+ {(this.props.columnHeaders?.length ?? 0) > 1 && ( + + )}
) : null; - const templatecols = `${this.columnWidth}px `; + const templatecols = this.columnWidth; const type = this.props.Document.type; return ( <> {headingView} - { -
-
- {this.props.renderChildren(this.props.docList)} -
+
+
+ {this.props.renderChildren(this.props.docList)} +
- {!this.props.chromeHidden && type !== DocumentType.PRES ? ( -
-
- -
-
- -
- {this.props.columnHeaders?.length && this.props.columnHeaders.length > 1 && ( - - )} + {!this.props.chromeHidden && type !== DocumentType.PRES ? ( +
+
+
- ) : null} -
- } +
+ +
+
+ ) : null} +
); } diff --git a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx index 8d659f790..a1309b11f 100644 --- a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx +++ b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx @@ -57,7 +57,6 @@ export class CollectionNoteTakingViewDivider extends React.Component
-- cgit v1.2.3-70-g09d2 From dff4b18106261af77d81211e5482a38b19b2a166 Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 26 Aug 2022 09:19:15 -0400 Subject: more notetaking cleanup --- src/client/views/collections/CollectionNoteTakingView.scss | 12 +++++++++++- .../views/collections/CollectionNoteTakingViewColumn.tsx | 7 +------ 2 files changed, 12 insertions(+), 7 deletions(-) (limited to 'src/client/views/collections/CollectionNoteTakingView.scss') diff --git a/src/client/views/collections/CollectionNoteTakingView.scss b/src/client/views/collections/CollectionNoteTakingView.scss index 5582fd391..08b13fd50 100644 --- a/src/client/views/collections/CollectionNoteTakingView.scss +++ b/src/client/views/collections/CollectionNoteTakingView.scss @@ -54,7 +54,7 @@ .collectionNoteTakingViewFieldColumn { height: 100%; display: flex; - flex-direction: colum; + overflow: hidden; } .collectionNoteTakingViewFieldColumn:hover { .collectionNoteTakingView-DocumentButtons { @@ -112,6 +112,11 @@ height: auto; } + .collectionNoteTakingView-columnStack { + height: 100%; + width: 100%; + display: inline-block; + } .collectionNoteTakingView-Nodes { width: 100%; height: 100%; @@ -123,6 +128,11 @@ left: 0; width: 100%; position: absolute; + margin: auto; + width: max-content; + height: max-content; + position: relative; + grid-auto-rows: 0px; } .collectionNoteTakingView-description { diff --git a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx index d951454ff..84d1c0205 100644 --- a/src/client/views/collections/CollectionNoteTakingViewColumn.tsx +++ b/src/client/views/collections/CollectionNoteTakingViewColumn.tsx @@ -262,19 +262,14 @@ export class CollectionNoteTakingViewColumn extends React.Component {headingView} -
+
{this.props.renderChildren(this.props.docList)}
-- cgit v1.2.3-70-g09d2