Fixing IconComponent

Author: FalkWolsky

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

@@ -1,6 +1,6 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import type { IconDefinition } from "@fortawesome/free-regular-svg-icons";
-import type { IconDefinition as IconDefinitionBrands } from "@fortawesome/free-brands-svg-icons";
+// import type { IconDefinition as IconDefinitionBrands } from "@fortawesome/free-brands-svg-icons";
 import { Popover } from "antd";
 import { ActionType } from "@rc-component/trigger/lib/interface";
 import { TacoInput } from "components/tacoInput";
@@ -19,10 +19,11 @@ import Draggable from "react-draggable";
 import { default as List, ListRowProps } from "react-virtualized/dist/es/List";
 import styled from "styled-components";
 import { CloseIcon, SearchIcon } from "icons";
-import { ANTDICON } from "../../../../lowcoder/src/comps/comps/timelineComp/antIcon";
+import { ANTDICON } from "icons/antIcon";
+import { Divider } from "antd-mobile";
 
 const PopupContainer = styled.div`
-  width: 408px;
+  width: 580px;
   background: #ffffff;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
   border-radius: 8px;
@@ -85,25 +86,28 @@ const IconList = styled(List)`
     background-color: rgba(139, 143, 163, 0.36);
   }
 `;
+
 const IconRow = styled.div`
   padding: 0 6px;
   display: flex;
-  align-items: center;
+  align-items: flex-start; /* Align items to the start to allow different heights */
   justify-content: space-between;
 
   &:last-child {
     gap: 8px;
     justify-content: flex-start;
   }
 `;
+
 const IconItemContainer = styled.div`
-  width: 40px;
-  height: 40px;
+  width: 60px;
   display: flex;
-  align-items: center;
-  justify-content: center;
+  flex-direction: column;
+  align-items: center; 
+  justify-content: flex-start; 
   cursor: pointer;
-  font-size: 20px;
+  font-size: 28px;
+  margin-bottom: 24px; 
 
   &:hover {
     border: 1px solid #315efb;
@@ -117,6 +121,22 @@ const IconItemContainer = styled.div`
   }
 `;
 
+const IconWrapper = styled.div`
+  height: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const IconKeyDisplay = styled.div`
+  font-size: 8px;
+  color: #8b8fa3;
+  margin-top: 4px; /* Space between the icon and the text */
+  text-align: center;
+  word-wrap: break-word; /* Ensure text wraps */
+  width: 100%; /* Ensure the container can grow */
+`;
+
 class Icon {
   readonly title: string;
   constructor(readonly def: IconDefinition | any, readonly names: string[]) {
@@ -133,7 +153,7 @@ class Icon {
       return (
         <FontAwesomeIcon
           icon={this.def}
-          style={{ width: "1em", height: "1em" }}
+          style={{ width: "1em", height: "1em"}}
         />
       );
   }
@@ -254,6 +274,10 @@ const IconPopup = (props: {
     getAllIcons().then(setAllIcons);
   }, []);
 
+  const smallTextStyle = {
+    fontSize: '8px'
+  };
+
   const rowRenderer = useCallback(
     (p: ListRowProps) => (
       <IconRow key={p.key} style={p.style}>
@@ -262,7 +286,7 @@ const IconPopup = (props: {
           .map(([key, icon]) => (
             <Tooltip
               key={key}
-              title={icon.title}
+              title={icon.title + ", Key: " + key}
               placement="bottom"
               align={{ offset: [0, -7, 0, 0] }}
               destroyTooltipOnHide
@@ -273,7 +297,8 @@ const IconPopup = (props: {
                   onChangeIcon(key);
                 }}
               >
-                {icon.getView()}
+                <IconWrapper>{icon.getView()}</IconWrapper>
+                <IconKeyDisplay>{key}</IconKeyDisplay>
               </IconItemContainer>
             </Tooltip>
           ))}
@@ -299,9 +324,9 @@ const IconPopup = (props: {
         </SearchDiv>
         <IconListWrapper>
           <IconList
-            width={394}
-            height={312}
-            rowHeight={48}
+            width={550}
+            height={400}
+            rowHeight={80}
             rowCount={Math.ceil(searchResults.length / columnNum)}
             rowRenderer={rowRenderer}
           />

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

@@ -26,33 +26,31 @@ import {
   clickEvent,
   eventHandlerControl,
 } from "../controls/eventHandlerControl";
+import { useContext } from "react";
+import { EditorContext } from "comps/editorState";
 
 const Container = styled.div<{ $style: IconStyleType | undefined }>`
-  height: 100%;
-  width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  svg {
-    object-fit: contain;
-    pointer-events: auto;
-  }
-  ${(props) => props.$style && getStyle(props.$style)}
-`;
 
-const getStyle = (style: IconStyleType) => {
-  return css`
+  ${(props) => props.$style && css`
+    height: calc(100% - ${props.$style.margin});
+    width: calc(100% - ${props.$style.margin});
+    padding: ${props.$style.padding};
+    margin: ${props.$style.margin};
+    border: ${props.$style.borderWidth} solid ${props.$style.border};
+    border-radius: ${props.$style.radius};
+    background: ${props.$style.background};
     svg {
-      color: ${style.fill};
+      max-width: ${widthCalculator(props.$style.margin)};
+      max-height: ${heightCalculator(props.$style.margin)};
+      color: ${props.$style.fill};
+      object-fit: contain;
+      pointer-events: auto;
     }
-    padding: ${style.padding};
-    border: 1px solid ${style.border};
-    border-radius: ${style.radius};
-    margin: ${style.margin};
-    max-width: ${widthCalculator(style.margin)};
-    max-height: ${heightCalculator(style.margin)};
-  `;
-};
+  `}
+`;
 
 const EventOptions = [clickEvent] as const;
 
@@ -94,7 +92,7 @@ const IconView = (props: RecordConstructorToView<typeof childrenMap>) => {
         }}
         onClick={() => props.onEvent("click")}
       >
