Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit9d8ab7b

Browse files
authored
Merge pull request#1261 from lowcoder-org/dev
Dev -> Main for Release v2.4.11
2 parentse505e31 +f5d21fa commit9d8ab7b

File tree

129 files changed

+2352
-776
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

129 files changed

+2352
-776
lines changed

‎client/VERSION

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
2.4.10
1+
2.4.11

‎client/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name":"lowcoder-frontend",
3-
"version":"2.4.9",
3+
"version":"2.4.11",
44
"type":"module",
55
"private":true,
66
"workspaces": [

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

Lines changed: 43 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,39 @@ import { generate } from "@ant-design/colors/es";
44

55
extend([namesPlugin]);
66

7+
exportconstgradientColors=[
8+
"linear-gradient(0deg, #fdfbfb 0%, #ebedee 100%)",
9+
"linear-gradient(45deg, #cfd9df 0%, #e2ebf0 100%)",
10+
"linear-gradient(90deg, #e3ffe7 0%, #d9e7ff 100%)",
11+
12+
"linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)",
13+
"linear-gradient(0deg, #fbc2eb 0%, #a6c1ee 100%)",
14+
"linear-gradient(45deg, #efd5ff 0%, #515ada 100%)",
15+
"linear-gradient(90deg, #4b6cb7 0%, #72afd3 100%)",
16+
"linear-gradient(135deg, #72afd3 0%, #96e6a1 100%)",
17+
18+
"linear-gradient(90deg, #fa709a 0%, #fee140 100%)",
19+
"linear-gradient(45deg, #d53369 0%, #daae51 100%)",
20+
"linear-gradient(0deg, #f43b47 0%, #453a94 100%)",
21+
22+
"linear-gradient(135deg, #00d2ff 0%, #3a47d5 100%)",
23+
"linear-gradient(0deg, #f8ff00 0%, #3ad59f 100%)",
24+
"linear-gradient(45deg, #fcff9e 0%, #c67700 100%)",
25+
"linear-gradient(90deg, #fad0c4 0%, #ffd1ff 100%)",
26+
];
27+
728
// Color Palette
829
exportconstconstantColors=[
9-
{id:1,color:"#6D83F2"},
10-
{id:2,color:"#5589F2"},
11-
{id:3,color:"#36B389"},
12-
{id:4,color:"#E68E50"},
13-
{id:5,color:"#E67373"},
14-
{id:6,color:"#F5FFF7"},
15-
{id:7,color:"#F3FAFF"},
16-
{id:8,color:"#FFF6E6"},
17-
{id:9,color:"#F5F5F6"},
18-
{id:10,color:"#FFFFFF"},
30+
"#6D83F2",
31+
"#5589F2",
32+
"#36B389",
33+
"#E68E50",
34+
"#E67373",
35+
"#F5FFF7",
36+
"#F3FAFF",
37+
"#FFF6E6",
38+
"#F5F5F6",
39+
"#FFFFFF",
1940
];
2041

2142
exportconstchartColorPalette=[
@@ -40,7 +61,17 @@ const alphaOfRgba = (rgba: string) => {
4061
returncolord(rgba).alpha().toString();
4162
};
4263

43-
constisValidColor=(str:string)=>{
64+
constisValidGradient=(color?:string)=>{
65+
if(!color)returnfalse;
66+
67+
constlinearGradientRegex=/^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;
68+
constradialGradientRegex=/^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;
69+
70+
returnlinearGradientRegex.test(color)||radialGradientRegex.test(color);
71+
}
72+
73+
constisValidColor=(str?:string)=>{
74+
if(!str)returnfalse;
4475
returncolord(str).isValid();
4576
};
4677

@@ -91,4 +122,4 @@ export const darkenColor = (colorStr: string, intensity: number) => {
91122
returncolor.darken(intensity).toHex().toUpperCase();
92123
};
93124

94-
export{toRGBA,toHex,alphaOfRgba,isValidColor};
125+
export{toRGBA,toHex,alphaOfRgba,isValidColor,isValidGradient};

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

Lines changed: 60 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
1-
import{RgbaStringColorPicker}from"react-colorful";
21
import{defaultasPopover}from"antd/es/popover";
2+
importColorPicker,{useColorPicker}from'react-best-gradient-color-picker';
33
import{ActionType}from'@rc-component/trigger/lib/interface';
44
import{
55
alphaOfRgba,
66
toRGBA,
77
toHex,
88
constantColors,
99
isValidColor,
10+
isValidGradient,
11+
gradientColors,
1012
}from"components/colorSelect/colorUtils";
1113
importstyled,{css}from"styled-components";
12-
import{useCallback,useRef,useState}from"react";
14+
import{useCallback,useRef,useState,useEffect,useMemo,}from"react";
1315
import{throttle}from"lodash";
1416
import{changeValueAction}from"lowcoder-core";
1517

@@ -18,54 +20,65 @@ interface ColorSelectProps {
1820
trigger?:ActionType;
1921
dispatch?:(value:any)=>void;
2022
changeColor?:(value:any)=>void;
23+
presetColors?:string[];
24+
allowGradient?:boolean;
2125
}
2226

2327
exportconstColorSelect=(props:ColorSelectProps)=>{
2428
const{ color, trigger="click", dispatch, changeColor}=props;
25-
letpickerColor=useRef(toRGBA(color));
2629
const[visible,setVisible]=useState(false);
30+
const[selectedColor,setSelectedColor]=useState(color);
31+
const{ getGradientObject}=useColorPicker(selectedColor,setSelectedColor);
32+
33+
constpresetColors=useMemo(()=>{
34+
letcolors=props.presetColors||[];
35+
if(props.allowGradient){
36+
colors=colors.concat(gradientColors.slice(0,16-colors.length));
37+
}
38+
returncolors;
39+
},[props.presetColors,selectedColor,props.allowGradient]);
40+
2741
constthrottleChange=useCallback(
2842
throttle((rgbaColor:string)=>{
29-
dispatch&&dispatch(changeValueAction(toHex(rgbaColor),true));
30-
changeColor&&changeColor(toHex(rgbaColor));
43+
dispatch&&dispatch(changeValueAction(rgbaColor,true));
44+
changeColor&&changeColor(rgbaColor);
3145
},200),
3246
[dispatch,changeColor]
3347
);
48+
49+
useEffect(()=>{
50+
if(color!==selectedColor){
51+
constvalue=getGradientObject();
52+
if(!value?.isGradient){
53+
returnthrottleChange(toHex(selectedColor));
54+
}
55+
throttleChange(selectedColor);
56+
}
57+
},[selectedColor])
58+
3459
return(
3560
<Popover
3661
trigger={trigger}
62+
placement="left"
3763
destroyTooltipOnHide={true}
3864
onOpenChange={(value)=>{
39-
pickerColor.current=toRGBA(color);
4065
setVisible(value);
4166
}}
4267
content={
4368
<PopoverContainer>
44-
<divstyle={{position:"relative"}}>
45-
<RgbaStringColorPickercolor={pickerColor.current}onChange={throttleChange}/>
46-
<AlphaDivcolor={color?.substring(0,7)}>
47-
<BackDiv$color={alphaOfRgba(toRGBA(color))}></BackDiv>
48-
</AlphaDiv>
49-
</div>
50-
<ConstantDiv>
51-
{constantColors.map((item)=>{
52-
return(
53-
<ConstantBlock
54-
color={item.color}
55-
key={item.id}
56-
onClick={()=>{
57-
throttleChange(item.color);
58-
pickerColor.current=toRGBA(item.color);
59-
}}
60-
/>
61-
);
62-
})}
63-
</ConstantDiv>
69+
<StyledColorPicker
70+
disableDarkMode
71+
value={color}
72+
onChange={setSelectedColor}
73+
width={250}
74+
height={160}
75+
presets={presetColors}
76+
$allowGradient={props.allowGradient}
77+
/>
6478
</PopoverContainer>
6579
}
6680
>
67-
<ColorBlock$color={color?.substring(0,7)}>
68-
<BackDiv$color={alphaOfRgba(toRGBA(color))}></BackDiv>
81+
<ColorBlock$color={color}>
6982
</ColorBlock>
7083
</Popover>
7184
);
@@ -139,7 +152,6 @@ const PopoverContainer = styled.div`
139152
display: flex;
140153
flex-direction: column;
141154
gap: 12px;
142-
padding: 16px;
143155
`;
144156
// contrast block
145157
constAlphaDiv=styled.div.attrs((props)=>({
@@ -169,12 +181,30 @@ const BackDiv = styled.div.attrs<{ $color: string }>((props: { $color: string })
169181
`;
170182
// main block
171183
constColorBlock=styled.div<{$color:string}>`
172-
background-color:${(props)=>(isValidColor(props.$color) ?props.$color :"#FFFFFF")};
184+
background:${(props)=>(
185+
isValidColor(props.$color)||isValidGradient(props.$color)
186+
?props.$color
187+
:"#FFFFFF"
188+
)};
173189
border: 1px solid rgba(0, 0, 0, 0.1);
174190
border-radius: 4px;
175191
height: 24px;
176192
width: 24px;
177193
cursor: pointer;
178194
background-clip: content-box;
179195
overflow: hidden;
196+
`;
197+
198+
constStyledColorPicker=styled(ColorPicker)<{$allowGradient?:boolean}>`
199+
#rbgcp-wrapper > div:nth-child(2) > div:first-child > div:first-child {
200+
${props=>!props.$allowGradient&&`visibility: hidden`};
201+
}
202+
#rbgcp-wrapper > div:last-child > div:last-child {
203+
justify-content: flex-start !important;
204+
gap: 3px;
205+
206+
> div {
207+
border: 1px solid lightgray;
208+
}
209+
}
180210
`;

‎client/packages/lowcoder-design/src/icons/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -172,6 +172,8 @@ export { ReactComponent as LeftSettingIcon } from "./remix/tools-fill.svg";
172172
export{ReactComponentasLeftLayersIcon}from"./remix/stack-line.svg";
173173
export{ReactComponentasLeftHelpIcon}from"./v1/icon-left-help.svg";
174174
export{ReactComponentasLeftPreloadIcon}from"./v1/icon-left-preload.svg";
175+
export{ReactComponentasLeftColorPaletteIcon}from"./remix/palette-line.svg";
176+
export{ReactComponentasLeftJSSettingIcon}from"./remix/javascript-line.svg";
175177

176178

177179
export{ReactComponentasHomeSettingsIcon}from"./v1/icon-home-settings.svg";

‎client/packages/lowcoder/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@
6464
"qrcode.react":"^3.1.0",
6565
"rc-trigger":"^5.3.1",
6666
"react":"^18.2.0",
67+
"react-best-gradient-color-picker":"^3.0.10",
6768
"react-colorful":"^5.5.1",
6869
"react-documents":"^1.2.1",
6970
"react-dom":"^18.2.0",

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,16 @@ export interface ThemeDetail {
5353
chart?:string;
5454
margin?:string;
5555
padding?:string;
56-
gridColumns?:string;//Added By Aqib Mirza
56+
gridPaddingX?:number;
57+
gridPaddingY?:number;
58+
gridColumns?:string;
59+
gridRowHeight?:string;
60+
gridRowCount?:number;
61+
gridBgImage?:string;
62+
gridBgImageRepeat?:string;
63+
gridBgImageSize?:string;
64+
gridBgImagePosition?:string;
65+
gridBgImageOrigin?:string;
5766
text?:string;
5867
textSize?:string;
5968
fontFamily?:string;

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp