From ef2cd862c062556008a1897b408399dedaee8210 Mon Sep 17 00:00:00 2001 From: bobzel 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') 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