diff options
Diffstat (limited to 'src')
4 files changed, 36 insertions, 14 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 40b0a2a32..09106dd00 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -243,6 +243,7 @@ export class DocumentOptions { borderColor?: STRt = new StrInfo('Color of user-added border', false); text_fontColor?: STRt = new StrInfo('Color of text', false); text_align?: STRt = new StrInfo('alignment'); + hCentering?: 'h-left' | 'h-center' | 'h-right'; layout?: string | Doc; // default layout string or template document layout_isSvg?: BOOLt = new BoolInfo('whether document decorations and other selections should handle pointerEvents for svg content or use doc bounding box'); diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx index 0d2f4c538..fa721517b 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx @@ -1236,7 +1236,7 @@ export interface FieldOpts { cornerRounding?: number; borderWidth?: string; borderColor?: string; - contentXCentering?: 'left' | 'center' | 'right'; + contentXCentering?: 'h-left' | 'h-center' | 'h-right'; contentYCentering?: 'top' | 'center' | 'bottom'; opacity?: number; rotation?: number; @@ -1276,7 +1276,7 @@ export class FieldFuncs { borderColor: opts.borderColor, borderWidth: opts.borderWidth, opacity: opts.opacity, - _layout_centered: opts.contentXCentering === 'center' ? true : false, + hCentering: opts.contentXCentering, _rotation: opts.rotation, }); @@ -1302,7 +1302,7 @@ export class FieldFuncs { borderColor: opts.borderColor, borderWidth: opts.borderWidth, opacity: opts.opacity, - _layout_centered: opts.contentXCentering === 'center' ? true : false, + hCentering: opts.contentXCentering, _rotation: opts.rotation, }); @@ -1327,7 +1327,7 @@ export class FieldFuncs { borderColor: opts.borderColor, borderWidth: opts.borderWidth, opacity: opts.opacity, - _layout_centered: opts.contentXCentering === 'center' ? true : false, + hCentering: opts.contentXCentering, _rotation: opts.rotation, }); @@ -1382,7 +1382,7 @@ export class TemplateLayouts { opts: { backgroundColor: 'transparent', color: '#2DBEAD', - contentXCentering: 'center', + contentXCentering: 'h-center', } }, { tl: [-.87, -.83], @@ -1403,7 +1403,8 @@ export class TemplateLayouts { sizes: [FieldSize.TINY, FieldSize.SMALL], description: 'A caption for field #2, very short to short text that contextualizes the content of field #2', opts: { - backgroundColor: 'transparent' + backgroundColor: 'transparent', + contentXCentering: 'h-center' } }, { tl: [-.87, .37], @@ -1446,7 +1447,8 @@ export class TemplateLayouts { description: '', opts: { backgroundColor: 'transparent', - color: 'white' + color: 'white', + contentXCentering: 'h-center' } }, { tl: [-.45, 0], @@ -1456,7 +1458,8 @@ export class TemplateLayouts { description: '', opts: { backgroundColor: 'transparent', - color: 'white' + color: 'white', + contentXCentering: 'h-center' } }, { tl: [-.83, .2], @@ -1536,7 +1539,7 @@ export class TemplateLayouts { opts: { backgroundColor: 'transparent', color: 'white', - contentXCentering: 'right', + contentXCentering: 'h-right', } }, { tl: [.1, .8], @@ -1547,7 +1550,7 @@ export class TemplateLayouts { opts: { backgroundColor: 'transparent', color: 'white', - contentXCentering: 'left' + contentXCentering: 'h-left' } }, { tl: [0, -.9], @@ -1557,7 +1560,7 @@ export class TemplateLayouts { description: '', opts: { backgroundColor: 'transparent', - contentXCentering: 'right' + contentXCentering: 'h-right' } }], decorations: [{ @@ -1607,7 +1610,7 @@ export class TemplateLayouts { description: '', opts: { backgroundColor: 'transparent', - contentXCentering: 'center', + contentXCentering: 'h-center', } }, { tl: [-.95, .5], diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss index 99b4a84fc..15ce9ec8f 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.scss +++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss @@ -14,6 +14,23 @@ } } +.formattedTextBox-inner { + &.h-center * { + display: flex; + justify-content: center; + } + + &.h-left * { + display: flex; + justify-content: flex-start; + } + + &.h-right * { + display: flex; + justify-content: flex-end; + } +} + .ProseMirror:focus { outline: none !important; } @@ -1035,3 +1052,4 @@ footnote::before { } } } + diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index cbf7e8ff9..2f36a2379 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -2104,7 +2104,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB onScroll={this.onScroll} onDrop={this.ondrop}> <div - className={`formattedTextBox-inner${rounded} ${this.layoutDoc._layout_centered ? 'centered' : ''}`} + className={`formattedTextBox-inner${rounded} ${this.layoutDoc._layout_centered ? 'centered' : ''} ${this.layoutDoc.hCentering}`} ref={this.createDropTarget} style={{ padding: StrCast(this.layoutDoc._textBoxPadding), @@ -2112,7 +2112,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB paddingRight: StrCast(this.layoutDoc._textBoxPaddingX, `${paddingX}px`), paddingTop: StrCast(this.layoutDoc._textBoxPaddingY, `${paddingY}px`), paddingBottom: StrCast(this.layoutDoc._textBoxPaddingY, `${paddingY}px`), - color: 'red', + color: StrCast(this.layoutDoc.text_fontColor), }} /> </div> |