Skip to content

Commit dd2eb1a

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #708 from lowcoder-org/style-changes-imtaman
Style changes by Imtanan
2 parents b3a33dd + 42bb266 commit dd2eb1a

26 files changed

+730
-544
lines changed

‎client/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
},
1212
"scripts": {
1313
"start": "yarn workspace lowcoder start",
14+
"start-win":"LOWCODER_API_SERVICE_URL=http://localhost:3000 yarn start",
1415
"start:ee": "REACT_APP_EDITION=enterprise yarn workspace lowcoder start",
1516
"start:ee-global": "REACT_APP_EDITION=enterprise-global yarn workspace lowcoder start",
1617
"build": "yarn node ./scripts/build.js",

‎client/packages/lowcoder/index.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@
77
<meta name="theme-color" content="#000000" />
88
<meta property="iframely:title" content="Lowcoder" />
99
<meta property="iframely:description" content="Lowcoder | rapid App & VideoMeeting builder for everyone." />
10+
<!-- Added Montserrat google font link to test font family style property for components -->
11+
<link rel="preconnect" href="https://fonts.googleapis.com">
12+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13+
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
1014
<style>
1115
html,
1216
body {

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
1313
return css`
1414
&&& {
1515
border-radius: ${buttonStyle.radius};
16+
border-width:${buttonStyle.borderWidth};
1617
margin: ${buttonStyle.margin};
1718
padding: ${buttonStyle.padding};
1819
&:not(:disabled) {
@@ -22,6 +23,7 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
2223
font-size: ${buttonStyle.textSize};
2324
font-weight: ${buttonStyle.textWeight};
2425
font-family: ${buttonStyle.fontFamily};
26+
font-style: ${buttonStyle.fontStyle};
2527
background-color: ${buttonStyle.background};
2628
border-radius: ${buttonStyle.radius};
2729
margin: ${buttonStyle.margin};

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,11 @@ const LeftButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>`
4242
margin: 0 !important;
4343
${(props) => `border-radius: ${props.$buttonStyle.radius} 0 0 ${props.$buttonStyle.radius};`}
4444
}
45+
${(props) => `background-color: ${props.$buttonStyle.background};`}
46+
${(props) => `color: ${props.$buttonStyle.text};`}
47+
${(props) => `padding: ${props.$buttonStyle.padding};`}
48+
${(props) => `font-size: ${props.$buttonStyle.textSize};`}
49+
${(props) => `font-style: ${props.$buttonStyle.fontStyle};`}
4550
width: 100%;
4651
}
4752
`;

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

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,20 +23,27 @@ import { RefControl } from "comps/controls/refControl";
2323
import { EditorContext } from "comps/editorState";
2424
import React, { useContext } from "react";
2525

26-
const Link = styled(Button)<{ $style: LinkStyleType }>`
26+
const Link = styled(Button) <{ $style: LinkStyleType }>`
2727
${(props) => `
2828
color: ${props.$style.text};
2929
margin: ${props.$style.margin};
3030
padding: ${props.$style.padding};
3131
font-size: ${props.$style.textSize};
32+
font-style:${props.$style.fontStyle};
33+
font-family:${props.$style.fontFamily};
34+
font-weight:${props.$style.textWeight};
35+
border: ${props.$style.borderWidth} solid ${props.$style.border};
36+
border-radius:${props.$style.radius ? props.$style.radius:'0px'};
37+
background-color: ${props.$style.background};
3238
&:hover {
3339
color: ${props.$style.hoverText} !important;
3440
}
3541
&:active {
3642
color: ${props.$style.activeText} !important;
3743
}
3844
`}
39-
&.ant-btn {
45+
46+
&.ant-btn {
4047
display: inline-flex;
4148
align-items: center;
4249
> span {
@@ -114,15 +121,15 @@ const LinkTmpComp = (function () {
114121
{hiddenPropertyView(children)}
115122
{loadingPropertyView(children)}
116123
</Section>
117-
<Section name={sectionNames.advanced}>
118-
{children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
119-
{children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
120-
</Section></>
124+
<Section name={sectionNames.advanced}>
125+
{children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
126+
{children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
127+
</Section></>
121128
)}
122129

123-
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
124-
<><Section name={sectionNames.style}>{children.style.getPropertyView()}</Section></>
125-
)}
130+
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
131+
<><Section name={sectionNames.style}>{children.style.getPropertyView()}</Section></>
132+
)}
126133
</>
127134
);
128135
})

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

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ type IProps = DividerProps & { $style: DividerStyleType; dashed: boolean };
2121
// TODO: find out how to set border style when text is active
2222
// TODO: enable type "vertical" https://ant.design/components/divider
2323

24-
const StyledDivider = styled(Divider)<IProps>`
24+
const StyledDivider = styled(Divider) <IProps>`
2525
margin-top: 3.5px;
2626
.ant-divider-inner-text {
2727
height: 32px;
@@ -30,16 +30,17 @@ const StyledDivider = styled(Divider)<IProps>`
3030
font-size: ${(props) => props.$style.textSize};
3131
font-weight: ${(props) => props.$style.textWeight};
3232
font-family: ${(props) => props.$style.fontFamily};
33+
font-style:${(props) => props.$style.fontStyle}
3334
}
3435
min-width: 0;
35-
width: ${(props) => {
36-
return widthCalculator(props.$style.margin);
36+
width: ${(props) => {
37+
return widthCalculator(props.$style.margin);
3738
}};
38-
min-height: ${(props) => {
39-
return heightCalculator(props.$style.margin);
39+
min-height: ${(props) => {
40+
return heightCalculator(props.$style.margin);
4041
}};
41-
margin: ${(props) => {
42-
return props.$style.margin;
42+
margin: ${(props) => {
43+
return props.$style.margin;
4344
}};
4445
padding: ${(props) => props.$style.padding};
4546

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,11 @@ const getStyle = (style: FileStyleType) => {
141141
padding: ${style.padding};
142142
width: ${widthCalculator(style.margin)};
143143
height: ${heightCalculator(style.margin)};
144+
font-family:${style.fontFamily};
145+
font-size:${style.textSize};
146+
font-weight:${style.textWeight};
147+
font-style:${style.fontStyle};
148+
border-width:${style.borderWidth};
144149
}
145150
146151
.ant-btn:not(:disabled) {

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

Lines changed: 34 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -23,18 +23,20 @@ type IProps = {
2323
$justify: boolean;
2424
$bgColor: string;
2525
$borderColor: string;
26+
$borderWidth: string;
27+
$borderRadius: string;
2628
};
2729

28-
const Wrapper = styled("div")<Pick<IProps, "$bgColor" | "$borderColor">>`
30+
const Wrapper = styled("div") <Pick<IProps, "$bgColor" | "$borderColor" | "$borderWidth" | "$borderRadius">>`
2931
height: 100%;
30-
border-radius: 2px;
32+
border-radius: ${(props) => props.$borderRadius ? props.$borderRadius : '2px'};
3133
box-sizing: border-box;
32-
border: 1px solid ${(props) => props.$borderColor};
34+
border: ${(props) => props.$borderWidth ? `${props.$borderWidth}` : '1px'} solid ${(props) => props.$borderColor};
3335
background-color: ${(props) => props.$bgColor};
3436
`;
3537

36-
const NavInner = styled("div")<Pick<IProps, "$justify">>`
37-
margin: 0 -16px;
38+
const NavInner = styled("div") <Pick<IProps, "$justify">>`
39+
// margin: 0 -16px;
3840
height: 100%;
3941
display: flex;
4042
justify-content: ${(props) => (props.$justify ? "space-between" : "left")};
@@ -44,13 +46,23 @@ const Item = styled.div<{
4446
$active: boolean;
4547
$activeColor: string;
4648
$color: string;
49+
$fontFamily: string;
50+
$fontStyle: string;
51+
$textWeight: string;
52+
$textSize: string;
53+
$margin: string;
54+
$padding: string;
4755
}>`
4856
height: 30px;
4957
line-height: 30px;
50-
padding: 0 16px;
58+
padding: ${(props) => props.$padding ? props.$padding : '0 16px'};
5159
color: ${(props) => (props.$active ? props.$activeColor : props.$color)};
52-
font-weight: 500;
53-
60+
font-weight: ${(props) => (props.$textWeight ? props.$textWeight : 500)};
61+
font-family:${(props) => (props.$fontFamily ? props.$fontFamily : 'sans-serif')};
62+
font-style:${(props) => (props.$fontStyle ? props.$fontStyle : 'normal')};
63+
font-size:${(props) => (props.$textSize ? props.$textSize : '14px')};
64+
margin:${(props) => props.$margin ? props.$margin : '0px'};
65+
5466
&:hover {
5567
color: ${(props) => props.$activeColor};
5668
cursor: pointer;
@@ -79,7 +91,7 @@ const ItemList = styled.div<{ $align: string }>`
7991
justify-content: ${(props) => props.$align};
8092
`;
8193

82-
const StyledMenu = styled(Menu)<MenuProps>`
94+
const StyledMenu = styled(Menu) <MenuProps>`
8395
&.ant-dropdown-menu {
8496
min-width: 160px;
8597
}
@@ -144,6 +156,12 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
144156
$active={active || subMenuSelectedKeys.length > 0}
145157
$color={props.style.text}
146158
$activeColor={props.style.accent}
159+
$fontFamily={props.style.fontFamily}
160+
$fontStyle={props.style.fontStyle}
161+
$textWeight={props.style.textWeight}
162+
$textSize={props.style.textSize}
163+
$padding={props.style.padding}
164+
$margin={props.style.margin}
147165
onClick={() => onEvent("click")}
148166
>
149167
{label}
@@ -178,7 +196,12 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
178196
const justify = props.horizontalAlignment === "justify";
179197

180198
return (
181-
<Wrapper $borderColor={props.style.border} $bgColor={props.style.background}>
199+
<Wrapper
200+
$borderColor={props.style.border}
201+
$bgColor={props.style.background}
202+
$borderWidth={props.style.borderWidth}
203+
$borderRadius={props.style.borderRadius}
204+
>
182205
<NavInner $justify={justify}>
183206
{props.logoUrl && (
184207
<LogoWrapper onClick={() => props.logoEvent("click")}>
@@ -220,7 +243,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
220243
</Section>
221244
)}
222245

223-
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
246+
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
224247
<Section name={sectionNames.style}>
225248
{children.style.getPropertyView()}
226249
</Section>

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

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ import { EditorContext } from "comps/editorState";
5656
const getStyle = (style: InputLikeStyleType) => {
5757
return css`
5858
border-radius: ${style.radius};
59+
border-width:${style.borderWidth} !important;
5960
// still use antd style when disabled
6061
&:not(.ant-input-number-disabled) {
6162
color: ${style.text};
@@ -78,11 +79,17 @@ const getStyle = (style: InputLikeStyleType) => {
7879
}
7980
.ant-input-number {
8081
margin: 0;
82+
8183
}
82-
.ant-input-number input {
84+
.ant-input-number-input {
8385
margin: 0;
8486
padding: ${style.padding};
8587
height: ${heightCalculator(style.margin)};
88+
color:${style.text};
89+
font-family:${style.fontFamily} !important;
90+
font-weight:${style.textWeight} !important;
91+
font-size:${style.textSize} !important;
92+
font-style:${style.fontStyle} !important;
8693
}
8794
8895
.ant-input-number-handler-wrap {
@@ -110,7 +117,7 @@ const getStyle = (style: InputLikeStyleType) => {
110117
`;
111118
};
112119

113-
const InputNumber = styled(AntdInputNumber)<{
120+
const InputNumber = styled(AntdInputNumber) <{
114121
$style: InputLikeStyleType;
115122
}>`
116123
width: 100%;
@@ -391,15 +398,15 @@ const NumberInputTmpComp = (function () {
391398
{children.max.propertyView({ label: trans("prop.maximum") })}
392399
{children.customRule.propertyView({})}
393400
</Section>
394-
<Section name={sectionNames.interaction}>
395-
{children.onEvent.getPropertyView()}
396-
{disabledPropertyView(children)}
397-
{hiddenPropertyView(children)}
398-
</Section>
401+
<Section name={sectionNames.interaction}>
402+
{children.onEvent.getPropertyView()}
403+
{disabledPropertyView(children)}
404+
{hiddenPropertyView(children)}
405+
</Section>
399406
</>
400407
)}
401-
402-
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
408+
409+
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
403410
children.label.getPropertyView()
404411
)}
405412

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

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { default as Progress } from "antd/es/progress";
22
import { styleControl } from "comps/controls/styleControl";
3-
import { ProgressStyle, ProgressStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
3+
import { CircleProgressStyle, CircleProgressType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
44
import styled, { css } from "styled-components";
55
import { Section, sectionNames } from "lowcoder-design";
66
import { numberExposingStateControl } from "../controls/codeStateControl";
@@ -14,33 +14,38 @@ import { EditorContext } from "comps/editorState";
1414

1515
// TODO: after Update of ANTd, introduce Size attribute to ProgressCircle
1616

17-
const getStyle = (style: ProgressStyleType) => {
17+
const getStyle = (style: CircleProgressType) => {
1818
return css`
1919
width: ${widthCalculator(style.margin)};
2020
height: ${heightCalculator(style.margin)};
2121
margin: ${style.margin};
2222
padding: ${style.padding};
23+
border-radius:${style.radius};
2324
.ant-progress-text {
24-
color: ${style.text};
25+
color: ${style.text} !important;
26+
font-family:${style.fontFamily};
27+
font-style:${style.fontStyle};
28+
font-size:${style.textSize} !important;
29+
font-weight:${style.textWeight};
2530
}
2631
.ant-progress-circle-trail {
2732
stroke: ${style.track};
2833
}
2934
.ant-progress-inner .ant-progress-circle-path {
30-
stroke: ${style.fill};
35+
stroke: ${style.fill} !important;
3136
}
3237
&.ant-progress-status-success {
3338
.ant-progress-inner .ant-progress-circle-path {
34-
stroke: ${style.success};
39+
stroke: ${style.success} !important;
3540
}
3641
.ant-progress-text {
37-
color: ${style.success};
42+
color: ${style.success} !important;
3843
}
3944
}
4045
`;
4146
};
4247

43-
export const StyledProgressCircle = styled(Progress)<{ $style: ProgressStyleType }>`
48+
export const StyledProgressCircle = styled(Progress) <{ $style: CircleProgressType }>`
4449
width: 100%;
4550
height: 100%;
4651
padding: 2px;
@@ -59,7 +64,8 @@ export const StyledProgressCircle = styled(Progress)<{ $style: ProgressStyleType
5964
let ProgressCircleTmpComp = (function () {
6065
const childrenMap = {
6166
value: numberExposingStateControl("value", 60),
62-
style: styleControl(ProgressStyle),
67+
// borderRadius property hidden as it's not valid for progress circle
68+
style: styleControl(CircleProgressStyle),
6369
};
6470
return new UICompBuilder(childrenMap, (props) => {
6571
return (

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@ const getStyle = (style: ProgressStyleType) => {
1818
line-height: 2;
1919
.ant-progress-text {
2020
color: ${style.text};
21+
font-style:${style.fontStyle};
22+
font-family:${style.fontFamily};
23+
font-weight:${style.textWeight};
24+
font-size:${style.textSize};
2125
}
2226
width: ${widthCalculator(style.margin)};
2327
height: ${heightCalculator(style.margin)};

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { refMethods } from "comps/generators/withMethodExposing";
1111

1212
const CascaderStyle = styled(Cascader)<{ $style: CascaderStyleType }>`
1313
width: 100%;
14+
font-family:"Montserrat";
1415
${(props) => props.$style && getStyle(props.$style)}
1516
`;
1617

0 commit comments

Comments
 (0)