added gradient

raheeliftikhar5 · raheeliftikhar5 · commit 963be9132e47 · 2024-10-18T16:39:30.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
@@ -27,7 +27,7 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
         font-style: ${buttonStyle.fontStyle};
         text-transform:${buttonStyle.textTransform};
         text-decoration:${buttonStyle.textDecoration};
-        background-color: ${buttonStyle.background};
+        background: ${buttonStyle.background};
         border-radius: ${buttonStyle.radius};
         margin: ${buttonStyle.margin};
         padding: ${buttonStyle.padding};
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
@@ -52,7 +52,7 @@ const LeftButtonWrapper = styled.div<{ $buttonStyle: DropdownStyleType }>`
       ${(props) => `text-transform: ${props.$buttonStyle.textTransform};`}
       ${(props) => `font-weight: ${props.$buttonStyle.textWeight};`}
     }
-    ${(props) => `background-color: ${props.$buttonStyle.background};`}
+    ${(props) => `background: ${props.$buttonStyle.background};`}
     ${(props) => `color: ${props.$buttonStyle.text};`}
     ${(props) => `padding: ${props.$buttonStyle.padding};`}
     ${(props) => `font-size: ${props.$buttonStyle.textSize};`}
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx
@@ -37,7 +37,7 @@ const Wrapper = styled.div<{ $badgeStyle: BadgeStyleType, $style: FloatButtonSty
         inset-block-end: -8px;
     }
     .ant-float-btn-primary .ant-float-btn-body {
-    background-color: ${(props) => props.$style.background};
+    background: ${(props) => props.$style.background};
     border: ${(props) => props.$style.border};
     border-style: ${(props) => props.$style.borderStyle};
     border-width: ${(props) => props.$style.borderWidth};
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
@@ -41,7 +41,7 @@ const Link = styled(Button)<{
     border-radius:${props.$style.radius ? props.$style.radius:'0px'};
     text-transform:${props.$style.textTransform ? props.$style.textTransform:''};
     text-decoration:${props.$style.textDecoration ? props.$style.textDecoration:''} !important;
-    background-color: ${props.$style.background};
+    background: ${props.$style.background};
     &:hover {
       color: ${props.$style.hoverText} !important;
     }
diff --git a/client/packages/lowcoder/src/comps/comps/carouselComp.tsx b/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
@@ -29,7 +29,7 @@ const Container = styled.div<{$bg: string; $animationStyle:AnimationStyleType}>`
   &,
   .ant-carousel {
     height: 100%;
-    background-color: ${(props) => props.$bg};
+    background: ${(props) => props.$bg};
     ${props=>props.$animationStyle}
   }
 `;
diff --git a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx
@@ -156,7 +156,7 @@ const getStyle = (style: FileStyleType) => {
 
     .ant-btn:not(:disabled) {
       border-color: ${style.border};
-      background-color: ${style.background};
+      background: ${style.background};
       color: ${style.text};
 
       &:hover,
diff --git a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
@@ -22,7 +22,7 @@ const getStyle = (style: FileViewerStyleType) => {
     padding: ${style.padding};
 
     overflow: hidden;
-    background-color: ${style.background};
+    background: ${style.background};
     border: ${(props) => (style.borderWidth ? style.borderWidth : "1px")} solid ${style.border};
     border-radius: calc(min(${style.radius}, 20px));
   `;
