Skip to content

Commit d3b7cb8

Browse files
author
FalkWolsky
committed
Small fix at Divider Comp, added Styles in bulk editing Actions
1 parent ac9641d commit d3b7cb8

File tree

2 files changed

+151
-98
lines changed

2 files changed

+151
-98
lines changed

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,10 @@ const StyledDivider = styled(Divider) <IProps>`
4646
}};
4747
padding: ${(props) => props.$style.padding};
4848
49-
border-top: ${(props) => (props.$style.borderWidth ? props.$style.borderWidth : "1px")} ${(props) => (props.dashed ? "dashed" : "solid")} ${(props) => props.$style.border};
50-
49+
border-top: ${(props) => (props.$style.borderWidth && props.$style.borderWidth != "0px" ? props.$style.borderWidth : "1px")} ${(props) => (props.dashed ? "dashed" : "solid")} ${(props) => props.$style.border};
50+
""
5151
.ant-divider-inner-text::before, .ant-divider-inner-text::after {
52-
border-block-start: ${(props) => (props.$style.borderWidth ? props.$style.borderWidth : "1px")} ${(props) => (props.dashed ? "dashed" : "solid")} ${(props) => props.$style.border} !important;
52+
border-block-start: ${(props) => (props.$style.borderWidth && props.$style.borderWidth != "0px" ? props.$style.borderWidth : "1px")} ${(props) => (props.dashed ? "dashed" : "solid")} ${(props) => props.$style.border} !important;
5353
border-block-start-color: inherit;
5454
border-block-end: 0;
5555
}
@@ -81,6 +81,8 @@ function fixOldStyleData(oldData: any) {
8181
return oldData;
8282
}
8383

84+
85+
8486
// Compatible with historical style data 2022-8-26
8587
export const DividerComp = migrateOldData(
8688
new UICompBuilder(childrenMap, (props) => {

‎client/packages/lowcoder/src/pages/editor/LeftLayersContent.tsx‎

Lines changed: 146 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
LeftShow,
1111
} from "lowcoder-design";
1212
import React, { useCallback, useContext, useMemo, useState, useEffect, useRef } from "react";
13-
import _, { get } from "lodash";
13+
import _, { get, set } from "lodash";
1414
import styled from "styled-components";
1515
import { leftCompListClassName } from "pages/tutorials/tutorialsConstant";
1616
import type UIComp from "comps/comps/uiComp";
@@ -33,6 +33,8 @@ import { default as Input } from "antd/es/input";
3333
import { default as Menu } from "antd/es/menu";
3434
import { default as Space } from "antd/es/space";
3535
import { default as Switch } from "antd/es/switch";
36+
import { MenuProps } from "antd/es/menu";
37+
import type { InputRef } from 'antd';
3638
import {
3739
saveCollisionStatus,
3840
} from "util/localStorageUtil";
@@ -61,6 +63,81 @@ type NodeItem = {
6163
fixed?: boolean;
6264
};
6365

66+
const items: MenuProps['items'] = [
67+
{
68+
label: 'Hide Component',
69+
key: 'hidden',
70+
},
71+
{
72+
label: 'Disable Component',
73+
key: 'disable',
74+
},
75+
{
76+
label: 'Margin',
77+
key: 'style.margin',
78+
},
79+
{
80+
label: 'Padding',
81+
key: 'style.padding',
82+
},
83+
{
84+
label: 'Font Size',
85+
key: 'style.textSize',
86+
},
87+
{
88+
label: 'Font Weight',
89+
key: 'style.textWeight',
90+
},
91+
{
92+
label: 'Font Family',
93+
key: 'style.fontFamily',
94+
},
95+
{
96+
label: 'Font Style',
97+
key: 'style.fontStyle',
98+
},
99+
{
100+
label: 'Text Transform',
101+
key: 'style.textTransform',
102+
},
103+
{
104+
label: 'Text Decoration',
105+
key: 'style.textDecoration',
106+
},
107+
{
108+
label: 'Border Radius',
109+
key: 'style.borderRadius',
110+
},
111+
{
112+
label: 'Border Width',
113+
key: 'style.borderWidth',
114+
},
115+
{
116+
label: 'Border Style',
117+
key: 'style.borderStyle',
118+
},
119+
{
120+
label: 'Background Image',
121+
key: 'style.backgroundImage',
122+
},
123+
{
124+
label: 'Background Image Repeat',
125+
key: 'style.backgroundImageRepeat',
126+
},
127+
{
128+
label: 'Background Image Size',
129+
key: 'style.backgroundImageSize',
130+
},
131+
{
132+
label: 'Background Image Position',
133+
key: 'style.backgroundImagePosition',
134+
},
135+
{
136+
label: 'Background Image Origin',
137+
key: 'style.backgroundImageOrigin',
138+
}
139+
];
140+
64141
const LeftLayersContentWrapper = styled.div`
65142
height: calc(100vh - ${TopHeaderHeight});
66143
`;
@@ -83,10 +160,22 @@ export const LeftLayersContent = (props: LeftLayersContentProps) => {
83160
// added by Falk Wolsky to support a Layers in Lowcoder
84161
const [collisionStatus, setCollisionStatus] = useState(editorState.getCollisionStatus());
85162

163+
const [checkedKeys, setCheckedKeys] = useState<string[]>([]);
164+
const [actionValue, setActionValue] = useState<string>("");
165+
const [selectedActionKey, setSelectedActionKey] = useState<string | null>(null);
166+
const [placeholderText, setPlaceholderText] = useState<string>("");
167+
// const [color, setColor] = useState<string>("");
168+
const inputRef = useRef<InputRef>(null);
169+
86170
useEffect(() => {
87171
saveCollisionStatus(collisionStatus);
88172
}, [collisionStatus])
89173

174+
175+
const handleActionSelection = useCallback((key: string) => {
176+
setSelectedActionKey(key);
177+
}, []);
178+
90179
const handleToggleLayer = (checked: boolean) => {
91180
editorState.rootComp.children.settings.children.disableCollision.dispatchChangeValueAction(
92181
checked
@@ -255,11 +344,49 @@ export const LeftLayersContent = (props: LeftLayersContentProps) => {
255344

256345
// here we handle the checked keys of the component tree
257346

258-
const [checkedKeys, setCheckedKeys] = useState<string[]>([]);
259-
const [actionValue, setActionValue] = useState<string>("");
260-
const [selectedActionKey, setSelectedActionKey] = useState<string | null>(null);
261-
const [placeholderText, setPlaceholderText] = useState<string>("");
262-
const [color, setColor] = useState<string>("");
347+
const getPlaceholderText = useCallback((key: string) => {
348+
switch (key) {
349+
case 'hidden':
350+
case 'disable':
351+
return 'true | false';
352+
case 'style.border':
353+
return 'e.g., #ffffff'; // Example format indication
354+
case 'style.borderRadius':
355+
case 'style.radius': // Supporting legacy key if needed
356+
return 'e.g., 4px'; // Example format indication
357+
case 'style.borderWidth':
358+
return 'e.g., 2px'; // Example format indication
359+
case 'style.borderStyle':
360+
return 'solid | dashed | dotted';
361+
case 'style.backgroundImage':
362+
return 'URL as string';
363+
case 'style.backgroundImageRepeat':
364+
return 'repeat | repeat-x | repeat-y | no-repeat';
365+
case 'style.backgroundImageSize':
366+
return 'cover | contain | % | px';
367+
case 'style.backgroundImagePosition':
368+
return 'top | bottom | center | % | px';
369+
case 'style.backgroundImageOrigin':
370+
return 'padding-box | border-box | content-box';
371+
case 'style.margin':
372+
case 'style.padding':
373+
return 'e.g., 4px 8px 16px 32px'; // Example format indication
374+
case 'style.textSize':
375+
return 'e.g., 16px'; // Example format indication
376+
case 'style.textWeight':
377+
return 'bold | 900 | normal | 400';
378+
case 'style.fontFamily':
379+
return 'Arial, sans-serif';
380+
case 'style.fontStyle':
381+
return 'normal | italic | oblique';
382+
case 'style.textTransform':
383+
return 'none | capitalize | uppercase | lowercase';
384+
case 'style.textDecoration':
385+
return 'none | underline | overline | line-through';
386+
default:
387+
return 'Action Value';
388+
}
389+
}, []);
263390

264391
const handleColorChange = (color: string | undefined, actionType: string) => {
265392
const newColor = color || '#ffffff';
@@ -294,11 +421,6 @@ export const LeftLayersContent = (props: LeftLayersContentProps) => {
294421
}
295422
};
296423

297-
298-
/* const handleActionValueChange = (e: any) => {
299-
setActionValue(e.target.value);
300-
} */
301-
302424
// sync selected components with checked keys
303425
useEffect(() => {
304426
setCheckedKeys([]);
@@ -316,10 +438,10 @@ export const LeftLayersContent = (props: LeftLayersContentProps) => {
316438
}, [editorState]);
317439

318440
// make sure to handle the selectedActionKey for the changed input fields
319-
useEffect(() => {
441+
/* useEffect(() => {
320442
setActionValue('');
321-
setColor('#ffffff');
322-
}, [selectedActionKey, placeholderText]);
443+
// setColor('#ffffff');
444+
}, [selectedActionKey, placeholderText]); */
323445

324446
const onCheck = (checkedKeys: any, e: any) => {
325447
setCheckedKeys(checkedKeys);
@@ -369,78 +491,6 @@ export const LeftLayersContent = (props: LeftLayersContentProps) => {
369491
}
370492
}
371493
}, [getActionValue, getCheckedKeys]);
372-
373-
const handleActionSelection = useCallback((key: string) => {
374-
setSelectedActionKey(key);
375-
setPlaceholderText(getPlaceholderText(key));
376-
}, [handleComponentsActions]);
377-
378-
const layerActions: ItemType[] = [
379-
{
380-
label: 'Hide Component',
381-
key: 'hidden',
382-
},
383-
{
384-
label: 'Disable Component',
385-
key: 'disable',
386-
},
387-
{
388-
label: 'Margin',
389-
key: 'style.margin',
390-
},
391-
{
392-
label: 'Padding',
393-
key: 'style.padding',
394-
},
395-
{
396-
label: 'Border Radius',
397-
key: 'style.radius',
398-
},
399-
{
400-
label: 'Border Width',
401-
key: 'style.borderWidth',
402-
},
403-
{
404-
label: 'Font Size',
405-
key: 'style.textSize',
406-
},
407-
{
408-
label: 'Font Weight',
409-
key: 'style.textWeight',
410-
},
411-
{
412-
label: 'Font Family',
413-
key: 'style.fontFamily',
414-
}
415-
];
416-
417-
418-
const getPlaceholderText = (key: string) => {
419-
switch (key) {
420-
case 'hidden':
421-
case 'disable':
422-
return 'true | false';
423-
case 'style.background':
424-
case 'style.text':
425-
case 'style.border':
426-
return 'e.g., #ffffff'; // Indicate example format
427-
case 'style.radius':
428-
return 'e.g., 4px'; // Indicate example format
429-
case 'style.borderWidth':
430-
return 'e.g., 2px'; // Indicate example format
431-
case 'style.textSize':
432-
return 'e.g., 16px'; // Indicate example format
433-
case 'style.textWeight':
434-
return 'bold | 900';
435-
case 'style.fontFamily':
436-
return 'Arial, sans-serif';
437-
case 'style.margin':
438-
case 'style.padding':
439-
return 'e.g., 4px 8px 16px 32px'; // Indicate example format
440-
default:
441-
return 'Action Value';
442-
}
443-
};
444494

445495
const getTreeUI = () => {
446496
// here the components get sorted by name
@@ -453,6 +503,7 @@ export const LeftLayersContent = (props: LeftLayersContentProps) => {
453503
<>
454504
<div style={{margin:"0px 16px"}}>
455505
<div style={{marginBottom:"10px"}}>
506+
456507
{trans("leftPanel.activatelayers")}
457508
<Switch
458509
style={{margin : "0px 10px"}}
@@ -490,21 +541,21 @@ export const LeftLayersContent = (props: LeftLayersContentProps) => {
490541
<CustomDropdown
491542
dropdownRender={() => (
492543
<Menu
493-
items={layerActions}
494-
onClick={({key}) => handleActionSelection(key)}
544+
items={items}
545+
onClick={({ key }) => {
546+
handleActionSelection(key);
547+
}}
495548
/>
496549
)}
497550
>
498551
<Button size={"small"}>
499-
<Space>
500-
Action
501-
<DownOutlined />
502-
</Space>
552+
<Space>Action <DownOutlined /></Space>
503553
</Button>
504554
</CustomDropdown>
505-
<Input
506-
value={actionValue} // Use actionValue for the default case as well
507-
onChange={(e) => setActionValue(e.target.value)} // Handle changes to update actionValue
555+
<Input
556+
ref={inputRef}
557+
value={actionValue}
558+
onChange={(e) => setActionValue(e.target.value)}
508559
placeholder={placeholderText}
509560
/>
510561
<Button

0 commit comments

Comments
 (0)