Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitb31e606

Browse files
authored
Merge pull request#700 from imtananikhwa/imtanan-task1
nav component issue fixes, component updates in progress
2 parents1d42ee8 +cac08a4 commitb31e606

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
<metaname="theme-color"content="#000000"/>
88
<metaproperty="iframely:title"content="Lowcoder"/>
99
<metaproperty="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+
<linkrel="preconnect"href="https://fonts.googleapis.com">
12+
<linkrel="preconnect"href="https://fonts.gstatic.com"crossorigin>
13+
<linkhref="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
returncss`
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-
constWrapper=styled("div")<Pick<IProps,"$bgColor"|"$borderColor"|"$borderWidth">>`
30+
constWrapper=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
constNavInner=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{defaultasProgress}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
importstyled,{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-
constgetStyle=(style:ProgressStyleType)=>{
17+
constgetStyle=(style:CircleProgressType)=>{
1818
returncss`
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-
exportconstStyledProgressCircle=styled(Progress)<{$style:ProgressStyleType}>`
48+
exportconstStyledProgressCircle=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
letProgressCircleTmpComp=(function(){
6065
constchildrenMap={
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
returnnewUICompBuilder(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
exportconstButtonStyle=[
479-
...getBgBorderRadiusByBg("primary"),
479+
// ...getBgBorderRadiusByBg("primary"),
480+
getBackground('primary'),
480481
...STYLING_FIELDS_SEQUENCE
481482
]asconst;
482483

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

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

10201026
exportconstFileViewerStyle=[
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
]asconst;
10921098

1099+
exportconstCircleProgressStyle=[...ProgressStyle.filter((style)=>style.name!=='radius')]
1100+
10931101
exportconstNavigationStyle=[
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
]asconst;
11121131

11131132
exportconstImageStyle=[getStaticBorder("#00000000"),RADIUS,BORDER_WIDTH,MARGIN,PADDING]asconst;
@@ -1363,6 +1382,7 @@ export type DateTimeStyleType = StyleConfigType<typeof DateTimeStyle>;
13631382
exporttypeLinkStyleType=StyleConfigType<typeofLinkStyle>;
13641383
exporttypeDividerStyleType=StyleConfigType<typeofDividerStyle>;
13651384
exporttypeProgressStyleType=StyleConfigType<typeofProgressStyle>;
1385+
exporttypeCircleProgressType=StyleConfigType<typeofCircleProgressStyle>;
13661386
exporttypeNavigationStyleType=StyleConfigType<typeofNavigationStyle>;
13671387
exporttypeImageStyleType=StyleConfigType<typeofImageStyle>;
13681388
exporttypeListViewStyleType=StyleConfigType<typeofListViewStyle>;

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp