Text area font style added

lowcoder-org · FalkWolsky · Feb 24, 2024 · Feb 14, 2024 · Feb 15, 2024 · Feb 15, 2024
commit 8fd726c954c6cb4de310639a11c65a781fe72159
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx
@@ -108,6 +108,7 @@ export const columnChildrenMap = {
   textSize: withDefault(RadiusControl, ""),
   textWeight: withDefault(StringControl, "normal"),
   fontFamily: withDefault(StringControl, "sans-serif"),
+  fontStyle: withDefault(StringControl, 'normal'),
   cellColor: CellColorComp,
   textOverflow: withDefault(TextOverflowControl, "ellipsis"),
   linkColor: withDefault(ColorControl, "#3377ff"),
@@ -155,10 +156,10 @@ export class ColumnComp extends ColumnInitComp {
         )
       );
     }
-    if(action.type === CompActionTypes.CHANGE_VALUE) {
+    if (action.type === CompActionTypes.CHANGE_VALUE) {
       const title = comp.children.title.unevaledValue;
       const dataIndex = comp.children.dataIndex.getView();
-      if(!Boolean(title)) {
+      if (!Boolean(title)) {
         comp.children.title.dispatchChangeValueAction(dataIndex);
       }
     }
@@ -223,10 +224,10 @@ export class ColumnComp extends ColumnInitComp {
         })}
         {this.children.autoWidth.getView() === "fixed" &&
           this.children.width.propertyView({ label: trans("prop.width") })}
