Merge pull request #649 from raheeliftikhar5/table-fixes

FalkWolsky · web-flow · commit faba3f79125f · 2024-01-19T18:55:19.000+01:00
Styling fixes/improvements
diff --git a/.github/workflows/publish-lowcoder-cli.yml b/.github/workflows/publish-lowcoder-cli.yml
@@ -9,7 +9,7 @@ on:
 
 jobs:
   publish-package:
-    if: ${{ github.repositoryUrl == 'git://github.com/lowcoder/lowcoder.git'}}
+    if: ${{ github.repositoryUrl == 'git://github.com/lowcoder-org/lowcoder.git'}}
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
diff --git a/.github/workflows/publish-lowcoder-comps.yml b/.github/workflows/publish-lowcoder-comps.yml
@@ -9,7 +9,7 @@ on:
 
 jobs:
   publish-package:
-    if: ${{ github.repositoryUrl == 'git://github.com/lowcoder/lowcoder.git'}}
+    if: ${{ github.repositoryUrl == 'git://github.com/lowcoder-org/lowcoder.git'}}
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
diff --git a/.github/workflows/publish-lowcoder-core.yml b/.github/workflows/publish-lowcoder-core.yml
@@ -9,7 +9,7 @@ on:
 
 jobs:
   publish-package:
-    if: ${{ github.repositoryUrl == 'git://github.com/lowcoder/lowcoder.git'}}
+    if: ${{ github.repositoryUrl == 'git://github.com/lowcoder-org/lowcoder.git'}}
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
diff --git a/.github/workflows/publish-lowcoder-sdk.yml b/.github/workflows/publish-lowcoder-sdk.yml
@@ -9,7 +9,7 @@ on:
 
 jobs:
   publish-package:
-    if: ${{ github.repositoryUrl == 'git://github.com/lowcoder/lowcoder.git'}}
+    if: ${{ github.repositoryUrl == 'git://github.com/lowcoder-org/lowcoder.git'}}
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
diff --git a/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx b/client/packages/lowcoder/src/comps/comps/formComp/formComp.tsx
@@ -57,6 +57,17 @@ import log from "loglevel";
 import { DisabledContext } from "comps/generators/uiCompBuilder";
 import { LoadingOutlined } from "@ant-design/icons";
 import { messageInstance } from "lowcoder-design";
+import { styled } from "styled-components";
+
+const FormWrapper = styled.div`
+  height: 100%;
+  .ant-spin-nested-loading {
+    height: 100%;
+    .ant-spin-container {
+      height: 100%;
+    }
+  }
+`;
 
 const eventOptions = [submitEvent] as const;
 
