Skip to content

Commit 9980dd0

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #871 from MenamAfzal/fix/theme-styling
Fix/theme styling
2 parents 4dc9b3c + bdaad8d commit 9980dd0

File tree

11 files changed

+38
-137
lines changed

11 files changed

+38
-137
lines changed

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

Lines changed: 3 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const getStyle = (style: ContainerStyleType) => {
3030
overflow: hidden;
3131
padding: ${style.padding};
3232
${style.background && `background-color: ${style.background};`}
33-
${style.backgroundImage && `background-image: ${style.backgroundImage};`}
33+
${style.backgroundImage && `background-image: url(${style.backgroundImage});`}
3434
${style.backgroundImageRepeat && `background-repeat: ${style.backgroundImageRepeat};`}
3535
${style.backgroundImageSize && `background-size: ${style.backgroundImageSize};`}
3636
${style.backgroundImagePosition && `background-position: ${style.backgroundImagePosition};`}
@@ -49,20 +49,10 @@ const Wrapper = styled.div<{ $style: ContainerStyleType }>`
4949

5050
const HeaderInnerGrid = styled(InnerGrid)<{
5151
$backgroundColor: string
52-
$headerBackgroundImage: string;
53-
$headerBackgroundImageRepeat: string;
54-
$headerBackgroundImageSize: string;
55-
$headerBackgroundImagePosition: string;
56-
$headerBackgroundImageOrigin: string;
5752
}>`
5853
overflow: visible;
5954
${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
6055
border-radius: 0;
61-
${(props) => props.$headerBackgroundImage && `background-image: ${props.$headerBackgroundImage};`}
62-
${(props) => props.$headerBackgroundImageRepeat && `background-repeat: ${props.$headerBackgroundImageRepeat};`}
63-
${(props) => props.$headerBackgroundImageSize && `background-size: ${props.$headerBackgroundImageSize};`}
64-
${(props) => props.$headerBackgroundImagePosition && `background-position: ${props.$headerBackgroundImagePosition};`}
65-
${(props) => props.$headerBackgroundImageOrigin && `background-origin: ${props.$headerBackgroundImageOrigin};`}
6656
`;
6757

6858
const SiderInnerGrid = styled(InnerGrid)<{
@@ -76,7 +66,7 @@ const SiderInnerGrid = styled(InnerGrid)<{
7666
overflow: auto;
7767
${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
7868
border-radius: 0;
79-
${(props) => props.$siderBackgroundImage && `background-image: ${props.$siderBackgroundImage};`}
69+
${(props) => props.$siderBackgroundImage && `background-image: url(${props.$siderBackgroundImage});`}
8070
${(props) => props.$siderBackgroundImageRepeat && `background-repeat: ${props.$siderBackgroundImageRepeat};`}
8171
${(props) => props.$siderBackgroundImageSize && `background-size: ${props.$siderBackgroundImageSize};`}
8272
${(props) => props.$siderBackgroundImagePosition && `background-position: ${props.$siderBackgroundImagePosition};`}
@@ -88,21 +78,11 @@ const BodyInnerGrid = styled(InnerGrid)<{
8878
$backgroundColor: string;
8979
$borderColor: string;
9080
$borderWidth: string;
91-
$backgroundImage: string;
92-
$backgroundImageRepeat: string;
93-
$backgroundImageSize: string;
94-
$backgroundImagePosition: string;
95-
$backgroundImageOrigin: string;
9681
}>`
9782
border-top: ${(props) => `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`};
9883
flex: 1;
9984
${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
10085
border-radius: 0;
101-
${(props) => props.$backgroundImage && `background-image: ${props.$backgroundImage};`}
102-
${(props) => props.$backgroundImageRepeat && `background-repeat: ${props.$backgroundImageRepeat};`}
103-
${(props) => props.$backgroundImageSize && `background-size: ${props.$backgroundImageSize};`}
104-
${(props) => props.$backgroundImagePosition && `background-position: ${props.$backgroundImagePosition};`}
105-
${(props) => props.$backgroundImageOrigin && `background-origin: ${props.$backgroundImageOrigin};`}
10686
`;
10787

10888
const FooterInnerGrid = styled(InnerGrid)<{
@@ -120,7 +100,7 @@ const FooterInnerGrid = styled(InnerGrid)<{
120100
overflow: visible;
121101
${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
122102
border-radius: 0;
123-
${(props) => props.$footerBackgroundImage && `background-image: ${props.$footerBackgroundImage};`}
103+
${(props) => props.$footerBackgroundImage && `background-image: url(${props.$footerBackgroundImage});`}
124104
${(props) => props.$footerBackgroundImageRepeat && `background-repeat: ${props.$footerBackgroundImageRepeat};`}
125105
${(props) => props.$footerBackgroundImageSize && `background-size: ${props.$footerBackgroundImageSize};`}
126106
${(props) => props.$footerBackgroundImagePosition && `background-position: ${props.$footerBackgroundImagePosition};`}
@@ -219,11 +199,6 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi
219199
containerPadding={[0, 0]}
220200
showName={{ bottom: showFooter ? 20 : 0 }}
221201
$backgroundColor={headerStyle?.headerBackground || 'transparent'}
222-
$headerBackgroundImage={headerStyle?.headerBackgroundImage}
223-
$headerBackgroundImageRepeat={headerStyle?.headerBackgroundImageRepeat}
224-
$headerBackgroundImageSize={headerStyle?.headerBackgroundImageSize}
225-
$headerBackgroundImagePosition={headerStyle?.headerBackgroundImagePosition}
226-
$headerBackgroundImageOrigin={headerStyle?.headerBackgroundImageOrigin}
227202
style={{ padding: headerStyle.containerHeaderPadding }} />
228203
</Header>
229204
</BackgroundColorContext.Provider>
@@ -286,11 +261,6 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi
286261
$backgroundColor={bodyStyle?.background || 'transparent'}
287262
$borderColor={style?.border}
288263
$borderWidth={style?.borderWidth}
289-
$backgroundImage={bodyStyle?.backgroundImage}
290-
$backgroundImageRepeat={bodyStyle?.backgroundImageRepeat}
291-
$backgroundImageSize={bodyStyle?.backgroundImageSize}
292-
$backgroundImagePosition={bodyStyle?.backgroundImagePosition}
293-
$backgroundImageOrigin={bodyStyle?.backgroundImageOrigin}
294264
style={{ padding: bodyStyle.containerBodyPadding }} />
295265
)}
296266
</ScrollBar>
@@ -353,11 +323,6 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi
353323
$backgroundColor={bodyStyle?.background || 'transparent'}
354324
$borderColor={style?.border}
355325
$borderWidth={style?.borderWidth}
356-
$backgroundImage={bodyStyle?.backgroundImage}
357-
$backgroundImageRepeat={bodyStyle?.backgroundImageRepeat}
358-
$backgroundImageSize={bodyStyle?.backgroundImageSize}
359-
$backgroundImagePosition={bodyStyle?.backgroundImagePosition}
360-
$backgroundImageOrigin={bodyStyle?.backgroundImageOrigin}
361326
style={{ padding: bodyStyle.containerBodyPadding }} />
362327
)}
363328
</ScrollBar>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ const childrenMap = {
5151
autoHeight: AutoHeightControl,
5252
siderScrollbars: withDefault(BoolControl, false),
5353
contentScrollbars: withDefault(BoolControl, false),
54-
style: styleControl(ContainerStyle),
54+
style: withDefault(styleControl(ContainerStyle),{borderWidth:'1px'}),
5555
headerStyle: styleControl(ContainerHeaderStyle),
5656
siderStyle: styleControl(ContainerSiderStyle),
5757
bodyStyle: styleControl(ContainerBodyStyle),

‎client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@ let StepControlBasicComp = (function () {
117117
background-color: ${props.style.background};
118118
border: ${props.style.borderWidth} solid ${props.style.border};
119119
border-radius: ${props.style.radius};
120-
background-image: ${props.style.backgroundImage};
120+
background-image: url(${props.style.backgroundImage});
121121
background-repeat: ${props.style.backgroundImageRepeat};
122122
background-size: ${props.style.backgroundImageSize};
123123
background-position: ${props.style.backgroundImagePosition};

‎client/packages/lowcoder/src/comps/comps/tableComp/tableCompView.tsx

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -67,13 +67,17 @@ const getStyle = (
6767
&,
6868
> td {
6969
background: ${genLinerGradient(rowStyle.background)};
70+
border-bottom:${rowStyle.borderWidth} ${rowStyle.borderStyle} ${rowStyle.border} !important;
71+
border-right:${rowStyle.borderWidth} ${rowStyle.borderStyle} ${rowStyle.border} !important;
7072
}
7173
}
7274
7375
> tr:nth-of-type(2n) {
7476
&,
7577
> td {
7678
background: ${alternateBackground};
79+
border-bottom:${rowStyle.borderWidth} ${rowStyle.borderStyle} ${rowStyle.border} !important;
80+
border-right:${rowStyle.borderWidth} ${rowStyle.borderStyle} ${rowStyle.border} !important;
7781
}
7882
}
7983
@@ -136,14 +140,15 @@ const BackgroundWrapper = styled.div<{
136140
$style: TableStyleType;
137141
$tableAutoHeight: boolean;
138142
}>`
139-
${(props) => !props.$tableAutoHeight && `height: calc(100% - ${props.$style.margin} - ${props.$style.margin});`}
140143
background: ${(props) => props.$style.background} !important;
141-
border: ${(props) => `${props.$style.borderWidth} solid ${props.$style.border} !important`};
144+
// border: ${(props) => `${props.$style.border} !important`};
142145
border-radius: ${(props) => props.$style.radius} !important;
143146
// padding: unset !important;
144-
padding: ${(props) => props.$style.padding} !important
147+
padding: ${(props) => props.$style.padding} !important;
145148
margin: ${(props) => props.$style.margin} !important;
146149
overflow: scroll !important;
150+
border-style:${(props) => props.$style.borderStyle} !important;
151+
border-width: ${(props) => `${props.$style.borderWidth} !important`};
147152
${(props) => props.$style}
148153
`;
149154

@@ -339,7 +344,6 @@ const TableTd = styled.td<{
339344
}
340345
background: ${(props) => props.$background} !important;
341346
border-color: ${(props) => props.$style.border} !important;
342-
border-width: ${(props) => props.$style.borderWidth} !important;
343347
border-radius: ${(props) => props.$style.radius};
344348
345349
padding: 0 !important;
@@ -533,7 +537,7 @@ function TableCellView(props: {
533537
text: columnStyle.text || columnsStyle.text,
534538
border: columnStyle.border || columnsStyle.border,
535539
radius: columnStyle.radius || columnsStyle.radius,
536-
borderWidth: columnStyle.borderWidth || columnsStyle.borderWidth,
540+
// borderWidth: columnStyle.borderWidth || columnsStyle.borderWidth,
537541
textSize: columnStyle.textSize || columnsStyle.textSize,
538542
textWeight: columnsStyle.textWeight || columnStyle.textWeight,
539543
fontFamily: columnsStyle.fontFamily || columnStyle.fontFamily,

‎client/packages/lowcoder/src/comps/comps/tableComp/tableTypes.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -205,12 +205,12 @@ const tableChildrenMap = {
205205
pagination: PaginationControl,
206206
sort: valueComp<Array<SortValue>>([]),
207207
toolbar: TableToolbarComp,
208-
style: styleControl(TableStyle),
209-
rowStyle: styleControl(TableRowStyle),
208+
style: withDefault(styleControl(TableStyle), {borderWidth: '1px'}),
209+
rowStyle: withDefault(styleControl(TableRowStyle),{ borderWidth: '1px'}),
210210
toolbarStyle: styleControl(TableToolbarStyle),
211-
headerStyle: styleControl(TableHeaderStyle),
211+
headerStyle:withDefault(styleControl(TableHeaderStyle), {borderWidth: '1px'}),
212212
searchText: StringControl,
213-
columnsStyle: withDefault(styleControl(TableColumnStyle), {borderWidth: '1px', radius: '0px',fontStyle:'italic'}),
213+
columnsStyle: styleControl(TableColumnStyle),
214214
viewModeResizable: BoolControl,
215215
visibleResizables: BoolControl,
216216
// sample data for regenerating columns

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

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ const childrenMap = {
5757
onEvent: eventHandlerControl(EVENT_OPTIONS),
5858
disabled: BoolCodeControl,
5959
showHeader: withDefault(BoolControl, true),
60-
style: styleControl(TabContainerStyle),
60+
style: withDefault(styleControl(TabContainerStyle),{borderWidth:'1px'}),
6161
headerStyle: styleControl(ContainerHeaderStyle),
6262
bodyStyle: styleControl(ContainerBodyStyle),
6363
tabsGutter: withDefault(NumberControl, 32),
@@ -72,14 +72,15 @@ const getStyle = (
7272
headerStyle: ContainerHeaderStyleType,
7373
bodyStyle: ContainerBodyStyleType,
7474
) => {
75+
console.log("🚀 ~ style:", style)
7576
return css`
7677
&.ant-tabs {
7778
overflow: hidden;
7879
border: ${style.borderWidth} solid ${style.border};
7980
border-radius: ${style.radius};
8081
padding: ${style.padding};
8182
background-color: ${style.background};
82-
background-image: ${style.backgroundImage};
83+
background-image: url(${style.backgroundImage});
8384
background-repeat: ${style.backgroundImageRepeat};
8485
background-size: ${style.backgroundImageSize};
8586
background-position: ${style.backgroundImagePosition};
@@ -90,26 +91,15 @@ const getStyle = (
9091
.react-grid-layout {
9192
border-radius: 0;
9293
background-color: ${bodyStyle.background || 'transparent'};
93-
background-image: ${bodyStyle.backgroundImage};
94-
background-repeat: ${bodyStyle.backgroundImageRepeat};
95-
background-size: ${bodyStyle.backgroundImageSize};
96-
background-position: ${bodyStyle.backgroundImagePosition};
97-
background-origin: ${bodyStyle.backgroundImageOrigin};
98-
9994
}
10095
}
10196
10297
> .ant-tabs-nav {
10398
background-color: ${headerStyle.headerBackground || 'transparent'};
104-
background-image: ${headerStyle.headerBackgroundImage};
105-
background-repeat: ${headerStyle.headerBackgroundImageRepeat};
106-
background-size: ${headerStyle.headerBackgroundImageSize};
107-
background-position: ${headerStyle.headerBackgroundImagePosition};
108-
background-origin: ${headerStyle.headerBackgroundImageOrigin};
10999
110100
.ant-tabs-tab {
111101
div {
112-
color: ${style.tabText};
102+
color: #8b8fa3;
113103
}
114104
115105
&.ant-tabs-tab-active div {

‎client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx

Lines changed: 2 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const getStyle = (style: ContainerStyleType) => {
1616
overflow: hidden;
1717
padding: ${style.padding};
1818
${style.background && `background-color: ${style.background};`}
19-
${style.backgroundImage && `background-image: ${style.backgroundImage};`}
19+
${style.backgroundImage && `background-image: url(${style.backgroundImage});`}
2020
${style.backgroundImageRepeat && `background-repeat: ${style.backgroundImageRepeat};`}
2121
${style.backgroundImageSize && `background-size: ${style.backgroundImageSize};`}
2222
${style.backgroundImagePosition && `background-position: ${style.backgroundImagePosition};`}
@@ -35,42 +35,22 @@ const Wrapper = styled.div<{ $style: ContainerStyleType }>`
3535

3636
const HeaderInnerGrid = styled(InnerGrid)<{
3737
$backgroundColor: string
38-
$headerBackgroundImage: string;
39-
$headerBackgroundImageRepeat: string;
40-
$headerBackgroundImageSize: string;
41-
$headerBackgroundImagePosition: string;
42-
$headerBackgroundImageOrigin: string;
4338
}>`
4439
overflow: visible;
4540
${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
4641
border-radius: 0;
47-
${(props) => props.$headerBackgroundImage && `background-image: ${props.$headerBackgroundImage};`}
48-
${(props) => props.$headerBackgroundImageRepeat && `background-repeat: ${props.$headerBackgroundImageRepeat};`}
49-
${(props) => props.$headerBackgroundImageSize && `background-size: ${props.$headerBackgroundImageSize};`}
50-
${(props) => props.$headerBackgroundImagePosition && `background-position: ${props.$headerBackgroundImagePosition};`}
51-
${(props) => props.$headerBackgroundImageOrigin && `background-origin: ${props.$headerBackgroundImageOrigin};`}
5242
`;
5343

5444
const BodyInnerGrid = styled(InnerGrid)<{
5545
$showBorder: boolean;
5646
$backgroundColor: string;
5747
$borderColor: string;
5848
$borderWidth: string;
59-
$backgroundImage: string;
60-
$backgroundImageRepeat: string;
61-
$backgroundImageSize: string;
62-
$backgroundImagePosition: string;
63-
$backgroundImageOrigin: string;
6449
}>`
6550
border-top: ${(props) => `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`};
6651
flex: 1;
6752
${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
6853
border-radius: 0;
69-
${(props) => props.$backgroundImage && `background-image: ${props.$backgroundImage};`}
70-
${(props) => props.$backgroundImageRepeat && `background-repeat: ${props.$backgroundImageRepeat};`}
71-
${(props) => props.$backgroundImageSize && `background-size: ${props.$backgroundImageSize};`}
72-
${(props) => props.$backgroundImagePosition && `background-position: ${props.$backgroundImagePosition};`}
73-
${(props) => props.$backgroundImageOrigin && `background-origin: ${props.$backgroundImageOrigin};`}
7454
`;
7555

7656
const FooterInnerGrid = styled(InnerGrid)<{
@@ -88,7 +68,7 @@ const FooterInnerGrid = styled(InnerGrid)<{
8868
overflow: visible;
8969
${(props) => props.$backgroundColor && `background-color: ${props.$backgroundColor};`}
9070
border-radius: 0;
91-
${(props) => props.$footerBackgroundImage && `background-image: ${props.$footerBackgroundImage};`}
71+
${(props) => props.$footerBackgroundImage && `background-image: url(${props.$footerBackgroundImage});`}
9272
${(props) => props.$footerBackgroundImageRepeat && `background-repeat: ${props.$footerBackgroundImageRepeat};`}
9373
${(props) => props.$footerBackgroundImageSize && `background-size: ${props.$footerBackgroundImageSize};`}
9474
${(props) => props.$footerBackgroundImagePosition && `background-position: ${props.$footerBackgroundImagePosition};`}
@@ -135,11 +115,6 @@ export function TriContainer(props: TriContainerProps) {
135115
containerPadding={[paddingWidth, 3]}
136116
showName={{ bottom: showBody || showFooter ? 20 : 0 }}
137117
$backgroundColor={headerStyle?.headerBackground || 'transparent'}
138-
$headerBackgroundImage={headerStyle?.headerBackgroundImage}
139-
$headerBackgroundImageRepeat={headerStyle?.headerBackgroundImageRepeat}
140-
$headerBackgroundImageSize={headerStyle?.headerBackgroundImageSize}
141-
$headerBackgroundImagePosition={headerStyle?.headerBackgroundImagePosition}
142-
$headerBackgroundImageOrigin={headerStyle?.headerBackgroundImageOrigin}
143118
style={{padding: headerStyle.containerHeaderPadding}}
144119

145120
/>
@@ -162,11 +137,6 @@ export function TriContainer(props: TriContainerProps) {
162137
$backgroundColor={bodyStyle?.background || 'transparent'}
163138
$borderColor={style?.border}
164139
$borderWidth={style?.borderWidth}
165-
$backgroundImage={bodyStyle?.backgroundImage}
166-
$backgroundImageRepeat={bodyStyle?.backgroundImageRepeat}
167-
$backgroundImageSize={bodyStyle?.backgroundImageSize}
168-
$backgroundImagePosition={bodyStyle?.backgroundImagePosition}
169-
$backgroundImageOrigin={bodyStyle?.backgroundImageOrigin}
170140
style={{padding: bodyStyle.containerBodyPadding}}
171141
/>
172142
</ScrollBar>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const childrenMap = {
4040
showFooter: BoolControl,
4141
autoHeight: AutoHeightControl,
4242
scrollbars: withDefault(BoolControl, false),
43-
style: styleControl(ContainerStyle),
43+
style: withDefault(styleControl(ContainerStyle),{borderWidth:'1px'}),
4444
headerStyle: styleControl(ContainerHeaderStyle),
4545
bodyStyle: styleControl(ContainerBodyStyle),
4646
footerStyle: styleControl(ContainerFooterStyle),

0 commit comments

Comments
 (0)