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

Commitdd2eb1a

Browse files
authored
Merge pull request#708 from lowcoder-org/style-changes-imtaman
Style changes by Imtanan
2 parentsb3a33dd +42bb266 commitdd2eb1a

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
<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: 2 additions & 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) {
@@ -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
importReact,{useContext}from"react";
2525

26-
constLink=styled(Button)<{$style:LinkStyleType}>`
26+
constLink=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-
<Sectionname={sectionNames.advanced}>
118-
{children.prefixIcon.propertyView({label:trans("button.prefixIcon")})}
119-
{children.suffixIcon.propertyView({label:trans("button.suffixIcon")})}
120-
</Section></>
124+
<Sectionname={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-
<><Sectionname={sectionNames.style}>{children.style.getPropertyView()}</Section></>
125-
)}
130+
{(useContext(EditorContext).editorModeStatus==="layout"||useContext(EditorContext).editorModeStatus==="both")&&(
131+
<><Sectionname={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-
constStyledDivider=styled(Divider)<IProps>`
24+
constStyledDivider=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-
returnwidthCalculator(props.$style.margin);
36+
width:${(props)=>{
37+
returnwidthCalculator(props.$style.margin);
3738
}};
38-
min-height:${(props)=>{
39-
returnheightCalculator(props.$style.margin);
39+
min-height:${(props)=>{
40+
returnheightCalculator(props.$style.margin);
4041
}};
41-
margin:${(props)=>{
42-
returnprops.$style.margin;
42+
margin:${(props)=>{
43+
returnprops.$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-
constWrapper=styled("div")<Pick<IProps,"$bgColor"|"$borderColor">>`
30+
constWrapper=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-
constNavInner=styled("div")<Pick<IProps,"$justify">>`
37-
margin: 0 -16px;
38+
constNavInner=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-
constStyledMenu=styled(Menu)<MenuProps>`
94+
constStyledMenu=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
constjustify=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
<LogoWrapperonClick={()=>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
<Sectionname={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
constgetStyle=(style:InputLikeStyleType)=>{
5757
returncss`
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-numberinput {
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-
constInputNumber=styled(AntdInputNumber)<{
120+
constInputNumber=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-
<Sectionname={sectionNames.interaction}>
395-
{children.onEvent.getPropertyView()}
396-
{disabledPropertyView(children)}
397-
{hiddenPropertyView(children)}
398-
</Section>
401+
<Sectionname={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{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(

0 commit comments

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