@@ -172,12 +183,18 @@ const FormBaseComp = (function () {
   return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
     return (
       <DisabledContext.Provider value={props.disabled}>
-        <Spin indicator={loadingIcon} spinning={props.loading}>
-          <TriContainer
-            {...props}
-            hintPlaceholder={<BodyPlaceholder {...props} dispatch={dispatch} />}
-          />
-        </Spin>
+        <FormWrapper>
+          <Spin
+            indicator={loadingIcon}
+            spinning={props.loading}
+            style={{height: '100%'}}
+          >
+            <TriContainer
+              {...props}
+              hintPlaceholder={<BodyPlaceholder {...props} dispatch={dispatch} />}
+            />
+          </Spin>
+        </FormWrapper>
       </DisabledContext.Provider>
     );
   })
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/tableColumnComp.tsx
@@ -106,7 +106,7 @@ export const columnChildrenMap = {
   borderWidth: withDefault(RadiusControl, ""),
   radius: withDefault(RadiusControl, ""),
   textSize: withDefault(RadiusControl, ""),
-  textWeight: withDefault(StringControl, "regular"),
+  textWeight: withDefault(StringControl, "normal"),
   fontFamily: withDefault(StringControl, "sans-serif"),
   cellColor: CellColorComp,
   textOverflow: withDefault(TextOverflowControl, "ellipsis"),
@@ -276,7 +276,7 @@ export class ColumnComp extends ColumnInitComp {
         {this.children.textWeight.propertyView({
           label: trans('style.textWeight'),
           preInputNode: <StyledTextWeightIcon as={TextWeigthIcon} title="" />,	
-          placeholder: 'regular',
+          placeholder: 'normal',
         })}
         {this.children.fontFamily.propertyView({
           label: trans('style.fontFamily'),
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx
@@ -212,9 +212,6 @@ const TableWrapper = styled.div<{
             border-color: ${(props) => props.$headerStyle.border};
             border-width: ${(props) => props.$headerStyle.borderWidth};
             color: ${(props) => props.$headerStyle.headerText};
-            font-size: ${(props) => props.$headerStyle.textSize};
-            font-weight: ${(props) => props.$headerStyle.textWeight};
-            font-family: ${(props) => props.$headerStyle.fontFamily};
             border-inline-end: ${(props) => `${props.$headerStyle.borderWidth} solid ${props.$headerStyle.border}`} !important;
             ${(props) => 
               props.$fixedHeader && `
@@ -227,6 +224,12 @@ const TableWrapper = styled.div<{
 
             > div {
               margin: ${(props) => props.$headerStyle.margin};
+
+              &, .ant-table-column-title > div {
+                font-size: ${(props) => props.$headerStyle.textSize};
+                font-weight: ${(props) => props.$headerStyle.textWeight};
+                font-family: ${(props) => props.$headerStyle.fontFamily};
+              }
             }
 
             &:last-child {
@@ -516,7 +519,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,
diff --git a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
@@ -7,7 +7,7 @@ import { BooleanStateControl, booleanExposingStateControl, stringExposingStateCo
 import { eventHandlerControl } from "comps/controls/eventHandlerControl";
 import { TabsOptionControl } from "comps/controls/optionsControl";
 import { styleControl } from "comps/controls/styleControl";
-import { TabContainerStyle, TabContainerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
+import { ContainerBodyStyle, ContainerBodyStyleType, ContainerHeaderStyle, ContainerHeaderStyleType, TabContainerStyle, TabContainerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import { sameTypeMap, UICompBuilder, withDefault } from "comps/generators";
 import { addMapChildAction } from "comps/generators/sameTypeMap";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
@@ -33,9 +33,6 @@ import { DisabledContext } from "comps/generators/uiCompBuilder";
 import { EditorContext } from "comps/editorState";
 import { checkIsMobile } from "util/commonUtils";
 import { messageInstance } from "lowcoder-design";
-import { show } from "antd-mobile/es/components/dialog/show";
-import { BoolControl } from "@lowcoder-ee/index.sdk";
-import { Switch } from "antd";
 
 const EVENT_OPTIONS = [
   {
@@ -57,38 +54,52 @@ const childrenMap = {
   disabled: BoolCodeControl,
   showHeader: withDefault(BooleanStateControl, "true"),
   style: styleControl(TabContainerStyle),
+  headerStyle: styleControl(ContainerHeaderStyle),
+  bodyStyle: styleControl(ContainerBodyStyle),
 };
 
 type ViewProps = RecordConstructorToView<typeof childrenMap>;
 type TabbedContainerProps = ViewProps & { dispatch: DispatchType };
  
-const getStyle = (style: TabContainerStyleType) => {
+const getStyle = (
+  style: TabContainerStyleType,
+  headerStyle: ContainerHeaderStyleType,
+  bodyStyle: ContainerBodyStyleType,
+) => {
   return css`
     &.ant-tabs {
+      overflow: hidden;
       border: ${style.borderWidth} solid ${style.border};
       border-radius: ${style.radius};
-      overflow: hidden;
       padding: ${style.padding};
+      background-color: ${style.background};
+      background-image: ${style.backgroundImage};
+      background-repeat: ${style.backgroundImageRepeat};
+      background-size: ${style.backgroundImageSize};
+      background-position: ${style.backgroundImagePosition};
+      background-origin: ${style.backgroundImageOrigin};
+
+      > .ant-tabs-content-holder > .ant-tabs-content > .ant-tabs-tabpane {
+        height: 100%;
+        .react-grid-layout {
+          border-radius: 0;
+          background-color: ${bodyStyle.background || 'transparent'};
+          background-image: ${bodyStyle.backgroundImage};
+          background-repeat: ${bodyStyle.backgroundImageRepeat};
+          background-size: ${bodyStyle.backgroundImageSize};
+          background-position: ${bodyStyle.backgroundImagePosition};
+          background-origin: ${bodyStyle.backgroundImageOrigin};
 
-      > .ant-tabs-content-holder > .ant-tabs-content > div > .react-grid-layout {
-        background-color: ${style.background};
-        border-radius: 0;
-        
-        background-image: ${style.backgroundImage};
-        background-repeat: ${style.backgroundImageRepeat};
-        background-size: ${style.backgroundImageSize};
-        background-position: ${style.backgroundImagePosition};
-        background-origin: ${style.backgroundImageOrigin};
-        
+        }
       }
 
       > .ant-tabs-nav {
-        background-color: ${style.headerBackground};
-        background-image: ${style.headerBackgroundImage};
-        background-repeat: ${style.headerBackgroundImageRepeat};
-        background-size: ${style.headerBackgroundImageSize};
-        background-position: ${style.headerBackgroundImagePosition};
-        background-origin: ${style.headerBackgroundImageOrigin};
+        background-color: ${headerStyle.headerBackground || 'transparent'};
+        background-image: ${headerStyle.headerBackgroundImage};
+        background-repeat: ${headerStyle.headerBackgroundImageRepeat};
+        background-size: ${headerStyle.headerBackgroundImageSize};
+        background-position: ${headerStyle.headerBackgroundImagePosition};
+        background-origin: ${headerStyle.headerBackgroundImageOrigin};
 
         .ant-tabs-tab {
           div {
@@ -113,7 +124,9 @@ const getStyle = (style: TabContainerStyleType) => {
 };
 
 const StyledTabs = styled(Tabs)<{ 
-  $style: TabContainerStyleType; 
+  $style: TabContainerStyleType;
+  $headerStyle: ContainerHeaderStyleType;
+  $bodyStyle: ContainerBodyStyleType;
   $isMobile?: boolean; 
   $showHeader?: boolean;
 }>`
@@ -145,7 +158,11 @@ const StyledTabs = styled(Tabs)<{
     margin-right: -24px;
   }
 
-  ${(props) => props.$style && getStyle(props.$style)}
+  ${(props) => props.$style && getStyle(
+    props.$style,
+    props.$headerStyle,
+    props.$bodyStyle,
+  )}
 `;
 
 const ContainerInTab = (props: ContainerBaseProps) => {
@@ -155,7 +172,14 @@ const ContainerInTab = (props: ContainerBaseProps) => {
 };
 
 const TabbedContainer = (props: TabbedContainerProps) => {
-  let { tabs, containers, dispatch, style } = props;
+  let {
+    tabs,
+    containers,
+    dispatch,
+    style,
+    headerStyle,
+    bodyStyle,
+  } = props;
 
   const visibleTabs = tabs.filter((tab) => !tab.hidden);
   const selectedTab = visibleTabs.find((tab) => tab.key === props.selectedTabKey.value);
@@ -203,7 +227,7 @@ const TabbedContainer = (props: TabbedContainerProps) => {
       key: tab.key,
       forceRender: true,
       children: (
-        <BackgroundColorContext.Provider value={props.style.background}>
+        <BackgroundColorContext.Provider value={bodyStyle.background}>
           <ContainerInTab
             layout={containerProps.layout.getView()}
             items={gridItemCompToGridItems(containerProps.items.getView())}
@@ -222,6 +246,8 @@ const TabbedContainer = (props: TabbedContainerProps) => {
     <StyledTabs
       activeKey={activeKey}
       $style={style}
+      $headerStyle={headerStyle}
+      $bodyStyle={bodyStyle}
       $showHeader={showHeader}
       onChange={(key) => {
         if (key !== props.selectedTabKey.value) {
@@ -277,6 +303,14 @@ export const TabbedContainerBaseComp = (function () {
               <Section name={sectionNames.style}>
                 {children.style.getPropertyView()}
               </Section>
+              {children.showHeader.getView() && (
+                <Section name={"Header Style"}>
+                  { children.headerStyle.getPropertyView() }
+                </Section>
+              )}
+              <Section name={"Body Style"}>
+                { children.bodyStyle.getPropertyView() }
+              </Section>
             </>
           )}
         </>
diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx
@@ -18,6 +18,12 @@ const getStyle = (style: ContainerStyleType) => {
     padding: ${style.padding};	
     // width: ${widthCalculator(style.margin)};	
     // height: ${heightCalculator(style.margin)};
+    ${style.background && `background-color: ${style.background};`}
+    ${style.backgroundImage && `background-image: ${style.backgroundImage};`}
+    ${style.backgroundImageRepeat && `background-repeat: ${style.backgroundImageRepeat};`}
+    ${style.backgroundImageSize && `background-size: ${style.backgroundImageSize};`}
+    ${style.backgroundImagePosition && `background-position: ${style.backgroundImagePosition};`}
+    ${style.backgroundImageOrigin && `background-origin: ${style.backgroundImageOrigin};`}
   `;
 };
 
@@ -130,7 +136,7 @@ export function TriContainer(props: TriContainerProps) {
             minHeight="46px"
             containerPadding={[paddingWidth, 3]}
             showName={{ bottom: showBody || showFooter ? 20 : 0 }}
-            $backgroundColor={headerStyle?.headerBackground}
+            $backgroundColor={headerStyle?.headerBackground || 'transparent'}
             $headerBackgroundImage={headerStyle?.headerBackgroundImage}
             $headerBackgroundImageRepeat={headerStyle?.headerBackgroundImageRepeat}
             $headerBackgroundImageSize={headerStyle?.headerBackgroundImageSize}
@@ -154,7 +160,7 @@ export function TriContainer(props: TriContainerProps) {
               (showHeader && showFooter) || showHeader ? [paddingWidth, 11.5] : [paddingWidth, 11]
             }
             hintPlaceholder={props.hintPlaceholder ?? HintPlaceHolder}
-            $backgroundColor={bodyStyle?.background}
+            $backgroundColor={bodyStyle?.background || 'transparent'}
             $borderColor={style?.border}
             $borderWidth={style?.borderWidth}
             $backgroundImage={bodyStyle?.backgroundImage}
@@ -177,7 +183,7 @@ export function TriContainer(props: TriContainerProps) {
             minHeight={showBody ? "47px" : "46px"}
             containerPadding={showBody || showHeader ? [paddingWidth, 3.5] : [paddingWidth, 3]}
             showName={{ top: showHeader || showBody ? 20 : 0 }}
-            $backgroundColor={footerStyle?.footerBackground}
+            $backgroundColor={footerStyle?.footerBackground || 'transparent'}
             $footerBackgroundImage={footerStyle?.footerBackgroundImage}
             $footerBackgroundImageRepeat={footerStyle?.footerBackgroundImageRepeat}
             $footerBackgroundImageSize={footerStyle?.footerBackgroundImageSize}
diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
@@ -393,7 +393,7 @@ function calcColors<ColorMap extends Record<string, string>>(
     }
     if (isTextWeightConfig(config)) {
       // TODO: remove default textWeight after added in theme in backend.
-      res[name] = themeWithDefault[config.textWeight] || 'regular';
+      res[name] = themeWithDefault[config.textWeight] || 'normal';
     }
     if (isFontFamilyConfig(config)) {
       res[name] = themeWithDefault[config.fontFamily] || 'sans-serif';
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx

Original file line number	Diff line number	Diff line change
`@@ -393,7 +393,7 @@ function calcColors<ColorMap extends Record<string, string>>(`
`393`	`393`	`}`
`394`	`394`	`if (isTextWeightConfig(config)) {`
`395`	`395`	`// TODO: remove default textWeight after added in theme in backend.`
`396`		`- res[name] = themeWithDefault[config.textWeight] \|\| 'regular';`
	`396`	`+ res[name] = themeWithDefault[config.textWeight] \|\| 'normal';`
`397`	`397`	`}`
`398`	`398`	`if (isFontFamilyConfig(config)) {`
`399`	`399`	`res[name] = themeWithDefault[config.fontFamily] \|\| 'sans-serif';`