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

Commit9c11938

Browse files
replaced color picker to allow gradient selection
1 parent21ced62 commit9c11938

File tree

9 files changed

+153
-40
lines changed

9 files changed

+153
-40
lines changed

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,13 @@ const alphaOfRgba = (rgba: string) => {
4040
returncolord(rgba).alpha().toString();
4141
};
4242

43+
constisValidGradient=(color:string)=>{
44+
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;
45+
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;
46+
47+
returnlinearGradientRegex.test(color)||radialGradientRegex.test(color);
48+
}
49+
4350
constisValidColor=(str:string)=>{
4451
returncolord(str).isValid();
4552
};
@@ -91,4 +98,4 @@ export const darkenColor = (colorStr: string, intensity: number) => {
9198
returncolor.darken(intensity).toHex().toUpperCase();
9299
};
93100

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

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

Lines changed: 44 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
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,
1011
}from"components/colorSelect/colorUtils";
1112
importstyled,{css}from"styled-components";
12-
import{useCallback,useRef,useState}from"react";
13+
import{useCallback,useRef,useState,useEffect}from"react";
1314
import{throttle}from"lodash";
1415
import{changeValueAction}from"lowcoder-core";
1516

@@ -22,50 +23,54 @@ interface ColorSelectProps {
2223

2324
exportconstColorSelect=(props:ColorSelectProps)=>{
2425
const{ color, trigger="click", dispatch, changeColor}=props;
25-
letpickerColor=useRef(toRGBA(color));
26+
letpickerColor=useRef(color);
2627
const[visible,setVisible]=useState(false);
28+
const[selectedColor,setSelectedColor]=useState(color);
29+
const{ getGradientObject, valueToHex}=useColorPicker(selectedColor,setSelectedColor);
30+
2731
constthrottleChange=useCallback(
2832
throttle((rgbaColor:string)=>{
29-
dispatch&&dispatch(changeValueAction(toHex(rgbaColor),true));
30-
changeColor&&changeColor(toHex(rgbaColor));
33+
dispatch&&dispatch(changeValueAction(rgbaColor,true));
34+
changeColor&&changeColor(rgbaColor);
3135
},200),
3236
[dispatch,changeColor]
3337
);
38+
39+
useEffect(()=>{
40+
if(color!==selectedColor){
41+
constvalue=getGradientObject();
42+
if(!value?.isGradient){
43+
returnthrottleChange(valueToHex());
44+
}
45+
throttleChange(selectedColor);
46+
}
47+
},[selectedColor])
48+
3449
return(
3550
<Popover
3651
trigger={trigger}
52+
placement="left"
3753
destroyTooltipOnHide={true}
3854
onOpenChange={(value)=>{
39-
pickerColor.current=toRGBA(color);
4055
setVisible(value);
4156
}}
4257
content={
4358
<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>
59+
<StyledColorPicker
60+
disableDarkMode
61+
value={color}
62+
onChange={setSelectedColor}
63+
width={250}
64+
height={160}
65+
hideInputs
66+
hideAdvancedSliders
67+
hideColorGuide
68+
hideInputType
69+
/>
6470
</PopoverContainer>
6571
}
6672
>
67-
<ColorBlock$color={color?.substring(0,7)}>
68-
<BackDiv$color={alphaOfRgba(toRGBA(color))}></BackDiv>
73+
<ColorBlock$color={color}>
6974
</ColorBlock>
7075
</Popover>
7176
);
@@ -139,7 +144,6 @@ const PopoverContainer = styled.div`
139144
display: flex;
140145
flex-direction: column;
141146
gap: 12px;
142-
padding: 16px;
143147
`;
144148
// contrast block
145149
constAlphaDiv=styled.div.attrs((props)=>({
@@ -169,12 +173,22 @@ const BackDiv = styled.div.attrs<{ $color: string }>((props: { $color: string })
169173
`;
170174
// main block
171175
constColorBlock=styled.div<{$color:string}>`
172-
background-color:${(props)=>(isValidColor(props.$color) ?props.$color :"#FFFFFF")};
176+
background:${(props)=>(
177+
isValidColor(props.$color)||isValidGradient(props.$color)
178+
?props.$color
179+
:"#FFFFFF"
180+
)};
173181
border: 1px solid rgba(0, 0, 0, 0.1);
174182
border-radius: 4px;
175183
height: 24px;
176184
width: 24px;
177185
cursor: pointer;
178186
background-clip: content-box;
179187
overflow: hidden;
188+
`;
189+
190+
constStyledColorPicker=styled(ColorPicker)`
191+
#rbgcp-advanced-btn, #rbgcp-comparibles-btn, #rbgcp-color-model-btn {
192+
display: none !important;
193+
}
180194
`;

‎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/components/ThemeSettingsSelector.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import_from"lodash";
22
import{useEffect,useState}from"react";
33
import{ConfigItem,Radius,Margin,Padding,GridColumns,BorderWidth,BorderStyle}from"../pages/setting/theme/styledComponents";
4-
import{isValidColor,toHex}from"components/colorSelect/colorUtils";
4+
import{isValidColor,isValidGradient,toHex}from"components/colorSelect/colorUtils";
55
import{ColorSelect}from"components/colorSelect";
66
import{TacoInput}from"components/tacoInput";
77
import{Slider,Switch}from"antd";
@@ -124,8 +124,11 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
124124
constvarName=`(${themeSettingKey})`;
125125

126126
constcolorInputBlur=()=>{
127-
if(!color||!isValidColor(color)){
127+
if(!color||!isValidColor(color)||!isValidGradient(color)){
128128
setColor(defaultColor);
129+
}elseif(isValidGradient(color)){
130+
setColor(color);
131+
configChange({ themeSettingKey,color:color});
129132
}else{
130133
setColor(toHex(color));
131134
configChange({ themeSettingKey,color:toHex(color)});
@@ -290,7 +293,7 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
290293
}
291294

292295
useEffect(()=>{
293-
if(color&&isValidColor(color)){
296+
if(color&&(isValidColor(color)||isValidGradient(color))){
294297
configChangeWithDebounce({ themeSettingKey, color});
295298
}
296299
},[color]);

‎client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { ThemeContext } from "comps/utils/themeContext";
1818
import{checkIsMobile}from"util/commonUtils";
1919
import{CanvasContainerID}from"constants/domLocators";
2020
import{CNRootContainer}from"constants/styleSelectors";
21-
import{ScrollBar}from"lowcoder-design";
21+
import{isValidColor,isValidGradient,ScrollBar}from"lowcoder-design";
2222
import{defaultTheme}from"@lowcoder-ee/constants/themeConstants";
2323
import{isEqual}from"lodash";
2424
import{DEFAULT_GRID_COLUMNS,DEFAULT_ROW_COUNT,DEFAULT_ROW_HEIGHT}from"@lowcoder-ee/layout/calculateUtils";
@@ -36,8 +36,11 @@ const UICompContainer = styled.div<{
3636
height: auto;
3737
margin: 0 auto;
3838
max-width:${(props)=>props.$maxWidth||1600}px;
39-
background-color:${(props)=>props.$bgColor};
40-
${(props)=>props.$bgImage&&`background-image: url(${props.$bgImage});`};
39+
${(props)=>isValidColor(props.$bgColor)&&`background-color:${props.$bgColor};`};
40+
${(props)=>isValidGradient(props.$bgColor)&&!Boolean(props.$bgImage)&&`background-image:${props.$bgColor}`};
41+
${(props)=>isValidGradient(props.$bgColor)&&Boolean(props.$bgImage)&&`background-image: url(${props.$bgImage}),${props.$bgColor}`};
42+
${(props)=>!isValidGradient(props.$bgColor)&&Boolean(props.$bgImage)&&`background-image:${props.$bgColor}`};
43+
//${(props)=>props.$bgImage&&`background-image: url(${props.$bgImage});`};
4144
${(props)=>props.$bgImageRepeat&&`background-repeat:${props.$bgImageRepeat};`};
4245
${(props)=>props.$bgImageSize&&`background-size:${props.$bgImageSize};`};
4346
${(props)=>props.$bgImageOrigin&&`background-origin:${props.$bgImageOrigin};`};
@@ -192,7 +195,7 @@ export const CanvasView = React.memo((props: ContainerBaseProps) => {
192195

193196
letpaddingX=themeGridPaddingX||appSettings?.gridPaddingX||defaultTheme?.gridPaddingX||DEFAULT_CONTAINER_PADDING[0];
194197
letpaddingY=themeGridPaddingY||appSettings?.gridPaddingY||defaultTheme?.gridPaddingY||DEFAULT_CONTAINER_PADDING[1];
195-
198+
196199
return[paddingX,paddingY];
197200
},[preventStylesOverwriting,appSettings,isMobile,currentTheme,defaultTheme]);
198201

‎client/packages/lowcoder/src/comps/comps/textComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const getStyle = (style: TextStyleType) => {
3535
color:${style.text};
3636
text-transform:${style.textTransform}!important;
3737
text-decoration:${style.textDecoration}!important;
38-
background-color:${style.background};
38+
background:${style.background};
3939
.markdown-bodya {
4040
color:${style.links};
4141
}

‎client/packages/lowcoder/src/comps/controls/codeControl.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import {
2828
import{
2929
ControlPropertyViewWrapper,
3030
isValidColor,
31+
isValidGradient,
3132
toHex,
3233
wrapperToControlItem,
3334
}from"lowcoder-design";
@@ -432,7 +433,7 @@ export function stringUnionControl<T extends readonly string[]>(
432433
exportconstColorCodeControl=codeControl<string>(
433434
(value:unknown)=>{
434435
constvalueString=toString(value);
435-
436+
436437
if(valueString===""){
437438
returnvalueString;
438439
}
@@ -442,6 +443,9 @@ export const ColorCodeControl = codeControl<string>(
442443
if(isThemeColorKey(valueString)){
443444
returnvalueString;
444445
}
446+
if(isValidGradient(valueString)){
447+
returnvalueString;
448+
}
445449
thrownewError(`the argument must be type CSS color`);
446450
},
447451
{
@@ -465,6 +469,9 @@ export const ColorOrBoolCodeControl = codeControl<string>(
465469
if(isThemeColorKey(valueString)){
466470
returnvalueString;
467471
}
472+
if(isValidGradient(valueString)){
473+
returnvalueString;
474+
}
468475
thrownewError(`the argument must be type CSS color or Boolean`);
469476
},
470477
{

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@ function ColorItem(props: {
112112
},[focus]);
113113

114114
constcolor=controlThis.getView();
115+
115116
useEffect(()=>{
116117
setShowDep(param.isDep&&!focus&&!color);
117118
},[color,focus,param.isDep]);

0 commit comments

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