diff options
| -rw-r--r-- | src/client/views/collections/CollectionTreeView.scss | 8 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionTreeView.tsx | 5 | ||||
| -rw-r--r-- | src/client/views/collections/TreeView.tsx | 4 |
3 files changed, 12 insertions, 5 deletions
diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss index ec461ab94..d370d21ab 100644 --- a/src/client/views/collections/CollectionTreeView.scss +++ b/src/client/views/collections/CollectionTreeView.scss @@ -1,5 +1,8 @@ @import "../global/globalCssVariables"; +.collectionTreeView-container { + transform-origin: top left; +} .collectionTreeView-dropTarget { border-width: $COLLECTION_BORDER_WIDTH; border-color: transparent; @@ -35,6 +38,11 @@ width: max-content; } + .no-indent-outline { + padding-left: 0; + width: 100%; + } + .editableView-container { font-weight: bold; } diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index e94268204..89d42439e 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -298,8 +298,7 @@ export class CollectionTreeView extends CollectionSubView<Document, Partial<coll return !(this.doc instanceof Doc) || !this.treeChildren ? (null) : <div className="collectionTreeView-container" - style={{ transform: `scale(${this.contentScaling})`, transformOrigin: "top left" }} - + style={this.outlineMode ? { transform: `scale(${this.contentScaling})`, width: `calc(${100 / this.contentScaling}%)` } : {}} onContextMenu={this.onContextMenu}> <div className="collectionTreeView-dropTarget" style={{ background: background(), paddingLeft: `${this.paddingX()}px`, paddingRight: `${this.paddingX()}px`, paddingBottom: `${this.paddingBot()}px`, paddingTop: `${this.paddingTop()}px`, pointerEvents: pointerEvents() }} @@ -308,7 +307,7 @@ export class CollectionTreeView extends CollectionSubView<Document, Partial<coll ref={this.createTreeDropTarget}> {this.titleBar} {this.renderClearButton} - <ul className="no-indent"> + <ul className={`no-indent${this.outlineMode ? "-outline" : ""}`} > {this.treeViewElements} </ul> </div > diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx index e487106d6..86fd21677 100644 --- a/src/client/views/collections/TreeView.tsx +++ b/src/client/views/collections/TreeView.tsx @@ -296,7 +296,7 @@ export class TreeView extends React.Component<TreeViewProps> { const aspect = Doc.NativeAspect(layoutDoc); if (layoutDoc._fitWidth) return Math.min(this.props.panelWidth() - treeBulletWidth(), layoutDoc[WidthSym]()); if (aspect) return Math.min(layoutDoc[WidthSym](), Math.min(this.MAX_EMBED_HEIGHT * aspect, this.props.panelWidth() - treeBulletWidth())); - return Math.min(this.props.panelWidth() - treeBulletWidth(), Doc.NativeWidth(layoutDoc) ? layoutDoc[WidthSym]() : this.layoutDoc[WidthSym]()); + return Math.min((this.props.panelWidth() - treeBulletWidth()) / (this.props.treeView.props.scaling?.() || 1), Doc.NativeWidth(layoutDoc) ? layoutDoc[WidthSym]() : this.layoutDoc[WidthSym]()); } docHeight = () => { const layoutDoc = this.layoutDoc; @@ -365,7 +365,7 @@ export class TreeView extends React.Component<TreeViewProps> { return rows; } - rtfWidth = () => Math.min(this.layoutDoc?.[WidthSym](), this.props.panelWidth() - treeBulletWidth()); + rtfWidth = () => Math.min(this.layoutDoc?.[WidthSym](), (this.props.panelWidth() - treeBulletWidth())) / (this.props.treeView.props.scaling?.() || 1); rtfHeight = () => this.rtfWidth() <= this.layoutDoc?.[WidthSym]() ? Math.min(this.layoutDoc?.[HeightSym](), this.MAX_EMBED_HEIGHT) : this.MAX_EMBED_HEIGHT; rtfOutlineHeight = () => Math.max(this.layoutDoc?.[HeightSym](), treeBulletWidth()); expandPanelHeight = () => { |