diff options
11 files changed, 173 insertions, 72 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 18709499a..d1b3071ed 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -82,6 +82,7 @@ export interface DocumentOptions { backgroundColor?: string; dropAction?: dropActionType; backgroundLayout?: string; + chromeStatus?: string; curPage?: number; documentText?: string; borderRounding?: string; @@ -403,23 +404,23 @@ export namespace Docs { } export function FreeformDocument(documents: Array<Doc>, options: DocumentOptions) { - return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { schemaColumns: new List([new SchemaHeaderField("title")]), ...options, viewType: CollectionViewType.Freeform }); + return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { chromeStatus: "collapsed", schemaColumns: new List([new SchemaHeaderField("title")]), ...options, viewType: CollectionViewType.Freeform }); } export function SchemaDocument(schemaColumns: SchemaHeaderField[], documents: Array<Doc>, options: DocumentOptions) { - return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { schemaColumns: new List(schemaColumns), ...options, viewType: CollectionViewType.Schema }); + return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { chromeStatus: "collapsed", schemaColumns: new List(schemaColumns), ...options, viewType: CollectionViewType.Schema }); } export function TreeDocument(documents: Array<Doc>, options: DocumentOptions) { - return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { schemaColumns: new List([new SchemaHeaderField("title")]), ...options, viewType: CollectionViewType.Tree }); + return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { chromeStatus: "collapsed", schemaColumns: new List([new SchemaHeaderField("title")]), ...options, viewType: CollectionViewType.Tree }); } export function StackingDocument(documents: Array<Doc>, options: DocumentOptions) { - return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { schemaColumns: new List([new SchemaHeaderField("title")]), ...options, viewType: CollectionViewType.Stacking }); + return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { chromeStatus: "collapsed", schemaColumns: new List([new SchemaHeaderField("title")]), ...options, viewType: CollectionViewType.Stacking }); } export function MasonryDocument(documents: Array<Doc>, options: DocumentOptions) { - return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { schemaColumns: new List([new SchemaHeaderField("title")]), ...options, viewType: CollectionViewType.Masonry }); + return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { chromeStatus: "collapsed", schemaColumns: new List([new SchemaHeaderField("title")]), ...options, viewType: CollectionViewType.Masonry }); } export function ButtonDocument(options?: DocumentOptions) { diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index 9fc28eafa..387107c55 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -129,6 +129,10 @@ export class CollectionSchemaColumnMenu extends React.Component<ColumnMenuProps> } } + changeColumnColor = (color: string): void => { + + } + renderTypes = () => { if (this.props.typeConst) return <></>; return ( @@ -168,6 +172,40 @@ export class CollectionSchemaColumnMenu extends React.Component<ColumnMenuProps> ); } + renderColors = () => { + return ( + <div className="collectionSchema-headerMenu-group"> + <label>Color:</label> + <div className="columnMenu-colors"> + <input type="radio" name="column-color" id="pink" value="#FFB4E8" onClick={() => this.changeColumnColor("#FFB4E8")} /> + <label htmlFor="pink"> + <div className="columnMenu-colorPicker" style={{ backgroundColor: "#FFB4E8" }}></div> + </label> + <input type="radio" name="column-color" id="purple" value="#b28dff" onClick={() => this.changeColumnColor("#b28dff")} /> + <label htmlFor="purple"> + <div className="columnMenu-colorPicker" style={{ backgroundColor: "#FFB4E8" }}></div> + </label> + <input type="radio" name="column-color" id="blue" value="#afcbff" onClick={() => this.changeColumnColor("#afcbff")} /> + <label htmlFor="blue"> + <div className="columnMenu-colorPicker" style={{ backgroundColor: "#FFB4E8" }}></div> + </label> + <input type="radio" name="column-color" id="yellow" value="#f3ffe3" onClick={() => this.changeColumnColor("#f3ffe3")} /> + <label htmlFor="yellow"> + <div className="columnMenu-colorPicker" style={{ backgroundColor: "#FFB4E8" }}></div> + </label> + <input type="radio" name="column-color" id="red" value="#ffc9de" onClick={() => this.changeColumnColor("#ffc9de")} /> + <label htmlFor="red"> + <div className="columnMenu-colorPicker" style={{ backgroundColor: "#FFB4E8" }}></div> + </label> + <input type="radio" name="column=color" id="none" value="#f1efeb" onClick={() => this.changeColumnColor("#f1efeb")} /> + <label htmlFor="none"> + <div className="columnMenu-colorPicker" style={{ backgroundColor: "#FFB4E8" }}></div> + </label> + </div> + </div> + ); + } + renderContent = () => { return ( <div className="collectionSchema-header-menuOptions"> @@ -187,6 +225,7 @@ export class CollectionSchemaColumnMenu extends React.Component<ColumnMenuProps> <> {this.renderTypes()} {this.renderSorting()} + {this.renderColors()} <div className="collectionSchema-headerMenu-group"> <button onClick={() => this.props.deleteColumn(this.props.keyValue)}>Delete Column</button> </div> diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index e0de76247..b1e98b162 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -6,14 +6,15 @@ border-style: solid; border-radius: $border-radius; box-sizing: border-box; - // position: absolute; + position: absolute; + top: 0; width: 100%; - height: calc(100% - 50px); + transition: height .5s; + height: 100%; // overflow: hidden; // overflow-x: scroll; // border: none; overflow: hidden; - transition: top 0.5s; // .collectionSchemaView-cellContents { // height: $MAX_ROW_HEIGHT; @@ -78,7 +79,7 @@ overflow-x: auto; height: 100%; display: -webkit-inline-box; - direction: ltr; + direction: ltr; } .rt-thead { @@ -122,7 +123,7 @@ font-size: 13px; text-align: center; background-color: $light-color-secondary; - + &:last-child { overflow: visible; } @@ -147,7 +148,7 @@ // &:nth-child(even) { // background-color: $light-color; // } - + // &:nth-child(odd) { // background-color: $light-color-secondary; // } @@ -175,7 +176,7 @@ padding: 0; font-size: 13px; text-align: center; - + // white-space: normal; .imageBox-cont { @@ -195,6 +196,11 @@ height: 100%; } } + + .rt-resizer { + width: 20px; + right: -10px; + } } .documentView-node-topmost { @@ -207,18 +213,19 @@ background: $light-color; } -.collectionSchema-col{ +.collectionSchema-col { height: 100%; .collectionSchema-col-wrapper { &.col-before { border-left: 2px solid red; } + &.col-after { border-right: 2px solid red; } } -} +} .collectionSchemaView-header { @@ -285,7 +292,7 @@ button.add-column { background-color: $light-color; border: 1px solid $light-color-secondary; padding: 2px 3px; - + &:not(:last-child) { border-top: 0; } @@ -305,6 +312,19 @@ button.add-column { border-radius: 20px; } } + + .columnMenu-colors { + + + input[type="radio"] { + display: none; + } + + .columnMenu-colorPicker { + width: 20px; + height: 20px; + } + } } .collectionSchema-row { @@ -312,8 +332,8 @@ button.add-column { height: 100%; background-color: white; - &.row-focused { - background-color: rgb(255, 246, 246);//$light-color-secondary; + &.row-focused .rt-tr { + background-color: rgb(255, 246, 246); //$light-color-secondary; } &.row-wrapped { @@ -358,9 +378,11 @@ button.add-column { &.row-above { border-top: 1px solid red; } + &.row-below { border-bottom: 1px solid red; } + &.row-inside { border: 1px solid red; } @@ -461,7 +483,9 @@ button.add-column { .rt-table { overflow-x: hidden; // todo; this shouldnt be like this :(( overflow-y: visible; - } // TODO fix + } + + // TODO fix .row-dragger { background-color: rgb(252, 252, 252); diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index 8436b22a4..996118c00 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -72,7 +72,6 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { @observable private _node: HTMLDivElement | null = null; @observable private _focusedTable: Doc = this.props.Document; - @computed get chromeCollapsed() { return this.props.chromeCollapsed; } @computed get previewWidth() { return () => NumCast(this.props.Document.schemaPreviewWidth); } @computed get previewHeight() { return () => this.props.PanelHeight() - 2 * this.borderWidth; } @computed get tableWidth() { return this.props.PanelWidth() - 2 * this.borderWidth - this.DIVIDER_WIDTH - this.previewWidth(); } @@ -199,13 +198,13 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { get schemaTable() { return ( <SchemaTable - Document={this.props.Document} // child doc + Document={this.props.Document} PanelHeight={this.props.PanelHeight} PanelWidth={this.props.PanelWidth} childDocs={this.childDocs} CollectionView={this.props.CollectionView} ContainingCollectionView={this.props.ContainingCollectionView} - fieldKey={this.props.fieldKey} // might just be this. + fieldKey={this.props.fieldKey} renderDepth={this.props.renderDepth} moveDocument={this.props.moveDocument} ScreenToLocalTransform={this.props.ScreenToLocalTransform} @@ -237,8 +236,8 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { // if (SelectionManager.SelectedDocuments().length > 0) console.log(StrCast(SelectionManager.SelectedDocuments()[0].Document.title)); // if (DocumentManager.Instance.getDocumentView(this.props.Document)) console.log(StrCast(this.props.Document.title), SelectionManager.IsSelected(DocumentManager.Instance.getDocumentView(this.props.Document)!)) return ( - <div className="collectionSchemaView-container" onPointerDown={this.onPointerDown} onWheel={this.onWheel} - onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createTarget}> + <div className="collectionSchemaView-container" + onPointerDown={this.onPointerDown} onWheel={this.onWheel} onDrop={(e: React.DragEvent) => this.onDrop(e, {})} ref={this.createTarget}> {this.schemaTable} {this.dividerDragger} {!this.previewWidth() ? (null) : this.previewPanel} @@ -252,7 +251,7 @@ export interface SchemaTableProps { dataDoc?: Doc; PanelHeight: () => number; PanelWidth: () => number; - childDocs: Doc[]; + childDocs?: Doc[]; CollectionView: CollectionView | CollectionPDFView | CollectionVideoView; ContainingCollectionView: Opt<CollectionView | CollectionPDFView | CollectionVideoView>; fieldKey: string; @@ -287,9 +286,19 @@ export class SchemaTable extends React.Component<SchemaTableProps> { @computed get previewHeight() { return () => this.props.PanelHeight() - 2 * this.borderWidth; } @computed get tableWidth() { return this.props.PanelWidth() - 2 * this.borderWidth - this.DIVIDER_WIDTH - this.previewWidth(); } @computed get columns() { + console.log("columns"); return Cast(this.props.Document.schemaColumns, listSpec(SchemaHeaderField), []); } - @computed get childDocs() { return this.props.childDocs; } + @computed get childDocs() { + if (this.props.childDocs) return this.props.childDocs; + + let doc = this.props.dataDoc ? this.props.dataDoc : this.props.Document; + return DocListCast(doc[this.props.fieldKey]); + } + set childDocs(docs: Doc[]) { + let doc = this.props.dataDoc ? this.props.dataDoc : this.props.Document; + doc[this.props.fieldKey] = new List<Doc>(docs); + } set columns(columns: SchemaHeaderField[]) { this.props.Document.schemaColumns = new List<SchemaHeaderField>(columns); } @computed get borderWidth() { return Number(COLLECTION_BORDER_WIDTH); } @computed get tableColumns(): Column<Doc>[] { @@ -406,8 +415,9 @@ export class SchemaTable extends React.Component<SchemaTableProps> { super(props); // convert old schema columns (list of strings) into new schema columns (list of schema header fields) let oldSchemaColumns = Cast(this.props.Document.schemaColumns, listSpec("string"), []); - if (oldSchemaColumns && oldSchemaColumns.length) { - let newSchemaColumns = oldSchemaColumns.map(i => typeof i === "string" ? new SchemaHeaderField(i) : i); + if (oldSchemaColumns && oldSchemaColumns.length && typeof oldSchemaColumns[0] !== "object") { + console.log("REMAKING COLUMNs"); + let newSchemaColumns = oldSchemaColumns.map(i => typeof i === "string" ? new SchemaHeaderField(i, "#f1efeb") : i); this.props.Document.schemaColumns = new List<SchemaHeaderField>(newSchemaColumns); } } @@ -425,11 +435,12 @@ export class SchemaTable extends React.Component<SchemaTableProps> { } tableRemoveDoc = (document: Doc): boolean => { - let doc = this.props.dataDoc ? this.props.dataDoc : this.props.Document; - let children = Cast(doc[this.props.fieldKey], listSpec(Doc), []); - // let children = this.childDocs; + // let doc = this.props.dataDoc ? this.props.dataDoc : this.props.Document; + // let children = Cast(doc[this.props.fieldKey], listSpec(Doc), []); + let children = this.childDocs; if (children.indexOf(document) !== -1) { children.splice(children.indexOf(document), 1); + this.childDocs = children; return true; } return false; @@ -521,7 +532,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> { let direction = e.key === "Tab" ? "tab" : e.which === 39 ? "right" : e.which === 37 ? "left" : e.which === 38 ? "up" : e.which === 40 ? "down" : ""; this.changeFocusedCellByDirection(direction); - let doc = this.props.dataDoc ? this.props.dataDoc : this.props.Document; + // let doc = this.props.dataDoc ? this.props.dataDoc : this.props.Document; // let children = Cast(doc[this.props.fieldKey], listSpec(Doc), []); let children = this.childDocs; const pdoc = FieldValue(children[this._focusedCell.row]); @@ -531,7 +542,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> { @action changeFocusedCellByDirection = (direction: string): void => { - let doc = this.props.dataDoc ? this.props.dataDoc : this.props.Document; + // let doc = this.props.dataDoc ? this.props.dataDoc : this.props.Document; // let children = Cast(doc[this.props.fieldKey], listSpec(Doc), []); let children = this.childDocs; switch (direction) { @@ -563,7 +574,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> { @action changeFocusedCellByIndex = (row: number, col: number): void => { - let doc = this.props.dataDoc ? this.props.dataDoc : this.props.Document; + // let doc = this.props.dataDoc ? this.props.dataDoc : this.props.Document; // let children = Cast(doc[this.props.fieldKey], listSpec(Doc), []); this._focusedCell = { row: row, col: col }; @@ -574,7 +585,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> { } createRow = () => { - let doc = this.props.dataDoc ? this.props.dataDoc : this.props.Document; + // let doc = this.props.dataDoc ? this.props.dataDoc : this.props.Document; // let children = Cast(doc[this.props.fieldKey], listSpec(Doc), []); let children = this.childDocs; @@ -582,6 +593,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> { let proto = Doc.GetProto(newDoc); proto.title = ""; children.push(newDoc); + this.childDocs = children; } @action @@ -589,20 +601,24 @@ export class SchemaTable extends React.Component<SchemaTableProps> { let index = 0; let found = this.columns.findIndex(col => col.heading.toUpperCase() === "New field".toUpperCase()) > -1; if (!found) { - this.columns.push(new SchemaHeaderField("New field")); + console.log("create column found"); + this.columns.push(new SchemaHeaderField("New field", "#f1efeb")); return; } while (found) { index++; found = this.columns.findIndex(col => col.heading.toUpperCase() === ("New field (" + index + ")").toUpperCase()) > -1; } - this.columns.push(new SchemaHeaderField("New field (" + index + ")")); + console.log("create column new"); + this.columns.push(new SchemaHeaderField("New field (" + index + ")", "#f1efeb")); } @action deleteColumn = (key: string) => { + console.log("deleting columnnn"); let list = Cast(this.props.Document.schemaColumns, listSpec(SchemaHeaderField)); if (list === undefined) { + console.log("delete column"); this.props.Document.schemaColumns = list = new List<SchemaHeaderField>([]); } else { const index = list.map(c => c.heading).indexOf(key); @@ -614,16 +630,19 @@ export class SchemaTable extends React.Component<SchemaTableProps> { @action changeColumns = (oldKey: string, newKey: string, addNew: boolean) => { + console.log("changingin columnsdfhs"); let list = Cast(this.props.Document.schemaColumns, listSpec(SchemaHeaderField)); if (list === undefined) { - this.props.Document.schemaColumns = list = new List<SchemaHeaderField>([new SchemaHeaderField(newKey)]); + console.log("change columns new"); + this.props.Document.schemaColumns = list = new List<SchemaHeaderField>([new SchemaHeaderField(newKey, "f1efeb")]); } else { + console.log("change column"); if (addNew) { - this.columns.push(new SchemaHeaderField(newKey)); + this.columns.push(new SchemaHeaderField(newKey, "f1efeb")); } else { const index = list.map(c => c.heading).indexOf(oldKey); if (index > -1) { - list[index] = new SchemaHeaderField(newKey); + list[index] = new SchemaHeaderField(newKey, "f1efeb"); } } } @@ -688,8 +707,9 @@ export class SchemaTable extends React.Component<SchemaTableProps> { } get documentKeys() { - // const docs = DocListCast(this.props.Document[this.props.fieldKey]); - let docs = this.childDocs; + const docs = DocListCast(this.props.Document[this.props.fieldKey]); + + // let docs = this.childDocs; let keys: { [key: string]: boolean } = {}; // bcz: ugh. this is untracked since otherwise a large collection of documents will blast the server for all their fields. // then as each document's fields come back, we update the documents _proxies. Each time we do this, the whole schema will be @@ -717,7 +737,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> { @computed get reactTable() { - let cdoc = this.props.dataDoc ? this.props.dataDoc : this.props.Document; + // let cdoc = this.props.dataDoc ? this.props.dataDoc : this.props.Document; // let children = DocListCast(cdoc[this.props.fieldKey]); let children = this.childDocs; @@ -731,7 +751,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> { return <ReactTable style={{ position: "relative", float: "left", width: `calc(100% - ${previewWidth}px` }} - data={this.childDocs} + data={children} page={0} pageSize={children.length} showPagination={false} @@ -746,7 +766,7 @@ export class SchemaTable extends React.Component<SchemaTableProps> { row => { if (row.original.type === "collection") { // let childDocs = DocListCast(row.original[this.props.fieldKey]); - return <div className="sub"><SchemaTable {...this.props} Document={row.original} /></div>; + return <div className="sub"><SchemaTable {...this.props} Document={row.original} childDocs={undefined} /></div>; } } : undefined} @@ -765,6 +785,8 @@ export class SchemaTable extends React.Component<SchemaTableProps> { let csv: string = this.columns.reduce((val, col) => val + col + ",", ""); csv = csv.substr(0, csv.length - 1) + "\n"; let self = this; + let cdoc = this.props.dataDoc ? this.props.dataDoc : this.props.Document; + // let children = DocListCast(cdoc[this.props.fieldKey]); this.childDocs.map(doc => { csv += self.columns.reduce((val, col) => val + (doc[col.heading] ? doc[col.heading]!.toString() : "0") + ",", ""); csv = csv.substr(0, csv.length - 1) + "\n"; @@ -785,8 +807,8 @@ export class SchemaTable extends React.Component<SchemaTableProps> { // const docs = DocListCast(this.props.Document[this.props.fieldKey]); let cdoc = this.props.dataDoc ? this.props.dataDoc : this.props.Document; - // const docs = DocListCast(cdoc[this.props.fieldKey]); - let docs = this.childDocs; + const docs = DocListCast(cdoc[this.props.fieldKey]); + // let docs = this.childDocs; row = row % docs.length; while (row < 0) row += docs.length; diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss index 9dbe4ccb8..004b57eff 100644 --- a/src/client/views/collections/CollectionStackingView.scss +++ b/src/client/views/collections/CollectionStackingView.scss @@ -5,6 +5,7 @@ width: 100%; position: absolute; display: flex; + top: 0; overflow-y: auto; flex-wrap: wrap; transition: top .5s; diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index f647da8f0..6e1968774 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -278,7 +278,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { }; // let uniqueHeadings = headings.map((i, idx) => headings.indexOf(i) === idx); return ( - <div className="collectionStackingView" style={{ top: this.chromeCollapsed ? 0 : 100 }} + <div className="collectionStackingView" ref={this.createRef} onDrop={this.onDrop.bind(this)} onWheel={(e: React.WheelEvent) => e.stopPropagation()} > {/* {sectionFilter as boolean ? [ ["width > height", this.filteredChildren.filter(f => f[WidthSym]() >= 1 + f[HeightSym]())], @@ -287,9 +287,9 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { {this.props.Document.sectionFilter ? Array.from(this.Sections.entries()).sort(this.sortFunc). map(section => this.section(section[0], section[1])) : this.section(undefined, this.filteredChildren)} - {this.props.Document.sectionFilter ? + {(this.props.Document.sectionFilter && this.props.CollectionView.props.Document.chromeStatus !== 'disabled') ? <div key={`${this.props.Document[Id]}-addGroup`} className="collectionStackingView-addGroupButton" - style={{ width: (this.columnWidth / (headings.length + 1)) - 10, marginTop: 10 }}> + style={{ width: (this.columnWidth / (headings.length + (this.props.CollectionView.props.Document.chromeStatus !== 'disabled' ? 1 : 0))) - 10, marginTop: 10 }}> <EditableView {...editableViewProps} /> </div> : null} </div> diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx index 387e189e7..71c4d9f0c 100644 --- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx +++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx @@ -34,7 +34,7 @@ interface CSVFieldColumnProps { @observer export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldColumnProps> { - @observable private _background = "white"; + @observable private _background = "inherit"; private _dropRef: HTMLDivElement | null = null; private dropDisposer?: DragManager.DragDropDisposer; @@ -111,7 +111,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC let outerXf = Utils.GetScreenTransform(this.props.parent._masonryGridRef!); let offset = this.props.parent.props.ScreenToLocalTransform().transformDirection(outerXf.translateX - translateX, outerXf.translateY - translateY); return this.props.parent.props.ScreenToLocalTransform(). - translate(offset[0], offset[1] - (this.props.parent.chromeCollapsed ? 0 : 100)). + translate(offset[0], offset[1]). scale(NumCast(doc.width, 1) / this.props.parent.columnWidth); } @@ -158,7 +158,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC @action pointerLeave = () => { - this._background = "white"; + this._background = "inherit"; } @action @@ -239,7 +239,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC }; let headingView = this.props.headingObject ? <div key={heading} className="collectionStackingView-sectionHeader" ref={this._headerRef} - style={{ width: (style.columnWidth) / (uniqueHeadings.length + 1) }}> + style={{ width: (style.columnWidth) / (uniqueHeadings.length + (this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'disabled' ? 1 : 0)) }}> {/* 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. */} <div className="collectionStackingView-sectionHeader-subCont" onPointerDown={this.headerDown} @@ -261,12 +261,12 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC </div> : (null); for (let i = 0; i < cols; i++) templatecols += `${style.columnWidth}px `; return ( - <div key={heading} style={{ width: `${100 / (uniqueHeadings.length + 1)}%`, background: this._background }} + <div key={heading} style={{ width: `${100 / (uniqueHeadings.length + (this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'disabled' ? 1 : 0))}%`, background: this._background }} ref={this.createColumnDropRef} onPointerEnter={this.pointerEntered} onPointerLeave={this.pointerLeave}> {headingView} <div key={`${heading}-stack`} className={`collectionStackingView-masonry${singleColumn ? "Single" : "Grid"}`} style={{ - padding: singleColumn ? `${style.yMargin}px ${0}px ${style.yMargin}px ${0}px` : `${style.yMargin}px ${0}px`, + padding: singleColumn ? `${style.yMargin}px ${5}px ${style.yMargin}px ${5}px` : `${style.yMargin}px ${0}px`, margin: "auto", width: "max-content", //singleColumn ? undefined : `${cols * (style.columnWidth + style.gridGap) + 2 * style.xMargin - style.gridGap}px`, height: 'max-content', @@ -279,10 +279,11 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC {this.children(this.props.docList)} {singleColumn ? (null) : this.props.parent.columnDragger} </div> - <div key={`${heading}-add-document`} className="collectionStackingView-addDocumentButton" - style={{ width: style.columnWidth / (uniqueHeadings.length + 1) }}> - <EditableView {...newEditableViewProps} /> - </div> + {(this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'disabled') ? + <div key={`${heading}-add-document`} className="collectionStackingView-addDocumentButton" + style={{ width: style.columnWidth / (uniqueHeadings.length + (this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'disabled' ? 1 : 0)) }}> + <EditableView {...newEditableViewProps} /> + </div> : null} </div> ); } diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 34363b11a..b7ac8768f 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -18,7 +18,7 @@ import { CollectionTreeView } from "./CollectionTreeView"; import { StrCast, PromiseValue } from '../../../new_fields/Types'; import { DocumentType } from '../../documents/Documents'; import { CollectionStackingViewChrome, CollectionViewBaseChrome } from './CollectionViewChromes'; -import { observable, action, runInAction } from 'mobx'; +import { observable, action, runInAction, IReactionDisposer, reaction } from 'mobx'; import { faEye } from '@fortawesome/free-regular-svg-icons'; export const COLLECTION_BORDER_WIDTH = 2; @@ -35,16 +35,25 @@ library.add(faImage, faEye); @observer export class CollectionView extends React.Component<FieldViewProps> { - @observable private _collapsed = false; + @observable private _collapsed = true; + + private _reactionDisposer: IReactionDisposer | undefined; public static LayoutString(fieldStr: string = "data", fieldExt: string = "") { return FieldView.LayoutString(CollectionView, fieldStr, fieldExt); } componentDidMount = () => { - // chrome status is one of disabled, collapsed, or visible. this determines initial state from document - let chromeStatus = this.props.Document.chromeStatus; - if (chromeStatus && (chromeStatus === "disabled" || chromeStatus === "collapsed")) { - runInAction(() => this._collapsed = true); - } + this._reactionDisposer = reaction(() => StrCast(this.props.Document.chromeStatus), + () => { + // chrome status is one of disabled, collapsed, or visible. this determines initial state from document + let chromeStatus = this.props.Document.chromeStatus; + if (chromeStatus && (chromeStatus === "disabled" || chromeStatus === "collapsed")) { + runInAction(() => this._collapsed = true); + } + }); + } + + componentWillUnmount = () => { + this._reactionDisposer && this._reactionDisposer(); } private SubViewHelper = (type: CollectionViewType, renderProps: CollectionRenderProps) => { diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss index 6525f3b07..989315194 100644 --- a/src/client/views/collections/CollectionViewChromes.scss +++ b/src/client/views/collections/CollectionViewChromes.scss @@ -3,16 +3,19 @@ .collectionViewChrome-cont { position: relative; + opacity: 0.9; z-index: 9001; transition: top .5s; - background: lightslategray; + background: lightgrey; + transition: margin-top .5s; + background: lightgray; padding: 10px; .collectionViewChrome { display: grid; grid-template-columns: 1fr auto; padding-bottom: 10px; - border-bottom: .5px solid lightgrey; + border-bottom: .5px solid rgb(180, 180, 180); .collectionViewBaseChrome { display: flex; diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index 9c751c4df..2bffe3cc0 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -185,11 +185,11 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro render() { return ( - <div className="collectionViewChrome-cont" style={{ top: this._collapsed ? -100 : 0 }}> + <div className="collectionViewChrome-cont" style={{ marginTop: this._collapsed ? -70 : 0, height: 70 }}> <div className="collectionViewChrome"> <div className="collectionViewBaseChrome"> <button className="collectionViewBaseChrome-collapse" - style={{ top: this._collapsed ? 90 : 10, transform: `rotate(${this._collapsed ? 180 : 0}deg)` }} + style={{ marginTop: this._collapsed ? 60 : 0, transform: `rotate(${this._collapsed ? 180 : 0}deg)` }} title="Collapse collection chrome" onClick={this.toggleCollapse}> <FontAwesomeIcon icon="caret-up" size="2x" /> </button> diff --git a/src/new_fields/SchemaHeaderField.ts b/src/new_fields/SchemaHeaderField.ts index a6df31e81..d124a3907 100644 --- a/src/new_fields/SchemaHeaderField.ts +++ b/src/new_fields/SchemaHeaderField.ts @@ -48,11 +48,12 @@ export class SchemaHeaderField extends ObjectField { color: string; type: number; - constructor(heading: string = "", color: string = RandomPastel(), type?: ColumnType) { + constructor(heading: string = "", color?: string, type?: ColumnType) { + console.log("CREATING SCHEMA HEADER FIELD"); super(); this.heading = heading; - this.color = color; + this.color = color === "" || color === undefined ? RandomPastel() : color; if (type) { this.type = type; } |