hide gradient selection in color picker for text/border colors

Author: raheeliftikhar5

client/packages/lowcoder-design/src/components/colorSelect/index.tsx

@@ -21,6 +21,7 @@ interface ColorSelectProps {
   dispatch?: (value: any) => void;
   changeColor?: (value: any) => void;
   presetColors?: string[];
+  allowGradient?: boolean;
 }
 
 export const ColorSelect = (props: ColorSelectProps) => {
@@ -31,9 +32,11 @@ export const ColorSelect = (props: ColorSelectProps) => {
 
   const presetColors = useMemo(() => {
     let colors = props.presetColors || [];
-    colors = colors.concat(gradientColors.slice(0, 16 - colors.length));
+    if (props.allowGradient) {
+      colors = colors.concat(gradientColors.slice(0, 16 - colors.length));
+    }
     return colors;
-  }, [props.presetColors, selectedColor]);
+  }, [props.presetColors, selectedColor, props.allowGradient]);
 
   const throttleChange = useCallback(
     throttle((rgbaColor: string) => {
@@ -70,6 +73,7 @@ export const ColorSelect = (props: ColorSelectProps) => {
             width={250}
             height={160}
             presets={presetColors}
+            $allowGradient={props.allowGradient}
           />
         </PopoverContainer>
       }
@@ -191,11 +195,14 @@ const ColorBlock = styled.div<{ $color: string }>`
   overflow: hidden;
 `;
 
-const StyledColorPicker = styled(ColorPicker)`
+const StyledColorPicker = styled(ColorPicker)<{$allowGradient?: boolean}>`
+  #rbgcp-wrapper > div:nth-child(2) > div:first-child > div:first-child {
+    ${props => !props.$allowGradient && `visibility: hidden`};
+  }
   #rbgcp-wrapper > div:last-child > div:last-child {
     justify-content: flex-start !important;
     gap: 3px;
-
+  
     > div {
       border: 1px solid lightgray;
     }

client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx

@@ -379,12 +379,10 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
         themeSettingKey !== "gridBgImageOrigin" && (
         <div className="config-input">
           <ColorSelect
-            changeColor={_.debounce(setColor, 500, {
-              leading: true,
-              trailing: true,
-            })}
+            changeColor={setColor}
             color={color!}
             trigger="hover"
+            allowGradient={themeSettingKey === 'canvas' || themeSettingKey === 'primarySurface'}
           />
           <TacoInput
             value={color}

client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx

@@ -477,6 +477,7 @@ function AppCanvasSettingsModal(props: ChildrenInstance) {
           })}
           {gridBg.propertyView({
             label: trans("style.background"),
+            allowGradient: true,
           })}
           {gridBgImage.propertyView({
             label: trans("appSetting.gridBgImage"),

client/packages/lowcoder/src/comps/controls/colorControl.tsx

@@ -73,6 +73,7 @@ type PropertyViewParam = {
   isDep?: boolean;
   // auto-generated message?
   depMsg?: string;
+  allowGradient?: boolean;
 };
 
 export class ColorControl extends ColorCodeControl {
@@ -95,7 +96,7 @@ function ColorItem(props: {
   const inputRef = React.createRef<HTMLDivElement>();
   const containerRef = React.createRef<HTMLDivElement>();
 
-  const currentThemeColors = useThemeColors();
+  const currentThemeColors = useThemeColors(param.allowGradient);
 
   const input = propertyView.call(controlThis, {
     placeholder: param.panelDefaultColor,
@@ -138,6 +139,7 @@ function ColorItem(props: {
         <ColorSelect
           dispatch={controlThis.dispatch}
           color={param.panelDefaultColor || color || DEFAULT_COLOR}
+          allowGradient={param.allowGradient}
           presetColors={currentThemeColors}
         />
         <div style={{ display: "flex" }}>

client/packages/lowcoder/src/comps/controls/styleControl.tsx

@@ -1365,6 +1365,7 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
                                                                   isDep: true,
                                                                   depMsg:
                                                                     depMsg,
+                                                                  allowGradient: config.name.includes('background'),
                                                                 })}
                   </div>
                 );

client/packages/lowcoder/src/util/hooks.ts

@@ -233,7 +233,7 @@ export function useMergeCompStyles(
 type ColorKey = 'primary' | 'textDark' | 'textLight' | 'canvas' | 'primarySurface' | 'border';
 type ColorKeys = ColorKey[];
 
-export function useThemeColors() {
+export function useThemeColors(allowGradient?: boolean) {
   const currentTheme = useContext(ThemeContext)?.theme ?? {} as ThemeDetail;
   const colorKeys: ColorKeys = ['primary', 'textDark', 'textLight', 'canvas', 'primarySurface', 'border'];
 
@@ -248,6 +248,9 @@ export function useThemeColors() {
         colors.push(currentTheme[colorKey] ?? '');
       }
     })
+    if (!allowGradient) {
+      colors = colors.concat(constantColors);
+    }
     return uniq(colors);
   }, [
     currentTheme,

client/packages/lowcoder/src/util/styleUtils.tsx

@@ -15,6 +15,18 @@ const getBackgroundStyle = (style: Record<string, string | undefined>) => {
   `;
 }
 
+const getTextStyle = (color?: string) => {
+  return css`
+    ${isValidColor(color) && `color: ${color};`}
+    ${isValidGradient(color) && `
+      background-image: -webkit-${color};
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    `}
+  `;
+}
+
 export {
   getBackgroundStyle,
+  getTextStyle,
 }