-        {props.icon}
+        {props.icon}  
       </Container>
     </ReactResizeDetector>
   );
@@ -109,23 +107,29 @@ let IconBasicComp = (function () {
             label: trans("iconComp.icon"),
             IconType: "All",
           })}
-          {children.autoHeight.propertyView({
+          
+        </Section> 
+
+        {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          <Section name={sectionNames.interaction}>
+            {children.onEvent.getPropertyView()}
+            {hiddenPropertyView(children)}
+          </Section>
+        )}
+
+        {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          <><Section name={sectionNames.layout}>
+            {children.autoHeight.propertyView({
             label: trans("iconComp.autoSize"),
           })}
-          {!children.autoHeight.getView() &&
+            {!children.autoHeight.getView() &&
             children.iconSize.propertyView({
               label: trans("iconComp.iconSize"),
             })}
-        </Section>
-        <Section name={sectionNames.interaction}>
-          {children.onEvent.getPropertyView()}
-        </Section>
-        <Section name={sectionNames.layout}>
-          {hiddenPropertyView(children)}
-        </Section>
-        <Section name={sectionNames.style}>
-          {children.style.getPropertyView()}
-        </Section>
+          </Section><Section name={sectionNames.style}>
+              {children.style.getPropertyView()}
+            </Section></>
+        )}
       </>
     ))
     .build();

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

@@ -1078,8 +1078,14 @@ export const NavigationStyle = [
 
 export const ImageStyle = [getStaticBorder("#00000000"), RADIUS, BORDER_WIDTH, MARGIN, PADDING] as const;
 
-export const IconStyle = [getStaticBackground("#00000000"),
-  getStaticBorder("#00000000"), FILL, RADIUS, MARGIN, PADDING] as const;
+export const IconStyle = [
+  getStaticBackground("#00000000"),
+  getStaticBorder("#00000000"), 
+  FILL,
+  RADIUS,
+  BORDER_WIDTH,
+  MARGIN, 
+  PADDING] as const;
 
 
 export const ListViewStyle = BG_STATIC_BORDER_RADIUS;