Skip to content

Commit 400c25f

Browse files
FalkWolskyraheeliftikhar5
FalkWolsky
authored and
raheeliftikhar5
committed
Fixes in Style Properties Display in Theme Settings
1 parent df63d5f commit 400c25f

File tree

3 files changed

+70
-62
lines changed

3 files changed

+70
-62
lines changed

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

Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -284,95 +284,95 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) {
284284
case 'radius':
285285
case 'cardRadius':
286286
case 'gap': {
287-
icon = <BorderRadiusIcon style={{width: "16px", margin: "-2px 0 2px -2px", padding: "0px"}}/>;
287+
icon = <BorderRadiusIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
288288
break;
289289
}
290290
case 'borderWidth': {
291-
icon = <BorderWidthIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
291+
icon = <BorderWidthIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
292292
break;
293293
}
294294
case 'borderStyle': {
295-
icon = <BorderStyleIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
295+
icon = <BorderStyleIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
296296
break;
297297
}
298298
case 'margin': {
299-
icon = <ExpandIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
299+
icon = <ExpandIcon style={{width: "16px", margin: "3px 0 0 5px", padding: "0px"}}/>;
300300
break;
301301
}
302302
case 'padding':
303303
case 'containerHeaderPadding':
304304
case 'containerSiderPadding':
305305
case 'containerFooterPadding':
306306
case 'containerBodyPadding': {
307-
icon = <CompressIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
307+
icon = <CompressIcon style={{width: "16px", margin: "3px 0 0 5px", padding: "0px"}}/>;
308308
break;
309309
}
310310
case 'opacity': {
311-
icon = <OpacityIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
311+
icon = <OpacityIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
312312
break;
313313
}
314314
case 'boxShadowColor': {
315-
icon = <BorderWidthIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
315+
icon = <BorderWidthIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
316316
break;
317317
}
318318
case 'boxShadow': {
319-
icon = <ShadowIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
319+
icon = <ShadowIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
320320
break;
321321
}
322322
case 'animationIterationCount': {
323-
icon = <RefreshLineIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
323+
icon = <RefreshLineIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
324324
break;
325325
}
326326
case 'animation': {
327-
icon = <StarSmileIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
327+
icon = <StarSmileIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
328328
break;
329329
}
330330
case 'animationDelay': {
331-
icon = <TimerFlashIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
331+
icon = <TimerFlashIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
332332
break;
333333
}
334334
case 'animationDuration': {
335-
icon = <Timer2Icon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
335+
icon = <Timer2Icon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
336336
break;
337337
}
338338
case 'textSize': {
339-
icon = <TextSizeIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
339+
icon = <TextSizeIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
340340
break;
341341
}
342342
case 'textWeight': {
343-
icon = <TextWeightIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
343+
icon = <TextWeightIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
344344
break;
345345
}
346346
case 'fontFamily': {
347-
icon = <FontFamilyIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
347+
icon = <FontFamilyIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
348348
break;
349349
}
350350
case 'textDecoration': {
351-
icon = <TextDecorationIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
351+
icon = <TextDecorationIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
352352
break;
353353
}
354354
case 'textTransform': {
355-
icon = <TextTransformationIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
355+
icon = <TextTransformationIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
356356
break;
357357
}
358358
case 'fontStyle': {
359-
icon = <TextStyleIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
359+
icon = <TextStyleIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
360360
break;
361361
}
362362
case 'backgroundImage':
363363
case 'headerBackgroundImage':
364364
case 'footerBackgroundImage': {
365-
icon = <ImageCompIconSmall style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
365+
icon = <ImageCompIconSmall style={{width: "16px", margin: "1px 0 0 5px", padding: "0px"}}/>;
366366
break;
367367
}
368368
case 'backgroundImageRepeat':
369369
case 'headerBackgroundImageRepeat':
370370
case 'footerBackgroundImageRepeat': {
371-
icon = <ImageCompIconSmall style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
371+
icon = <ImageCompIconSmall style={{width: "16px", margin: "1px 0 0 5px", padding: "0px"}}/>;
372372
break;
373373
}
374374
case 'rotation': {
375-
icon = <RotationIcon style={{width: "16px", margin: "2px 0 0 2px", padding: "0px"}}/>;
375+
icon = <RotationIcon style={{width: "16px", margin: "5px 0 0 5px", padding: "0px"}}/>;
376376
break;
377377
}
378378
}
@@ -382,7 +382,7 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) {
382382
return (
383383
<div style={{
384384
border: "1px solid lightgray",
385-
borderRadius: "6px",
385+
borderRadius: "4px",
386386
marginBottom: "16px",
387387
}}>
388388
{styleOptions.map((styleKey: string) => (
@@ -398,10 +398,11 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) {
398398
>
399399
<div className="text-desc" style={{
400400
width: "100px",
401-
minWidth: "auto",
402-
marginRight: "10px",
401+
minWidth: "100px",
402+
maxWidth: "100px",
403+
marginRight: "5px",
403404
}}>
404-
<div className="name">
405+
<div className="name" >
405406
{ getLabelByStyle(styleKey) }
406407
</div>
407408
</div>
@@ -417,6 +418,7 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) {
417418
trigger="hover"
418419
/>
419420
<TacoInput
421+
style={{width: "80%", marginLeft: "5px"}}
420422
value={compStyle[styleKey]}
421423
onChange={(e) => handleChange(styleKey, e.target.value)}
422424
// onChange={(e) => setColor(e.target.value)}
@@ -432,6 +434,7 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) {
432434
</div>
433435
{/* </Radius> */}
434436
<TacoInput
437+
style={{width: "80%", marginLeft: "5px"}}
435438
placeholder={getPlaceholderByStyle(styleKey)}
436439
defaultValue={compStyle[styleKey]}
437440
onChange={(e) => handleChange(styleKey, e.target.value)}

‎client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx

Lines changed: 37 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import {
2222
labelCss,
2323
sectionNames,
2424
} from "lowcoder-design";
25-
import { Flex, Input } from "antd";
25+
import { Card, Divider, Flex, Input } from "antd";
2626
import { genRandomKey } from "comps/utils/idGenerator";
2727
import dsl from "./detail/previewDsl";
2828
import { NameGenerator } from "comps/utils";
@@ -305,7 +305,7 @@ export const ThemeCompPanel = (props: any) => {
305305
return (
306306
<PreviewApp
307307
style={{
308-
height: "600px",
308+
height: "630px",
309309
minWidth: "auto",
310310
width: "100%",
311311
}}
@@ -322,36 +322,41 @@ export const ThemeCompPanel = (props: any) => {
322322
// )
323323

324324
return (
325-
<Flex style={{
326-
height: "600px",
327-
overflow: "hidden",
328-
}}>
329-
<RightPanelContentWrapper style={{
330-
padding: "12px",
331-
overflow: "auto",
325+
<Card style={{ marginBottom: "20px", minHeight : "200px" }}>
326+
<Flex style={{
327+
height: "650px",
328+
overflow: "hidden",
329+
gap: "middle",
332330
}}>
333-
<Input.Search
334-
placeholder="Search components"
335-
value={searchValue}
336-
onChange={(e) => setSearchValue(e.target.value)}
337-
style={{ marginBottom: 16 }}
338-
/>
339-
<PropertySectionContext.Provider
340-
value={propertySectionContextValue}
341-
>
342-
{compList}
343-
</PropertySectionContext.Provider>
344-
</RightPanelContentWrapper>
345-
<div style={{flex: "1"}}>
346-
{appPreview}
347-
</div>
348-
<div style={{
349-
width: "280px",
350-
padding: "12px",
351-
overflow: "auto",
352-
}}>
353-
{stylePropertyView}
354-
</div>
355-
</Flex>
331+
<RightPanelContentWrapper style={{
332+
padding: "12px",
333+
overflow: "auto",
334+
}}>
335+
<Input.Search
336+
placeholder="Search components"
337+
value={searchValue}
338+
onChange={(e) => setSearchValue(e.target.value)}
339+
style={{ marginBottom: 16 }}
340+
/>
341+
<PropertySectionContext.Provider
342+
value={propertySectionContextValue}
343+
>
344+
{compList}
345+
</PropertySectionContext.Provider>
346+
</RightPanelContentWrapper>
347+
<Divider type="vertical" style={{height: "630px"}}/>
348+
<div style={{flex: "1"}}>
349+
{appPreview}
350+
</div>
351+
<Divider type="vertical" style={{height: "630px"}}/>
352+
<div style={{
353+
width: "280px",
354+
padding: "12px",
355+
overflow: "auto",
356+
}}>
357+
{stylePropertyView}
358+
</div>
359+
</Flex>
360+
</Card>
356361
);
357362
};

‎client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -346,7 +346,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
346346
</Header>
347347

348348
<DetailContent>
349-
{/* <ThemeSettingsView>
349+
<ThemeSettingsView>
350350
<StyleThemeSettingsCover>
351351
<ColorPickerCompIcon width={"36px"} style={{marginRight : "10px"}}/> <h2 style={{color: "#ffffff", marginTop : "8px"}}> {trans("theme.mainColor")}</h2>
352352
</StyleThemeSettingsCover>
@@ -386,7 +386,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
386386
</Card>
387387
</ThemeSettingsView>
388388

389-
<ThemeSettingsView>
389+
{/* <ThemeSettingsView>
390390
<StyleThemeSettingsCover>
391391
<TextSizeIcon width={"36px"} style={{marginRight : "10px"}}/> <h2 style={{color: "#ffffff", marginTop : "8px"}}> {trans("theme.fonts")}</h2>
392392
</StyleThemeSettingsCover>
@@ -425,7 +425,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
425425
<PreviewApp style={{marginTop: '3px', height: "620px", width: "100%"}} theme={this.state.theme} dsl={dsl} />
426426
</Flex>
427427
</Card>
428-
</ThemeSettingsView>
428+
</ThemeSettingsView> */}
429429

430430
<ThemeSettingsView>
431431
<StyleThemeSettingsCover>
@@ -506,15 +506,15 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
506506
<PreviewApp style={{marginTop: '3px', height: "620px", width: "100%"}} theme={this.state.theme} dsl={dsl} />
507507
</Flex>
508508
</Card>
509-
</ThemeSettingsView> */}
509+
</ThemeSettingsView>
510510

511511
<ThemeSettingsView>
512512
<StyleThemeSettingsCover>
513513
<ShapesCompIcon width={"36px"} style={{marginRight : "10px"}}/> <h2 style={{color: "#ffffff", marginTop : "8px"}}> {trans("theme.components")}</h2>
514514
</StyleThemeSettingsCover>
515515
<Card
516516
bodyStyle={{
517-
padding: '0px'
517+
padding: '20px'
518518
}}
519519
style={{
520520
marginBottom: "20px",

0 commit comments

Comments
 (0)