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

Commit5c6a0e1

Browse files
authored
Merge pull request#686 from imtananikhwa/imtanan-task1
Add properties and CSS controls to components
2 parents4380582 +12b4551 commit5c6a0e1

File tree

7 files changed

+70
-23
lines changed

7 files changed

+70
-23
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
2222
font-size:${buttonStyle.textSize};
2323
font-weight:${buttonStyle.textWeight};
2424
font-family:${buttonStyle.fontFamily};
25+
font-style:${buttonStyle.fontStyle};
2526
background-color:${buttonStyle.background};
2627
border-radius:${buttonStyle.radius};
2728
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: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,10 @@ const Link = styled(Button)<{ $style: LinkStyleType }>`
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+
border:${props.$style.borderWidth} solid${props.$style.border};
35+
background-color:${props.$style.background};
3236
&:hover {
3337
color:${props.$style.hoverText} !important;
3438
}

‎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/navComp/navComp.tsx‎

Lines changed: 24 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,17 +23,18 @@ type IProps = {
2323
$justify:boolean;
2424
$bgColor:string;
2525
$borderColor:string;
26+
$borderWidth:string;
2627
};
2728

28-
constWrapper=styled("div")<Pick<IProps,"$bgColor"|"$borderColor">>`
29+
constWrapper=styled("div")<Pick<IProps,"$bgColor"|"$borderColor"|"$borderWidth">>`
2930
height: 100%;
3031
border-radius: 2px;
3132
box-sizing: border-box;
32-
border: 1px solid${(props)=>props.$borderColor};
33+
border:${(props)=>props.$borderWidth ?`${props.$borderWidth}` :'1px'} solid${(props)=>props.$borderColor};
3334
background-color:${(props)=>props.$bgColor};
3435
`;
3536

