Skip to content

Commit e3fde16

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #866 from MenamAfzal/feature/add-styles
Feature/add styles
2 parents 2edb402 + 5f3b0ac commit e3fde16

File tree

17 files changed

+352
-93
lines changed

17 files changed

+352
-93
lines changed

‎client/packages/lowcoder-design/src/components/Section.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -149,5 +149,12 @@ export const sectionNames = {
149149
data: trans("prop.data"),
150150
meetings: trans("prop.meetings"), // added by Falk Wolsky
151151
field: trans("prop.field"),
152-
inputFieldStyle:trans("prop.inputFieldStyle")
152+
inputFieldStyle:trans("prop.inputFieldStyle"),
153+
avatarStyle:trans("prop.avatarStyle"),
154+
captionStyle:trans("prop.captionStyle"),
155+
startButtonStyle:trans("prop.startButtonStyle"),
156+
resetButtonStyle:trans("prop.resetButtonStyle"),
157+
headerStyle:trans("prop.headerStyle"),
158+
bodyStyle:trans("prop.bodyStyle"),
159+
badgeStyle:trans("prop.badgeStyle"),
153160
};

‎client/packages/lowcoder-design/src/i18n/design/locales/en.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,14 @@ export const en = {
2828
meetings: "Meeting Settings",
2929
data: "Data",
3030
field: 'Field',
31-
inputFieldStyle:'Input Field Style'
31+
inputFieldStyle: 'Input Field Style',
32+
avatarStyle: 'Avatar Style',
33+
captionStyle: 'Caption Style',
34+
startButtonStyle: 'Start Button Style',
35+
resetButtonStyle: 'Reset Button Style',
36+
headerStyle: 'Header Style',
37+
bodyStyle: 'Body Style',
38+
badgeStyle: 'Badge Style',
3239
},
3340
passwordInput: {
3441
label: "Password:",

‎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();

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

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { CompAction, RecordConstructorToView, changeChildAction } from "lowcoder-core";
22
import { styleControl } from "comps/controls/styleControl";
3-
import { avatarGroupStyle, AvatarGroupStyleType } from "comps/controls/styleControlConstants";
3+
import { QRCodeStyle, QRCodeStyleType, avatarGroupStyle, AvatarGroupStyleType, avatarContainerStyle, AvatarContainerStyleType } from "comps/controls/styleControlConstants";
44
import { UICompBuilder } from "comps/generators/uiCompBuilder";
55
import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
66
import { AlignCenter, AlignLeft, AlignRight, Section, sectionNames } from "lowcoder-design";
@@ -31,13 +31,20 @@ const MacaroneList = [
3131
'#fcd6bb',
3232
]
3333

34-
const Container = styled.div<{ $style: AvatarGroupStyleType | undefined, alignment: string }>`
34+
const Container = styled.div<{ $style: AvatarContainerStyleType | undefined, alignment: string }>`
3535
height: 100%;
3636
width: 100%;
3737
display: flex;
3838
align-items: center;
3939
justify-content: ${props => props.alignment};
4040
cursor: pointer;
41+
background: ${props => props?.$style?.background};
42+
margin: ${props => props?.$style?.margin};
43+
padding: ${props => props?.$style?.padding};
44+
border: ${props => props?.$style?.border};
45+
border-style: ${props => props?.$style?.borderStyle};
46+
border-radius: ${props => props?.$style?.radius};
47+
border-width: ${props => props?.$style?.borderWidth};
4148
`;
4249

4350
const DropdownOption = new MultiCompBuilder(
@@ -79,7 +86,8 @@ export const alignOptions = [
7986
] as const;
8087

8188
const childrenMap = {
82-
style: styleControl(avatarGroupStyle),
89+
avatar: styleControl(avatarGroupStyle),
90+
style: styleControl(avatarContainerStyle),
8391
maxCount: withDefault(NumberControl, 3),
8492
avatarSize: withDefault(NumberControl, 40),
8593
alignment: dropdownControl(alignOptions, "center"),
@@ -112,8 +120,8 @@ const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & {
112120
src={item.src ?? undefined}
113121
icon={(item.AvatarIcon as ReactElement)?.props.value === '' || item.label.trim() !== '' ? undefined : item.AvatarIcon}
114122
style={{
115-
color: item.color ? item.color : (props.style.fill !== '#FFFFFF' ? props.style.fill : '#FFFFFF'),
116-
backgroundColor: item.backgroundColor ? item.backgroundColor : (props.autoColor ? MacaroneList[index % MacaroneList.length] : props.style.background),
123+
color: item.color ? item.color : (props.avatar.fill !== '#FFFFFF' ? props.avatar.fill : '#FFFFFF'),
124+
backgroundColor: item.backgroundColor ? item.backgroundColor : (props.autoColor ? MacaroneList[index % MacaroneList.length] : props.avatar.background),
117125
}}
118126
size={props.avatarSize}
119127
onClick={() => {
@@ -163,9 +171,14 @@ let AvatarGroupBasicComp = (function () {
163171
)}
164172

165173
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
174+
<>
175+
<Section name={sectionNames.avatarStyle}>
176+
{children.avatar.getPropertyView()}
177+
</Section>
166178
<Section name={sectionNames.style}>
167179
{children.style.getPropertyView()}
168180
</Section>
181+
</>
169182
)}
170183
</>
171184
))

‎client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { BoolControl } from "comps/controls/boolControl";
33
import { stringExposingStateControl } from "comps/controls/codeStateControl";
44
import { dropdownControl } from "comps/controls/dropdownControl";
55
import { styleControl } from "comps/controls/styleControl";
6-
import { FloatButtonStyle, FloatButtonStyleType } from "comps/controls/styleControlConstants";
6+
import { BadgeStyle, BadgeStyleType, FloatButtonStyle, FloatButtonStyleType } from "comps/controls/styleControlConstants";
77
import { UICompBuilder } from "comps/generators/uiCompBuilder";
88
import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
99
import { Section, sectionNames } from "lowcoder-design";
@@ -17,7 +17,7 @@ import styled from "styled-components";
1717
import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
1818
import { manualOptionsControl } from "comps/controls/optionsControl";
1919

20-
const Wrapper = styled.div<{ $style: FloatButtonStyleType }>`
20+
const Wrapper = styled.div<{ $badgeStyle: BadgeStyleType, $style: FloatButtonStyleType}>`
2121
width: 0px;
2222
height: 0px;
2323
overflow: hidden;
@@ -29,6 +29,12 @@ const Wrapper = styled.div<{ $style: FloatButtonStyleType }>`
2929
right: 0px;
3030
inset-block-end: -8px;
3131
}
32+
.ant-float-btn-primary .ant-float-btn-body {
33+
background-color: ${(props) => props.$style.background};
34+
border: ${(props) => props.$style.border};
35+
border-style: ${(props) => props.$style.borderStyle};
36+
border-width: ${(props) => props.$style.borderWidth};
37+
}
3238
`
3339

3440
const buttonShapeOption = [
@@ -70,6 +76,7 @@ const childrenMap = {
7076
includeMargin: BoolControl.DEFAULT_TRUE,
7177
image: StringControl,
7278
icon: withDefault(IconControl, '/icon:antd/questioncircleoutlined'),
79+
badgeStyle: styleControl(BadgeStyle),
7380
style: styleControl(FloatButtonStyle),
7481
buttons: manualOptionsControl(buttonGroupOption, {
7582
initOptions: [
@@ -92,20 +99,20 @@ const FloatButtonView = (props: RecordConstructorToView<typeof childrenMap>) =>
9299
onClick={() => button.onEvent("click")}
93100
tooltip={button?.label}
94101
description={button?.description}
95-
badge={{ count: button?.badge, color: props.style.badgeColor, dot: props?.dot }}
102+
badge={{ count: button?.badge, color: props.badgeStyle.badgeColor, dot: props?.dot }}
96103
type={onlyOne ? props.buttonTheme : 'default'}
97104
shape={props.shape}
98105
/>)
99106
: ''
100107
}
101108
return (
102-
<Wrapper $style={props.style} >
109+
<Wrapper $badgeStyle={props.badgeStyle} $style={props.style}>
103110
{props.buttons.length === 1 ? (renderButton(props.buttons[0], true)) :
104111
(<FloatButton.Group
105112
trigger="hover"
106113
icon={props.icon}
107114
shape={props.shape}
108-
badge={{ count: props.buttons.reduce((sum, i) => sum + (i.buttonType === 'custom' && !i.hidden ? i.badge : 0), 0), color: props.style.badgeColor, dot: props.dot }}
115+
badge={{ count: props.buttons.reduce((sum, i) => sum + (i.buttonType === 'custom' && !i.hidden ? i.badge : 0), 0), color: props.badgeStyle.badgeColor, dot: props.dot }}
109116
type={props.buttonTheme}
110117
>
111118
{props.buttons.map((button: any) => renderButton(button))}
@@ -129,6 +136,7 @@ let FloatButtonBasicComp = (function () {
129136
<Section name={sectionNames.layout}>
130137
{hiddenPropertyView(children)}
131138
</Section>
139+
<Section name={sectionNames.badgeStyle}>{children.badgeStyle.getPropertyView()}</Section>
132140
<Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
133141
</>
134142
))

0 commit comments

Comments
 (0)