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

Commite76ef90

Browse files
canvas setting in theme and app
1 parentdba9097 commite76ef90

File tree

12 files changed

+361
-122
lines changed

12 files changed

+361
-122
lines changed

‎client/packages/lowcoder/src/api/commonSettingApi.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,11 @@ export interface ThemeDetail {
5353
chart?:string;
5454
margin?:string;
5555
padding?:string;
56-
gridPadding?:string;
57-
gridColumns?:string;//Added By Aqib Mirza
56+
gridPaddingX?:number;
57+
gridPaddingY?:number;
58+
gridColumns?:string;
5859
gridRowHeight?:string;
60+
gridRowCount?:number;
5961
gridBgImage?:string;
6062
gridBgImageRepeat?:string;
6163
gridBgImageSize?:string;

‎client/packages/lowcoder/src/components/ThemeSettingsSelector.tsx‎

Lines changed: 105 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,9 @@ export type configChangeParams = {
3030
showDataLoadingIndicators?:boolean;
3131
gridColumns?:string;
3232
gridRowHeight?:string;
33-
gridPadding?:string;
33+
gridRowCount?:number;
34+
gridPaddingX?:number;
35+
gridPaddingY?:number;
3436
gridBgImage?:string;
3537
gridBgImageRepeat?:string;
3638
gridBgImageSize?:string;
@@ -58,7 +60,9 @@ type ColorConfigProps = {
5860
showDataLoadingIndicators?:boolean;
5961
gridColumns?:string;
6062
gridRowHeight?:string;
61-
gridPadding?:string;
63+
gridRowCount?:number;
64+
gridPaddingX?:number;
65+
gridPaddingY?:number;
6266
gridBgImage?:string;
6367
gridBgImageRepeat?:string;
6468
gridBgImageSize?:string;
@@ -85,7 +89,9 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
8589
showDataLoadingIndicators:defaultShowDataLoaders,
8690
gridColumns:defaultGridColumns,
8791
gridRowHeight:defaultGridRowHeight,
88-
gridPadding:defaultGridPadding,
92+
gridRowCount:defaultGridRowCount,
93+
gridPaddingX:defaultGridPaddingX,
94+
gridPaddingY:defaultGridPaddingY,
8995
gridBgImage:defaultGridBgImage,
9096
gridBgImageRepeat:defaultGridBgImageRepeat,
9197
gridBgImageSize:defaultGridBgImageSize,
@@ -106,7 +112,9 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
106112
const[showDataLoaders,setDataLoaders]=useState(defaultShowDataLoaders);
107113
const[gridColumns,setGridColumns]=useState(defaultGridColumns);
108114
const[gridRowHeight,setGridRowHeight]=useState(defaultGridRowHeight);
109-
const[gridPadding,setGridPadding]=useState(defaultGridPadding);
115+
const[gridRowCount,setGridRowCount]=useState(defaultGridRowCount);
116+
const[gridPaddingX,setGridPaddingX]=useState(defaultGridPaddingX);
117+
const[gridPaddingY,setGridPaddingY]=useState(defaultGridPaddingY);
110118
const[gridBgImage,setGridBgImage]=useState(defaultGridBgImage);
111119
const[gridBgImageRepeat,setGridBgImageRepeat]=useState(defaultGridBgImageRepeat);
112120
const[gridBgImageSize,setGridBgImageSize]=useState(defaultGridBgImageSize);
@@ -166,11 +174,6 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
166174
result="3px";
167175
}
168176

169-
if(themeSettingKey==='gridPadding'){
170-
setGridPadding(result);
171-
configChange({ themeSettingKey,gridPadding:result});
172-
return;
173-
}
174177
setPadding(result);
175178
configChange({ themeSettingKey,padding:result});
176179
};
@@ -233,6 +236,34 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
233236
configChange({ themeSettingKey,gridColumns:result});
234237
};
235238

