Merge pull request lowcoder-org#725 from raheeliftikhar5/app_meta_field

Added app meta fields title, description, category and icon in App settings

Author: FalkWolsky

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

@@ -1,7 +1,7 @@
 import { ThemeDetail, ThemeType } from "api/commonSettingApi";
 import { RecordConstructorToComp } from "lowcoder-core";
 import { dropdownInputSimpleControl } from "comps/controls/dropdownInputSimpleControl";
-import { MultiCompBuilder, valueComp } from "comps/generators";
+import { MultiCompBuilder, valueComp, withDefault } from "comps/generators";
 import { AddIcon, Dropdown } from "lowcoder-design";
 import { EllipsisSpan } from "pages/setting/theme/styledComponents";
 import { useEffect } from "react";
@@ -14,6 +14,10 @@ import { default as Divider } from "antd/es/divider";
 import { THEME_SETTING } from "constants/routesURL";
 import { CustomShortcutsComp } from "./customShortcutsComp";
 import { DEFAULT_THEMEID } from "comps/utils/themeUtil";
+import { StringControl } from "comps/controls/codeControl";
+import { IconControl } from "comps/controls/iconControl";
+import { dropdownControl } from "comps/controls/dropdownControl";
+import { ApplicationCategoriesEnum } from "constants/applicationConstants";
 
 const TITLE = trans("appSetting.title");
 const USER_DEFINE = "__USER_DEFINE";
@@ -92,9 +96,37 @@ const SettingsStyled = styled.div`
 `;
 
 const DivStyled = styled.div`
-  div {
-    width: 100%;
-    display: block;
+  > div {
+    flex-wrap: wrap;
+    margin-bottom: 12px;
+    
+    > div {
+      width: 100%;
+      display: block;
+    }
+
+    > div:first-child {
+      margin-bottom: 6px;
+    }
+    
+    .tooltipLabel {
+      white-space: nowrap;
+    }
+
+  }
+  // custom styles for icon selector
+  .app-icon {
+    > div {
+      margin-bottom: 0;
+
+      > div:first-child {
+        margin-bottom: 6px;
+      }
+      > div:nth-child(2) {
+        width: 88%;
+        display: inline-block;
+      }
+    }
   }
 `;
 
@@ -134,7 +166,22 @@ const DividerStyled = styled(Divider)`
   border-color: #e1e3eb;
 `;
 
