fixed default textbox background color. added icons to treevie displays

6 files changed, 56 insertions, 29 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) || ""); }
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index b9e240ba2..214619a39 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -194,26 +194,7 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
     }
 
     render() {
-        let destinationIcon: FontAwesomeIconProps["icon"] = "question";
-        switch (this.props.destinationDoc.type) {
-            case DocumentType.IMG: destinationIcon = "image"; break;
-            case DocumentType.COMPARISON: destinationIcon = "columns"; break;
-            case DocumentType.RTF: destinationIcon = "sticky-note"; break;
-            case DocumentType.COL: destinationIcon = "folder"; break;
-            case DocumentType.WEB: destinationIcon = "globe-asia"; break;
-            case DocumentType.SCREENSHOT: destinationIcon = "photo-video"; break;
-            case DocumentType.WEBCAM: destinationIcon = "video"; break;
-            case DocumentType.AUDIO: destinationIcon = "microphone"; break;
-            case DocumentType.BUTTON: destinationIcon = "bolt"; break;
-            case DocumentType.PRES: destinationIcon = "tv"; break;
-            case DocumentType.SCRIPTING: destinationIcon = "terminal"; break;
-            case DocumentType.IMPORT: destinationIcon = "cloud-upload-alt"; break;
-            case DocumentType.DOCHOLDER: destinationIcon = "expand"; break;
-            case DocumentType.VID: destinationIcon = "video"; break;
-            case DocumentType.INK: destinationIcon = "pen-nib"; break;
-            case DocumentType.PDF: destinationIcon = "file"; break;
-            default: destinationIcon = "question"; break;
-        }
+        let destinationIcon = Doc.toIcon(this.props.destinationDoc);
 
         const title = StrCast(this.props.destinationDoc.title).length > 18 ?
             StrCast(this.props.destinationDoc.title).substr(0, 14) + "..." : this.props.destinationDoc.title;
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 97a45892a..f8bf39e6a 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -1572,7 +1572,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
         const annotated = DocListCast(this.dataDoc[this.annotationKey]).filter(d => d?.author).length;
         return !this.props.isSelected() && !(annotated && !this.sidebarWidth()) ? (null) :
             <div className="formattedTextBox-sidebar-handle"
-                style={{ left: `max(0px, calc(100% - ${this.sidebarWidthPercent} ${this.sidebarWidth() ? "- 5px" : "- 10px"}))`, background: annotated ? "lightBlue" : undefined }}
+                style={{ left: `max(0px, calc(100% - ${this.sidebarWidthPercent} ${this.sidebarWidth() ? "- 5px" : "- 10px"}))`, background: annotated ? "lightBlue" : this.props.styleProvider?.(this.props.Document, this.props.renderDepth, "widgetColor", this.props.layerProvider) }}
                 onPointerDown={this.sidebarDown}
             />;
     }
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index 782c6c8b3..ffb1bbf83 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -1141,6 +1141,29 @@ export namespace Doc {
         return ndoc;
     }
 
+    export function toIcon(doc: Doc) {
+        switch (StrCast(doc.type)) {
+            case DocumentType.IMG: return "image";
+            case DocumentType.COMPARISON: return "columns";
+            case DocumentType.RTF: return "sticky-note";
+            case DocumentType.COL: return "folder";
+            case DocumentType.WEB: return "globe-asia";
+            case DocumentType.SCREENSHOT: return "photo-video";
+            case DocumentType.WEBCAM: return "video";
+            case DocumentType.AUDIO: return "microphone";
+            case DocumentType.BUTTON: return "bolt";
+            case DocumentType.PRES: return "tv";
+            case DocumentType.SCRIPTING: return "terminal";
+            case DocumentType.IMPORT: return "cloud-upload-alt";
+            case DocumentType.DOCHOLDER: return "expand";
+            case DocumentType.VID: return "video";
+            case DocumentType.INK: return "pen-nib";
+            case DocumentType.PDF: return "file-pdf";
+            case DocumentType.LINK: return "link";
+            default: return "question";
+        }
+    }
+
 
     export namespace Get {