diff options
| -rw-r--r-- | src/client/documents/Documents.ts | 2 | ||||
| -rw-r--r-- | src/client/util/CurrentUserUtils.ts | 6 | ||||
| -rw-r--r-- | src/client/views/DocComponent.tsx | 2 | ||||
| -rw-r--r-- | src/client/views/nodes/FieldView.tsx | 1 | ||||
| -rw-r--r-- | src/client/views/nodes/formattedText/DashFieldView.scss | 3 | ||||
| -rw-r--r-- | 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"), }} |