-        
+
         {(columnType === 'link' || columnType === 'links') && (
           <>
-            <Divider style={{margin: '12px 0'}} />
+            <Divider style={{ margin: '12px 0' }} />
             {controlItem({}, (
               <div>
                 <b>{"Link Style"}</b>
@@ -243,10 +244,10 @@ export class ColumnComp extends ColumnInitComp {
             })}
           </>
         )}
-        <Divider style={{margin: '12px 0'}} />
+        <Divider style={{ margin: '12px 0' }} />
         {controlItem({}, (
           <div>
-             <b>{"Column Style"}</b>
+            <b>{"Column Style"}</b>
           </div>
         ))}
         {this.children.background.propertyView({
@@ -260,29 +261,34 @@ export class ColumnComp extends ColumnInitComp {
         })}
         {this.children.borderWidth.propertyView({
           label: trans('style.borderWidth'),
-          preInputNode: <StyledBorderIcon as={BorderWidthIcon} title="" />,	
+          preInputNode: <StyledBorderIcon as={BorderWidthIcon} title="" />,
           placeholder: '1px',
         })}
         {this.children.radius.propertyView({
           label: trans('style.borderRadius'),
-          preInputNode: <StyledBorderRadiusIcon as={IconRadius} title="" />,	
+          preInputNode: <StyledBorderRadiusIcon as={IconRadius} title="" />,
           placeholder: '3px',
         })}
         {this.children.textSize.propertyView({
           label: trans('style.textSize'),
-          preInputNode: <StyledTextSizeIcon as={TextSizeIcon} title="" />,	
+          preInputNode: <StyledTextSizeIcon as={TextSizeIcon} title="" />,
           placeholder: '14px',
         })}
         {this.children.textWeight.propertyView({
           label: trans('style.textWeight'),
-          preInputNode: <StyledTextWeightIcon as={TextWeigthIcon} title="" />,	
+          preInputNode: <StyledTextWeightIcon as={TextWeigthIcon} title="" />,
           placeholder: 'normal',
         })}
         {this.children.fontFamily.propertyView({
           label: trans('style.fontFamily'),
-          preInputNode: <StyledFontFamilyIcon as={FontFamilyIcon} title="" />,	
+          preInputNode: <StyledFontFamilyIcon as={FontFamilyIcon} title="" />,
           placeholder: 'sans-serif',
         })}
+        {this.children.fontStyle.propertyView({
+          label: trans('style.fontStyle'),
+          preInputNode: <StyledFontFamilyIcon as={FontFamilyIcon} title="" />,
+          placeholder: 'normal'
+        })}
         {this.children.textOverflow.getPropertyView()}
         {this.children.cellColor.getPropertyView()}
       </>

diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
@@ -51,7 +51,7 @@ const getStyle = (
   style: TableStyleType,
   rowStyle: TableRowStyleType,
   headerStyle: TableHeaderStyleType,
-  toolbarStyle: TableToolbarStyleType
+  toolbarStyle: TableToolbarStyleType,
 ) => {
   const background = genLinerGradient(style.background);
   const selectedRowBackground = genLinerGradient(rowStyle.selectedRowBackground);
@@ -140,7 +140,8 @@ const BackgroundWrapper = styled.div<{
   background: ${(props) => props.$style.background} !important;
   border: ${(props) => `${props.$style.borderWidth} solid ${props.$style.border} !important`};
   border-radius: ${(props) => props.$style.radius} !important;
-  padding: unset !important;
+  // padding: unset !important;
+  padding: ${(props) => props.$style.padding} !important
   margin: ${(props) => props.$style.margin} !important;
   overflow: scroll !important;
   ${(props) => props.$style}
@@ -209,18 +210,19 @@ const TableWrapper = styled.div<{
         > .ant-table-thead {
           > tr > th {
             background-color: ${(props) => props.$headerStyle.headerBackground};
+
             border-color: ${(props) => props.$headerStyle.border};
             border-width: ${(props) => props.$headerStyle.borderWidth};
             color: ${(props) => props.$headerStyle.headerText};
             border-inline-end: ${(props) => `${props.$headerStyle.borderWidth} solid ${props.$headerStyle.border}`} !important;
-            ${(props) => 
-              props.$fixedHeader && `
+            ${(props) =>
+    props.$fixedHeader && `
                 position: sticky;
                 position: -webkit-sticky;
                 top: ${props.$fixedToolbar ? '47px' : '0'};
                 z-index: 99;
               `
-            }
+  }
 
             > div {
               margin: ${(props) => props.$headerStyle.margin};
@@ -229,6 +231,8 @@ const TableWrapper = styled.div<{
                 font-size: ${(props) => props.$headerStyle.textSize};
                 font-weight: ${(props) => props.$headerStyle.textWeight};
                 font-family: ${(props) => props.$headerStyle.fontFamily};
+                font-style: ${(props) => props.$headerStyle.fontStyle};
+                color:${(props) => props.$headerStyle.text}
               }
             }
 
@@ -286,8 +290,8 @@ const TableWrapper = styled.div<{
 
         // hide the bottom border of the last row
         ${(props) =>
-          props.$toolbarPosition !== "below" &&
-          `
+    props.$toolbarPosition !== "below" &&
+    `
             tbody > tr:last-child > td {
               border-bottom: unset;
             }
@@ -300,10 +304,10 @@ const TableWrapper = styled.div<{
     }
   }
 
-  ${(props) => 
+  ${(props) =>
     props.$style && getStyle(props.$style, props.$rowStyle, props.$headerStyle, props.$toolbarStyle)}
 `;
-  
+
 const TableTh = styled.th<{ width?: number }>`
   overflow: hidden;
 
@@ -318,7 +322,7 @@ const TableTh = styled.th<{ width?: number }>`
 
 const TableTd = styled.td<{
   $background: string;
-  $style: TableColumnStyleType & {rowHeight?: string};
+  $style: TableColumnStyleType & { rowHeight?: string };
   $defaultThemeDetail: ThemeDetail;
   $linkStyle?: TableColumnLinkStyleType;
   $isEditing: boolean;
@@ -348,7 +352,8 @@ const TableTd = styled.td<{
 
     ${(props) => props.$tableSize === 'small' && `
       padding: 1px 8px;
-      font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '14px !important' : props.$style.textSize + ' !important' };
+      font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '14px !important' : props.$style.textSize + ' !important'};
+    font-style:${props.$style.fontStyle} !important;
       min-height: ${props.$style.rowHeight || '14px'};
       line-height: 20px;
       ${!props.$autoHeight && `
@@ -358,7 +363,8 @@ const TableTd = styled.td<{
     `};
     ${(props) => props.$tableSize === 'middle' && `
       padding: 8px 8px;
-      font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '16px !important' : props.$style.textSize + ' !important' };
+      font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '16px !important' : props.$style.textSize + ' !important'};
+      font-style:${props.$style.fontStyle} !important;
       min-height: ${props.$style.rowHeight || '24px'};
       line-height: 24px;
       ${!props.$autoHeight && `
@@ -368,7 +374,8 @@ const TableTd = styled.td<{
     `};
     ${(props) => props.$tableSize === 'large' && `
       padding: 16px 16px;
-      font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '18px !important' : props.$style.textSize + ' !important' };
+      font-size: ${props.$defaultThemeDetail.textSize == props.$style.textSize ? '18px !important' : props.$style.textSize + ' !important'};
+      font-style:${props.$style.fontStyle} !important;
       min-height: ${props.$style.rowHeight || '48px'};
       ${!props.$autoHeight && `
         overflow-y: auto;
@@ -444,7 +451,7 @@ const ResizeableTitle = (props: any) => {
       draggableOpts={{ enableUserSelectHack: false }}
       handle={(axis: ResizeHandleAxis, ref: ReactRef<HTMLDivElement>) => (
         <TitleResizeHandle
-          ref={ref} 
+          ref={ref}
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -519,7 +526,7 @@ function TableCellView(props: {
     const cellColor = cellColorFn({
       currentCell: record[title.toLowerCase()],
     });
-    
+
     const style = {
       background: cellColor || rowColor || columnStyle.background || columnsStyle.background,
       margin: columnStyle.margin || columnsStyle.margin,
@@ -530,6 +537,7 @@ function TableCellView(props: {
       textSize: columnStyle.textSize || columnsStyle.textSize,
       textWeight: columnStyle.textWeight || columnsStyle.textWeight,
       fontFamily: columnStyle.fontFamily || columnsStyle.fontFamily,
+      fontStyle: columnStyle.fontStyle || columnsStyle.fontStyle,
       rowHeight: rowHeight,
     }
     let { background } = style;
@@ -554,7 +562,7 @@ function TableCellView(props: {
       </TableTd>
     );
   }
-
+ 
   return (
     <TableCellContext.Provider value={{ isEditing: editing, setIsEditing: setEditing }}>
       {tdView}
@@ -804,7 +812,7 @@ export function TableCompView(props: {
 
   return (
     <BackgroundColorContext.Provider value={style.background} >
-      
+
       <BackgroundWrapper ref={ref} $style={style} $tableAutoHeight={tableAutoHeight}>
         {toolbar.position === "above" && toolbarView}
         <TableWrapper
@@ -826,11 +834,11 @@ export function TableCompView(props: {
                 : "OB_CHILDREN_KEY_PLACEHOLDER",
               fixed: "left",
               onExpand: (expanded) => {
-              if(expanded) {
-                handleChangeEvent('rowExpand')
-              } else {
-                handleChangeEvent('rowShrink')
-              }
+                if (expanded) {
+                  handleChangeEvent('rowExpand')
+                } else {
+                  handleChangeEvent('rowShrink')
+                }
               }
             }}
             rowColorFn={compChildren.rowColor.getView() as any}
@@ -857,14 +865,14 @@ export function TableCompView(props: {
               compChildren.loading.getView()
             }
           />
-          
+
           <SlotConfigContext.Provider value={{ modalWidth: width && Math.max(width, 300) }}>
             {expansion.expandModalView}
           </SlotConfigContext.Provider>
         </TableWrapper>
         {toolbar.position === "below" && toolbarView}
       </BackgroundWrapper>
-      
+
     </BackgroundColorContext.Provider>
   );
 }
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx
@@ -210,7 +210,7 @@ const tableChildrenMap = {
   toolbarStyle: styleControl(TableToolbarStyle),
   headerStyle: styleControl(TableHeaderStyle),
   searchText: StringControl,
-  columnsStyle: withDefault(styleControl(TableColumnStyle), {borderWidth: '1px', radius: '0px'}),
+  columnsStyle: withDefault(styleControl(TableColumnStyle), {borderWidth: '1px', radius: '0px',fontStyle:'italic'}),
   viewModeResizable: BoolControl,
   visibleResizables: BoolControl,
   // sample data for regenerating columns

diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableUtils.tsx
@@ -311,6 +311,7 @@ export function columnsToAntdFormat(
       status: StatusType;
     }[];
     const title = renderTitle({ title: column.title, editable: column.editable });
+
     return {
       title: column.showTitle ? title : '',
       titleText: column.title,
@@ -326,6 +327,7 @@ export function columnsToAntdFormat(
         radius: column.radius,
         textSize: column.textSize,
         textWeight: column.textWeight,
+        fontStyle:column.fontStyle,
         fontFamily: column.fontFamily,
         borderWidth: column.borderWidth,
       },

diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -920,6 +920,7 @@ const LinkTextStyle = [
 
 export const TableStyle = [
   MARGIN,
+  PADDING,
   ...BG_STATIC_BORDER_RADIUS,
   {
     name: "borderWidth",
@@ -943,6 +944,10 @@ export const TableToolbarStyle = [
 
 export const TableHeaderStyle = [
   MARGIN,
+  PADDING,
+  FONT_FAMILY,
+  FONT_STYLE,
+  TEXT,
   {
     name: "headerBackground",
     label: trans("style.tableHeaderBackground"),
@@ -1000,7 +1005,8 @@ export const TableColumnStyle = [
   TEXT,
   TEXT_SIZE,
   TEXT_WEIGHT,
-  FONT_FAMILY
+  FONT_FAMILY,
+  FONT_STYLE,
 ] as const;
 
 export const TableColumnLinkStyle = [