diff --git a/client/packages/lowcoder/src/comps/comps/iconComp.tsx b/client/packages/lowcoder/src/comps/comps/iconComp.tsx
@@ -37,7 +37,7 @@ const Container = styled.div<{
   display: flex;
   align-items: center;
   justify-content: center;
-${props=>props.$animationStyle}
+  ${props=>props.$animationStyle}
   ${(props) =>
     props.$style &&
     css`
diff --git a/client/packages/lowcoder/src/comps/comps/iframeComp.tsx b/client/packages/lowcoder/src/comps/comps/iframeComp.tsx
@@ -30,7 +30,7 @@ ${props=>props.$animationStyle}
     width: 100%;
     height: 100%;
     display: block;
-    background-color: ${(props) => props.$style.background};
+    background: ${(props) => props.$style.background};
   }
 `;
 
diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx
@@ -115,7 +115,7 @@ let JsonLottieTmpComp = (function () {
             height: "100%",
             display: "flex",
             justifyContent: "center",
-            backgroundColor: `${props.container.background}`,
+            background: `${props.container.background}`,
             padding: `${props.container.padding}`,
             rotate: props.container.rotation,
           }}
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/videobuttonCompConstants.tsx
@@ -27,7 +27,7 @@ export function getButtonStyle(buttonStyle: any) {
         --antd-wave-shadow-color: ${buttonStyle.border};
         border-color: ${buttonStyle.border};
         color: ${buttonStyle.text};
-        background-color: ${buttonStyle.background};
+        background: ${buttonStyle.background};
         border-radius: ${buttonStyle.radius};
         margin: ${buttonStyle.margin};
         padding: ${buttonStyle.padding};
diff --git a/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx b/client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
@@ -41,7 +41,7 @@ ${props=>props.$animationStyle}
   border-radius: ${(props) =>props.$borderRadius ? props.$borderRadius : '2px'};
   box-sizing: border-box;
   border: ${(props) => props.$borderWidth ? `${props.$borderWidth}` : '1px'} ${props=>props.$borderStyle} ${(props) => props.$borderColor};
-  background-color: ${(props) => props.$bgColor};
+  background: ${(props) => props.$bgColor};
 `;
 
 const NavInner = styled("div") <Pick<IProps, "$justify">>`
diff --git a/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx b/client/packages/lowcoder/src/comps/comps/richTextEditorComp.tsx
@@ -98,7 +98,7 @@ const commonStyle = (style: RichTextEditorStyleType, contentScrollBar: boolean)
     &.ql-container,
     &.ql-toolbar {
       border-color: ${style.border};
-      background-color: ${style.background};
+      background: ${style.background};
       
     }
   }
@@ -108,7 +108,7 @@ const commonStyle = (style: RichTextEditorStyleType, contentScrollBar: boolean)
   }
   & .ql-container {
     border-radius: 0 0 ${style.radius} ${style.radius};
-    background-color: ${style.background};
+    background: ${style.background};
     border-width: ${style.borderWidth ? style.borderWidth : "1px"};
   }
 `;
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/segmentedControl.tsx
@@ -5,7 +5,7 @@ import { ChangeEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { LabelControl } from "comps/controls/labelControl";
 import { SelectOptionControl } from "comps/controls/optionsControl";
 import { styleControl } from "comps/controls/styleControl";
-import { AnimationStyle, SegmentStyle, SegmentStyleType } from "comps/controls/styleControlConstants";
+import { AnimationStyle, LabelStyle, SegmentStyle, SegmentStyleType } from "comps/controls/styleControlConstants";
 import styled, { css } from "styled-components";
 import { UICompBuilder } from "../../generators";
 import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing";
@@ -44,7 +44,7 @@ const getStyle = (style: SegmentStyleType) => {
       }
       .ant-segmented-item-selected,
       .ant-segmented-thumb {
-        background-color: ${style.indicatorBackground};
+        background: ${style.indicatorBackground};
       }
     }
 
@@ -77,6 +77,7 @@ const SegmentChildrenMap = {
   onEvent: ChangeEventHandlerControl,
   options: SelectOptionControl,
   style: styleControl(SegmentStyle, 'style'),
+  labelStyle: styleControl(LabelStyle , 'labelStyle'),
   animationStyle: styleControl(AnimationStyle, 'animationStyle'),
   viewRef: RefControl<HTMLDivElement>,
 
@@ -93,6 +94,7 @@ let SegmentedControlBasicComp = (function () {
     return props.label({
       required: props.required,
       style: props.style,
+      labelStyle: props.labelStyle,
       animationStyle: props.animationStyle,
       children: (
         <Segmented
@@ -143,6 +145,9 @@ let SegmentedControlBasicComp = (function () {
           <Section name={sectionNames.style}>
             {children.style.getPropertyView()}
           </Section>
+          <Section name={sectionNames.labelStyle}>
+            {children.labelStyle.getPropertyView()}
+          </Section>
           <Section name={sectionNames.animationStyle} hasTooltip={true}>
             {children.animationStyle.getPropertyView()}
             </Section>
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx
@@ -109,7 +109,7 @@ export const getStyle = (
       }
 
       .ant-select-selector {
-        background-color: ${style.background};
+        background: ${style.background};
         border-color: ${style.border};
         border-width:${(style as SelectStyleType).borderWidth};
         box-shadow:${(style as SelectStyleType).boxShadow} ${(style as SelectStyleType).boxShadowColor};
@@ -124,7 +124,7 @@ export const getStyle = (
 
       .ant-select-arrow,
       .ant-select-clear {
-        background-color: ${style.background};
+        // background: ${style.background};
         color: ${style.text === "#222222"
       ? "#8B8FA3"
       : isDarkColor(style.text)
@@ -142,7 +142,7 @@ export const getStyle = (
 
       &.ant-select-multiple .ant-select-selection-item {
         border: none;
-        background-color: ${(style as MultiSelectStyleType).tags};
+        background: ${(style as MultiSelectStyleType).tags};
         color: ${(style as MultiSelectStyleType).tagsText};
         border-radius: ${style.radius};
 
@@ -191,7 +191,7 @@ const Select = styled(AntdSelect) <{ $style: SelectStyleType & MultiSelectStyleT
 `;
 
 const DropdownStyled = styled.div<{ $style: ChildrenMultiSelectStyleType }>`
- background-color: ${props => props.$style?.background};
+    background: ${props => props.$style?.background};
     border: ${props => props.$style?.border};
     border-style: ${props => props.$style?.borderStyle};
     border-width: ${props => props.$style?.borderWidth};
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
@@ -19,6 +19,7 @@ import { dropdownControl } from "comps/controls/dropdownControl";
 import { useContext, useState, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
 import { AutoHeightControl } from "@lowcoder-ee/index.sdk";
+import { getBackgroundStyle } from "@lowcoder-ee/util/styleUtils";
 
 const sizeOptions = [
   {
@@ -120,14 +121,9 @@ let StepControlBasicComp = (function () {
       margin: ${props.style.margin};
       rotate: ${props.style.rotation};
       padding: ${props.style.padding};
-      background-color: ${props.style.background};
       border: ${props.style.borderWidth} solid ${props.style.border};
       border-radius: ${props.style.radius};
-      background-image: url(${props.style.backgroundImage});
-      background-repeat: ${props.style.backgroundImageRepeat};
-      background-size: ${props.style.backgroundImageSize};
-      background-position: ${props.style.backgroundImagePosition};
-      background-origin: ${props.style.backgroundImageOrigin};
+      ${getBackgroundStyle(props.style)}
       .ant-steps-item { padding-top: 5px !important; }
       .ant-steps.ant-steps-label-vertical.ant-steps-small .ant-steps-item-icon { margin-top: 17px !important; }
       .ant-steps.ant-steps-label-vertical.ant-steps-default .ant-steps-item-icon { margin-top: 12px !important; }
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -1353,7 +1353,6 @@ export const RadioStyle = [
 ] as const;
 
 export const SegmentStyle = [
-  LABEL,
   ...STYLING_FIELDS_SEQUENCE.filter(
     (style) => ["border", "borderWidth"].includes(style.name) === false
   ),

Original file line number	Diff line number	Diff line change
@@ -52,7 +52,7 @@ const LeftButtonWrapper = styled.div<{ $buttonStyle: DropdownStyleType }>`
`52`	`52`	${(props) => `text-transform: ${props.$buttonStyle.textTransform};`}
`53`	`53`	${(props) => `font-weight: ${props.$buttonStyle.textWeight};`}
`54`	`54`	`}`
`55`		- ${(props) => `background-color: ${props.$buttonStyle.background};`}
	`55`	+ ${(props) => `background: ${props.$buttonStyle.background};`}
`56`	`56`	${(props) => `color: ${props.$buttonStyle.text};`}
`57`	`57`	${(props) => `padding: ${props.$buttonStyle.padding};`}
`58`	`58`	${(props) => `font-size: ${props.$buttonStyle.textSize};`}
Original file line number	Diff line number	Diff line change
`@@ -37,7 +37,7 @@ const Wrapper = styled.div<{ $badgeStyle: BadgeStyleType, $style: FloatButtonSty`
`37`	`37`	`inset-block-end: -8px;`
`38`	`38`	`}`
`39`	`39`	`.ant-float-btn-primary .ant-float-btn-body {`
`40`		`- background-color: ${(props) => props.$style.background};`
	`40`	`+ background: ${(props) => props.$style.background};`
`41`	`41`	`border: ${(props) => props.$style.border};`
`42`	`42`	`border-style: ${(props) => props.$style.borderStyle};`
`43`	`43`	`border-width: ${(props) => props.$style.borderWidth};`
Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,7 @@ const Link = styled(Button)<{`
`41`	`41`	`border-radius:${props.$style.radius ? props.$style.radius:'0px'};`
`42`	`42`	`text-transform:${props.$style.textTransform ? props.$style.textTransform:''};`
`43`	`43`	`text-decoration:${props.$style.textDecoration ? props.$style.textDecoration:''} !important;`
`44`		`- background-color: ${props.$style.background};`
	`44`	`+ background: ${props.$style.background};`
`45`	`45`	`&:hover {`
`46`	`46`	`color: ${props.$style.hoverText} !important;`
`47`	`47`	`}`
Original file line number	Diff line number	Diff line change
@@ -29,7 +29,7 @@ const Container = styled.div<{$bg: string; $animationStyle:AnimationStyleType}>`
`29`	`29`	`&,`
`30`	`30`	`.ant-carousel {`
`31`	`31`	`height: 100%;`
`32`		`- background-color: ${(props) => props.$bg};`
	`32`	`+ background: ${(props) => props.$bg};`
`33`	`33`	`${props=>props.$animationStyle}`
`34`	`34`	`}`
`35`	`35`	`;
Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@ ${props=>props.$animationStyle}`
`30`	`30`	`width: 100%;`
`31`	`31`	`height: 100%;`
`32`	`32`	`display: block;`
`33`		`- background-color: ${(props) => props.$style.background};`
	`33`	`+ background: ${(props) => props.$style.background};`
`34`	`34`	`}`
`35`	`35`	`;
`36`	`36`