239+
constgridRowCountInputBlur=(value:number)=>{
240+
letresult=Infinity;
241+
if(value>0){
242+
result=value;
243+
}
244+
245+
setGridRowCount(result);
246+
configChange({ themeSettingKey,gridRowCount:result});
247+
};
248+
249+
constgridPaddingInputBlur=(padding:number)=>{
250+
letresult=20;
251+
if(padding>0){
252+
result=padding;
253+
}
254+
255+
if(themeSettingKey==='gridPaddingX'){
256+
setGridPaddingX(result);
257+
configChange({ themeSettingKey,gridPaddingX:result});
258+
return;
259+
}
260+
if(themeSettingKey==='gridPaddingY'){
261+
setGridPaddingY(result);
262+
configChange({ themeSettingKey,gridPaddingY:result});
263+
return;
264+
}
265+
};
266+
236267
constgridBackgroundInputBlur=(value:string)=>{
237268
switch(themeSettingKey){
238269
case'gridBgImage':
@@ -284,6 +315,10 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
284315
setGridColumns(defaultGridColumns);
285316
},[defaultGridColumns]);
286317

318+
useEffect(()=>{
319+
setGridRowCount(defaultGridRowCount);
320+
},[defaultGridRowCount]);
321+
287322
useEffect(()=>{
288323
setBorderStyle(defaultBorderStyle);
289324
},[defaultBorderStyle]);
@@ -331,7 +366,9 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
331366
themeSettingKey!=="showDataLoadingIndicators"&&
332367
themeSettingKey!=="gridColumns"&&
333368
themeSettingKey!=="gridRowHeight"&&
334-
themeSettingKey!=="gridPadding"&&
369+
themeSettingKey!=="gridRowCount"&&
370+
themeSettingKey!=="gridPaddingX"&&
371+
themeSettingKey!=="gridPaddingY"&&
335372
themeSettingKey!=="gridBgImage"&&
336373
themeSettingKey!=="gridBgImageRepeat"&&
337374
themeSettingKey!=="gridBgImageSize"&&
@@ -508,9 +545,7 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
508545
{themeSettingKey==="gridColumns"&&(
509546
<divclassName="config-input">
510547
<GridColumns$gridColumns={defaultGridColumns||"24"}>
511-
<div>
512-
<TableCellsIcontitle=""/>
513-
</div>
548+
<div><TableCellsIcontitle=""/></div>
514549
</GridColumns>
515550

516551
<Slider
@@ -527,36 +562,75 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
527562
{themeSettingKey==="gridRowHeight"&&(
528563
<divclassName="config-input">
529564
<GridColumns$gridColumns={defaultGridColumns||"24"}>
530-
<div>
531-
<TableCellsIcontitle=""/>
532-
</div>
565+
<div><TableCellsIcontitle=""/></div>
533566
</GridColumns>
534567

535568
<Slider
536569
style={{width:"90%",margin:"8px 5% 0 5%"}}
537570
min={6}// Define the minimum value for the slider
538-
max={16}// Define the maximum value for the slider
571+
max={20}// Define the maximum value for the slider
539572
value={parseInt(gridRowHeight||"8")}
540573
onChange={(value)=>setGridRowHeight(value.toString())}
541574
onChangeComplete={(value)=>gridSizeInputBlur(value.toString())}
542575
/>
543576
</div>
544577
)}
545578

546-
{themeSettingKey==="gridPadding"&&(
547-
<divclassName="config-input">
548-
<Padding$padding={defaultGridPadding||"0px"}>
549-
<div><CompressIcontitle=""/></div>
550-
</Padding>
551-
<TacoInput
552-
value={gridPadding}
553-
onChange={(e)=>setGridPadding(e.target.value)}
554-
onBlur={(e)=>paddingInputBlur(e.target.value)}
555-
onKeyUp={(e)=>
556-
e.nativeEvent.key==="Enter"&&
557-
paddingInputBlur(e.currentTarget.value)
558-
}
559-
/>
579+
{themeSettingKey==="gridRowCount"&&(
580+
<divclassName="config-input">
581+
<GridColumns$gridColumns={defaultGridColumns||"24"}>
582+
<div><TableCellsIcontitle=""/></div>
583+
</GridColumns>
584+
585+
<TacoInput
586+
type="number"
587+
min={0}
588+
value={gridRowCount}
589+
onChange={(e)=>setGridRowCount(Number(e.target.value))}
590+
onBlur={(e)=>gridRowCountInputBlur(Number(e.target.value))}
591+
onKeyUp={(e)=>
592+
e.nativeEvent.key==="Enter"&&
593+
gridRowCountInputBlur(Number(e.currentTarget.value))
594+
}
595+
/>
596+
</div>
597+
)}
598+
599+
{themeSettingKey==="gridPaddingX"&&(
600+
<divclassName="config-input">
601+
<Padding$padding={"3px"}>
602+
<div><CompressIcontitle=""/></div>
603+
</Padding>
604+
<TacoInput
605+
type="number"
606+
min={0}
607+
value={gridPaddingX}
608+
onChange={(e)=>setGridPaddingX(Number(e.target.value))}
609+
onBlur={(e)=>gridPaddingInputBlur(Number(e.target.value))}
610+
onKeyUp={(e)=>
611+
e.nativeEvent.key==="Enter"&&
612+
gridPaddingInputBlur(Number(e.currentTarget.value))
613+
}
614+
/>
615+
</div>
616+
)}
617+
618+
{themeSettingKey==="gridPaddingY"&&(
619+
<divclassName="config-input">
620+
<Padding$padding={"3px"}>
621+
<div><CompressIcontitle=""/></div>
622+
</Padding>
623+
<TacoInput
624+
type="number"
625+
min={0}
626+
value={gridPaddingY}
627+
onChange={(e)=>setGridPaddingY(Number(e.target.value))}
628+
onBlur={(e)=>gridPaddingInputBlur(Number(e.target.value))}
629+
onKeyUp={(e)=>
630+
e.nativeEvent.key==="Enter"&&
631+
gridPaddingInputBlur(Number(e.currentTarget.value))
632+
}
633+
/>
560634
</div>
561635
)}
562636

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

Lines changed: 79 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { default as Divider } from "antd/es/divider";
1414
import{THEME_SETTING}from"constants/routesURL";
1515
import{CustomShortcutsComp}from"./customShortcutsComp";
1616
import{DEFAULT_THEMEID}from"comps/utils/themeUtil";
17-
import{StringControl}from"comps/controls/codeControl";
17+
import{NumberControl,RangeControl,StringControl}from"comps/controls/codeControl";
1818
import{IconControl}from"comps/controls/iconControl";
1919
import{dropdownControl}from"comps/controls/dropdownControl";
2020
import{ApplicationCategoriesEnum}from"constants/applicationConstants";
@@ -183,12 +183,22 @@ const childrenMap = {
183183
icon:IconControl,
184184
category:dropdownControl(AppCategories,ApplicationCategoriesEnum.BUSINESS),
185185
showHeaderInPublic:withDefault(BoolControl,true),
186-
maxWidth:dropdownInputSimpleControl(OPTIONS,USER_DEFINE,"1920"),
187186
themeId:valueComp<string>(DEFAULT_THEMEID),
188187
preventAppStylesOverwriting:withDefault(BoolControl,true),
189188
customShortcuts:CustomShortcutsComp,
190189
disableCollision:valueComp<boolean>(false),
191190
lowcoderCompVersion:withDefault(StringControl,'latest'),
191+
maxWidth:dropdownInputSimpleControl(OPTIONS,USER_DEFINE,"1920"),
192+
gridColumns:RangeControl.closed(8,48,24),
193+
gridRowHeight:RangeControl.closed(6,20,8),
194+
gridRowCount:NumberControl,
195+
gridPaddingX:NumberControl,
196+
gridPaddingY:NumberControl,
197+
gridBgImage:StringControl,
198+
gridBgImageRepeat:StringControl,
199+
gridBgImageSize:StringControl,
200+
gridBgImagePosition:StringControl,
201+
gridBgImageOrigin:StringControl,
192202
};
193203
typeChildrenInstance=RecordConstructorToComp<typeofchildrenMap>&{
194204
themeList:ThemeType[];
@@ -210,6 +220,16 @@ function AppSettingsModal(props: ChildrenInstance) {
210220
showHeaderInPublic,
211221
preventAppStylesOverwriting,
212222
lowcoderCompVersion,
223+
gridColumns,
224+
gridRowHeight,
225+
gridRowCount,
226+
gridPaddingX,
227+
gridPaddingY,
228+
gridBgImage,
229+
gridBgImageRepeat,
230+
gridBgImageSize,
231+
gridBgImagePosition,
232+
gridBgImageOrigin,
213233
}=props;
214234

215235
constTHEME_OPTIONS=themeList?.map((theme)=>({
@@ -278,14 +298,6 @@ function AppSettingsModal(props: ChildrenInstance) {
278298
label:trans("appSetting.showPublicHeader"),
279299
})}
280300
</div>
281-
{maxWidth.propertyView({
282-
dropdownLabel:trans("appSetting.canvasMaxWidth"),
283-
inputLabel:trans("appSetting.userDefinedMaxWidth"),
284-
inputPlaceholder:trans("appSetting.inputUserDefinedPxValue"),
285-
placement:"bottom",
286-
min:350,
287-
lastNode:<span>{trans("appSetting.maxWidthTip")}</span>,
288-
})}
289301
<Dropdown
290302
defaultValue={
291303
themeWithDefault===""
@@ -322,14 +334,69 @@ function AppSettingsModal(props: ChildrenInstance) {
322334
</div>
323335
</DivStyled>
324336
<DividerStyled/>
337+
338+
<Title>{trans("appSetting.canvas")}</Title>
339+
<DivStyled>
340+
{maxWidth.propertyView({
341+
dropdownLabel:trans("appSetting.canvasMaxWidth"),
342+
inputLabel:trans("appSetting.userDefinedMaxWidth"),
343+
inputPlaceholder:trans("appSetting.inputUserDefinedPxValue"),
344+
placement:"bottom",
345+
min:350,
346+
lastNode:<span>{trans("appSetting.maxWidthTip")}</span>,
347+
})}
348+
{gridColumns.propertyView({
349+
label:trans("appSetting.gridColumns"),
350+
placeholder:'24',
351+
})}
352+
{gridRowHeight.propertyView({
353+
label:trans("appSetting.gridRowHeight"),
354+
placeholder:'8',
355+
})}
356+
{gridRowCount.propertyView({
357+
label:trans("appSetting.gridRowCount"),
358+
placeholder:'Infinity',
359+
})}
360+
{gridPaddingX.propertyView({
361+
label:trans("appSetting.gridPaddingX"),
362+
placeholder:'20',
363+
})}
364+
{gridPaddingY.propertyView({
365+
label:trans("appSetting.gridPaddingY"),
366+
placeholder:'20',
367+
})}
368+
{gridBgImage.propertyView({
369+
label:trans("appSetting.gridBgImage"),
370+
placeholder:'',
371+
})}
372+
{gridBgImageRepeat.propertyView({
373+
label:trans("appSetting.gridBgImageRepeat"),
374+
placeholder:'no-repeat',
375+
})}
376+
{gridBgImageSize.propertyView({
377+
label:trans("appSetting.gridBgImageSize"),
378+
placeholder:'cover',
379+
})}
380+
{gridBgImagePosition.propertyView({
381+
label:trans("appSetting.gridBgImagePosition"),
382+
placeholder:'center',
383+
})}
384+
{gridBgImageOrigin.propertyView({
385+
label:trans("appSetting.gridBgImageOrigin"),
386+
placeholder:'no-padding',
387+
})}
388+
</DivStyled>
389+
<DividerStyled/>
390+
391+
<Title>Lowcoder Comps</Title>
325392
<DivStyled>
326393
<Dropdown
327394
defaultValue={lowcoderCompVersion.getView()}
328395
placeholder={'Select version'}
329396
options={
330397
lowcoderCompVersions.map(version=>({label:version,value:version}))
331398
}
332-
label={'Lowcoder Comps Version'}
399+
label={'Current Version'}
333400
placement="bottom"
334401
onChange={async(value)=>{
335402
awaitgetPromiseAfterDispatch(
@@ -345,6 +412,7 @@ function AppSettingsModal(props: ChildrenInstance) {
345412
/>
346413
</DivStyled>
347414
<DividerStyled/>
415+
348416
{props.customShortcuts.getPropertyView()}
349417
</SettingsStyled>
350418
);

0 commit comments

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