Skip to content

Commit e923590

Browse files
MenamAfzalMenamAfzal
committed
styles added to avatar
1 parent cf0a209 commit e923590

File tree

1 file changed

+62
-12
lines changed
  • client/packages/lowcoder/src/comps/comps

1 file changed

+62
-12
lines changed

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

Lines changed: 62 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ import { RecordConstructorToView } from "lowcoder-core";
33
import { styleControl } from "comps/controls/styleControl";
44
import _ from "lodash";
55
import {
6+
avatarContainerStyle,
7+
AvatarContainerStyleType,
8+
avatarLabelStyle,
9+
AvatarLabelStyleType,
610
AvatarStyle,
711
AvatarStyleType,
812
} from "comps/controls/styleControlConstants";
@@ -37,13 +41,20 @@ const AvatarWrapper = styled(Avatar) <AvatarProps & { $cursorPointer?: boolean,
3741
cursor: ${(props) => props.$cursorPointer ? 'pointer' : ''};
3842
`;
3943

40-
const Wrapper = styled.div <{ iconSize: number, labelPosition: string }>`
44+
const Wrapper = styled.div <{ iconSize: number, labelPosition: string,$style: AvatarContainerStyleType}>`
4145
display: flex;
4246
width: 100%;
4347
height: 100%;
44-
padding: 0px;
4548
align-items: center;
4649
flex-direction: ${(props) => props.labelPosition === 'left' ? 'row' : 'row-reverse'};
50+
${(props) => {
51+
return (
52+
props.$style && {
53+
...props.$style,
54+
borderRadius: props.$style.radius,
55+
}
56+
);
57+
}}
4758
`
4859

4960
const LabelWrapper = styled.div<{ iconSize: number, alignmentPosition: string }>`
@@ -55,20 +66,47 @@ flex-direction: column;
5566
justify-content: flex-end;
5667
align-items: ${(props) => props.alignmentPosition === 'left' ? 'flex-start' : 'flex-end'};
5768
`
58-
const LabelSpan = styled.span<{ color: string }>`
69+
const LabelSpan = styled.span<{ $style:AvatarLabelStyleType }>`
5970
max-width: 100%;
6071
overflow: hidden;
6172
text-overflow: ellipsis;
6273
white-space: nowrap;
63-
font-weight: bold;
64-
color: ${(props) => props.color};
74+
font-weight: ${props=>props.$style.textWeight};
75+
border-radius: ${props=>props.$style.radius};
76+
font-size: ${props=>props.$style.textSize};
77+
rotate: ${props=>props.$style.rotation};
78+
text-transform: ${props=>props.$style.textTransform};
79+
color: ${props=>props.$style.text};
80+
border: ${props => props.$style.border};
81+
border-style: ${props=>props.$style.borderStyle};
82+
border-width: ${props=>props.$style.borderWidth};
83+
font-family: ${props=>props.$style.fontFamily};
84+
font-style: ${props=>props.$style.fontStyle};
85+
margin: ${props=>props.$style.margin};
86+
padding: ${props=>props.$style.padding};
87+
background: ${props=>props.$style.background};
88+
text-decoration: ${props=>props.$style.textDecoration};
6589
`
66-
const CaptionSpan = styled.span<{ color: string }>`
90+
const CaptionSpan = styled.span<{ $style:AvatarLabelStyleType }>`
6791
max-width: 100%;
6892
overflow: hidden;
6993
text-overflow: ellipsis;
7094
white-space: nowrap;
71-
color: ${(props) => props.color};
95+
font-weight: ${props=>props.$style.textWeight};
96+
border-radius: ${props=>props.$style.radius};
97+
font-size: ${props=>props.$style.textSize};
98+
rotate: ${props=>props.$style.rotation};
99+
text-transform: ${props=>props.$style.textTransform};
100+
color: ${props=>props.$style.text};
101+
border: ${props => props.$style.border};
102+
border-style: ${props=>props.$style.borderStyle};
103+
border-width: ${props=>props.$style.borderWidth};
104+
font-family: ${props=>props.$style.fontFamily};
105+
font-style: ${props=>props.$style.fontStyle};
106+
margin: ${props=>props.$style.margin};
107+
padding: ${props=>props.$style.padding};
108+
background: ${props=>props.$style.background};
109+
text-decoration: ${props => props.$style.textDecoration};
72110
`
73111
const EventOptions = [clickEvent] as const;
74112
const sharpOptions = [
@@ -82,7 +120,10 @@ const sideOptions = [
82120
] as const;
83121

84122
const childrenMap = {
85-
style: styleControl(AvatarStyle),
123+
style: styleControl(avatarContainerStyle),
124+
avatarStyle: styleControl(AvatarStyle),
125+
labelStyle: styleControl(avatarLabelStyle),
126+
captionStyle: styleControl(avatarLabelStyle),
86127
icon: withDefault(IconControl, "/icon:solid/user"),
87128
iconSize: withDefault(NumberControl, 40),
88129
onEvent: eventHandlerControl(EventOptions),
@@ -127,7 +168,7 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
127168
disabled={!props.enableDropdownMenu}
128169
dropdownRender={() => menu}
129170
>
130-
<Wrapper iconSize={props.iconSize} labelPosition={props.labelPosition}>
171+
<Wrapper iconSize={props.iconSize} labelPosition={props.labelPosition} $style={props.style}>
131172
<Badge
132173
count={props.badgeCount.value}
133174
dot={props.badgeType === 'dot'}
@@ -140,7 +181,7 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
140181
size={iconSize}
141182
icon={title.value !== '' ? null : props.icon}
142183
shape={shape}
143-
$style={props.style}
184+
$style={props.avatarStyle}
144185
src={src.value}
145186
// $cursorPointer={eventsCount > 0}
146187
onClick={() => props.onEvent("click")}
@@ -149,8 +190,8 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
149190
</AvatarWrapper>
150191
</Badge>
151192
<LabelWrapper iconSize={props.iconSize} alignmentPosition={props.alignmentPosition}>
152-
<LabelSpan color={props.style.label}>{props.avatarLabel.value}</LabelSpan>
153-
<CaptionSpan color={props.style.caption}>{props.avatarCatption.value}</CaptionSpan>
193+
<LabelSpan $style={props.labelStyle}>{props.avatarLabel.value}</LabelSpan>
194+
<CaptionSpan $style={props.captionStyle}>{props.avatarCatption.value}</CaptionSpan>
154195
</LabelWrapper>
155196
</Wrapper>
156197
</Dropdown>
@@ -220,6 +261,15 @@ let AvatarBasicComp = (function () {
220261
<Section name={sectionNames.style}>
221262
{children.style.getPropertyView()}
222263
</Section>
264+
<Section name={sectionNames.avatarStyle}>
265+
{children.avatarStyle.getPropertyView()}
266+
</Section>
267+
<Section name={sectionNames.labelStyle}>
268+
{children.labelStyle.getPropertyView()}
269+
</Section>
270+
<Section name={sectionNames.captionStyle}>
271+
{children.captionStyle.getPropertyView()}
272+
</Section>
223273
</>
224274
))
225275
.build();

0 commit comments

Comments
 (0)