Merge pull request #290 from aaron1604/feat/home-icon

Feat/home icon

Author: aaron1604

client/README.md

@@ -34,7 +34,7 @@ docker run -d --name lowcoder-dev -p 3000:3000 -v "$PWD/stacks:/lowcoder-stacks"
 1. Check out source code.
 2. Change to client dir in the repository root via cd client.
 3. Run yarn to install dependencies: .
-4. Start dev server: `API_PROXY_TARGET=http://localhost:3000 yarn start`.
+4. Start dev server: `LOWCODER_API_SERVICE_URL=http://localhost:3000 yarn start`.
 5. After dev server starts successfully, it will be automatically opened in the default browser.
 
 ### Before submitting a pull request

client/packages/lowcoder-cli/client.d.ts

@@ -30,6 +30,10 @@ declare var REACT_APP_EDITION: string;
 declare var REACT_APP_LANGUAGES: string;
 declare var REACT_APP_COMMIT_ID: string;
 declare var REACT_APP_API_HOST: string;
+declare var LOWCODER_NODE_SERVICE_URL: string;
+declare var LOWCODER_SHOW_BRAND: string;
+declare var LOWCODER_CUSTOM_LOGO: string;
+declare var LOWCODER_CUSTOM_LOGO_SQUARE: string;
 declare var REACT_APP_ENV: string;
 declare var REACT_APP_BUILD_ID: string;
 declare var REACT_APP_LOG_LEVEL: string;

client/packages/lowcoder-dev-utils/buildVars.js

@@ -19,6 +19,22 @@ export const buildVars = [
     name: "REACT_APP_API_HOST",
     defaultValue: "",
   },
