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

Commitdba9097

Browse files
theme canvas settings
1 parent420c56f commitdba9097

File tree

8 files changed

+381
-92
lines changed

8 files changed

+381
-92
lines changed

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

Lines changed: 198 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,21 @@ export type configChangeParams = {
2121
chart?:string;
2222
margin?:string;
2323
padding?:string;
24-
gridColumns?:string;// Added By Aqib Mirza
2524
borderStyle?:string;
2625
borderColor?:string;
2726
borderWidth?:string;
2827
fontFamily?:string;
2928
components?:Record<string,object>,
3029
showComponentLoadingIndicators?:boolean;
3130
showDataLoadingIndicators?:boolean;
31+
gridColumns?:string;
32+
gridRowHeight?:string;
33+
gridPadding?:string;
34+
gridBgImage?:string;
35+
gridBgImageRepeat?:string;
36+
gridBgImageSize?:string;
37+
gridBgImagePosition?:string;
38+
gridBgImageOrigin?:string;
3239
};
3340

3441
typeColorConfigProps={
@@ -47,10 +54,16 @@ type ColorConfigProps = {
4754
fontFamily?:string;
4855
margin?:string;
4956
padding?:string;
50-
gridColumns?:string;// Added By Aqib Mirza
5157
showComponentLoadingIndicators?:boolean;
5258
showDataLoadingIndicators?:boolean;
53-
canvasItemValue?:string;
59+
gridColumns?:string;
60+
gridRowHeight?:string;
61+
gridPadding?:string;
62+
gridBgImage?:string;
63+
gridBgImageRepeat?:string;
64+
gridBgImageSize?:string;
65+
gridBgImagePosition?:string;
66+
gridBgImageOrigin?:string;
5467
};
5568

5669
exportdefaultfunctionThemeSettingsSelector(props:ColorConfigProps){
@@ -64,29 +77,41 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
6477
showVarName=true,
6578
margin:defaultMargin,
6679
padding:defaultPadding,
67-
gridColumns:defaultGridColumns,
6880
borderStyle:defaultBorderStyle,
6981
borderWidth:defaultBorderWidth,
7082
borderColor:defaultBorderColor,
7183
fontFamily:defaultFontFamily,
7284
showComponentLoadingIndicators:defaultShowComponentLoaders,
7385
showDataLoadingIndicators:defaultShowDataLoaders,
74-
canvasItemValue:defaultCanvasItemValue,
86+
gridColumns:defaultGridColumns,
87+
gridRowHeight:defaultGridRowHeight,
88+
gridPadding:defaultGridPadding,
89+
gridBgImage:defaultGridBgImage,
90+
gridBgImageRepeat:defaultGridBgImageRepeat,
91+
gridBgImageSize:defaultGridBgImageSize,
92+
gridBgImagePosition:defaultGridBgImagePosition,
93+
gridBgImageOrigin:defaultGridBgImageOrigin,
7594
}=props;
7695

7796
constconfigChangeWithDebounce=_.debounce(configChange,0);
7897
const[color,setColor]=useState(defaultColor);
7998
const[radius,setRadius]=useState(defaultRadius);
8099
const[margin,setMargin]=useState(defaultMargin);
81100
const[padding,setPadding]=useState(defaultPadding);
82-
const[gridColumns,setGridColumns]=useState(defaultGridColumns);
83101
const[borderStyle,setBorderStyle]=useState(defaultBorderStyle);
84102
const[borderWidth,setBorderWidth]=useState(defaultBorderWidth);
85103
const[borderColor,setBorderColor]=useState(defaultBorderColor);
86104
const[fontFamily,setFontFamily]=useState(defaultFontFamily);
87105
const[showComponentLoaders,setComponentLoaders]=useState(defaultShowComponentLoaders);
88106
const[showDataLoaders,setDataLoaders]=useState(defaultShowDataLoaders);
89-
const[canvasValue,setCanvasValue]=useState(defaultCanvasItemValue);
107+
const[gridColumns,setGridColumns]=useState(defaultGridColumns);
108+
const[gridRowHeight,setGridRowHeight]=useState(defaultGridRowHeight);
109+
const[gridPadding,setGridPadding]=useState(defaultGridPadding);
110+
const[gridBgImage,setGridBgImage]=useState(defaultGridBgImage);
111+
const[gridBgImageRepeat,setGridBgImageRepeat]=useState(defaultGridBgImageRepeat);
112+
const[gridBgImageSize,setGridBgImageSize]=useState(defaultGridBgImageSize);
113+
const[gridBgImagePosition,setGridBgImagePosition]=useState(defaultGridBgImagePosition);
114+
const[gridBgImageOrigin,setGridBgImageOrigin]=useState(defaultGridBgImageOrigin);
90115

91116
constvarName=`(${themeSettingKey})`;
92117

@@ -139,20 +164,15 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
139164
result=padding;
140165
}else{
141166
result="3px";
142-
}
143-
setPadding(result);
144-
configChange({ themeSettingKey,padding:result});
145-
};
167+
}
146168

