fixed default textbox background color. added icons to treevie displays

3 files changed, 31 insertions, 8 deletions

diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index b7e81d7dc..561cd7cb1 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -448,7 +448,7 @@ export class TabDocView extends React.Component<TabDocViewProps> {
                         case DocumentType.PRESELEMENT: docColor = TabDocView.darkScheme ? "" : ""; break;
                         case DocumentType.PRES: docColor = TabDocView.darkScheme ? "#3e3e3e" : "white"; break;
                         case DocumentType.FONTICON: docColor = "black"; break;
-                        case DocumentType.RTF: docColor = TabDocView.darkScheme ? "#2d2d2d" : "#f1efeb";
+                        case DocumentType.RTF: docColor = TabDocView.darkScheme ? "#2d2d2d" : "#f1efeb"; break;
                         case DocumentType.LABEL:
                         case DocumentType.BUTTON: docColor = TabDocView.darkScheme ? "#2d2d2d" : "lightgray"; break;
                         case DocumentType.LINK:
@@ -463,6 +463,7 @@ export class TabDocView extends React.Component<TabDocViewProps> {
                 if (docColor && (!doc || layerProvider?.(doc) === false)) docColor = Color(docColor).fade(0.5).toString();
                 return docColor;
             }
+            case "widgetColor": return TabDocView.darkScheme ? "lightgrey" : "dimgrey";
             case "hidden": return (BoolCast(doc?.hidden) /* || layerProvider?.(doc) === false*/);
             case "boxShadow": {
                 switch (doc?.type) {
diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss
index 580fec9d6..84b5af7be 100644
--- a/src/client/views/collections/TreeView.scss
+++ b/src/client/views/collections/TreeView.scss
@@ -10,9 +10,22 @@
         display: inline-block;
     }
 
+    .treeView-bulletIcons {
+        width: 15px;
+        .treeView-expandIcon {
+            display: none;
+            left: -10px;
+            position: absolute;
+        }
+        &:hover {
+            .treeView-expandIcon {
+                display: unset;
+            }
+        }
+    }
     .bullet {
         position: relative;
-        width: 15px;
+        width: 20px;
         color: $intermediate-color;
         margin-top: 3px;
         transform: scale(1.3, 1.3);
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index cb521ea75..b850ea2c5 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -422,6 +422,7 @@ export class TreeView extends React.Component<TreeViewProps> {
 
     @computed get renderBullet() {
         TraceMobx();
+        const iconType = Doc.toIcon(this.doc);
         const checked = this.onCheckedClick ? (this.doc.treeViewChecked ?? "unchecked") : undefined;
         return <div className={`bullet${this.outlineMode ? "-outline" : ""}`} key={"bullet"}
             title={this.childDocs?.length ? `click to see ${this.childDocs?.length} items` : "view fields"}
@@ -430,12 +431,20 @@ export class TreeView extends React.Component<TreeViewProps> {
                 color: StrCast(this.doc.color, checked === "unchecked" ? "white" : "inherit"),
                 opacity: checked === "unchecked" ? undefined : 0.4
             }}>
-            {this.outlineMode && !(this.doc.text as RichTextField)?.Text ? (null) :
-                <FontAwesomeIcon icon={this.outlineMode ? [this.childDocs?.length && !this.treeViewOpen ? "fas" : "far", "circle"] :
-                    checked === "check" ? "check" :
-                        (checked === "x" ? "times" : checked === "unchecked" ? "square" :
-                            !this.treeViewOpen ? (this.childDocs?.length ? "caret-square-right" : "caret-right") :
-                                (this.childDocs?.length ? "caret-square-down" : "caret-down"))} />}
+            {this.outlineMode ?
+                !(this.doc.text as RichTextField)?.Text ? (null) :
+                    <FontAwesomeIcon size="sm" icon={[this.childDocs?.length && !this.treeViewOpen ? "fas" : "far", "circle"]} /> :
+                <div className="treeView-bulletIcons" >
+                    <div className="treeView-expandIcon">
+                        <FontAwesomeIcon size="sm" icon={this.outlineMode ? [this.childDocs?.length && !this.treeViewOpen ? "fas" : "far", "circle"] :
+                            checked === "check" ? "check" :
+                                (checked === "x" ? "times" : checked === "unchecked" ? "square" :
+                                    !this.treeViewOpen ? "caret-right" :
+                                        "caret-down")} />
+                    </div>
+                    <FontAwesomeIcon icon={iconType} />
+                </div>
+            }
         </div>;
     }
     @computed get showTitleEditorControl() { return ["*", this._uniqueId, this.props.treeView._uniqueId].includes(Doc.GetT(this.doc, "editTitle", "string", true) || ""); }