+  {
+    name: "LOWCODER_SHOW_BRAND",
+    defaultValue: 'false',
+  },
+  {
+    name: "LOWCODER_CUSTOM_LOGO",
+    defaultValue: '',
+  },
+  {
+    name: "LOWCODER_CUSTOM_LOGO_SQUARE",
+    defaultValue: '',
+  },
+  {
+    name: "LOWCODER_NODE_SERVICE_URL",
+    defaultValue: "",
+  },
   {
     name: "REACT_APP_ENV",
     defaultValue: "production",

client/packages/lowcoder/src/app-env.d.ts

@@ -33,6 +33,10 @@ declare var REACT_APP_EDITION: string;
 declare var REACT_APP_LANGUAGES: string;
 declare var REACT_APP_COMMIT_ID: string;
 declare var REACT_APP_API_HOST: string;
+declare var LOWCODER_NODE_SERVICE_URL: string;
+declare var LOWCODER_SHOW_BRAND: string;
+declare var LOWCODER_CUSTOM_LOGO: string;
+declare var LOWCODER_CUSTOM_LOGO_SQUARE: string;
 declare var REACT_APP_ENV: string;
 declare var REACT_APP_BUILD_ID: string;
 declare var REACT_APP_LOG_LEVEL: string;

client/packages/lowcoder/src/assets/images/index.tsx

@@ -1,7 +1,7 @@
 //window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
 import { ReactComponent as LogoIcon } from "./logo.svg";
 import { ReactComponent as LogoWithNameIcon } from "./logo-with-name.svg";
-import { ReactComponent as LogoHomeIcon } from "./logo-with-name.svg";
+import { ReactComponent as LogoHomeIcon } from "./logo-with-name-home.svg";
 
 export { default as favicon } from "./favicon.ico";
 

client/packages/lowcoder/src/components/PageSkeleton.tsx

@@ -83,6 +83,8 @@ export default function PageSkeleton(props: IProps) {
       {!hideHeader && isHeaderReady && (
         <Header
           headerStart={
+            LOWCODER_SHOW_BRAND === 'true' ? 
+            LOWCODER_CUSTOM_LOGO !== "" ? <img src={LOWCODER_CUSTOM_LOGO} alt="logo" /> :<StyledLogoWithName branding={true} /> : 
             <StyledLogoHome branding={true} />
           }
           style={{ backgroundColor: brandingConfig?.headerColor, ...props.headStyle }}

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

@@ -34,7 +34,7 @@ import history from "util/history";
 import { useApplicationId } from "util/hooks";
 import { canManageApp } from "util/permissionUtils";
 import ProfileDropdown from "./profileDropdown";
-import { Logo, LogoWithName } from "@lowcoder-ee/assets/images";
+import { Logo, LogoHome, LogoWithName } from "@lowcoder-ee/assets/images";
 import { HeaderStartDropdown } from "./headerStartDropdown";
 import { AppPermissionDialog } from "../../components/PermissionDialog/AppPermissionDialog";
 import { getBrandingConfig } from "../../redux/selectors/configSelectors";
@@ -287,7 +287,9 @@ export default function Header(props: HeaderProps) {
   const headerStart = (
     <>
       <StyledLink onClick={() => history.push(ALL_APPLICATIONS_URL)}>
-        <LogoIcon />
+      {LOWCODER_SHOW_BRAND === 'true' ? 
+      LOWCODER_CUSTOM_LOGO_SQUARE !== "" ? <img src={LOWCODER_CUSTOM_LOGO_SQUARE } height={24} width={24} alt="logo" /> :<LogoIcon /> : 
+      <LogoHome />}
       </StyledLink>
       {editName ? (
         <Wrapper>
@@ -429,7 +431,9 @@ export function AppHeader() {
   const brandingConfig = useSelector(getBrandingConfig);
   const headerStart = (
     <StyledLink onClick={() => history.push(ALL_APPLICATIONS_URL)}>
-      <LogoWithName branding={!user.orgDev} />
+      {LOWCODER_SHOW_BRAND === 'true' ? 
+      LOWCODER_CUSTOM_LOGO !== "" ? <img src={LOWCODER_CUSTOM_LOGO}  height={28} alt="logo" /> :<LogoWithName branding={!user.orgDev} /> : 
+      <LogoHome />}
     </StyledLink>
   );
   const headerEnd = <HeaderProfile user={user} />;

client/packages/lowcoder/src/util/bottomResUtils.tsx

@@ -64,7 +64,7 @@ export const LargeBottomResIconWrapper = styled(IconWrapper)`
 function getBottomResIconInnerByUrl(type: BottomResType, url: string) {
   let fullUrl = url;
   if (!fullUrl.startsWith("http")) {
-    fullUrl = `${REACT_APP_API_HOST}/node-service/plugin-icons/${url}`;
+    fullUrl = `${LOWCODER_NODE_SERVICE_URL !== "" ? LOWCODER_NODE_SERVICE_URL : REACT_APP_API_HOST}/node-service/plugin-icons/${url}`;
   }
   return <img style={{ width: "100%", height: "100%" }} src={fullUrl} alt="" />;
 }

client/packages/lowcoder/vite.config.mts

@@ -14,7 +14,7 @@ import { globalDepPlugin } from "lowcoder-dev-utils/globalDepPlguin";
 
 dotenv.config();
 
-const apiProxyTarget = process.env.API_PROXY_TARGET;
+const apiProxyTarget = process.env.LOWCODER_API_SERVICE_URL;
 const nodeServiceApiProxyTarget = process.env.NODE_SERVICE_API_PROXY_TARGET;
 const nodeEnv = process.env.NODE_ENV ?? "development";
 const edition = process.env.REACT_APP_EDITION;
@@ -27,8 +27,8 @@ const base = ensureLastSlash(process.env.PUBLIC_URL);
 
 if (!apiProxyTarget && isDev) {
   console.log();
-  console.log(chalk.red`API_PROXY_TARGET is required.\n`);
-  console.log(chalk.cyan`Start with command: API_PROXY_TARGET=\{backend-api-addr\} yarn start`);
+  console.log(chalk.red`LOWCODER_API_SERVICE_URL is required.\n`);
+  console.log(chalk.cyan`Start with command: LOWCODER_API_SERVICE_URL=\{backend-api-addr\} yarn start`);
   console.log();
   process.exit(1);
 }