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

Commit 48b46cc

Browse files
author
FalkWolsky
committed
Fixing IconComponent
1 parent b6fb85b commit 48b46cc

File tree

3 files changed

+84
-49
lines changed

3 files changed

+84
-49
lines changed

‎client/packages/lowcoder-design/src/components/iconSelect/index.tsx‎

Lines changed: 40 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
22
import type { IconDefinition } from "@fortawesome/free-regular-svg-icons";
3-
import type { IconDefinition as IconDefinitionBrands } from "@fortawesome/free-brands-svg-icons";
3+
// import type { IconDefinition as IconDefinitionBrands } from "@fortawesome/free-brands-svg-icons";
44
import { Popover } from "antd";
55
import { ActionType } from "@rc-component/trigger/lib/interface";
66
import { TacoInput } from "components/tacoInput";
@@ -19,10 +19,11 @@ import Draggable from "react-draggable";
1919
import { default as List, ListRowProps } from "react-virtualized/dist/es/List";
2020
import styled from "styled-components";
2121
import { CloseIcon, SearchIcon } from "icons";
22-
import { ANTDICON } from "../../../../lowcoder/src/comps/comps/timelineComp/antIcon";
22+
import { ANTDICON } from "icons/antIcon";
23+
import { Divider } from "antd-mobile";
2324

