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

Commit4f19e7b

Browse files
added background style utility
1 parent1c33fd0 commit4f19e7b

File tree

3 files changed

+40
-13
lines changed

3 files changed

+40
-13
lines changed

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,14 +40,17 @@ const alphaOfRgba = (rgba: string) => {
4040
returncolord(rgba).alpha().toString();
4141
};
4242

43-
constisValidGradient=(color:string)=>{
43+
constisValidGradient=(color?:string)=>{
44+
if(!color)returnfalse;
45+
4446
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;
4547
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;
4648

4749
returnlinearGradientRegex.test(color)||radialGradientRegex.test(color);
4850
}
4951

50-
constisValidColor=(str:string)=>{
52+
constisValidColor=(str?:string)=>{
53+
if(!str)returnfalse;
5154
returncolord(str).isValid();
5255
};
5356

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

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ 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";
25+
import{getBackgroundStyle}from"@lowcoder-ee/util/styleUtils";
2526

2627
constUICompContainer=styled.div<{
2728
$maxWidth?:number;
@@ -36,15 +37,15 @@ const UICompContainer = styled.div<{
3637
height: auto;
3738
margin: 0 auto;
3839
max-width:${(props)=>props.$maxWidth||1600}px;
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});`};
44-
${(props)=>props.$bgImageRepeat&&`background-repeat:${props.$bgImageRepeat};`};
45-
${(props)=>props.$bgImageSize&&`background-size:${props.$bgImageSize};`};
46-
${(props)=>props.$bgImageOrigin&&`background-origin:${props.$bgImageOrigin};`};
47-
${(props)=>props.$bgImagePosition&&`background-position:${props.$bgImagePosition};`};
40+
41+
${props=>getBackgroundStyle({
42+
background:props.$bgColor,
43+
backgroundImage:props.$bgImage,
44+
backgroundImageSize:props.$bgImageSize,
45+
backgroundImageRepeat:props.$bgImageRepeat,
46+
backgroundImageOrigin:props.$bgImageOrigin,
47+
backgroundImagePosition:props.$bgImagePosition,
48+
})}
4849
`;
4950

5051
// modal/drawer container
@@ -122,8 +123,11 @@ export const CanvasView = React.memo((props: ContainerBaseProps) => {
122123
constisModule=appType===AppTypeEnum.Module;
123124

124125
constbgColor=useMemo(
125-
()=>(currentTheme||defaultTheme).canvas,
126-
[currentTheme,defaultTheme]
126+
()=>{
127+
constthemeGridBgColor=preventStylesOverwriting ?undefined :currentTheme?.canvas;
128+
returnthemeGridBgColor||appSettings.gridBg||defaultTheme.canvas;
129+
},
130+
[preventStylesOverwriting,appSettings,currentTheme,defaultTheme]
127131
);
128132

129133
constbgImage=useMemo(
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import{isValidColor,isValidGradient}from"components/colorSelect/colorUtils"
2+
import{css}from"styled-components";
3+
4+
constgetBackgroundStyle=(style:Record<string,string|undefined>)=>{
5+
returncss`
6+
${isValidColor(style.background)&&`background-color:${style.background}`};
7+
${isValidGradient(style.background)&&!Boolean(style.backgroundImage)&&`background-image:${style.background}`};
8+
${!isValidGradient(style.background)&&Boolean(style.backgroundImage)&&`background-image:${style.backgroundImage}`};
9+
${isValidGradient(style.background)&&Boolean(style.backgroundImage)&&`background-image: url(${style.backgroundImage}),${style.background}`};
10+
11+
${style.backgroundImageRepeat&&`background-repeat:${style.backgroundImageRepeat};`};
12+
${style.backgroundImageSize&&`background-size:${style.backgroundImageSize};`};
13+
${style.backgroundImageOrigin&&`background-origin:${style.backgroundImageOrigin};`};
14+
${style.backgroundImagePosition&&`background-position:${style.backgroundImagePosition};`};
15+
`;
16+
}
17+
18+
export{
19+
getBackgroundStyle,
20+
}

0 commit comments

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