Skip to content

Commit b31e606

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #700 from imtananikhwa/imtanan-task1
nav component issue fixes, component updates in progress
2 parents 1d42ee8 + cac08a4 commit b31e606

File tree

9 files changed

+92
-37
lines changed

9 files changed

+92
-37
lines changed

‎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: 1 addition & 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) {

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ const Link = styled(Button) <{ $style: LinkStyleType }>`
3333
font-family:${props.$style.fontFamily};
3434
font-weight:${props.$style.textWeight};
3535
border: ${props.$style.borderWidth} solid ${props.$style.border};
36+
border-radius:${props.$style.radius ? props.$style.radius:'0px'};
3637
background-color: ${props.$style.background};
3738
&:hover {
3839
color: ${props.$style.hoverText} !important;
@@ -41,7 +42,8 @@ const Link = styled(Button) <{ $style: LinkStyleType }>`
4142
color: ${props.$style.activeText} !important;
4243
}
4344
`}
44-
&.ant-btn {
45+
46+
&.ant-btn {
4547
display: inline-flex;
4648
align-items: center;
4749
> span {

‎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: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,18 +24,19 @@ type IProps = {
2424
$bgColor: string;
2525
$borderColor: string;
2626
$borderWidth: string;
27+
$borderRadius: string;
2728
};
2829

29-
const Wrapper = styled("div") <Pick<IProps, "$bgColor" | "$borderColor" | "$borderWidth">>`
30+
const Wrapper = styled("div") <Pick<IProps, "$bgColor" | "$borderColor" | "$borderWidth" | "$borderRadius">>`
3031
height: 100%;
31-
border-radius: 2px;
32+
border-radius: ${(props) => props.$borderRadius ? props.$borderRadius : '2px'};
3233
box-sizing: border-box;
3334
border: ${(props) => props.$borderWidth ? `${props.$borderWidth}` : '1px'} solid ${(props) => props.$borderColor};
3435
background-color: ${(props) => props.$bgColor};
3536
`;
3637

3738
const NavInner = styled("div") <Pick<IProps, "$justify">>`
38-
margin: 0 -16px;
39+
// margin: 0 -16px;
3940
height: 100%;
4041
display: flex;
4142
justify-content: ${(props) => (props.$justify ? "space-between" : "left")};
@@ -49,17 +50,19 @@ const Item = styled.div<{
4950
$fontStyle: string;
5051
$textWeight: string;
5152
$textSize: string;
53+
$margin: string;
54+
$padding: string;
5255
}>`
5356
height: 30px;
5457
line-height: 30px;
55-
padding: 0 16px;
58+
padding: ${(props) => props.$padding ? props.$padding : '0 16px'};
5659
color: ${(props) => (props.$active ? props.$activeColor : props.$color)};
5760
font-weight: ${(props) => (props.$textWeight ? props.$textWeight : 500)};
5861
font-family:${(props) => (props.$fontFamily ? props.$fontFamily : 'sans-serif')};
5962
font-style:${(props) => (props.$fontStyle ? props.$fontStyle : 'normal')};
60-
font-size:${(props) => (props.$textSize ? props.$textSize : '14px')}
61-
62-
63+
font-size:${(props) => (props.$textSize ? props.$textSize : '14px')};
64+
margin:${(props) => props.$margin ? props.$margin : '0px'};
65+
6366
&:hover {
6467
color: ${(props) => props.$activeColor};
6568
cursor: pointer;
@@ -157,6 +160,8 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
157160
$fontStyle={props.style.fontStyle}
158161
$textWeight={props.style.textWeight}
159162
$textSize={props.style.textSize}
163+
$padding={props.style.padding}
164+
$margin={props.style.margin}
160165
onClick={() => onEvent("click")}
161166
>
162167
{label}
@@ -195,6 +200,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
195200
$borderColor={props.style.border}
196201
$bgColor={props.style.background}
197202
$borderWidth={props.style.borderWidth}
203+
$borderRadius={props.style.borderRadius}
198204
>
199205
<NavInner $justify={justify}>
200206
{props.logoUrl && (

‎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: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ const getStyle = (style: ProgressStyleType) => {
2121
font-style:${style.fontStyle};
2222
font-family:${style.fontFamily};
2323
font-weight:${style.textWeight};
24+
font-size:${style.textSize};
2425
}
2526
width: ${widthCalculator(style.margin)};
2627
height: ${heightCalculator(style.margin)};

‎client/packages/lowcoder/src/comps/comps/textInputComp/mentionComp.tsx

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,17 @@ let MentionTmpComp = (function () {
192192
label: value,
193193
}))}
194194
autoSize={props.autoHeight}
195-
style={{ height: "100%", maxHeight: "100%", resize: "none", padding: props.style.padding, fontStyle: props.style.fontStyle, fontFamily: props.style.fontFamily, borderWidth: props.style.borderWidth, fontWeight: props.style.textWeight }}
195+
style={{
196+
height: "100%",
197+
maxHeight: "100%",
198+
resize: "none",
199+
padding: props.style.padding,
200+
fontStyle: props.style.fontStyle,
201+
fontFamily: props.style.fontFamily,
202+
borderWidth: props.style.borderWidth,
203+
fontWeight: props.style.textWeight,
204+
fontSize: props.style.textSize
205+
}}
196206
readOnly={props.readOnly}
197207
/>
198208
</ConfigProvider>

‎client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx

Lines changed: 40 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -476,7 +476,8 @@ function replaceAndMergeMultipleStyles(originalArray: any[], styleToReplace: str
476476
}
477477

478478
export const ButtonStyle = [
479-
...getBgBorderRadiusByBg("primary"),
479+
// ...getBgBorderRadiusByBg("primary"),
480+
getBackground('primary'),
480481
...STYLING_FIELDS_SEQUENCE
481482
] as const;
482483

@@ -1015,7 +1016,12 @@ export const TableColumnLinkStyle = [
10151016
...LinkTextStyle,
10161017
] as const;
10171018

1018-
export const FileStyle = [...getStaticBgBorderRadiusByBg(SURFACE_COLOR), TEXT, ACCENT, MARGIN, PADDING] as const;
1019+
export const FileStyle = [
1020+
// ...getStaticBgBorderRadiusByBg(SURFACE_COLOR),
1021+
getStaticBackground(SURFACE_COLOR),
1022+
...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE,'border',[getStaticBorder('#00000000')]),
1023+
// TEXT, ACCENT, MARGIN, PADDING
1024+
] as const;
10191025