2425
const PopupContainer = styled.div`
25-
width: 408px;
26+
width: 580px;
2627
background: #ffffff;
2728
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
2829
border-radius: 8px;
@@ -85,25 +86,28 @@ const IconList = styled(List)`
8586
background-color: rgba(139, 143, 163, 0.36);
8687
}
8788
`;
89+
8890
const IconRow = styled.div`
8991
padding: 0 6px;
9092
display: flex;
91-
align-items: center;
93+
align-items: flex-start; /* Align items to the start to allow different heights */
9294
justify-content: space-between;
9395
9496
&:last-child {
9597
gap: 8px;
9698
justify-content: flex-start;
9799
}
98100
`;
101+
99102
const IconItemContainer = styled.div`
100-
width: 40px;
101-
height: 40px;
103+
width: 60px;
102104
display: flex;
103-
align-items: center;
104-
justify-content: center;
105+
flex-direction: column;
106+
align-items: center;
107+
justify-content: flex-start;
105108
cursor: pointer;
106-
font-size: 20px;
109+
font-size: 28px;
110+
margin-bottom: 24px;
107111
108112
&:hover {
109113
border: 1px solid #315efb;
@@ -117,6 +121,22 @@ const IconItemContainer = styled.div`
117121
}
118122
`;
119123

124+
const IconWrapper = styled.div`
125+
height: auto;
126+
display: flex;
127+
align-items: center;
128+
justify-content: center;
129+
`;
130+
131+
const IconKeyDisplay = styled.div`
132+
font-size: 8px;
133+
color: #8b8fa3;
134+
margin-top: 4px; /* Space between the icon and the text */
135+
text-align: center;
136+
word-wrap: break-word; /* Ensure text wraps */
137+
width: 100%; /* Ensure the container can grow */
138+
`;
139+
120140
class Icon {
121141
readonly title: string;
122142
constructor(readonly def: IconDefinition | any, readonly names: string[]) {
@@ -133,7 +153,7 @@ class Icon {
133153
return (
134154
<FontAwesomeIcon
135155
icon={this.def}
136-
style={{ width: "1em", height: "1em"}}
156+
style={{ width: "1em", height: "1em"}}
137157
/>
138158
);
139159
}
@@ -254,6 +274,10 @@ const IconPopup = (props: {
254274
getAllIcons().then(setAllIcons);
255275
}, []);
256276

277+
const smallTextStyle = {
278+
fontSize: '8px'
279+
};
280+
257281
const rowRenderer = useCallback(
258282
(p: ListRowProps) => (
259283
<IconRow key={p.key} style={p.style}>
@@ -262,7 +286,7 @@ const IconPopup = (props: {
262286
.map(([key, icon]) => (
263287
<Tooltip
264288
key={key}
265-
title={icon.title}
289+
title={icon.title+", Key: "+key}
266290
placement="bottom"
267291
align={{ offset: [0, -7, 0, 0] }}
268292
destroyTooltipOnHide
@@ -273,7 +297,8 @@ const IconPopup = (props: {
273297
onChangeIcon(key);
274298
}}
275299
>
276-
{icon.getView()}
300+
<IconWrapper>{icon.getView()}</IconWrapper>
301+
<IconKeyDisplay>{key}</IconKeyDisplay>
277302
</IconItemContainer>
278303
</Tooltip>
279304
))}
@@ -299,9 +324,9 @@ const IconPopup = (props: {
299324
</SearchDiv>
300325
<IconListWrapper>
301326
<IconList
302-
width={394}
303-
height={312}
304-
rowHeight={48}
327+
width={550}
328+
height={400}
329+
rowHeight={80}
305330
rowCount={Math.ceil(searchResults.length / columnNum)}
306331
rowRenderer={rowRenderer}
307332
/>

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

Lines changed: 36 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -26,33 +26,31 @@ import {
2626
clickEvent,
2727
eventHandlerControl,
2828
} from "../controls/eventHandlerControl";
29+
import { useContext } from "react";
30+
import { EditorContext } from "comps/editorState";
2931

3032
const Container = styled.div<{ $style: IconStyleType | undefined }>`
31-
height: 100%;
32-
width: 100%;
3333
display: flex;
3434
align-items: center;
3535
justify-content: center;
36-
svg {
37-
object-fit: contain;
38-
pointer-events: auto;
39-
}
40-
${(props) => props.$style && getStyle(props.$style)}
41-
`;
4236
43-
const getStyle = (style: IconStyleType) => {
44-
return css`
37+
${(props) => props.$style && css`
38+
height: calc(100% - ${props.$style.margin});
39+
width: calc(100% - ${props.$style.margin});
40+
padding: ${props.$style.padding};
41+
margin: ${props.$style.margin};
42+
border: ${props.$style.borderWidth} solid ${props.$style.border};
43+
border-radius: ${props.$style.radius};
44+
background: ${props.$style.background};
4545
svg {
46-
color: ${style.fill};
46+
max-width: ${widthCalculator(props.$style.margin)};
47+
max-height: ${heightCalculator(props.$style.margin)};
48+
color: ${props.$style.fill};
49+
object-fit: contain;
50+
pointer-events: auto;
4751
}
48-
padding: ${style.padding};
49-
border: 1px solid ${style.border};
50-
border-radius: ${style.radius};
51-
margin: ${style.margin};
52-
max-width: ${widthCalculator(style.margin)};
53-
max-height: ${heightCalculator(style.margin)};
54-
`;
55-
};
52+
`}
53+
`;
5654

5755
const EventOptions = [clickEvent] as const;
5856

@@ -94,7 +92,7 @@ const IconView = (props: RecordConstructorToView<typeof childrenMap>) => {
9492
}}
9593
onClick={() => props.onEvent("click")}
9694
>
97-
{props.icon}
95+
{props.icon}
9896
</Container>
9997
</ReactResizeDetector>
10098
);
@@ -109,23 +107,29 @@ let IconBasicComp = (function () {
109107
label: trans("iconComp.icon"),
110108
IconType: "All",
111109
})}
112-
{children.autoHeight.propertyView({
110+
111+
</Section>
112+
113+
{["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
114+
<Section name={sectionNames.interaction}>
115+
{children.onEvent.getPropertyView()}
116+
{hiddenPropertyView(children)}
117+
</Section>
118+
)}
119+
120+
{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
121+
<><Section name={sectionNames.layout}>
122+
{children.autoHeight.propertyView({
113123
label: trans("iconComp.autoSize"),
114124
})}
115-
{!children.autoHeight.getView() &&
125+
{!children.autoHeight.getView() &&
116126
children.iconSize.propertyView({
117127
label: trans("iconComp.iconSize"),
118128
})}
119-
</Section>
120-
<Section name={sectionNames.interaction}>
121-
{children.onEvent.getPropertyView()}
122-
</Section>
123-
<Section name={sectionNames.layout}>
124-
{hiddenPropertyView(children)}
125-
</Section>
126-
<Section name={sectionNames.style}>
127-
{children.style.getPropertyView()}
128-
</Section>
129+
</Section><Section name={sectionNames.style}>
130+
{children.style.getPropertyView()}
131+
</Section></>
132+
)}
129133
</>
130134
))
131135
.build();

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1078,8 +1078,14 @@ export const NavigationStyle = [
10781078

10791079
export const ImageStyle = [getStaticBorder("#00000000"), RADIUS, BORDER_WIDTH, MARGIN, PADDING] as const;
10801080

1081-
export const IconStyle = [getStaticBackground("#00000000"),
1082-
getStaticBorder("#00000000"), FILL, RADIUS, MARGIN, PADDING] as const;
1081+
export const IconStyle = [
1082+
getStaticBackground("#00000000"),
1083+
getStaticBorder("#00000000"),
1084+
FILL,
1085+
RADIUS,
1086+
BORDER_WIDTH,
1087+
MARGIN,
1088+
PADDING] as const;
10831089

10841090

10851091
export const ListViewStyle = BG_STATIC_BORDER_RADIUS;

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /