From 4fe24111c6eafc58927fcca9d8c46a5b92cc4078 Mon Sep 17 00:00:00 2001
From: Ashley Cai <ashley.lcai@gmail.com>
Date: Sat, 10 Jul 2021 00:17:09 -0700
Subject: Standardizing Colors, changing global CSS variables

---
 src/client/views/collections/CollectionTreeView.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'src/client/views/collections/CollectionTreeView.scss')

diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss
index 72ab51784..ec461ab94 100644
--- a/src/client/views/collections/CollectionTreeView.scss
+++ b/src/client/views/collections/CollectionTreeView.scss
@@ -1,4 +1,4 @@
-@import "../globalCssVariables";
+@import "../global/globalCssVariables";
 
 .collectionTreeView-dropTarget {
     border-width: $COLLECTION_BORDER_WIDTH;
@@ -12,7 +12,7 @@
     top: 0;
     padding-left: 10px;
     padding-right: 10px;
-    background: $light-color-secondary;
+    background: $light-gray;
     font-size: 13px;
     overflow: auto;
     user-select: none;
@@ -40,7 +40,7 @@
     }
 
     .delete-button {
-        color: $intermediate-color;
+        color: $medium-gray;
         // float: right;
         margin-left: 15px;
         // margin-top: 3px;
@@ -71,7 +71,7 @@
 .collectionTreeView-subtitle {
     font-style: italic;
     font-size: 8pt;
-    color: $intermediate-color;
+    color: $medium-gray;
 }
 
 .docContainer {
-- 
cgit v1.2.3-70-g09d2


From 7a1b11bd9d71d4b414059b6cbc0ad518011f7cdd Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 26 Aug 2021 15:10:09 -0400
Subject: another tree view fix for lightbox view and having tree view items
 not go off screen width-wise

---
 src/client/views/collections/CollectionTreeView.scss | 8 ++++++++
 src/client/views/collections/CollectionTreeView.tsx  | 5 ++---
 src/client/views/collections/TreeView.tsx            | 4 ++--
 3 files changed, 12 insertions(+), 5 deletions(-)

(limited to 'src/client/views/collections/CollectionTreeView.scss')

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 = () => {
-- 
cgit v1.2.3-70-g09d2