10201026
export const FileViewerStyle = [
10211027
getStaticBackground("#FFFFFF"),
@@ -1084,30 +1090,43 @@ export const ProgressStyle = [
10841090
depTheme: "canvas",
10851091
depType: DEP_TYPE.CONTRAST_TEXT,
10861092
transformer: contrastText,
1087-
}]).filter((style)=> ['border','borderWidth'].includes(style.name) === false),
1093+
}]).filter((style) => ['border', 'borderWidth'].includes(style.name) === false),
10881094
TRACK,
10891095
FILL,
10901096
SUCCESS,
10911097
] as const;
10921098

1099+
export const CircleProgressStyle = [...ProgressStyle.filter((style) => style.name !== 'radius')]
1100+
10931101
export const NavigationStyle = [
1094-
{
1095-
name: "text",
1096-
label: trans("text"),
1097-
depName: "background",
1098-
depType: DEP_TYPE.CONTRAST_TEXT,
1099-
transformer: contrastText,
1100-
},
1101-
ACCENT,
1102-
getStaticBackground("#FFFFFF00"),
1103-
getStaticBorder("#FFFFFF00"),
1104-
MARGIN,
1105-
PADDING,
1106-
FONT_FAMILY,
1107-
FONT_STYLE,
1108-
TEXT_WEIGHT,
1109-
TEXT_SIZE,
1110-
BORDER_WIDTH
1102+
...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, 'text', [
1103+
{
1104+
name: "text",
1105+
label: trans("text"),
1106+
depName: "background",
1107+
depType: DEP_TYPE.CONTRAST_TEXT,
1108+
transformer: contrastText,
1109+
},
1110+
ACCENT,
1111+
getStaticBackground("#FFFFFF00")
1112+
])
1113+
// {
1114+
// name: "text",
1115+
// label: trans("text"),
1116+
// depName: "background",
1117+
// depType: DEP_TYPE.CONTRAST_TEXT,
1118+
// transformer: contrastText,
1119+
// },
1120+
// ACCENT,
1121+
// getStaticBackground("#FFFFFF00"),
1122+
// getStaticBorder("#FFFFFF00"),
1123+
// MARGIN,
1124+
// PADDING,
1125+
// FONT_FAMILY,
1126+
// FONT_STYLE,
1127+
// TEXT_WEIGHT,
1128+
// TEXT_SIZE,
1129+
// BORDER_WIDTH
11111130
] as const;
11121131

11131132
export const ImageStyle = [getStaticBorder("#00000000"), RADIUS, BORDER_WIDTH, MARGIN, PADDING] as const;
@@ -1363,6 +1382,7 @@ export type DateTimeStyleType = StyleConfigType<typeof DateTimeStyle>;
13631382
export type LinkStyleType = StyleConfigType<typeof LinkStyle>;
13641383
export type DividerStyleType = StyleConfigType<typeof DividerStyle>;
13651384
export type ProgressStyleType = StyleConfigType<typeof ProgressStyle>;
1385+
export type CircleProgressType = StyleConfigType<typeof CircleProgressStyle>;
13661386
export type NavigationStyleType = StyleConfigType<typeof NavigationStyle>;
13671387
export type ImageStyleType = StyleConfigType<typeof ImageStyle>;
13681388
export type ListViewStyleType = StyleConfigType<typeof ListViewStyle>;

0 commit comments

Comments
 (0)