Commit be17830

authored

Merge pull request #1896 from kamalqureshi/text_component_styling

Updated editable styling for Text comp

2 parents c4c8640 + ee2c4f2 commit be17830Copy full SHA for be17830

File tree

+26

-3

lines changed

client/packages/lowcoder/src/comps/comps
- tableComp
  - tableSummaryComp.tsx
- textComp.tsx

+26

-3

lines changed

Lines changed: 21 additions & 1 deletion

Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,24 @@ import Table from "antd/es/table";`
`7`	`7`	`import { ReactNode, useMemo, memo, useCallback } from "react";`
`8`	`8`	`import Tooltip from "antd/es/tooltip";`
`9`	`9`
	`10`	`+const CellContainer = styled.div<{`
	`11`	`+ $textAlign?: 'left' \| 'center' \| 'right';`
	`12`	+}>`
	`13`	`+ display: flex;`
	`14`	`+ justify-content: ${(props) => {`
	`15`	`+ switch (props.$textAlign) {`
	`16`	`+ case 'left':`
	`17`	`+ return 'flex-start';`
	`18`	`+ case 'center':`
	`19`	`+ return 'center';`
	`20`	`+ case 'right':`
	`21`	`+ return 'flex-end';`
	`22`	`+ default:`
	`23`	`+ return 'flex-start';`
	`24`	`+ }`
	`25`	`+ }};`
	`26`	+`;
	`27`	`+`
`10`	`28`	`const TableSummaryRow = styled(Table.Summary.Row)<{`
`11`	`29`	`$istoolbarPositionBelow: boolean;`
`12`	`30`	`$background: string;`
`@@ -170,7 +188,9 @@ const TableSummaryCellView = memo(function TableSummaryCellView(props: {`
`170`	`188`	`$autoHeight={autoHeight}`
`171`	`189`	`>`
`172`	`190`	`<CellWrapper tooltipTitle={cellTooltip}>`
`173`		`- <div>{children}</div>`
	`191`	`+ <CellContainer $textAlign={restProps.align}>`
	`192`	`+ {children}`
	`193`	`+ </CellContainer>`
`174`	`194`	`</CellWrapper>`
`175`	`195`	`</TableSummarCell>`
`176`	`196`	`);`

Lines changed: 5 additions & 2 deletions

Original file line number	Diff line number	Diff line change
`@@ -37,6 +37,9 @@ const getStyle = (style: TextStyleType) => {`
`37`	`37`	`text-transform:${style.textTransform} !important;`
`38`	`38`	`text-decoration:${style.textDecoration} !important;`
`39`	`39`	`background: ${style.background};`
	`40`	`+ line-height: ${style.lineHeight};`
	`41`	`+ margin: ${style.margin} !important;`
	`42`	`+ padding: ${style.padding};`
`40`	`43`	`.markdown-body a {`
`41`	`44`	`color: ${style.links};`
`42`	`45`	`}`
`@@ -68,7 +71,7 @@ const getStyle = (style: TextStyleType) => {`
`68`	`71`	`h6 {`
`69`	`72`	`color: ${style.text};`
`70`	`73`	`font-weight: ${style.textWeight} !important;`
`71`		`- line-height:${style.lineHeight};`
	`74`	`+ line-height:${style.lineHeight}!important;`
`72`	`75`	`}`
`73`	`76`	`img,`
`74`	`77`	`pre {`
`@@ -101,9 +104,9 @@ const TextContainer = React.memo(styled.div<{`
`101`	`104`	`margin: ${props.$styleConfig.margin};`
`102`	`105`	`padding: ${props.$styleConfig.padding};`
`103`	`106`	`};
`104`		`- ${(props) => props.$styleConfig && getStyle(props.$styleConfig)}`
`105`	`107`	`display: flex;`
`106`	`108`	`${markdownCompCss};`
	`109`	`+ ${(props) => props.$styleConfig && getStyle(props.$styleConfig)}`
`107`	`110`	`overflow-wrap: anywhere;`
`108`	`111`	`.markdown-body {`
`109`	`112`	`overflow-wrap: anywhere;`

Comments

(0)