From a3e34ebd705778e8bcc11f745087cff2bcafbcaf Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 14 Sep 2020 14:53:20 -0400
Subject: updated the custom text box to specify frontSize through document
 values.

---
 src/client/documents/Documents.ts                         | 2 ++
 src/client/util/CurrentUserUtils.ts                       | 6 +++---
 src/client/views/DocComponent.tsx                         | 2 +-
 src/client/views/nodes/FieldView.tsx                      | 1 +
 src/client/views/nodes/formattedText/DashFieldView.scss   | 3 ++-
 src/client/views/nodes/formattedText/FormattedTextBox.tsx | 6 +++---
 6 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index abe50e011..0ac153d74 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -57,6 +57,8 @@ const defaultNativeImageDim = Number(DFLT_IMAGE_NATIVE_DIM.replace("px", ""));
 export interface DocumentOptions {
     system?: boolean;
     _autoHeight?: boolean;
+    _headerHeight?: number; // height of header of custom notes
+    _headerFontSize?: number; // font size of header of custom notes
     _panX?: number;
     _panY?: number;
     _width?: number;
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 44cd1f8c0..83b924181 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -409,11 +409,11 @@ export class CurrentUserUtils {
             doc.emptySlide = textDoc;
         }
         if (doc.emptyHeader === undefined) {
-            const headerTemplate = Docs.Create.TextDocument(" ", { title: "header", target: doc, _autoHeight: true, system: true, cloneFieldFilter: new List<string>(["system"]) }, "header"); // text needs to be a space to allow templateText to be created
+            const headerTemplate = Docs.Create.TextDocument(" ", { title: "header", target: doc, _headerHeight: 44, _headerFontSize: 9, _autoHeight: true, system: true, cloneFieldFilter: new List<string>(["system"]) }, "header"); // text needs to be a space to allow templateText to be created
             headerTemplate[DataSym].layout =
                 "<div>" +
-                "    <FormattedTextBox {...props} dontSelectOnLoad={'true'} ignoreAutoHeight={'true'} height='{this._headerHeight||75}px' background='{this._headerColor||this.target.userColor||`orange`}' fieldKey={'header'}/>" +
-                "    <FormattedTextBox {...props} position='absolute' top='{(this._headerHeight||75)*scale}px' height='calc({100/scale}% - {this._headerHeight||75}px)' fieldKey={'text'}/>" +
+                "    <FormattedTextBox {...props} fieldKey={'header'} dontSelectOnLoad={'true'} ignoreAutoHeight={'true'} fontSize='{this._headerFontSize}px' height='{this._headerHeight}px' background='{this._headerColor||this.target.userColor}' />" +
+                "    <FormattedTextBox {...props} fieldKey={'text'} position='absolute' top='{(this._headerHeight)*scale}px' height='calc({100/scale}% - {this._headerHeight}px)'/>" +
                 "</div>";
             (headerTemplate.proto as Doc).isTemplateDoc = makeTemplate(headerTemplate.proto as Doc, true, "headerView");
             doc.emptyHeader = headerTemplate;
diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx
index aa888b34a..ccfc37d4e 100644
--- a/src/client/views/DocComponent.tsx
+++ b/src/client/views/DocComponent.tsx
@@ -104,7 +104,7 @@ export function ViewBoxAnnotatableComponent<P extends ViewBoxAnnotatableProps, T
 
         styleFromLayoutString = (scale: number) => {
             const style: { [key: string]: any } = {};
-            const divKeys = ["width", "height", "background", "top", "position"];
+            const divKeys = ["width", "height", "fontSize", "left", "background", "top", "position"];
             const replacer = (match: any, expr: string, offset: any, string: any) => { // bcz: this executes a script to convert a property expression string:  { script }  into a value
                 return ScriptField.MakeFunction(expr, { self: Doc.name, this: Doc.name, scale: "number" })?.script.run({ self: this.rootDoc, this: this.layoutDoc, scale }).result as string || "";
             };
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 4ec5bc534..0073ff77f 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -59,6 +59,7 @@ export interface FieldViewProps {
     ChromeHeight?: () => number;
     childLayoutTemplate?: () => Opt<Doc>;
     // properties intended to be used from within layout strings (otherwise use the function equivalents that work more efficiently with React)
+    fontSize?: number;
     height?: number;
     width?: number;
     background?: string;
diff --git a/src/client/views/nodes/formattedText/DashFieldView.scss b/src/client/views/nodes/formattedText/DashFieldView.scss
index 23cf1e79b..09dfb349f 100644
--- a/src/client/views/nodes/formattedText/DashFieldView.scss
+++ b/src/client/views/nodes/formattedText/DashFieldView.scss
@@ -18,7 +18,7 @@
     .dashFieldView-labelSpan {
         position: relative;
         display: inline-block;
-        font-size: small;
+        font-weight: normal;
     }
     .dashFieldView-fieldSpan {
         min-width: 20px;
@@ -27,6 +27,7 @@
         position: relative;
         display: inline;
         background-color: rgba(155, 155, 155, 0.24);
+        font-weight: bold;
         span {
             min-width: 100%;
             display: inline-block;
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 31d471571..c6b4775c9 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -1536,17 +1536,17 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
                     transformOrigin: "top left",
                     width: `${100 / scale}%`,
                     height: `calc(${100 / scale}% - ${this.props.ChromeHeight?.() || 0}px)`,
-                    ...this.styleFromLayoutString(scale)
+                    ...this.styleFromLayoutString(scale)   // this converts any expressions in the format string to style props.  e.g., <FormattedTextBox height='{this._headerHeight}px' >
                 }}>
                 <div className={`formattedTextBox-cont`} ref={this._ref}
                     style={{
                         overflow: this.layoutDoc._autoHeight ? "hidden" : undefined,
                         width: "100%",
-                        height: this.props.height ? this.props.height : this.layoutDoc._autoHeight && this.props.renderDepth ? "max-content" : undefined,
+                        height: this.props.height || (this.layoutDoc._autoHeight && this.props.renderDepth ? "max-content" : undefined),
                         background: Doc.UserDoc().renderStyle === "comic" ? "transparent" : this.props.background ? this.props.background : StrCast(this.layoutDoc[this.props.fieldKey + "-backgroundColor"], this.props.hideOnLeave ? "rgba(0,0,0 ,0.4)" : ""),
                         color: this.props.color ? this.props.color : StrCast(this.layoutDoc[this.props.fieldKey + "-color"], this.props.hideOnLeave ? "white" : "inherit"),
                         pointerEvents: interactive ? undefined : "none",
-                        fontSize: Cast(this.layoutDoc._fontSize, "string", null),
+                        fontSize: this.props.fontSize || Cast(this.layoutDoc._fontSize, "string", null),
                         fontWeight: Cast(this.layoutDoc._fontWeight, "number", null),
                         fontFamily: StrCast(this.layoutDoc._fontFamily, "inherit"),
                     }}
-- 
cgit v1.2.3-70-g09d2