From 2786a2e4b33ff874f320697b89fecec3105df201 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 24 Oct 2019 22:55:57 -0400 Subject: fixed some stacking view layout. added a miniHeader layout for stacks --- .../collections/CollectionMasonryViewFieldRow.tsx | 74 ++++++++++++---------- .../views/collections/CollectionSchemaView.scss | 1 - .../views/collections/CollectionStackingView.scss | 33 +++++++++- .../views/collections/CollectionStackingView.tsx | 7 +- .../CollectionStackingViewFieldColumn.tsx | 2 +- 5 files changed, 77 insertions(+), 40 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx index d885f558e..52ebfafd3 100644 --- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx +++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx @@ -76,6 +76,8 @@ export class CollectionMasonryViewFieldRow extends React.Component { this._createAliasSelected = false; if (de.data instanceof DragManager.DocumentDragData) { + (this.props.parent.Document.dropConverter instanceof ScriptField) && + this.props.parent.Document.dropConverter.script.run({ dragData: de.data }); let key = StrCast(this.props.parent.props.Document.sectionFilter); let castedValue = this.getValue(this._heading); de.data.droppedDocuments.forEach(d => d[key] = castedValue); @@ -282,40 +284,44 @@ export class CollectionMasonryViewFieldRow extends React.Component -
- {} - {evContents === `NO ${key.toUpperCase()} VALUE` ? (null) : -
- - - -
- } - - {evContents === `NO ${key.toUpperCase()} VALUE` ? (null) : -
- - - -
- } -
- : (null); + let headingView = this.props.parent.props.Document.miniHeaders ? +
+ {} +
: + this.props.headingObject ? +
+
+ {} + {evContents === `NO ${key.toUpperCase()} VALUE` ? (null) : +
+ + + +
+ } + + {evContents === `NO ${key.toUpperCase()} VALUE` ? (null) : +
+ + + +
+ } +
+
: (null); const background = this._background; //to account for observables in Measure const collapsed = this._collapsed; let chromeStatus = this.props.parent.props.Document.chromeStatus; diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index e0cedc210..6a9392253 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -40,7 +40,6 @@ .collectionSchemaView-previewRegion { position: relative; - background: $light-color; height: auto !important; .collectionSchemaView-previewDoc { diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss index f5530ab26..29178b909 100644 --- a/src/client/views/collections/CollectionStackingView.scss +++ b/src/client/views/collections/CollectionStackingView.scss @@ -124,7 +124,38 @@ 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-left: 2px; diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 96940acbc..7f0165ad4 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -44,7 +44,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { @computed get gridGap() { return NumCast(this.props.Document.gridGap, 10); } @computed get isStackingView() { return BoolCast(this.props.Document.singleColumn, true); } @computed get numGroupColumns() { return this.isStackingView ? Math.max(1, this.Sections.size + (this.showAddAGroup ? 1 : 0)) : 1; } - @computed get showAddAGroup() { return (this.sectionFilter && this.props.ContainingCollectionDoc && (this.props.ContainingCollectionDoc.chromeStatus !== 'view-mode' && this.props.ContainingCollectionDoc.chromeStatus !== 'disabled')); } + @computed get showAddAGroup() { return (this.sectionFilter && (this.props.Document.chromeStatus !== 'view-mode' && this.props.Document.chromeStatus !== 'disabled')); } @computed get columnWidth() { return Math.min(this.props.PanelWidth() / (this.props as any).ContentScaling() - 2 * this.xMargin, this.isStackingView ? Number.MAX_VALUE : NumCast(this.props.Document.columnWidth, 250)); @@ -121,7 +121,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { return res; } else { let sum = Array.from(this._heightMap.values()).reduce((acc: number, curr: number) => acc += curr, 0); - return this.props.ContentScaling() * (sum + (this.Sections.size ? 85 : -15)); + return this.props.ContentScaling() * (sum + (this.Sections.size ? (this.props.Document.miniHeaders ? 20 : 85) : -15)); } } return -1; @@ -363,7 +363,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { } onToggle = (checked: Boolean) => { - this.props.ContainingCollectionDoc && (this.props.ContainingCollectionDoc.chromeStatus = checked ? "collapsed" : "view-mode"); + this.props.Document.chromeStatus = checked ? "collapsed" : "view-mode"; } onContextMenu = (e: React.MouseEvent): void => { @@ -393,6 +393,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { let entries = Array.from(this.Sections.entries()); sections = entries.sort(this.sortFunc); } + console.log("NUM = " + this.numGroupColumns); return (
{/* the default bucket (no key value) has a tooltip that describes what it is. -- cgit v1.2.3-70-g09d2