Theme canvas settings

client/packages/lowcoder-design/src/components/colorSelect/colorUtils.ts

@@ -4,18 +4,36 @@ import { generate } from "@ant-design/colors/es";
 
 extend([namesPlugin]);
 
+export const gradientColors = [
+  "linear-gradient(90deg, #1CB5E0 0%, #000851 100%)",
+  "linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%)",
+  "linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%)",
+  "linear-gradient(90deg, #3F2B96 0%, #A8C0FF 100%)",
+  "linear-gradient(90deg, #FDBB2D 0%, #22C1C3 100%)",
+  "linear-gradient(90deg, #FDBB2D 0%, #3A1C71 100%)",
+  "linear-gradient(90deg, #e3ffe7 0%, #d9e7ff 100%)",
+  "linear-gradient(90deg, #4b6cb7 0%, #182848 100%)",
+  "linear-gradient(90deg, #9ebd13 0%, #008552 100%)",
+  "linear-gradient(90deg, #0700b8 0%, #00ff88 100%)",
+  "linear-gradient(90deg, #d53369 0%, #daae51 100%)",
+  "linear-gradient(90deg, #efd5ff 0%, #515ada 100%)",
+  "linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%)",
+  "linear-gradient(90deg, #f8ff00 0%, #3ad59f 100%)",
+  "linear-gradient(90deg, #fcff9e 0%, #c67700 100%)",
+];
+
 // Color Palette
 export const constantColors = [
-  { id: 1, color: "#6D83F2" },
-  { id: 2, color: "#5589F2" },
-  { id: 3, color: "#36B389" },
-  { id: 4, color: "#E68E50" },
-  { id: 5, color: "#E67373" },
-  { id: 6, color: "#F5FFF7" },
-  { id: 7, color: "#F3FAFF" },
-  { id: 8, color: "#FFF6E6" },
-  { id: 9, color: "#F5F5F6" },
-  { id: 10, color: "#FFFFFF" },
+  "#6D83F2",
+  "#5589F2",
+  "#36B389",
+  "#E68E50",
+  "#E67373",
+  "#F5FFF7",
+  "#F3FAFF",
+  "#FFF6E6",
+  "#F5F5F6",
+  "#FFFFFF",
 ];
 
 export const chartColorPalette = [
@@ -40,7 +58,17 @@ const alphaOfRgba = (rgba: string) => {
   return colord(rgba).alpha().toString();
 };
 
-const isValidColor = (str: string) => {
+const isValidGradient = (color?: string) => {
+  if (!color) return false;
+
+  const linearGradientRegex = /^linear-gradient\((\d+deg|to\s+(top|right|bottom|left)(\s+(top|right|bottom|left))?)\s*,\s*((#[0-9a-fA-F]{3,6}|rgba?\(\d+,\s*\d+,\s*\d+(,\s*\d+(\.\d+)?)?\)|[a-zA-Z]+)(\s+\d+%?)?,?\s*)+\)$/i;
+  const radialGradientRegex = /^radial-gradient\(\s*(circle|ellipse)?\s*,\s*((#[0-9a-fA-F]{3,6}|rgba?\(\d+,\s*\d+,\s*\d+(,\s*\d+(\.\d+)?)?\)|[a-zA-Z]+)(\s+\d+%?)?,?\s*)+\)$/i;
+
+  return linearGradientRegex.test(color) || radialGradientRegex.test(color);
+}
+
+const isValidColor = (str?: string) => {
+  if (!str) return false;
   return colord(str).isValid();
 };
 
@@ -91,4 +119,4 @@ export const darkenColor = (colorStr: string, intensity: number) => {
   return color.darken(intensity).toHex().toUpperCase();
 };
 
-export { toRGBA, toHex, alphaOfRgba, isValidColor };
+export { toRGBA, toHex, alphaOfRgba, isValidColor, isValidGradient };

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

@@ -1,15 +1,17 @@
-import { RgbaStringColorPicker } from "react-colorful";
 import { default as Popover } from "antd/es/popover";
+import ColorPicker, {useColorPicker} from 'react-best-gradient-color-picker';
 import { ActionType } from '@rc-component/trigger/lib/interface';
 import {
   alphaOfRgba,
   toRGBA,
   toHex,
   constantColors,
   isValidColor,
+  isValidGradient,
+  gradientColors,
 } from "components/colorSelect/colorUtils";
 import styled, { css } from "styled-components";
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useRef, useState, useEffect, useMemo, } from "react";
 import { throttle } from "lodash";
 import { changeValueAction } from "lowcoder-core";
 
@@ -18,54 +20,65 @@ interface ColorSelectProps {
   trigger?: ActionType;
   dispatch?: (value: any) => void;
   changeColor?: (value: any) => void;
+  presetColors?: string[];
+  allowGradient?: boolean;
 }
 
 export const ColorSelect = (props: ColorSelectProps) => {
   const { color, trigger = "click", dispatch, changeColor } = props;
-  let pickerColor = useRef(toRGBA(color));
   const [visible, setVisible] = useState(false);
+  const [ selectedColor, setSelectedColor ] = useState(color);
+  const { getGradientObject } = useColorPicker(selectedColor, setSelectedColor);
+
+  const presetColors = useMemo(() => {
+    let colors = props.presetColors || [];
+    if (props.allowGradient) {
+      colors = colors.concat(gradientColors.slice(0, 16 - colors.length));
+    }
+    return colors;
+  }, [props.presetColors, selectedColor, props.allowGradient]);
+
   const throttleChange = useCallback(
     throttle((rgbaColor: string) => {
-      dispatch && dispatch(changeValueAction(toHex(rgbaColor), true));
-      changeColor && changeColor(toHex(rgbaColor));
+      dispatch && dispatch(changeValueAction(rgbaColor, true));
+      changeColor && changeColor(rgbaColor);
     }, 200),
     [dispatch,changeColor]
   );
+
+  useEffect(() => {
+    if (color !== selectedColor) {
+      const value = getGradientObject();
+      if (!value?.isGradient) {
+        return throttleChange(toHex(selectedColor));
+      }
+      throttleChange(selectedColor);
+    }
+  }, [selectedColor])
+
   return (
     <Popover
       trigger={trigger}
+      placement="left"
       destroyTooltipOnHide={true}
       onOpenChange={(value) => {
-        pickerColor.current = toRGBA(color);
         setVisible(value);
       }}
       content={
         <PopoverContainer>
-          <div style={{ position: "relative" }}>
-            <RgbaStringColorPicker color={pickerColor.current} onChange={throttleChange} />
-            <AlphaDiv color={color?.substring(0, 7)}>
-              <BackDiv $color={alphaOfRgba(toRGBA(color))}></BackDiv>
-            </AlphaDiv>
-          </div>
-          <ConstantDiv>
-            {constantColors.map((item) => {
-              return (
-                <ConstantBlock
-                  color={item.color}
-                  key={item.id}
-                  onClick={() => {
-                    throttleChange(item.color);
-                    pickerColor.current = toRGBA(item.color);
-                  }}
-                />
-              );
-            })}
-          </ConstantDiv>
+          <StyledColorPicker
+            disableDarkMode
+            value={color}
+            onChange={setSelectedColor}
+            width={250}
+            height={160}
+            presets={presetColors}
+            $allowGradient={props.allowGradient}
+          />
         </PopoverContainer>
       }
     >
-      <ColorBlock $color={color?.substring(0, 7)}>
-        <BackDiv $color={alphaOfRgba(toRGBA(color))}></BackDiv>
+      <ColorBlock $color={color}>
       </ColorBlock>
     </Popover>
   );
@@ -139,7 +152,6 @@ const PopoverContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 12px;
-  padding: 16px;
 `;
 // contrast block
 const AlphaDiv = styled.div.attrs((props) => ({
@@ -169,12 +181,30 @@ const BackDiv = styled.div.attrs<{ $color: string }>((props: { $color: string })
 `;
 // main block
 const ColorBlock = styled.div<{ $color: string }>`
-  background-color: ${(props) => (isValidColor(props.$color) ? props.$color : "#FFFFFF")};
+  background: ${(props) => (
+    isValidColor(props.$color) || isValidGradient(props.$color)
+    ? props.$color
+    : "#FFFFFF"
+  )};
   border: 1px solid rgba(0, 0, 0, 0.1);
   border-radius: 4px;
   height: 24px;
   width: 24px;
   cursor: pointer;
   background-clip: content-box;
   overflow: hidden;
+`;
+
+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-design/src/icons/index.tsx

@@ -172,6 +172,8 @@ export { ReactComponent as LeftSettingIcon } from "./remix/tools-fill.svg";
 export { ReactComponent as LeftLayersIcon } from "./remix/stack-line.svg";
 export { ReactComponent as LeftHelpIcon } from "./v1/icon-left-help.svg";
 export { ReactComponent as LeftPreloadIcon } from "./v1/icon-left-preload.svg";
+export { ReactComponent as LeftColorPaletteIcon } from "./remix/palette-line.svg";
+export { ReactComponent as LeftJSSettingIcon } from "./remix/javascript-line.svg";
 
 
 export { ReactComponent as HomeSettingsIcon } from "./v1/icon-home-settings.svg";

client/packages/lowcoder/package.json

@@ -64,6 +64,7 @@
     "qrcode.react": "^3.1.0",
     "rc-trigger": "^5.3.1",
     "react": "^18.2.0",
+    "react-best-gradient-color-picker": "^3.0.10",
     "react-colorful": "^5.5.1",
     "react-documents": "^1.2.1",
     "react-dom": "^18.2.0",

client/packages/lowcoder/src/api/commonSettingApi.ts

@@ -53,7 +53,16 @@ export interface ThemeDetail {
   chart?: string;
   margin?: string;
   padding?: string;
-  gridColumns?: string; //Added By Aqib Mirza
+  gridPaddingX?: number;
+  gridPaddingY?: number;
+  gridColumns?: string;
+  gridRowHeight?: string;
+  gridRowCount?: number;
+  gridBgImage?: string;
+  gridBgImageRepeat?: string;
+  gridBgImageSize?: string;
+  gridBgImagePosition?: string;
+  gridBgImageOrigin?: string;
   text?: string;
   textSize?: string;
   fontFamily?: string;