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

Commit90babb9

Browse files
authored
Merge pull request#640 from raheeliftikhar5/container-styling
Separate container styling into header, footer and body styles
2 parentse616845 +6f055ab commit90babb9

File tree

7 files changed

+147
-64
lines changed

7 files changed

+147
-64
lines changed

‎client/packages/lowcoder-design/src/components/Collapase.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,10 @@ const Container = styled.div<{ $optColor?: boolean; $simple?: boolean }>`
2626
line-height: 23px;
2727
user-select: none;
2828
cursor: pointer;
29+
30+
.ant-collapse-header-text {
31+
min-width: 0;
32+
}
2933
}
3034
3135
.ant-collapse-ghost > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box {

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,21 @@ export const ContainerBaseComp = (function () {
4545
<Sectionname={sectionNames.style}>
4646
{children.container.stylePropertyView()}
4747
</Section>
48+
{children.container.children.showHeader.getView()&&(
49+
<Sectionname={"Header Style"}>
50+
{children.container.headerStylePropertyView()}
51+
</Section>
52+
)}
53+
{children.container.children.showBody.getView()&&(
54+
<Sectionname={"Body Style"}>
55+
{children.container.bodyStylePropertyView()}
56+
</Section>
57+
)}
58+
{children.container.children.showFooter.getView()&&(
59+
<Sectionname={"Footer Style"}>
60+
{children.container.footerStylePropertyView()}
61+
</Section>
62+
)}
4863
</>
4964
)}
5065
</>

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -218,6 +218,21 @@ const FormBaseComp = (function () {
218218
<Sectionname={sectionNames.style}>
219219
{children.container.stylePropertyView()}
220220
</Section>
221+
{children.container.children.showHeader.getView()&&(
222+
<Sectionname={"Header Style"}>
223+
{children.container.headerStylePropertyView()}
224+
</Section>
225+
)}
226+
{children.container.children.showBody.getView()&&(
227+
<Sectionname={"Body Style"}>
228+
{children.container.bodyStylePropertyView()}
229+
</Section>
230+
)}
231+
{children.container.children.showFooter.getView()&&(
232+
<Sectionname={"Footer Style"}>
233+
{children.container.footerStylePropertyView()}
234+
</Section>
235+
)}
221236
</>
222237
)}
223238

‎client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx‎

Lines changed: 36 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -52,13 +52,14 @@ const BodyInnerGrid = styled(InnerGrid)<{
5252
$showBorder:boolean;
5353
$backgroundColor:string;
5454
$borderColor:string;
55+
$borderWidth:string;
5556
$backgroundImage:string;
5657
$backgroundImageRepeat:string;
5758
$backgroundImageSize:string;
5859
$backgroundImagePosition:string;
5960
$backgroundImageOrigin:string;
6061
}>`
61-
border-top:${(props)=>`${props.$showBorder ?1 :0}px solid${props.$borderColor}`};
62+
border-top:${(props)=>`${props.$showBorder ?props.$borderWidth :0} solid${props.$borderColor}`};
6263
flex: 1;
6364
${(props)=>props.$backgroundColor&&`background-color:${props.$backgroundColor};`}
6465
border-radius: 0;
@@ -73,13 +74,14 @@ const FooterInnerGrid = styled(InnerGrid)<{
7374
$showBorder:boolean;
7475
$backgroundColor:string;
7576
$borderColor:string;
77+
$borderWidth:string;
7678
$footerBackgroundImage:string;
7779
$footerBackgroundImageRepeat:string;
7880
$footerBackgroundImageSize:string;
7981
$footerBackgroundImagePosition:string;
8082
$footerBackgroundImageOrigin:string;
8183
}>`
82-
border-top:${(props)=>`${props.$showBorder ?1 :0}px solid${props.$borderColor}`};
84+
border-top:${(props)=>`${props.$showBorder ?props.$borderWidth :0} solid${props.$borderColor}`};
8385
overflow: visible;
8486
${(props)=>props.$backgroundColor&&`background-color:${props.$backgroundColor};`}
8587
border-radius: 0;
@@ -103,7 +105,12 @@ export function TriContainer(props: TriContainerProps) {
103105
const{items:headerItems, ...otherHeaderProps}=container.header;
104106
const{items:bodyItems, ...otherBodyProps}=container.body["0"].children.view.getView();
105107
const{items:footerItems, ...otherFooterProps}=container.footer;
106-
const{ style}=container;
108+
const{
109+
style,
110+
headerStyle,
111+
bodyStyle,
112+
footerStyle,
113+
}=container;
107114

108115
consteditorState=useContext(EditorContext);
109116
constmaxWidth=editorState.getAppSettings().maxWidth;
@@ -114,7 +121,7 @@ export function TriContainer(props: TriContainerProps) {
114121
<divstyle={{padding:style.margin,height:'100%'}}>
115122
<Wrapper$style={style}>
116123
{showHeader&&(
117-
<BackgroundColorContext.Providervalue={container.style.headerBackground}>
124+
<BackgroundColorContext.Providervalue={headerStyle.headerBackground}>
118125
<HeaderInnerGrid
119126
{...otherHeaderProps}
120127
items={gridItemCompToGridItems(headerItems)}
@@ -123,19 +130,19 @@ export function TriContainer(props: TriContainerProps) {
123130
minHeight="46px"
124131
containerPadding={[paddingWidth,3]}
125132
showName={{bottom:showBody||showFooter ?20 :0}}
126-
$backgroundColor={style?.headerBackground}
127-
$headerBackgroundImage={style?.headerBackgroundImage}
128-
$headerBackgroundImageRepeat={style?.headerBackgroundImageRepeat}
129-
$headerBackgroundImageSize={style?.headerBackgroundImageSize}
130-
$headerBackgroundImagePosition={style?.headerBackgroundImagePosition}
131-
$headerBackgroundImageOrigin={style?.headerBackgroundImageOrigin}
132-
style={{padding:style.containerheaderpadding}}
133+
$backgroundColor={headerStyle?.headerBackground}
134+
$headerBackgroundImage={headerStyle?.headerBackgroundImage}
135+
$headerBackgroundImageRepeat={headerStyle?.headerBackgroundImageRepeat}
136+
$headerBackgroundImageSize={headerStyle?.headerBackgroundImageSize}
137+
$headerBackgroundImagePosition={headerStyle?.headerBackgroundImagePosition}
138+
$headerBackgroundImageOrigin={headerStyle?.headerBackgroundImageOrigin}
139+
style={{padding:headerStyle.containerheaderpadding}}
133140

134141
/>
135142
</BackgroundColorContext.Provider>
136143
)}
137144
{showBody&&(
138-
<BackgroundColorContext.Providervalue={container.style.background}>
145+
<BackgroundColorContext.Providervalue={bodyStyle.background}>
139146
<BodyInnerGrid
140147
$showBorder={showHeader}
141148
{...otherBodyProps}
@@ -147,19 +154,20 @@ export function TriContainer(props: TriContainerProps) {
147154
(showHeader&&showFooter)||showHeader ?[paddingWidth,11.5] :[paddingWidth,11]
148155
}
149156
hintPlaceholder={props.hintPlaceholder??HintPlaceHolder}
150-
$backgroundColor={style?.background}
157+
$backgroundColor={bodyStyle?.background}
151158
$borderColor={style?.border}
152-
$backgroundImage={style?.backgroundImage}
153-
$backgroundImageRepeat={style?.backgroundImageRepeat}
154-
$backgroundImageSize={style?.backgroundImageSize}
155-
$backgroundImagePosition={style?.backgroundImagePosition}
156-
$backgroundImageOrigin={style?.backgroundImageOrigin}
157-
style={{padding:style.containerbodypadding}}
159+
$borderWidth={style?.borderWidth}
160+
$backgroundImage={bodyStyle?.backgroundImage}
161+
$backgroundImageRepeat={bodyStyle?.backgroundImageRepeat}
162+
$backgroundImageSize={bodyStyle?.backgroundImageSize}
163+
$backgroundImagePosition={bodyStyle?.backgroundImagePosition}
164+
$backgroundImageOrigin={bodyStyle?.backgroundImageOrigin}
165+
style={{padding:bodyStyle.containerbodypadding}}
158166
/>
159167
</BackgroundColorContext.Provider>
160168
)}
161169
{showFooter&&(
162-
<BackgroundColorContext.Providervalue={container.style.footerBackground}>
170+
<BackgroundColorContext.Providervalue={footerStyle.footerBackground}>
163171
<FooterInnerGrid
164172
$showBorder={showHeader||showBody}
165173
{...otherFooterProps}
@@ -169,14 +177,15 @@ export function TriContainer(props: TriContainerProps) {
169177
minHeight={showBody ?"47px" :"46px"}
170178
containerPadding={showBody||showHeader ?[paddingWidth,3.5] :[paddingWidth,3]}
171179
showName={{top:showHeader||showBody ?20 :0}}
172-
$backgroundColor={style?.footerBackground}
173-
$footerBackgroundImage={style?.footerBackgroundImage}
174-
$footerBackgroundImageRepeat={style?.footerBackgroundImageRepeat}
175-
$footerBackgroundImageSize={style?.footerBackgroundImageSize}
176-
$footerBackgroundImagePosition={style?.footerBackgroundImagePosition}
177-
$footerBackgroundImageOrigin={style?.footerBackgroundImageOrigin}
180+
$backgroundColor={footerStyle?.footerBackground}
181+
$footerBackgroundImage={footerStyle?.footerBackgroundImage}
182+
$footerBackgroundImageRepeat={footerStyle?.footerBackgroundImageRepeat}
183+
$footerBackgroundImageSize={footerStyle?.footerBackgroundImageSize}
184+
$footerBackgroundImagePosition={footerStyle?.footerBackgroundImagePosition}
185+
$footerBackgroundImageOrigin={footerStyle?.footerBackgroundImageOrigin}
178186
$borderColor={style?.border}
179-
style={{padding:style.containerfooterpadding}}
187+
$borderWidth={style?.borderWidth}
188+
style={{padding:footerStyle.containerfooterpadding}}
180189
/>
181190
</BackgroundColorContext.Provider>
182191
)}

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

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,12 @@ import { JSONValue } from "util/jsonTypes";
22
import{AutoHeightControl}from"comps/controls/autoHeightControl";
33
import{BoolControl}from"comps/controls/boolControl";
44
import{styleControl}from"comps/controls/styleControl";
5-
import{ContainerStyle}from"comps/controls/styleControlConstants";
5+
import{
6+
ContainerStyle,
7+
ContainerHeaderStyle,
8+
ContainerBodyStyle,
9+
ContainerFooterStyle,
10+
}from"comps/controls/styleControlConstants";
611
import{MultiCompBuilder,sameTypeMap,withDefault}from"comps/generators";
712
import{migrateOldData}from"comps/generators/simpleGenerators";
813
import{NameGenerator}from"comps/utils";
@@ -36,6 +41,9 @@ const childrenMap = {
3641
autoHeight:AutoHeightControl,
3742

3843
style:styleControl(ContainerStyle),
44+
headerStyle:styleControl(ContainerHeaderStyle),
45+
bodyStyle:styleControl(ContainerBodyStyle),
46+
footerStyle:styleControl(ContainerFooterStyle),
3947
};
4048

4149
// Compatible with old style data 2022-8-15
@@ -127,6 +135,17 @@ export class TriContainerComp extends TriContainerBaseComp implements IContainer
127135
returnthis.children.style.getPropertyView();
128136
}
129137

138+
headerStylePropertyView(){
139+
returnthis.children.headerStyle.getPropertyView();
140+
}
141+
142+
bodyStylePropertyView(){
143+
returnthis.children.bodyStyle.getPropertyView();
144+
}
145+
146+
footerStylePropertyView(){
147+
returnthis.children.footerStyle.getPropertyView();
148+
}
130149
}
131150

132151
functioncheckEquals(node1:Node<unknown>,node2:Node<unknown>):boolean{

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

Lines changed: 42 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -489,46 +489,53 @@ export const MarginStyle = [
489489

490490

491491
exportconstContainerStyle=[
492-
...BG_STATIC_BORDER_RADIUS,
492+
// ...BG_STATIC_BORDER_RADIUS,
493+
getStaticBorder(),
494+
RADIUS,
493495
BORDER_WIDTH,
494-
HEADER_BACKGROUND,
495-
{
496-
name:"footerBackground",
497-
label:trans("style.footerBackground"),
498-
depName:"background",
499-
depType:DEP_TYPE.SELF,
500-
transformer:toSelf,
501-
},
502496
MARGIN,
503497
PADDING,
498+
]asconst;
499+
500+
exportconstContainerHeaderStyle=[
504501
CONTAINERHEADERPADDING,
505-
CONTAINERFOOTERPADDING,
506-
CONTAINERBODYPADDING,
502+
HEADER_BACKGROUND,
507503
{
508504
name:"headerBackgroundImage",
509-
label:trans("style.headerBackgroundImage"),
505+
label:trans("style.backgroundImage"),
510506
headerBackgroundImage:"headerBackgroundImage",
511507
},
512508
{
513509
name:"headerBackgroundImageRepeat",
514-
label:trans("style.headerBackgroundImageRepeat"),
510+
label:trans("style.backgroundImageRepeat"),
515511
headerBackgroundImageRepeat:"headerBackgroundImageRepeat",
516512
},
517513
{
518514
name:"headerBackgroundImageSize",
519-
label:trans("style.headerBackgroundImageSize"),
515+
label:trans("style.backgroundImageSize"),
520516
headerBackgroundImageSize:"headerBackgroundImageSize",
521517
},
522518
{
523519
name:"headerBackgroundImagePosition",
524-
label:trans("style.headerBackgroundImagePosition"),
520+
label:trans("style.backgroundImagePosition"),
525521
headerBackgroundImagePosition:"headerBackgroundImagePosition",
526522
}
527523
,{
528524
name:"headerBackgroundImageOrigin",
529-
label:trans("style.headerBackgroundImageOrigin"),
525+
label:trans("style.backgroundImageOrigin"),
530526
headerBackgroundImageOrigin:"headerBackgroundImageOrigin",
531527
},
528+
]asconst;
529+
530+
exportconstContainerBodyStyle=[
531+
CONTAINERBODYPADDING,
532+
{
533+
name:"background",
534+
label:trans("style.background"),
535+
depName:"background",
536+
depType:DEP_TYPE.SELF,
537+
transformer:toSelf,
538+
},
532539
{
533540
name:"backgroundImage",
534541
label:trans("style.backgroundImage"),
@@ -554,29 +561,40 @@ export const ContainerStyle = [
554561
label:trans("style.backgroundImageOrigin"),
555562
backgroundImageOrigin:"backgroundImageOrigin",
556563
},
564+
]asconst;
565+
566+
exportconstContainerFooterStyle=[
567+
CONTAINERFOOTERPADDING,
568+
{
569+
name:"footerBackground",
570+
label:trans("style.background"),
571+
depName:"background",
572+
depType:DEP_TYPE.SELF,
573+
transformer:toSelf,
574+
},
557575
{
558576
name:"footerBackgroundImage",
559-
label:trans("style.footerBackgroundImage"),
577+
label:trans("style.backgroundImage"),
560578
footerBackgroundImage:"footerBackgroundImage",
561579
},
562580
{
563581
name:"footerBackgroundImageRepeat",
564-
label:trans("style.footerBackgroundImageRepeat"),
582+
label:trans("style.backgroundImageRepeat"),
565583
footerBackgroundImageRepeat:"footerBackgroundImageRepeat",
566584
},
567585
{
568586
name:"footerBackgroundImageSize",
569-
label:trans("style.footerBackgroundImageSize"),
587+
label:trans("style.backgroundImageSize"),
570588
footerBackgroundImageSize:"footerBackgroundImageSize",
571589
},
572590
{
573591
name:"footerBackgroundImagePosition",
574-
label:trans("style.footerBackgroundImagePosition"),
592+
label:trans("style.backgroundImagePosition"),
575593
footerBackgroundImagePosition:"footerBackgroundImagePosition",
576594
}
577595
,{
578596
name:"footerBackgroundImageOrigin",
579-
label:trans("style.footerBackgroundImageOrigin"),
597+
label:trans("style.backgroundImageOrigin"),
580598
footerBackgroundImageOrigin:"footerBackgroundImageOrigin",
581599
}
582600
]asconst;
@@ -1312,6 +1330,9 @@ export type ButtonStyleType = StyleConfigType<typeof ButtonStyle>;
13121330
exporttypeToggleButtonStyleType=StyleConfigType<typeofToggleButtonStyle>;
13131331
exporttypeTextStyleType=StyleConfigType<typeofTextStyle>;
13141332
exporttypeContainerStyleType=StyleConfigType<typeofContainerStyle>;
1333+
exporttypeContainerHeaderStyleType=StyleConfigType<typeofContainerHeaderStyle>;
1334+
exporttypeContainerBodyStyleType=StyleConfigType<typeofContainerBodyStyle>;
1335+
exporttypeContainerFooterStyleType=StyleConfigType<typeofContainerFooterStyle>;
13151336
exporttypeSliderStyleType=StyleConfigType<typeofSliderStyle>;
13161337
exporttypeRatingStyleType=StyleConfigType<typeofRatingStyle>;
13171338
exporttypeSwitchStyleType=StyleConfigType<typeofSwitchStyle>;

‎client/packages/lowcoder/src/i18n/locales/en.ts‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -360,21 +360,21 @@ export const en = {
360360
"aspectRatio":"Aspect Ratio",
361361
"textSize":"Text Size",
362362
"textWeight":"Text Weight",
363-
"backgroundImage":"BgImage",
364-
"backgroundImageRepeat":"BgImage Repeat",
365-
"backgroundImageSize":"BgImage Size",
366-
"backgroundImagePosition":"BgImage Position",
367-
"backgroundImageOrigin":"BgImage Origin",
368-
"headerBackgroundImage":"HeaderBgImage",
369-
"headerBackgroundImageRepeat":"HeaderBgImage Repeat",
370-
"headerBackgroundImageSize":"HeaderBgImage Size",
371-
"headerBackgroundImagePosition":"HeaderBgImage Position",
372-
"headerBackgroundImageOrigin":"HeaderBgImage Origin",
373-
"footerBackgroundImage":"FooterBgImage",
374-
"footerBackgroundImageRepeat":"FooterBgImage Repeat",
375-
"footerBackgroundImageSize":"FooterBgImage Size",
376-
"footerBackgroundImagePosition":"FooterBgImage Position",
377-
"footerBackgroundImageOrigin":"FooterBgImage Origin",
363+
"backgroundImage":"BG Image",
364+
"backgroundImageRepeat":"BG Repeat",
365+
"backgroundImageSize":"BG Size",
366+
"backgroundImagePosition":"BG Position",
367+
"backgroundImageOrigin":"BG Origin",
368+
"headerBackgroundImage":"BgImage",
369+
"headerBackgroundImageRepeat":"BgImage Repeat",
370+
"headerBackgroundImageSize":"BgImage Size",
371+
"headerBackgroundImagePosition":"BgImage Position",
372+
"headerBackgroundImageOrigin":"BgImage Origin",
373+
"footerBackgroundImage":"BgImage",
374+
"footerBackgroundImageRepeat":"BgImage Repeat",
375+
"footerBackgroundImageSize":"BgImage Size",
376+
"footerBackgroundImagePosition":"BgImage Position",
377+
"footerBackgroundImageOrigin":"BgImage Origin",
378378
},
379379
"export":{
380380
"hiddenDesc":"If true, the component is hidden",

0 commit comments

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