36-
constNavInner=styled("div")<Pick<IProps,"$justify">>`
37+
constNavInner=styled("div")<Pick<IProps,"$justify">>`
3738
margin: 0 -16px;
3839
height: 100%;
3940
display: flex;
@@ -44,12 +45,20 @@ const Item = styled.div<{
4445
$active:boolean;
4546
$activeColor:string;
4647
$color:string;
48+
$fontFamily:string;
49+
$fontStyle:string;
50+
$textWeight:string;
51+
$textSize:string;
4752
}>`
4853
height: 30px;
4954
line-height: 30px;
5055
padding: 0 16px;
5156
color:${(props)=>(props.$active ?props.$activeColor :props.$color)};
52-
font-weight: 500;
57+
font-weight:${(props)=>(props.$textWeight ?props.$textWeight :500)};
58+
font-family:${(props)=>(props.$fontFamily ?props.$fontFamily :'sans-serif')};
59+
font-style:${(props)=>(props.$fontStyle ?props.$fontStyle :'normal')};
60+
font-size:${(props)=>(props.$textSize ?props.$textSize :'14px')}
61+
5362
5463
&:hover {
5564
color:${(props)=>props.$activeColor};
@@ -79,7 +88,7 @@ const ItemList = styled.div<{ $align: string }>`
7988
justify-content:${(props)=>props.$align};
8089
`;
8190

82-
constStyledMenu=styled(Menu)<MenuProps>`
91+
constStyledMenu=styled(Menu)<MenuProps>`
8392
&.ant-dropdown-menu {
8493
min-width: 160px;
8594
}
@@ -144,6 +153,10 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
144153
$active={active||subMenuSelectedKeys.length>0}
145154
$color={props.style.text}
146155
$activeColor={props.style.accent}
156+
$fontFamily={props.style.fontFamily}
157+
$fontStyle={props.style.fontStyle}
158+
$textWeight={props.style.textWeight}
159+
$textSize={props.style.textSize}
147160
onClick={()=>onEvent("click")}
148161
>
149162
{label}
@@ -178,7 +191,11 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
178191
constjustify=props.horizontalAlignment==="justify";
179192

180193
return(
181-
<Wrapper$borderColor={props.style.border}$bgColor={props.style.background}>
194+
<Wrapper
195+
$borderColor={props.style.border}
196+
$bgColor={props.style.background}
197+
$borderWidth={props.style.borderWidth}
198+
>
182199
<NavInner$justify={justify}>
183200
{props.logoUrl&&(
184201
<LogoWrapperonClick={()=>props.logoEvent("click")}>
@@ -220,7 +237,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
220237
</Section>
221238
)}
222239

223-
{(useContext(EditorContext).editorModeStatus==="layout"||useContext(EditorContext).editorModeStatus==="both")&&(
240+
{(useContext(EditorContext).editorModeStatus==="layout"||useContext(EditorContext).editorModeStatus==="both")&&(
224241
<Sectionname={sectionNames.style}>
225242
{children.style.getPropertyView()}
226243
</Section>

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ let MentionTmpComp = (function () {
101101
const[activationFlag,setActivationFlag]=useState(false);
102102
const[prefix,setPrefix]=useState<PrefixType>("@");
103103
typePrefixType="@"|keyoftypeofmentionList;
104-
104+
105105
constonSearch=(_:string,newPrefix:PrefixType)=>{
106106
setPrefix(newPrefix);
107107
};
@@ -192,7 +192,7 @@ let MentionTmpComp = (function () {
192192
label:value,
193193
}))}
194194
autoSize={props.autoHeight}
195-
style={{height:"100%",maxHeight:"100%",resize:"none",padding:props.style.padding}}
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}}
196196
readOnly={props.readOnly}
197197
/>
198198
</ConfigProvider>
@@ -222,12 +222,12 @@ let MentionTmpComp = (function () {
222222
)}
223223

224224
{["logic","both"].includes(useContext(EditorContext).editorModeStatus)&&(
225-
<><Sectionname={sectionNames.interaction}>
225+
<><Sectionname={sectionNames.interaction}>
226226
{children.onEvent.getPropertyView()}
227227
{disabledPropertyView(children)}
228228
</Section>
229-
<Sectionname={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
230-
<Sectionname={sectionNames.advanced}>
229+
<Sectionname={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
230+
<Sectionname={sectionNames.advanced}>
231231
{readOnlyPropertyView(children)}
232232
</Section><Sectionname={sectionNames.validation}>
233233
{requiredPropertyView(children)}
@@ -241,9 +241,9 @@ let MentionTmpComp = (function () {
241241
)}
242242

243243
{["layout","both"].includes(useContext(EditorContext).editorModeStatus)&&(
244-
<><Sectionname={sectionNames.style}>
245-
{children.style.getPropertyView()}
246-
</Section></>
244+
<><Sectionname={sectionNames.style}>
245+
{children.style.getPropertyView()}
246+
</Section></>
247247
)}
248248
</>
249249
))

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

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -455,6 +455,7 @@ export const ButtonStyle = [
455455
TEXT_SIZE,
456456
TEXT_WEIGHT,
457457
FONT_FAMILY,
458+
FONT_STYLE,
458459
MARGIN,
459460
PADDING
460461
]asconst;
@@ -474,6 +475,7 @@ export const ToggleButtonStyle = [
474475
TEXT_SIZE,
475476
TEXT_WEIGHT,
476477
FONT_FAMILY,
478+
FONT_STYLE,
477479
MARGIN,
478480
PADDING,
479481
]asconst;
@@ -1045,8 +1047,19 @@ function handleToHoverLink(color: string) {
10451047

10461048
exportconstLinkStyle=[
10471049
...LinkTextStyle,
1050+
{
1051+
name:"background",
1052+
label:trans("style.background"),
1053+
depTheme:"canvas",
1054+
depType:DEP_TYPE.SELF,
1055+
transformer:toSelf,
1056+
},
10481057
MARGIN,
10491058
PADDING,
1059+
FONT_FAMILY,
1060+
FONT_STYLE,
1061+
BORDER,
1062+
BORDER_WIDTH,
10501063
TEXT_SIZE
10511064
]asconst;
10521065

@@ -1067,7 +1080,8 @@ export const DividerStyle = [
10671080
},
10681081
TEXT_SIZE,
10691082
TEXT_WEIGHT,
1070-
FONT_FAMILY
1083+
FONT_FAMILY,
1084+
FONT_STYLE
10711085
]asconst;
10721086

10731087
exportconstProgressStyle=[
@@ -1098,6 +1112,11 @@ export const NavigationStyle = [
10981112
getStaticBorder("#FFFFFF00"),
10991113
MARGIN,
11001114
PADDING,
1115+
FONT_FAMILY,
1116+
FONT_STYLE,
1117+
TEXT_WEIGHT,
1118+
TEXT_SIZE,
1119+
BORDER_WIDTH
11011120
]asconst;
11021121

11031122
exportconstImageStyle=[getStaticBorder("#00000000"),RADIUS,BORDER_WIDTH,MARGIN,PADDING]asconst;

0 commit comments

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