diff options
Diffstat (limited to 'src/client/views/collections/CollectionTreeView.tsx')
| -rw-r--r-- | src/client/views/collections/CollectionTreeView.tsx | 73 |
1 files changed, 41 insertions, 32 deletions
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index dce792d19..fe5dc17f5 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -83,7 +83,7 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree return this.doc === Doc.MyDashboards; } - @observable _explainerHeight = 0; // height of the description of the tree view + @observable _titleHeight = 0; // height of the title bar MainEle = () => this._mainEle; @@ -111,7 +111,7 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree computeHeight = () => { if (!this._isDisposing) { const titleHeight = !this._titleRef ? this.marginTop() : Number(getComputedStyle(this._titleRef).height.replace('px', '')); - const bodyHeight = Array.from(this.refList).reduce((p, r) => p + Number(getComputedStyle(r).height.replace('px', '')), this.marginBot()); + const bodyHeight = Array.from(this.refList).reduce((p, r) => p + Number(getComputedStyle(r).height.replace('px', '')), this.marginBot()) + 6; this.layoutDoc._autoHeightMargins = bodyHeight; this.props.setHeight?.(bodyHeight + titleHeight); } @@ -298,7 +298,11 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree } @computed get titleBar() { return this.dataDoc === null ? null : ( - <div className="collectionTreeView-titleBar" key={this.doc[Id]} style={!this.outlineMode ? { paddingLeft: this.marginX(), paddingTop: this.marginTop() } : {}} ref={r => (this._titleRef = r)}> + <div + className="collectionTreeView-titleBar" + ref={action((r: any) => (this._titleRef = r) && (this._titleHeight = r.getBoundingClientRect().height * this.props.ScreenToLocalTransform().Scale))} + key={this.doc[Id]} + style={!this.outlineMode ? { paddingLeft: this.marginX(), paddingTop: this.marginTop() } : {}}> {this.outlineMode ? this.documentTitle : this.editableTitle} </div> ); @@ -378,40 +382,45 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree const pointerEvents = () => (!this.props.isContentActive() && !SnappingManager.GetIsDragging() ? 'none' : undefined); const titleBar = this.props.treeViewHideTitle || this.doc.treeViewHideTitle ? null : this.titleBar; return [ - <div - className="collectionTreeView-contents" - key="tree" - style={{ - ...(!titleBar ? { paddingLeft: this.marginX(), paddingTop: this.marginTop() } : {}), - overflow: 'auto', - height: '100%', //this.layoutDoc._autoHeight ? "max-content" : "100%" - }}> - {titleBar} + <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}> + {!this.buttonMenu && !this.noviceExplainer ? null : ( + <div className="documentButtonMenu"> + {this.buttonMenu} + {this.noviceExplainer} + </div> + )} <div - className="collectionTreeView-container" + className="collectionTreeView-contents" + key="tree" style={{ - transform: this.outlineMode ? `scale(${this.nativeDimScaling})` : '', - paddingLeft: `${this.marginX()}px`, - width: this.outlineMode ? `calc(${100 / this.nativeDimScaling}%)` : '', - }} - onContextMenu={this.onContextMenu}> - {!this.buttonMenu && !this.noviceExplainer ? null : ( - <div className="documentButtonMenu" ref={action((r: HTMLDivElement) => r && (this._explainerHeight = r.getBoundingClientRect().height))}> - {this.buttonMenu} - {this.noviceExplainer} - </div> - )} + ...(!titleBar ? { paddingLeft: this.marginX(), paddingTop: this.marginTop() } : {}), + overflow: 'auto', + width: '100%', + height: '100%', + }}> + {titleBar} <div - className="collectionTreeView-dropTarget" + className="collectionTreeView-container" style={{ - background: background(), - height: `calc(100% - ${this._explainerHeight}px)`, - pointerEvents: pointerEvents(), + transform: this.outlineMode ? `scale(${this.nativeDimScaling})` : '', + paddingLeft: `${this.marginX()}px`, + width: this.outlineMode ? `calc(${100 / this.nativeDimScaling}%)` : '', + minHeight: `calc(100% - ${this._titleHeight}px)`, }} - onWheel={e => e.stopPropagation()} - onDrop={this.onTreeDrop} - ref={r => !this.doc.treeViewHasOverlay && r && this.createTreeDropTarget(r)}> - <ul className={`no-indent${this.outlineMode ? '-outline' : ''}`}>{this.treeViewElements}</ul> + onContextMenu={this.onContextMenu}> + <div + className="collectionTreeView-dropTarget" + style={{ + background: background(), + pointerEvents: pointerEvents(), + height: `max-content`, + minHeight: '100%', + }} + onWheel={e => e.stopPropagation()} + onDrop={this.onTreeDrop} + ref={r => !this.doc.treeViewHasOverlay && r && this.createTreeDropTarget(r)}> + <ul className={`no-indent${this.outlineMode ? '-outline' : ''}`}>{this.treeViewElements}</ul> + </div> </div> </div> </div>, |