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

Commitaba86a6

Browse files
Containers: added gradient
1 parent419c11c commitaba86a6

File tree

7 files changed

+168
-82
lines changed

7 files changed

+168
-82
lines changed

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ import { EditorContext } from "comps/editorState";
4141
import{disabledPropertyView,hiddenPropertyView}from"comps/utils/propertyUtils";
4242
import{DisabledContext}from"comps/generators/uiCompBuilder";
4343
importSliderControlfrom"@lowcoder-ee/comps/controls/sliderControl";
44+
import{getBackgroundStyle}from"@lowcoder-ee/util/styleUtils";
4445

4546
constContainWrapper=styled.div<{
4647
$style:ContainerStyleType&{
@@ -57,13 +58,13 @@ const ContainWrapper = styled.div<{
5758
column-gap:${(props)=>props.$style?.columnGap};
5859
row-gap:${(props)=>props.$style?.rowGap};
5960
60-
background-color:${(props)=>props.$style?.background} !important;
6161
border-radius:${(props)=>props.$style?.radius};
6262
border-width:${(props)=>props.$style?.borderWidth};
6363
border-color:${(props)=>props.$style?.border};
6464
border-style:${(props)=>props.$style?.borderStyle};
6565
margin:${(props)=>props.$style?.margin};
6666
padding:${(props)=>props.$style?.padding};
67+
${props=>props.$style&&getBackgroundStyle(props.$style)}
6768
`;
6869

6970
constColWrapper=styled(Col)<{
@@ -73,13 +74,13 @@ const ColWrapper = styled(Col)<{
7374
}>`
7475
> div {
7576
height:${(props)=>props.$matchColumnsHeight ?`calc(100% -${props.$style?.padding||0} -${props.$style?.padding||0})` :'auto'};
76-
background-color:${(props)=>props.$style?.background} !important;
7777
border-radius:${(props)=>props.$style?.radius};
7878
border-width:${(props)=>props.$style?.borderWidth};
7979
border-color:${(props)=>props.$style?.border};
8080
border-style:${(props)=>props.$style?.borderStyle};
8181
margin:${(props)=>props.$style?.margin};
8282
padding:${(props)=>props.$style?.padding};
83+
${props=>props.$style&&getBackgroundStyle(props.$style)}
8384
}
8485
`;
8586

‎client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { ButtonEventHandlerControl, CardEventHandlerControl, clickEvent, refresh
2020
import{optionsControl}from"comps/controls/optionsControl";
2121
import{dropdownControl}from"comps/controls/dropdownControl";
2222
import{styleControl}from"comps/controls/styleControl";
23+
import{getBackgroundStyle}from"@lowcoder-ee/util/styleUtils";
2324

2425
const{ Meta}=Card;
2526

@@ -34,7 +35,6 @@ const Wrapper = styled.div<{
3435
height: 100%;
3536
width: 100%;
3637
.ant-card-small >.ant-card-head {
37-
background-color:${props=>props.$headerStyle?.background} !important;
3838
border:${props=>props.$headerStyle?.border};
3939
border-style:${props=>props.$headerStyle?.borderStyle};
4040
border-width:${props=>props.$headerStyle?.borderWidth};
@@ -49,6 +49,7 @@ const Wrapper = styled.div<{
4949
rotate:${props=>props.$headerStyle?.rotation};
5050
margin:${props=>props.$headerStyle?.margin};
5151
padding:${props=>props.$headerStyle?.padding};
52+
${props=>getBackgroundStyle(props.$headerStyle)}
5253
}
5354
.ant-card-head-title{
5455
font-size:${props=>props.$headerStyle?.textSize};
@@ -61,31 +62,31 @@ const Wrapper = styled.div<{
6162
border-inline-end: 1px solid${props=>props.$style?.border};
6263
}
6364
.ant-card .ant-card-actions {
64-
background-color:${props=>props.$style?.background};
65+
${props=>props.$style&&getBackgroundStyle(props.$style)}
6566
}
6667
.ant-card .ant-card-body {
67-
background-color:${props=>props.$bodyStyle?.background} !important;
6868
border:${props=>props.$bodyStyle?.border};
6969
border-style:${props=>props.$bodyStyle?.borderStyle};
7070
border-width:${props=>props.$bodyStyle?.borderWidth};
7171
border-radius:${props=>props.$bodyStyle?.radius};
7272
rotate:${props=>props.$bodyStyle?.rotation};
7373
margin:${props=>props.$bodyStyle?.margin};
7474
padding:${props=>props.$bodyStyle?.padding};
75+
${props=>getBackgroundStyle(props.$bodyStyle)}
7576
}
7677
.ant-card {
7778
display: flex;
7879
flex-direction: column;
7980
justify-content: space-between;
8081
margin:${props=>props.$style?.margin};
8182
padding:${props=>props.$style?.padding};
82-
background-color:${props=>props.$style?.background};
8383
border:${props=>props.$style?.border};
8484
rotate:${props=>props.$style?.rotation};
8585
border-style:${props=>props.$style?.borderStyle};
8686
border-radius:${props=>props.$style?.radius};
8787
border-width:${props=>props.$style?.borderWidth};
8888
box-shadow:${props=>`${props.$style?.boxShadow}${props.$style?.boxShadowColor}`};
89+
${props=>props.$style&&getBackgroundStyle(props.$style)}
8990
${props=>props.$animationStyle}
9091
}
9192
.ant-card-body {

‎client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx

Lines changed: 67 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { ConfigProvider, Layout } from 'antd';
1111
import{contrastBackground,contrastText}from"comps/controls/styleControlConstants";
1212
import{useRef,useState}from"react";
1313
import{LowcoderAppView}from"appView/LowcoderAppView";
14+
import{getBackgroundStyle}from"@lowcoder-ee/util/styleUtils";
1415

1516
const{ Header, Content, Footer, Sider}=Layout;
1617

@@ -30,12 +31,7 @@ const getStyle = (style: ContainerStyleType) => {
3031
border-radius:${style.radius};
3132
overflow: hidden;
3233
padding:${style.padding};
33-
${style.background&&`background-color:${style.background};`}
34-
${style.backgroundImage&&`background-image: url(${style.backgroundImage});`}
35-
${style.backgroundImageRepeat&&`background-repeat:${style.backgroundImageRepeat};`}
36-
${style.backgroundImageSize&&`background-size:${style.backgroundImageSize};`}
37-
${style.backgroundImagePosition&&`background-position:${style.backgroundImagePosition};`}
38-
${style.backgroundImageOrigin&&`background-origin:${style.backgroundImageOrigin};`}
34+
${style&&getBackgroundStyle(style)}
3935
`;
4036
};
4137

@@ -51,14 +47,30 @@ const Wrapper = styled.div<{ $style: ContainerStyleType,$animationStyle:Animatio
5147
#pageLayout::-webkit-scrollbar {
5248
display:${(props)=>props.$mainScrollbars ?"block" :"none"};
5349
}
50+
51+
.ant-layout {
52+
background: transparent;
53+
}
5454
`;
5555

5656
constHeaderInnerGrid=styled(InnerGrid)<{
57-
$backgroundColor:string
57+
$backgroundColor:string,
58+
$headerBackgroundImage:string,
59+
$headerBackgroundImageSize:string,
60+
$headerBackgroundImageRepeat:string,
61+
$headerBackgroundImageOrigin:string,
62+
$headerBackgroundImagePosition:string,
5863
}>`
5964
overflow: visible;
60-
${(props)=>props.$backgroundColor&&`background-color:${props.$backgroundColor};`}
6165
border-radius: 0;
66+
${props=>getBackgroundStyle({
67+
background:props.$backgroundColor,
68+
backgroundImage:props.$headerBackgroundImage,
69+
backgroundImageSize:props.$headerBackgroundImageSize,
70+
backgroundImageRepeat:props.$headerBackgroundImageRepeat,
71+
backgroundImageOrigin:props.$headerBackgroundImageOrigin,
72+
backgroundImagePosition:props.$headerBackgroundImagePosition,
73+
})}
6274
`;
6375

6476
constSiderInnerGrid=styled(InnerGrid)<{
@@ -70,25 +82,40 @@ const SiderInnerGrid = styled(InnerGrid)<{
7082
$siderBackgroundImageOrigin:string;
7183
}>`
7284
overflow: auto;
73-
${(props)=>props.$backgroundColor&&`background-color:${props.$backgroundColor};`}
7485
border-radius: 0;
75-
${(props)=>props.$siderBackgroundImage&&`background-image: url(${props.$siderBackgroundImage});`}
76-
${(props)=>props.$siderBackgroundImageRepeat&&`background-repeat:${props.$siderBackgroundImageRepeat};`}
77-
${(props)=>props.$siderBackgroundImageSize&&`background-size:${props.$siderBackgroundImageSize};`}
78-
${(props)=>props.$siderBackgroundImagePosition&&`background-position:${props.$siderBackgroundImagePosition};`}
79-
${(props)=>props.$siderBackgroundImageOrigin&&`background-origin:${props.$siderBackgroundImageOrigin};`}
86+
${props=>getBackgroundStyle({
87+
background:props.$backgroundColor,
88+
backgroundImage:props.$siderBackgroundImage,
89+
backgroundImageSize:props.$siderBackgroundImageSize,
90+
backgroundImageRepeat:props.$siderBackgroundImageRepeat,
91+
backgroundImageOrigin:props.$siderBackgroundImageOrigin,
92+
backgroundImagePosition:props.$siderBackgroundImagePosition,
93+
})}
8094
`;
8195

8296
constBodyInnerGrid=styled(InnerGrid)<{
8397
$showBorder:boolean;
84-
$backgroundColor:string;
8598
$borderColor:string;
8699
$borderWidth:string;
100+
$backgroundColor:string;
101+
$bodyBackgroundImage:string;
102+
$bodyBackgroundImageRepeat:string;
103+
$bodyBackgroundImageSize:string;
104+
$bodyBackgroundImagePosition:string;
105+
$bodyBackgroundImageOrigin:string;
87106
}>`
88107
border-top:${(props)=>`${props.$showBorder ?props.$borderWidth :0} solid${props.$borderColor}`};
89108
flex: 1;
90-
${(props)=>props.$backgroundColor&&`background-color:${props.$backgroundColor};`}
91109
border-radius: 0;
110+
111+
${props=>getBackgroundStyle({
112+
background:props.$backgroundColor,
113+
backgroundImage:props.$bodyBackgroundImage,
114+
backgroundImageSize:props.$bodyBackgroundImageSize,
115+
backgroundImageRepeat:props.$bodyBackgroundImageRepeat,
116+
backgroundImageOrigin:props.$bodyBackgroundImageOrigin,
117+
backgroundImagePosition:props.$bodyBackgroundImagePosition,
118+
})}
92119
`;
93120

94121
constFooterInnerGrid=styled(InnerGrid)<{
@@ -104,13 +131,15 @@ const FooterInnerGrid = styled(InnerGrid)<{
104131
}>`
105132
border-top:${(props)=>`${props.$showBorder ?props.$borderWidth :0} solid${props.$borderColor}`};
106133
overflow: visible;
107-
${(props)=>props.$backgroundColor&&`background-color:${props.$backgroundColor};`}
108134
border-radius: 0;
109-
${(props)=>props.$footerBackgroundImage&&`background-image: url(${props.$footerBackgroundImage});`}
110-
${(props)=>props.$footerBackgroundImageRepeat&&`background-repeat:${props.$footerBackgroundImageRepeat};`}
111-
${(props)=>props.$footerBackgroundImageSize&&`background-size:${props.$footerBackgroundImageSize};`}
112-
${(props)=>props.$footerBackgroundImagePosition&&`background-position:${props.$footerBackgroundImagePosition};`}
113-
${(props)=>props.$footerBackgroundImageOrigin&&`background-origin:${props.$footerBackgroundImageOrigin};`}
135+
${props=>getBackgroundStyle({
136+
background:props.$backgroundColor,
137+
backgroundImage:props.$footerBackgroundImage,
138+
backgroundImageSize:props.$footerBackgroundImageSize,
139+
backgroundImageRepeat:props.$footerBackgroundImageRepeat,
140+
backgroundImageOrigin:props.$footerBackgroundImageOrigin,
141+
backgroundImagePosition:props.$footerBackgroundImagePosition,
142+
})}
114143
`;
115144

116145
exporttypeLayoutProps=LayoutViewProps&{
@@ -205,10 +234,15 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi
205234
horizontalGridCells={horizontalGridCells}
206235
autoHeight={true}
207236
emptyRows={5}
208-
minHeight="46px"
237+
minHeight="60px"
209238
containerPadding={[0,0]}
210239
showName={{bottom:showFooter ?20 :0}}
211240
$backgroundColor={headerStyle?.headerBackground||'transparent'}
241+
$headerBackgroundImage={headerStyle?.headerBackgroundImage}
242+
$headerBackgroundImageRepeat={headerStyle?.headerBackgroundImageRepeat}
243+
$headerBackgroundImageSize={headerStyle?.headerBackgroundImageSize}
244+
$headerBackgroundImagePosition={headerStyle?.headerBackgroundImagePosition}
245+
$headerBackgroundImageOrigin={headerStyle?.headerBackgroundImageOrigin}
212246
style={{padding:headerStyle.containerHeaderPadding}}/>
213247
</Header>
214248
</BackgroundColorContext.Provider>
@@ -271,6 +305,11 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi
271305
containerPadding={[0,0]}
272306
hintPlaceholder={props.hintPlaceholder??HintPlaceHolder}
273307
$backgroundColor={bodyStyle?.background||'transparent'}
308+
$bodyBackgroundImage={bodyStyle?.backgroundImage}
309+
$bodyBackgroundImageRepeat={bodyStyle?.backgroundImageRepeat}
310+
$bodyBackgroundImageSize={bodyStyle?.backgroundImageSize}
311+
$bodyBackgroundImagePosition={bodyStyle?.backgroundImagePosition}
312+
$bodyBackgroundImageOrigin={bodyStyle?.backgroundImageOrigin}
274313
$borderColor={style?.border}
275314
$borderWidth={style?.borderWidth}
276315
style={{padding:bodyStyle.containerBodyPadding}}/>
@@ -335,6 +374,11 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi
335374
containerPadding={[0,0]}
336375
hintPlaceholder={props.hintPlaceholder??HintPlaceHolder}
337376
$backgroundColor={bodyStyle?.background||'transparent'}
377+
$bodyBackgroundImage={bodyStyle?.backgroundImage}
378+
$bodyBackgroundImageRepeat={bodyStyle?.backgroundImageRepeat}
379+
$bodyBackgroundImageSize={bodyStyle?.backgroundImageSize}
380+
$bodyBackgroundImagePosition={bodyStyle?.backgroundImagePosition}
381+
$bodyBackgroundImageOrigin={bodyStyle?.backgroundImageOrigin}
338382
$borderColor={style?.border}
339383
$borderWidth={style?.borderWidth}
340384
style={{padding:bodyStyle.containerBodyPadding}}/>

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ import { EditorContext } from "comps/editorState";
4343
import{disabledPropertyView,hiddenPropertyView}from"comps/utils/propertyUtils";
4444
import{DisabledContext}from"comps/generators/uiCompBuilder";
4545
importSliderControlfrom"@lowcoder-ee/comps/controls/sliderControl";
46+
import{getBackgroundStyle}from"@lowcoder-ee/util/styleUtils";
4647

4748
constRowWrapper=styled(Row)<{
4849
$style:ResponsiveLayoutRowStyleType;
@@ -56,13 +57,12 @@ const RowWrapper = styled(Row)<{
5657
border-color:${(props)=>props.$style?.border};
5758
border-style:${(props)=>props.$style?.borderStyle};
5859
padding:${(props)=>props.$style.padding};
59-
background-color:${(props)=>props.$style.background};
6060
rotate:${props=>props.$style.rotation}
6161
overflow:${(props)=>(props.$showScrollbar ?'auto' :'hidden')};
6262
::-webkit-scrollbar {
6363
display:${(props)=>(props.$showScrollbar ?'block' :'none')};
64-
}
65-
64+
}
65+
${props=>getBackgroundStyle(props.$style)}
6666
`;
6767

6868
constColWrapper=styled(Col)<{
@@ -77,13 +77,13 @@ const ColWrapper = styled(Col)<{
7777
7878
> div {
7979
height:${(props)=>props.$matchColumnsHeight ?'100%' :'auto'};
80-
background-color:${(props)=>props.$style?.background} !important;
8180
border-radius:${(props)=>props.$style?.radius};
8281
border-width:${(props)=>props.$style?.borderWidth}px;
8382
border-color:${(props)=>props.$style?.border};
8483
border-style:${(props)=>props.$style?.borderStyle};
8584
margin:${(props)=>props.$style?.margin};
8685
padding:${(props)=>props.$style?.padding};
86+
${props=>props.$style&&getBackgroundStyle(props.$style)}
8787
}
8888
`;
8989

‎client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import { messageInstance } from "lowcoder-design/src/components/GlobalInstances"
3636
import{BoolControl}from"comps/controls/boolControl";
3737
import{PositionControl}from"comps/controls/dropdownControl";
3838
importSliderControlfrom"@lowcoder-ee/comps/controls/sliderControl";
39+
import{getBackgroundStyle}from"@lowcoder-ee/util/styleUtils";
3940

4041
constEVENT_OPTIONS=[
4142
{
@@ -82,25 +83,27 @@ const getStyle = (
8283
border:${style.borderWidth}${style.borderStyle}${style.border};
8384
border-radius:${style.radius};
8485
padding:${style.padding};
85-
background-color:${style.background};
86-
background-image:url(${style.backgroundImage});
87-
background-repeat:${style.backgroundImageRepeat};
88-
background-size:${style.backgroundImageSize};
89-
background-position:${style.backgroundImagePosition};
90-
background-origin:${style.backgroundImageOrigin};
86+
${getBackgroundStyle(style)}
9187
9288
> .ant-tabs-content-holder> .ant-tabs-content> .ant-tabs-tabpane {
9389
height:100%;
9490
.react-grid-layout {
9591
border-radius:0;
96-
background-color:${bodyStyle.background||'transparent'};
9792
padding:${bodyStyle.containerBodyPadding};
93+
${getBackgroundStyle(bodyStyle)}
9894
}
9995
}
10096
10197
> .ant-tabs-nav {
102-
background-color:${headerStyle.headerBackground||'transparent'};
10398
padding:${headerStyle.containerHeaderPadding};
99+
${getBackgroundStyle({
100+
background:headerStyle.headerBackground,
101+
backgroundImage:headerStyle.headerBackgroundImage,
102+
backgroundImageSize:headerStyle.headerBackgroundImageSize,
103+
backgroundImageRepeat:headerStyle.headerBackgroundImageRepeat,
104+
backgroundImageOrigin:headerStyle.headerBackgroundImageOrigin,
105+
backgroundImagePosition:headerStyle.headerBackgroundImagePosition,
106+
})}
104107
105108
.ant-tabs-tab {
106109
div {
@@ -159,7 +162,7 @@ const StyledTabs = styled(Tabs)<{
159162
.ant-tabs-nav {
160163
display:${(props)=>(props.$showHeader ?"block" :"none")};
161164
padding: 0${(props)=>(props.$isMobile ?16 :24)}px;
162-
background: white;
165+
//background: white;
163166
margin: 0px;
164167
}
165168

0 commit comments

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