Skip to content

Commit c3a586a

Browse files
raheeliftikhar5raheeliftikhar5
committed
Containers: added gradient
1 parent 19a3691 commit c3a586a

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
import SliderControl from "@lowcoder-ee/comps/controls/sliderControl";
44+
import { getBackgroundStyle } from "@lowcoder-ee/util/styleUtils";
4445

4546
const ContainWrapper = 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
const ColWrapper = 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
const HeaderInnerGrid = 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
const SiderInnerGrid = 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
const BodyInnerGrid = 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
const FooterInnerGrid = 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
export type LayoutProps = 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
import SliderControl from "@lowcoder-ee/comps/controls/sliderControl";
46+
import { getBackgroundStyle } from "@lowcoder-ee/util/styleUtils";
4647

4748
const RowWrapper = 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
const ColWrapper = 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
import SliderControl from "@lowcoder-ee/comps/controls/sliderControl";
39+
import { getBackgroundStyle } from "@lowcoder-ee/util/styleUtils";
3940

4041
const EVENT_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)