From 2770f8609818b11b3073ded0bec437abc333f37f Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 3 Dec 2020 10:16:21 -0500 Subject: fixed default textbox background color. added icons to treevie displays --- src/client/views/collections/TabDocView.tsx | 3 ++- src/client/views/collections/TreeView.scss | 15 +++++++++++++- src/client/views/collections/TreeView.tsx | 21 ++++++++++++++------ src/client/views/linking/LinkMenuItem.tsx | 21 +------------------- .../views/nodes/formattedText/FormattedTextBox.tsx | 2 +- src/fields/Doc.ts | 23 ++++++++++++++++++++++ 6 files changed, 56 insertions(+), 29 deletions(-) (limited to 'src') 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 { 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 { 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 { @computed get renderBullet() { TraceMobx(); + const iconType = Doc.toIcon(this.doc); const checked = this.onCheckedClick ? (this.doc.treeViewChecked ?? "unchecked") : undefined; return
{ color: StrCast(this.doc.color, checked === "unchecked" ? "white" : "inherit"), opacity: checked === "unchecked" ? undefined : 0.4 }}> - {this.outlineMode && !(this.doc.text as RichTextField)?.Text ? (null) : - } + {this.outlineMode ? + !(this.doc.text as RichTextField)?.Text ? (null) : + : +
+
+ +
+ +
+ }
; } @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 { } 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) :
; } 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 { -- cgit v1.2.3-70-g09d2