+type AppCategoriesEnumKey = keyof typeof ApplicationCategoriesEnum
+const AppCategories = Object.keys(ApplicationCategoriesEnum).map(
+  (cat) => {
+    const value = ApplicationCategoriesEnum[cat as AppCategoriesEnumKey];
+    return {
+      label: value,
+      value,
+    }
+  }
+)
+
 const childrenMap = {
+  title: withDefault(StringControl, ''),
+  description: withDefault(StringControl, ''),
+  icon: IconControl,
+  category: dropdownControl(AppCategories, ApplicationCategoriesEnum.BUSINESS),
   maxWidth: dropdownInputSimpleControl(OPTIONS, USER_DEFINE, "1920"),
   themeId: valueComp<string>(DEFAULT_THEMEID),
   customShortcuts: CustomShortcutsComp,
@@ -146,7 +193,16 @@ type ChildrenInstance = RecordConstructorToComp<typeof childrenMap> & {
 };
 
 function AppSettingsModal(props: ChildrenInstance) {
-  const { themeList, defaultTheme, themeId, maxWidth } = props;
+  const {
+    themeList,
+    defaultTheme,
+    themeId,
+    maxWidth,
+    title,
+    description,
+    icon,
+    category,
+  } = props;
   const THEME_OPTIONS = themeList?.map((theme) => ({
     label: theme.name,
     value: theme.id + "",
@@ -182,16 +238,30 @@ function AppSettingsModal(props: ChildrenInstance) {
     <SettingsStyled>
       <Title>{TITLE}</Title>
       <DivStyled>
+        {title.propertyView({
+          label: trans("appSetting.appTitle"),
+          placeholder: trans("appSetting.appTitle")
+        })}
+        {description.propertyView({
+          label: trans("appSetting.appDescription"),
+          placeholder: trans("appSetting.appDescription")
+        })}
+        {category.propertyView({
+          label: trans("appSetting.appCategory"),
+        })}
+        <div className="app-icon">
+          {icon.propertyView({
+            label: trans("icon"),
+            tooltip: trans("aggregation.iconTooltip"),
+          })}
+        </div>
         {maxWidth.propertyView({
           dropdownLabel: trans("appSetting.canvasMaxWidth"),
           inputLabel: trans("appSetting.userDefinedMaxWidth"),
           inputPlaceholder: trans("appSetting.inputUserDefinedPxValue"),
           placement: "bottom",
           min: 350,
           lastNode: <span>{trans("appSetting.maxWidthTip")}</span>,
-          labelStyle: {marginBottom: "8px"},
-          dropdownStyle: {marginBottom: "12px"},
-          inputStyle: {marginBottom: "12px"}
         })}
         <Dropdown
           defaultValue={
@@ -205,8 +275,6 @@ function AppSettingsModal(props: ChildrenInstance) {
           options={THEME_OPTIONS}
           label={trans("appSetting.themeSetting")}
           placement="bottom"
-          labelStyle={{marginBottom: "8px"}}
-          dropdownStyle={{marginBottom: "12px"}}
           itemNode={(value) => <DropdownItem value={value} />}
           preNode={() => (
             <>

client/packages/lowcoder/src/comps/hooks/drawerComp.tsx

@@ -35,6 +35,35 @@ const DrawerWrapper = styled.div`
   pointer-events: auto;
 `;
 
+const ButtonStyle = styled(Button)<{$closePosition?: string}>`
+  position: absolute;
+  ${(props) => props.$closePosition === "right" ? "right: 0;" : "left: 0;"}
+  top: 0;
+  z-index: 10;
+  font-weight: 700;
+  box-shadow: none;
+  color: rgba(0, 0, 0, 0.45);
+  height: 54px;
+  width: 54px;
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  &,
+  :hover,
+  :focus {
+    background-color: transparent;
+    border: none;
+  }
+
+  :hover,
+  :focus {
+    color: rgba(0, 0, 0, 0.75);
+  }
+`;
+
 // If it is a number, use the px unit by default
 function transToPxSize(size: string | number) {
   return isNumeric(size) ? size + "px" : (size as string);
@@ -103,34 +132,6 @@ let TmpDrawerComp = (function () {
         },
         [dispatch, isTopBom]
       );
-      const ButtonStyle = styled(Button)`
-        position: absolute;
-        ${props.closePosition === "right" ? "right: 0;" : "left: 0;"}
-        top: 0;
-        z-index: 10;
-        font-weight: 700;
-        box-shadow: none;
-        color: rgba(0, 0, 0, 0.45);
-        height: 54px;
-        width: 54px;
-
-        svg {
-          width: 16px;
-          height: 16px;
-        }
-
-        &,
-        :hover,
-        :focus {
-          background-color: transparent;
-          border: none;
-        }
-
-        :hover,
-        :focus {
-          color: rgba(0, 0, 0, 0.75);
-        }
-      `;
       return (
         <BackgroundColorContext.Provider value={props.style.background}>
           <DrawerWrapper>
@@ -168,6 +169,7 @@ let TmpDrawerComp = (function () {
               mask={props.showMask}
             >
               <ButtonStyle
+                $closePosition={props.closePosition}
                 onClick={() => {
                   props.visible.onChange(false);
                 }}

client/packages/lowcoder/src/i18n/locales/de.ts

@@ -1860,7 +1860,10 @@ export const de = {
       "maxWidthTip": "Die maximale Breite sollte größer als oder gleich 350 sein",
       "themeSetting": "Angewandter Stil Thema",
       "themeSettingDefault": "Standard",
-      "themeCreate": "Thema erstellen"
+      "themeCreate": "Thema erstellen",
+      "appTitle": "Titel",
+      "appDescription": "Beschreibung",
+      "appCategory": "Kategorie",
   },
   "customShortcut": {
       "title": "Benutzerdefinierte Abkürzungen",

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -2045,7 +2045,10 @@ export const en = {
     "maxWidthTip": "Max Width Should Be Greater Than or Equal to 350",
     "themeSetting": "Applied Style Theme",
     "themeSettingDefault": "Default",
-    "themeCreate": "Create Theme"
+    "themeCreate": "Create Theme",
+    "appTitle": "Title",
+    "appDescription": "Description",
+    "appCategory": "Category",
   },
   "customShortcut": {
     "title": "Custom Shortcuts",

client/packages/lowcoder/src/i18n/locales/zh.ts

@@ -1933,6 +1933,9 @@ appSetting: {
     themeSetting: "主题设置",
     themeSettingDefault: "默认",
     themeCreate: "创建主题",
+    appTitle: "标题",
+    appDescription: "描述",
+    appCategory: "类别",
 },
 customShortcut: {
     title: "自定义快捷键",

client/packages/lowcoder/src/pages/common/styledComponent.tsx

@@ -39,6 +39,7 @@ const RightStyledCard = styled(Card)`
 
 export const LeftPanel = styled(StyledCard)`
   display: block;
+  z-index: ${Layers.rightPanel};
 `;
 export const RightPanelWrapper = styled(RightStyledCard)`
   display: flex;

client/packages/lowcoder/src/pages/editor/styledComponents.tsx

@@ -148,6 +148,6 @@ export const CollapseWrapper = styled.div<{ $clientX?: number }>`
     display: none;
   }
   .simplebar-content > div {
-    padding: 0;
+    // padding: 0;
   }
 `;