Fixed: treeView now doesn't get pointer events if it's not active. fixed layout of treeview for pres box. fixed horiz/vert scrolling for trees. fixed not adding Loading docs to recently closed.

7 files changed, 52 insertions, 45 deletions

diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx
index 465bb40f0..043a83d16 100644
--- a/src/client/views/DocComponent.tsx
+++ b/src/client/views/DocComponent.tsx
@@ -7,6 +7,7 @@ import { Cast, ScriptCast } from '../../fields/Types';
 import { denormalizeEmail, distributeAcls, GetEffectiveAcl, inheritParentAcls, SharingPermissions } from '../../fields/util';
 import { returnFalse } from '../../Utils';
 import { DocUtils } from '../documents/Documents';
+import { DocumentType } from '../documents/DocumentTypes';
 import { InteractionUtils } from '../util/InteractionUtils';
 import { UndoManager } from '../util/UndoManager';
 import { DocumentView } from './nodes/DocumentView';
@@ -162,7 +163,7 @@ export function ViewBoxAnnotatableComponent<P extends ViewBoxAnnotatableProps>()
                         doc.context = undefined;
                         if (recent) {
                             Doc.RemoveDocFromList(recent, 'data', doc);
-                            Doc.AddDocToList(recent, 'data', doc, undefined, true, true);
+                            doc.type !== DocumentType.LOADING && Doc.AddDocToList(recent, 'data', doc, undefined, true, true);
                         }
                     });
                     this.isAnyChildContentActive() && this.props.select(false);
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index 3a55b7de1..8b256923a 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -271,7 +271,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
             if (props?.pointerEvents?.() === 'none') return 'none';
             const isInk = doc && StrCast(Doc.Layout(doc).layout).includes(InkingStroke.name);
             if (opacity() === 0 || (isInk && !docProps?.treeViewDoc) || doc?.isInkMask) return 'none';
-            if (!isInk) return 'all';
+            if (!isInk) return props?.isDocumentActive?.() ? 'all' : undefined; // fixes problem with tree view elements getting pointer events when the tree view is not active
             return undefined;
         case StyleProp.Decorations:
             if (props?.ContainingCollectionDoc?._viewType === CollectionViewType.Freeform || doc?.x !== undefined || doc?.y !== undefined) {
diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss
index a182a72c5..fe148fbb5 100644
--- a/src/client/views/collections/CollectionTreeView.scss
+++ b/src/client/views/collections/CollectionTreeView.scss
@@ -2,7 +2,6 @@
 
 .collectionTreeView-container {
     transform-origin: top left;
-    height: 100%;
 }
 .collectionTreeView-dropTarget {
     border-width: $COLLECTION_BORDER_WIDTH;
@@ -80,9 +79,7 @@
 }
 
 .collectionTreeView-titleBar {
-    display: inline-block;
     width: 100%;
-    height: max-content;
     .contentFittingDocumentView {
         display: block; // makes titleBar take up full width of the treeView (flex doesn't for some reason)
     }
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>,
diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss
index cfb97709b..57bb5274d 100644
--- a/src/client/views/collections/TreeView.scss
+++ b/src/client/views/collections/TreeView.scss
@@ -115,10 +115,9 @@
 
 .treeView-header-editing,
 .treeView-header {
+    display: flex; // needed for PresBox's treeView
     border: transparent 1px solid;
-    display: grid;
     align-items: center;
-    grid-auto-columns: 22px auto 22px;
     width: 100%;
     border-radius: 5px;
 
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index b489b5214..c34a6faaa 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -953,7 +953,6 @@ export class TreeView extends React.Component<TreeViewProps> {
                 <div
                     className={`treeView-header` + (editing ? '-editing' : '')}
                     key="titleheader"
-                    style={{ width: '100%' }}
                     ref={this._header}
                     onClick={this.ignoreEvent}
                     onPointerDown={this.ignoreEvent}
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 3d9c38186..5dc65afb7 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -2330,7 +2330,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         const isMini: boolean = this.toolbarWidth <= 100;
         return (
             <div className="presBox-buttons" style={{ background: Doc.ActivePresentation === this.rootDoc ? Colors.LIGHT_BLUE : undefined, display: !this.rootDoc._chromeHidden ? 'none' : undefined }}>
-                {isMini || Doc.noviceMode ? null : (
+                {isMini ? null : (
                     <select className="presBox-viewPicker" style={{ display: this.layoutDoc.presStatus === 'edit' ? 'block' : 'none' }} onPointerDown={e => e.stopPropagation()} onChange={this.viewChanged} value={mode}>
                         <option onPointerDown={StopEvent} value={CollectionViewType.Stacking}>
                             List
@@ -2338,9 +2338,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         <option onPointerDown={StopEvent} value={CollectionViewType.Tree}>
                             Tree
                         </option>
-                        <option onPointerDown={StopEvent} value={CollectionViewType.Carousel3D}>
-                            3D Carousel
-                        </option>
+                        {Doc.noviceMode ? null : (
+                            <option onPointerDown={StopEvent} value={CollectionViewType.Carousel3D}>
+                                3D Carousel
+                            </option>
+                        )}
                     </select>
                 )}
                 <div className="presBox-presentPanel" style={{ opacity: this.childDocs.length ? 1 : 0.3 }}>
@@ -2636,7 +2638,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 {this.toolbar}
                 {this.newDocumentToolbarDropdown}
                 <div className="presBox-listCont">
-                    <div className="Slide" style={{ height: `calc(100% - 30px)` }}>
+                    <div className="Slide">
                         {mode !== CollectionViewType.Invalid ? (
                             <CollectionView
                                 {...this.props}