147-
constgridColumnsInputBlur=(gridColumns:string)=>{
148-
letresult="";
149-
if(!gridColumns){
150-
result="24";
151-
}else{
152-
result=gridColumns;
169+
if(themeSettingKey==='gridPadding'){
170+
setGridPadding(result);
171+
configChange({ themeSettingKey,gridPadding:result});
172+
return;
153173
}
154-
setGridColumns(result);
155-
configChange({ themeSettingKey,gridColumns:result});
174+
setPadding(result);
175+
configChange({ themeSettingKey,padding:result});
156176
};
157177

158178
constborderStyleInputBlur=(borderStyle:string)=>{
@@ -197,6 +217,46 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
197217
configChange({ themeSettingKey,fontFamily:result});
198218
};
199219

220+
constgridSizeInputBlur=(value:string)=>{
221+
letresult="";
222+
if(!value){
223+
result=themeSettingKey==='gridRowHeight' ?'8' :'24';
224+
}else{
225+
result=value;
226+
}
227+
if(themeSettingKey==='gridRowHeight'){
228+
setGridRowHeight(result);
229+
configChange({ themeSettingKey,gridRowHeight:result});
230+
return;
231+
}
232+
setGridColumns(result);
233+
configChange({ themeSettingKey,gridColumns:result});
234+
};
235+
236+
constgridBackgroundInputBlur=(value:string)=>{
237+
switch(themeSettingKey){
238+
case'gridBgImage':
239+
setGridBgImage(value);
240+
configChange({ themeSettingKey,gridBgImage:value});
241+
break;
242+
case'gridBgImageRepeat':
243+
setGridBgImageRepeat(value||'no-repeat');
244+
configChange({ themeSettingKey,gridBgImageRepeat:value});
245+
break;
246+
case'gridBgImageSize':
247+
setGridBgImageSize(value||"cover");
248+
configChange({ themeSettingKey,gridBgImageSize:value});
249+
break;
250+
case'gridBgImagePosition':
251+
setGridBgImagePosition(value||"center");
252+
configChange({ themeSettingKey,gridBgImagePosition:value});
253+
break;
254+
case'gridBgImageOrigin':
255+
setGridBgImageOrigin(value||'padding-box');
256+
configChange({ themeSettingKey,gridBgImageOrigin:value});
257+
break;
258+
}
259+
}
200260

201261
useEffect(()=>{
202262
if(color&&isValidColor(color)){
@@ -248,10 +308,6 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
248308
setDataLoaders(defaultShowDataLoaders);
249309
},[defaultShowDataLoaders]);
250310

251-
useEffect(()=>{
252-
setCanvasValue(defaultCanvasItemValue);
253-
},[defaultCanvasItemValue]);
254-
255311
return(
256312
<ConfigItemclassName={props.className}>
257313
{themeSettingKey!=="showDataLoadingIndicators"
@@ -268,12 +324,19 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
268324
{themeSettingKey!=="radius"&&
269325
themeSettingKey!=="margin"&&
270326
themeSettingKey!=="padding"&&
271-
themeSettingKey!=="gridColumns"&&
272327
themeSettingKey!=="borderStyle"&&
273328
themeSettingKey!=="borderWidth"&&
274329
themeSettingKey!=="fontFamily"&&
275330
themeSettingKey!=="showComponentLoadingIndicators"&&
276-
themeSettingKey!=="showDataLoadingIndicators"&&(
331+
themeSettingKey!=="showDataLoadingIndicators"&&
332+
themeSettingKey!=="gridColumns"&&
333+
themeSettingKey!=="gridRowHeight"&&
334+
themeSettingKey!=="gridPadding"&&
335+
themeSettingKey!=="gridBgImage"&&
336+
themeSettingKey!=="gridBgImageRepeat"&&
337+
themeSettingKey!=="gridBgImageSize"&&
338+
themeSettingKey!=="gridBgImagePosition"&&
339+
themeSettingKey!=="gridBgImageOrigin"&&(
277340
<divclassName="config-input">
278341
<ColorSelect
279342
changeColor={_.debounce(setColor,500,{
@@ -396,25 +459,6 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
396459
</div>
397460
)}
398461

399-
{themeSettingKey==="gridColumns"&&(
400-
<divclassName="config-input">
401-
<GridColumns$gridColumns={defaultGridColumns||"24"}>
402-
<div>
403-
<TableCellsIcontitle=""/>
404-
</div>
405-
</GridColumns>
406-
407-
<Slider
408-
style={{width:"90%",margin:"8px 5% 0 5%"}}
409-
min={8}// Define the minimum value for the slider
410-
max={48}// Define the maximum value for the slider
411-
value={parseInt(gridColumns||"24")}
412-
onChange={(value)=>setGridColumns(value.toString())}
413-
onChangeComplete={(value)=>gridColumnsInputBlur(value.toString())}
414-
/>
415-
</div>
416-
)}
417-
418462
{themeSettingKey==="fontFamily"&&(
419463
<divclassName="config-input">
420464
<TacoInput
@@ -460,6 +504,116 @@ export default function ThemeSettingsSelector(props: ColorConfigProps) {
460504
<span>{name}</span>
461505
</div>
462506
)}
507+
508+
{themeSettingKey==="gridColumns"&&(
509+
<divclassName="config-input">
510+
<GridColumns$gridColumns={defaultGridColumns||"24"}>
511+
<div>
512+
<TableCellsIcontitle=""/>
513+
</div>
514+
</GridColumns>
515+
516+
<Slider
517+
style={{width:"90%",margin:"8px 5% 0 5%"}}
518+
min={8}// Define the minimum value for the slider
519+
max={48}// Define the maximum value for the slider
520+
value={parseInt(gridColumns||"24")}
521+
onChange={(value)=>setGridColumns(value.toString())}
522+
onChangeComplete={(value)=>gridSizeInputBlur(value.toString())}
523+
/>
524+
</div>
525+
)}
526+
527+
{themeSettingKey==="gridRowHeight"&&(
528+
<divclassName="config-input">
529+
<GridColumns$gridColumns={defaultGridColumns||"24"}>
530+
<div>
531+
<TableCellsIcontitle=""/>
532+
</div>
533+
</GridColumns>
534+
535+
<Slider
536+
style={{width:"90%",margin:"8px 5% 0 5%"}}
537+
min={6}// Define the minimum value for the slider
538+
max={16}// Define the maximum value for the slider
539+
value={parseInt(gridRowHeight||"8")}
540+
onChange={(value)=>setGridRowHeight(value.toString())}
541+
onChangeComplete={(value)=>gridSizeInputBlur(value.toString())}
542+
/>
543+
</div>
544+
)}
545+
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+
/>
560+
</div>
561+
)}
562+
563+
{themeSettingKey==="gridBgImage"&&(
564+
<divclassName="config-input">
565+
<TacoInput
566+
value={gridBgImage}
567+
onChange={(e)=>setGridBgImage(e.target.value)}
568+
onBlur={(e)=>gridBackgroundInputBlur(e.target.value)}
569+
onKeyUp={(e)=>e.nativeEvent.key==="Enter"&&gridBackgroundInputBlur(e.currentTarget.value)}
570+
/>
571+
</div>
572+
)}
573+
574+
{themeSettingKey==="gridBgImageRepeat"&&(
575+
<divclassName="config-input">
576+
<TacoInput
577+
value={gridBgImageRepeat}
578+
onChange={(e)=>setGridBgImageRepeat(e.target.value)}
579+
onBlur={(e)=>gridBackgroundInputBlur(e.target.value)}
580+
onKeyUp={(e)=>e.nativeEvent.key==="Enter"&&gridBackgroundInputBlur(e.currentTarget.value)}
581+
/>
582+
</div>
583+
)}
584+
585+
{themeSettingKey==="gridBgImageSize"&&(
586+
<divclassName="config-input">
587+
<TacoInput
588+
value={gridBgImageSize}
589+
onChange={(e)=>setGridBgImageSize(e.target.value)}
590+
onBlur={(e)=>gridBackgroundInputBlur(e.target.value)}
591+
onKeyUp={(e)=>e.nativeEvent.key==="Enter"&&gridBackgroundInputBlur(e.currentTarget.value)}
592+
/>
593+
</div>
594+
)}
595+
596+
{themeSettingKey==="gridBgImagePosition"&&(
597+
<divclassName="config-input">
598+
<TacoInput
599+
value={gridBgImagePosition}
600+
onChange={(e)=>setGridBgImagePosition(e.target.value)}
601+
onBlur={(e)=>gridBackgroundInputBlur(e.target.value)}
602+
onKeyUp={(e)=>e.nativeEvent.key==="Enter"&&gridBackgroundInputBlur(e.currentTarget.value)}
603+
/>
604+
</div>
605+
)}
606+
607+
{themeSettingKey==="gridBgImageOrigin"&&(
608+
<divclassName="config-input">
609+
<TacoInput
610+
value={gridBgImageOrigin}
611+
onChange={(e)=>setGridBgImageOrigin(e.target.value)}
612+
onBlur={(e)=>gridBackgroundInputBlur(e.target.value)}
613+
onKeyUp={(e)=>e.nativeEvent.key==="Enter"&&gridBackgroundInputBlur(e.currentTarget.value)}
614+
/>
615+
</div>
616+
)}
463617
</ConfigItem>
464618
);
465619
}

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

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -342,20 +342,21 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
342342
consthorizontalGridCells=props.horizontalGridCells ?String(props.horizontalGridCells) :undefined;
343343
constcurrentTheme=useContext(ThemeContext)?.theme;
344344
const[currentRowCount,setRowCount]=useState(rowCount||Infinity);
345-
const[currentRowHeight,setRowHeight]=useState(DEFAULT_ROW_HEIGHT);
345+
const[currentRowHeight,setRowHeight]=useState(positionParams.rowHeight||DEFAULT_ROW_HEIGHT);
346346
consteditorState=useContext(EditorContext);
347347
const{ readOnly}=useContext(ExternalEditorContext);
348+
constappSettingsComp=editorState.getAppSettingsComp().getView();
349+
350+
constmaxWidth=useMemo(()=>appSettingsComp.maxWidth,[appSettingsComp.maxWidth]);
348351

349352
// Falk: TODO: Here we can define the inner grid columns dynamically
350-
//Added By Aqib Mirza
351353
constdefaultGrid=useMemo(()=>{
352354
returnhorizontalGridCells||
353355
currentTheme?.gridColumns||
354356
defaultTheme?.gridColumns||
355-
"12";
357+
String(DEFAULT_GRID_COLUMNS);
356358
},[horizontalGridCells,currentTheme?.gridColumns,defaultTheme?.gridColumns]);
357359

358-
/////////////////////
359360
constisDroppable=
360361
useContext(IsDroppable)&&(_.isNil(props.isDroppable)||props.isDroppable)&&!readOnly;
361362
constisDraggable=!readOnly&&(_.isNil(props.isDraggable)||props.isDraggable);
@@ -479,14 +480,12 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
479480

480481
useEffect(()=>{
481482
if(!isRowCountLocked){
482-
setRowHeight(DEFAULT_ROW_HEIGHT);
483+
setRowHeight(positionParams.rowHeight||DEFAULT_ROW_HEIGHT);
483484
setRowCount(Infinity);
484485
onRowCountChange?.(0);
485486
}
486487
},[isRowCountLocked,onRowCountChange]);
487488

488-
constmaxWidth=editorState.getAppSettings().maxWidth;
489-
490489
// log.info("rowCount:", currentRowCount, "rowHeight:", currentRowHeight);
491490

492491
return(

0 commit comments

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