diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/views/EditableView.tsx | 17 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionMasonryViewFieldRow.tsx | 57 |
2 files changed, 53 insertions, 21 deletions
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index c3612fee9..87af19062 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -3,6 +3,7 @@ import { observer } from 'mobx-react'; import { observable, action, trace } from 'mobx'; import "./EditableView.scss"; import * as Autosuggest from 'react-autosuggest'; +import { SchemaHeaderField } from '../../new_fields/SchemaHeaderField'; export interface EditableProps { /** @@ -40,6 +41,8 @@ export interface EditableProps { editing?: boolean; onClick?: (e: React.MouseEvent) => boolean; isEditingCallback?: (isEditing: boolean) => void; + // HeadingObject: SchemaHeaderField | undefined; + // HeadingsHack: number; } /** @@ -50,6 +53,8 @@ export interface EditableProps { @observer export class EditableView extends React.Component<EditableProps> { @observable _editing: boolean = false; + @observable _collapsed: boolean = false; + @observable _headingsHack: number = 1; constructor(props: EditableProps) { super(props); @@ -66,6 +71,15 @@ export class EditableView extends React.Component<EditableProps> { } } + // collapseSection() { + // if (this.props.HeadingObject) { + // this._headingsHack++; + // this.props.HeadingObject.setCollapsed(!this.props.HeadingObject.collapsed); + // this._collapsed = !this._collapsed; + // console.log("THIS IS COLLAPSE FROM EDITABLEVIEW" + this._collapsed); + // } + // } + @action onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => { if (e.key === "Tab") { @@ -93,6 +107,9 @@ export class EditableView extends React.Component<EditableProps> { @action onClick = (e: React.MouseEvent) => { e.nativeEvent.stopPropagation(); + // if (e.ctrlKey) { + // this.collapseSection(); + // } if (!this.props.onClick || !this.props.onClick(e)) { this._editing = true; this.props.isEditingCallback && this.props.isEditingCallback(true); diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx index dbd7f9e3c..8943fea3b 100644 --- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx +++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx @@ -246,6 +246,8 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr ); } + @observable private collapsed: boolean = false; + @observable _headingsHack: number = 1; render() { let cols = this.props.rows(); @@ -261,19 +263,31 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr GetValue: () => evContents, SetValue: this.headingChanged, contents: evContents, - oneLine: true + oneLine: true, + // HeadingObject: this.props.headingObject, + // HeadingsHack: this._headingsHack }; let newEditableViewProps = { GetValue: () => "", SetValue: this.addDocument, - contents: "+ NEW" + contents: "+ NEW", + // HeadingObject: this.props.headingObject, + // HeadingsHack: this._headingsHack }; // let headingView = this.props.headingObject ? let headingView = <div> <div key={`${this.props.heading}`} className="collectionStackingView-sectionHeader" style={{ background: this.props.color }} - // onClick={action(() => this._headingsHack++ && instHeading.setCollapsed(!instHeading.collapsed))} + onClick={action(() => { + if (this.props.headingObject) { + this._headingsHack++; + this.props.headingObject.setCollapsed(!this.props.headingObject.collapsed); + this.collapsed = !this.collapsed; + console.log("value of collapse: " + this.collapsed); + } + })} > + {this.props.heading} <div className="collectionStackingView-sectionHeader-subCont" onPointerDown={this.headerDown} title={evContents === `NO ${key.toUpperCase()} VALUE` ? `Documents that don't have a ${key} value will go here. This column cannot be removed.` : ""} @@ -282,7 +296,7 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr background: evContents !== `NO ${key.toUpperCase()} VALUE` ? this._color : "lightgrey", color: "grey" }}> - <EditableView {...headerEditableViewProps} /> + {<EditableView {...headerEditableViewProps} />} {evContents === `NO ${key.toUpperCase()} VALUE` ? (null) : <div className="collectionStackingView-sectionColor"> <Flyout anchorPoint={anchorPoints.TOP_CENTER} content={this.renderColorPicker()}> @@ -309,25 +323,26 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr onPointerLeave={this.pointerLeaveRow} > {headingView} - { - <div key={`${heading}-stack`} className={`collectionStackingView-masonryGrid`} - style={{ - padding: `${this.props.parent.yMargin}px ${this.props.parent.xMargin}px`, - width: this.props.parent.NodeWidth, - gridGap: this.props.parent.gridGap, - gridTemplateColumns: numberRange(rows).reduce((list: string, i: any) => list + ` ${this.props.parent.columnWidth}px`, ""), - }}> - {this.masonryChildren(this.props.docList)} - {this.props.parent.columnDragger} + {this.collapsed ? (null) : + <div> + <div key={`${heading}-stack`} className={`collectionStackingView-masonryGrid`} + style={{ + padding: `${this.props.parent.yMargin}px ${this.props.parent.xMargin}px`, + width: this.props.parent.NodeWidth, + gridGap: this.props.parent.gridGap, + gridTemplateColumns: numberRange(rows).reduce((list: string, i: any) => list + ` ${this.props.parent.columnWidth}px`, ""), + }}> + {this.masonryChildren(this.props.docList)} + {this.props.parent.columnDragger} + </div> + {(this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'view-mode' && this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'disabled') ? + <div key={`${heading}-add-document`} className="collectionStackingView-addDocumentButton" + style={{ width: style.columnWidth / style.numGroupColumns }}> + <EditableView {...newEditableViewProps} /> + </div> : null + } </div> } - { //controls the +NEW for each row - (this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'view-mode' && this.props.parent.props.CollectionView.props.Document.chromeStatus !== 'disabled') ? - <div key={`${heading}-add-document`} className="collectionStackingView-addDocumentButton" - style={{ width: style.columnWidth / style.numGroupColumns }}> - <EditableView {...newEditableViewProps} /> - </div> : null - } </div > ); } |