Skip to content

Commit f7a2500

Browse files
MenamAfzalMenamAfzal
committed
styles added to card
1 parent c9f73e7 commit f7a2500

File tree

1 file changed

+57
-16
lines changed
  • client/packages/lowcoder/src/comps/comps/containerComp

1 file changed

+57
-16
lines changed

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

Lines changed: 57 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { useContext, useEffect, useRef, useState } from "react";
1313
import { EditorContext } from "comps/editorState";
1414
import { Card } from "antd";
1515
import styled from "styled-components";
16-
import { CardStyle, CardStyleType } from "comps/controls/styleControlConstants";
16+
import { CardHeaderStyle, CardHeaderStyleType, CardStyle, CardStyleType } from "comps/controls/styleControlConstants";
1717
import { MultiCompBuilder, withDefault } from "comps/generators";
1818
import { IconControl } from "comps/controls/iconControl";
1919
import { ButtonEventHandlerControl, CardEventHandlerControl, clickEvent, refreshEvent } from "comps/controls/eventHandlerControl";
@@ -22,46 +22,77 @@ import { dropdownControl } from "comps/controls/dropdownControl";
2222
import { styleControl } from "comps/controls/styleControl";
2323
const { Meta } = Card;
2424

25-
const Warpper = styled.div<{ $style: CardStyleType | undefined, $showMate: boolean, $cardType: string }>`
25+
const Warpper = styled.div<{ $style: CardStyleType | undefined, $showMate: boolean, $cardType: string, $headerStyle:CardHeaderStyleType, $bodyStyle:CardHeaderStyleType }>`
2626
height: 100%;
2727
width: 100%;
2828
.ant-card-small >.ant-card-head {
29-
background-color: ${props => props.$style?.background};
30-
margin-bottom: 0px;
31-
border-bottom: 1px solid ${props => props.$style?.border};
29+
background-color: ${props => props.$headerStyle?.background} !important;
30+
border: ${props => props.$headerStyle?.border};
31+
border-style: ${props => props.$headerStyle?.borderStyle};
32+
border-width: ${props => props.$headerStyle?.borderWidth};
33+
border-radius: ${props => props.$headerStyle?.radius};
34+
font-size: ${props => props.$headerStyle?.textSize};
35+
font-style: ${props => props.$headerStyle?.fontStyle};
36+
font-family: ${props => props.$headerStyle?.fontFamily};
37+
font-weight: ${props => props.$headerStyle?.textWeight};
38+
text-transform: ${props => props.$headerStyle?.textTransform};
39+
text-decoration: ${props => props.$headerStyle?.textDecoration};
40+
color: ${props => props.$headerStyle?.text};
41+
rotate: ${props => props.$headerStyle?.rotation};
42+
margin: ${props => props.$headerStyle?.margin};
43+
padding: ${props => props.$headerStyle?.padding};
3244
}
3345
.ant-card .ant-card-actions {
3446
border-top: 1px solid ${props => props.$style?.border};
3547
}
3648
.ant-card .ant-card-actions>li:not(:last-child) {
3749
border-inline-end: 1px solid ${props => props.$style?.border};
3850
}
39-
.ant-card-small >.ant-card-body {
40-
padding: ${props => props.$cardType == 'custom' ? '0px' : '10px'};
41-
}
42-
.ant-card .ant-card-head {
43-
background-color: ${props => props.$style?.background};
44-
border-bottom: 1px solid ${props => props.$style?.border};
45-
}
46-
.ant-card-small >.ant-card-body {
47-
background-color: ${props => props.$style?.background};
48-
}
4951
.ant-card .ant-card-actions {
5052
background-color: ${props => props.$style?.background};
5153
}
5254
.ant-card .ant-card-body {
53-
padding: ${props => props.$cardType == 'custom' ? '0px' : '10px'};
55+
background-color: ${props => props.$bodyStyle?.background} !important;
56+
border: ${props => props.$bodyStyle?.border};
57+
border-style: ${props => props.$bodyStyle?.borderStyle};
58+
border-width: ${props => props.$bodyStyle?.borderWidth};
59+
border-radius: ${props => props.$bodyStyle?.radius};
60+
rotate: ${props => props.$bodyStyle?.rotation};
61+
margin: ${props => props.$bodyStyle?.margin};
62+
padding: ${props => props.$bodyStyle?.padding};
5463
}
5564
.ant-card {
5665
display: flex;
5766
flex-direction: column;
5867
justify-content: space-between;
5968
background-color: ${props => props.$style?.background};
69+
border: ${props => props.$style?.border};
70+
border-style: ${props => props.$style?.borderStyle};
71+
border-radius: ${props => props.$style?.radius};
72+
border-width: ${props => props.$style?.borderWidth};
6073
}
6174
.ant-card-body {
6275
display: ${props => props.$showMate ? '' : 'none'};
6376
height: ${props => props.$cardType == 'custom' ? '100%' : 'auto'};
6477
}
78+
.ant-card-body .ant-card-meta .ant-card-meta-title{
79+
color: ${props => props.$bodyStyle?.text} !important;
80+
font-size: ${props => props.$bodyStyle?.textSize};
81+
font-style: ${props => props.$bodyStyle?.fontStyle};
82+
font-family: ${props => props.$bodyStyle?.fontFamily};
83+
font-weight: ${props => props.$bodyStyle?.textWeight};
84+
text-transform: ${props => props.$bodyStyle?.textTransform};
85+
text-decoration: ${props => props.$bodyStyle?.textDecoration};
86+
}
87+
.ant-card-body .ant-card-meta .ant-card-meta-description{
88+
color: ${props => props.$bodyStyle?.text} !important;
89+
font-size: ${props => props.$bodyStyle?.textSize};
90+
font-style: ${props => props.$bodyStyle?.fontStyle};
91+
font-family: ${props => props.$bodyStyle?.fontFamily};
92+
font-weight: ${props => props.$bodyStyle?.textWeight};
93+
text-transform: ${props => props.$bodyStyle?.textTransform};
94+
text-decoration: ${props => props.$bodyStyle?.textDecoration};
95+
}
6596
`;
6697

6798
const ContainWarpper = styled.div`
@@ -140,6 +171,8 @@ export const ContainerBaseComp = (function () {
140171

141172
onEvent: CardEventHandlerControl,
142173
style: styleControl(CardStyle),
174+
headerStyle: styleControl(CardHeaderStyle),
175+
bodyStyle: styleControl(CardHeaderStyle),
143176
};
144177

145178
return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
@@ -169,6 +202,8 @@ export const ContainerBaseComp = (function () {
169202
<Warpper
170203
ref={conRef}
171204
$style={props.style}
205+
$headerStyle={props.headerStyle}
206+
$bodyStyle={props.bodyStyle}
172207
$showMate={props.showMeta || props.cardType == 'custom'}
173208
$cardType={props.cardType}
174209
onMouseEnter={() => props.onEvent('focus')}
@@ -280,6 +315,12 @@ export const ContainerBaseComp = (function () {
280315
<Section name={sectionNames.style}>
281316
{children.style.getPropertyView()}
282317
</Section>
318+
<Section name={sectionNames.headerStyle}>
319+
{children.headerStyle.getPropertyView()}
320+
</Section>
321+
<Section name={sectionNames.bodyStyle}>
322+
{children.bodyStyle.getPropertyView()}
323+
</Section>
283324
</>
284325
)}
285326
</>

0 commit comments

Comments
 (0)