From d50415122ea6d4b87f1604fa4611553103fa2c18 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 25 Mar 2020 20:57:22 -0400 Subject: set max size for tab titles. fixed collection sizing when filter is expanded. fixed pivot view text height when small collection. --- .../views/collections/CollectionDockingView.tsx | 1 + src/client/views/collections/CollectionView.tsx | 22 ++++++++++++---------- .../views/collections/CollectionViewChromes.tsx | 5 +++-- .../CollectionFreeFormLayoutEngines.tsx | 4 ++-- 4 files changed, 18 insertions(+), 14 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 1fb78f625..2ee39bc0d 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -489,6 +489,7 @@ export class CollectionDockingView extends React.Component { private SubView = (type: CollectionViewType, renderProps: CollectionRenderProps) => { // currently cant think of a reason for collection docking view to have a chrome. mind may change if we ever have nested docking views -syip const chrome = this.props.Document._chromeStatus === "disabled" || this.props.Document._chromeStatus === "replaced" || type === CollectionViewType.Docking ? (null) : - ; + ; return [chrome, this.SubViewHelper(type, renderProps)]; } @@ -278,9 +278,9 @@ export class CollectionView extends Touchable { } @observable _facetWidth = 0; - bodyPanelWidth = () => this.props.PanelWidth() - this._facetWidth; - getTransform = () => this.props.ScreenToLocalTransform().translate(-this._facetWidth, 0); - facetWidth = () => this._facetWidth; + bodyPanelWidth = () => this.props.PanelWidth() - this.facetWidth(); + getTransform = () => this.props.ScreenToLocalTransform().translate(-this.facetWidth(), 0); + facetWidth = () => Math.min(this.props.PanelWidth() - 25, this._facetWidth); @computed get dataDoc() { return (this.props.DataDoc && this.props.Document.isTemplateForField ? Doc.GetProto(this.props.DataDoc) : @@ -385,7 +385,7 @@ export class CollectionView extends Touchable { setupMoveUpEvents(this, e, action((e: PointerEvent, down: number[], delta: number[]) => { this._facetWidth = Math.max(this.props.ScreenToLocalTransform().transformPoint(e.clientX, 0)[0], 0); return false; - }), returnFalse, action(() => this._facetWidth = this._facetWidth < 15 ? 200 : 0)); + }), returnFalse, action(() => this._facetWidth = this.facetWidth() < 15 ? Math.min(this.props.PanelWidth() - 25, 200) : 0)); } filterBackground = () => "dimGray"; @computed get scriptField() { @@ -395,7 +395,7 @@ export class CollectionView extends Touchable { @computed get filterView() { const facetCollection = this.props.Document; const flyout = ( -
e.stopPropagation()}> +
e.stopPropagation()}> {this._allFacets.map(facet =>
); return !this._facetWidth || this.props.dontRegisterView ? (null) : -
-
e.stopPropagation()}> +
+
e.stopPropagation()}>
Facet Filters @@ -452,7 +452,9 @@ export class CollectionView extends Touchable { }} onContextMenu={this.onContextMenu}> {this.showIsTagged()} - {this.collectionViewType !== undefined ? this.SubView(this.collectionViewType, props) : (null)} +
+ {this.collectionViewType !== undefined ? this.SubView(this.collectionViewType, props) : (null)} +
{this.lightbox(DocListCast(this.props.Document[this.props.fieldKey]).filter(d => d.type === DocumentType.IMG).map(d => Cast(d.data, ImageField) ? (Cast(d.data, ImageField)!.url.href.indexOf(window.location.origin) === -1) ? @@ -460,7 +462,7 @@ export class CollectionView extends Touchable { : ""))} {!this.props.isSelected() || this.props.PanelHeight() < 100 ? (null) : -
+
} diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx index ff55128f6..9391b153e 100644 --- a/src/client/views/collections/CollectionViewChromes.tsx +++ b/src/client/views/collections/CollectionViewChromes.tsx @@ -24,6 +24,7 @@ interface CollectionViewChromeProps { CollectionView: CollectionView; type: CollectionViewType; collapse?: (value: boolean) => any; + PanelWidth: () => number; } interface Filter { @@ -391,7 +392,7 @@ export class CollectionViewBaseChrome extends React.Component
@@ -598,7 +599,7 @@ export class CollectionSchemaViewChrome extends React.Component { const dividerWidth = 4; const borderWidth = Number(COLLECTION_BORDER_WIDTH); - const panelWidth = this.props.CollectionView.props.PanelWidth(); + const panelWidth = this.props.PanelWidth(); const previewWidth = NumCast(this.props.CollectionView.props.Document.schemaPreviewWidth); const tableWidth = panelWidth - 2 * borderWidth - dividerWidth - previewWidth; this.props.CollectionView.props.Document.schemaPreviewWidth = previewWidth === 0 ? Math.min(tableWidth / 3, 200) : 0; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx index 637c81fe2..bd4db89ec 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx @@ -147,6 +147,7 @@ export function computePivotLayout( const expander = 1.05; const gap = .15; + const maxColHeight = pivotAxisWidth * expander * Math.ceil(maxInColumn / numCols); let x = 0; const sortedPivotKeys = pivotNumbers ? Array.from(pivotColumnGroups.keys()).sort((n1: FieldResult, n2: FieldResult) => toNumber(n1)! - toNumber(n2)!) : Array.from(pivotColumnGroups.keys()).sort(); sortedPivotKeys.forEach(key => { @@ -189,7 +190,6 @@ export function computePivotLayout( x += pivotAxisWidth * (numCols * expander + gap); }); - const maxColHeight = pivotAxisWidth * expander * Math.ceil(maxInColumn / numCols); const dividers = sortedPivotKeys.map((key, i) => ({ type: "div", color: "lightGray", x: i * pivotAxisWidth * (numCols * expander + gap) - pivotAxisWidth * (expander - 1) / 2, y: -maxColHeight + pivotAxisWidth, width: pivotAxisWidth * numCols * expander, height: maxColHeight, payload: pivotColumnGroups.get(key)!.filters })); groupNames.push(...dividers); @@ -348,7 +348,7 @@ function normalizeResults(panelDim: number[], fontHeight: number, childPairs: { y: gname.y * scale, color: gname.color, width: gname.width === undefined ? undefined : gname.width * scale, - height: gname.height === -1 ? 1 : Math.max(fontHeight, (gname.height || 0) * scale), + height: gname.height === -1 ? 1 : gname.type === "text" ? Math.max(fontHeight * scale, (gname.height || 0) * scale) : (gname.height || 0) * scale, fontSize: gname.fontSize, payload: gname.payload }))); -- cgit v1.2.3-70-g09d2