Skip to content

Commit f38b7eb

Browse files
raheeliftikhar5raheeliftikhar5
committed
added branding fonts
1 parent 3cfb293 commit f38b7eb

File tree

4 files changed

+78
-19
lines changed

4 files changed

+78
-19
lines changed

‎client/packages/lowcoder/src/app.tsx

Lines changed: 52 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ import {
3131
ADMIN_AUTH_URL,
3232
PUBLIC_APP_EDITOR_URL,
3333
} from "constants/routesURL";
34-
import React from "react";
34+
import React, { useMemo } from "react";
3535
import { createRoot } from "react-dom/client";
3636
import { Helmet } from "react-helmet";
3737
import { connect, Provider } from "react-redux";
@@ -63,6 +63,7 @@ import { packageMetaReadyAction, setLowcoderCompsLoading } from "./redux/reduxAc
6363
import { fetchBrandingSetting } from "./redux/reduxActions/enterpriseActions";
6464
import { EnterpriseProvider } from "./util/context/EnterpriseContext";
6565
import { SimpleSubscriptionContextProvider } from "./util/context/SimpleSubscriptionContext";
66+
import { getBrandingSetting } from "./redux/selectors/enterpriseSelectors";
6667

6768
const LazyUserAuthComp = React.lazy(() => import("pages/userAuth"));
6869
const LazyInviteLanding = React.lazy(() => import("pages/common/inviteLanding"));
@@ -75,18 +76,33 @@ const LazyApplicationHome = React.lazy(() => import("pages/ApplicationV2"));
7576
const LazyDebugComp = React.lazy(() => import("./debug"));
7677
const LazyDebugNewComp = React.lazy(() => import("./debugNew"));
7778

78-
const Wrapper = (props: { children: React.ReactNode, language: string }) => (
79-
<ConfigProvider
80-
theme={{ hashed: false }}
81-
wave={{ disabled: true }}
82-
locale={getAntdLocale(props.language)}
83-
>
84-
<App>
85-
<GlobalInstances />
86-
{props.children}
87-
</App>
88-
</ConfigProvider>
89-
);
79+
const Wrapper = React.memo((props: {
80+
children: React.ReactNode,
81+
language: string,
82+
fontFamily?: string
83+
}) => {
84+
const theme = useMemo(() => {
85+
return {
86+
hashed: false,
87+
token: {
88+
fontFamily: `${props.fontFamily ? props.fontFamily.split('+').join(' ') : 'Roboto'}, sans-serif`,
89+
},
90+
}
91+
}, [props.fontFamily]);
92+
93+
return (
94+
<ConfigProvider
95+
theme={theme}
96+
wave={{ disabled: true }}
97+
locale={getAntdLocale(props.language)}
98+
>
99+
<App>
100+
<GlobalInstances />
101+
{props.children}
102+
</App>
103+
</ConfigProvider>
104+
);
105+
});
90106

91107
type AppIndexProps = {
92108
isFetchUserFinished: boolean;
@@ -106,6 +122,7 @@ type AppIndexProps = {
106122
favicon: string;
107123
brandName: string;
108124
uiLanguage: string;
125+
brandingFontFamily?: string;
109126
};
110127

111128
class AppIndex extends React.Component<AppIndexProps, any> {
@@ -156,7 +173,7 @@ class AppIndex extends React.Component<AppIndexProps, any> {
156173
localStorage.setItem('lowcoder_uiLanguage', this.props.uiLanguage);
157174

158175
return (
159-
<Wrapper language={this.props.uiLanguage}>
176+
<Wrapper language={this.props.uiLanguage} fontFamily={this.props.brandingFontFamily}>
160177
<Helmet>
161178
{<title>{this.props.brandName}</title>}
162179
{<link rel="icon" href={this.props.favicon} />}
@@ -281,7 +298,8 @@ class AppIndex extends React.Component<AppIndexProps, any> {
281298
href={window.location.href}
282299
media="(aspect-ratio: 1280/720)"
283300
/>,
284-
301+
]}
302+
{((isLowCoderDomain || isLocalhost) && !Boolean(this.props.brandingFontFamily)) && [
285303
<link
286304
key="preconnect-googleapis"
287305
rel="preconnect"
@@ -299,6 +317,24 @@ class AppIndex extends React.Component<AppIndexProps, any> {
299317
rel="stylesheet"
300318
/>
301319
]}
320+
{Boolean(this.props.brandingFontFamily) && [
321+
<link
322+
key="preconnect-googleapis"
323+
rel="preconnect"
324+
href="https://fonts.googleapis.com"
325+
/>,
326+
<link
327+
key="preconnect-gstatic"
328+
rel="preconnect"
329+
href="https://fonts.gstatic.com"
330+
crossOrigin="anonymous"
331+
/>,
332+
<link
333+
key={this.props.brandingFontFamily}
334+
href={`https://fonts.googleapis.com/css2?family=${this.props.brandingFontFamily}&display=swap`}
335+
rel="stylesheet"
336+
/>
337+
]}
302338
</Helmet>
303339
<SystemWarning />
304340
<Router history={history}>
@@ -449,6 +485,7 @@ const mapStateToProps = (state: AppState) => ({
449485
: favicon,
450486
brandName: getBrandingConfig(state)?.brandName ?? trans("productName"),
451487
uiLanguage: state.ui.users.user.uiLanguage,
488+
brandingFontFamily: getBrandingSetting(state)?.config_set?.font,
452489
});
453490

454491
const mapDispatchToProps = (dispatch: any) => ({

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -707,8 +707,11 @@ export function AppHeader() {
707707
<StyledLink onClick={() => history.push(ALL_APPLICATIONS_URL)}>
708708
{/* {REACT_APP_LOWCODER_SHOW_BRAND === 'true' ? REACT_APP_LOWCODER_CUSTOM_LOGO !== "" ? <img src={REACT_APP_LOWCODER_CUSTOM_LOGO} height={28} alt="logo" /> :<LogoWithName branding={!user.orgDev} /> : <LogoHome />} */}
709709
{ brandingSettings?.config_set?.squareLogo
710-
? <BrandLogo src={buildMaterialPreviewURL(brandingSettings?.config_set?.squareLogo)} />
711-
: <LogoHome />
710+
? (
711+
Boolean(brandingSettings?.orgId)
712+
? <BrandLogo src={buildMaterialPreviewURL(brandingSettings?.config_set?.squareLogo)} />
713+
: <BrandLogo src={brandingSettings?.config_set?.squareLogo} />
714+
) : <LogoHome />
712715
}
713716
</StyledLink>
714717
);

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,14 @@ export const AppEditorInternalView = React.memo((props: AppEditorInternalViewPro
235235
window.location.pathname.split("/")[3] === "admin" ? <div></div> :
236236
<EditorSkeletonView />
237237
) : (
238-
<ConfigProvider locale={getAntdLocale(currentUser.uiLanguage)}>
238+
<ConfigProvider
239+
locale={getAntdLocale(currentUser.uiLanguage)}
240+
theme={{
241+
token: {
242+
fontFamily: 'Roboto, sans-serif',
243+
},
244+
}}
245+
>
239246
<ExternalEditorContext.Provider value={externalEditorState}>
240247
{compInstance?.comp?.getView()}
241248
</ExternalEditorContext.Provider>

‎client/packages/lowcoder/src/pages/setting/branding/BrandingSetting.tsx

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,18 @@ const defaultSettings = {
8484
whatsNewLink : null,
8585
};
8686

87+
const fonts = [
88+
{label: 'Roboto', value: 'Roboto'},
89+
{label: 'Open Sans', value: 'Open+Sans'},
90+
{label: 'Lato', value: 'Lato'},
91+
{label: 'Montserrat', value: 'Montserrat'},
92+
{label: 'Poppins', value: 'Poppins'},
93+
{label: 'Inter', value: 'Inter'},
94+
{label: 'Merriweather', value: 'Merriweather'},
95+
{label: 'Playfair Display', value: 'Playfair+Display'},
96+
{label: 'Raleway', value: 'Raleway'},
97+
{label: 'Nunito', value: 'Nunito'},
98+
]
8799
// type FileType = Parameters<UploadProps["beforeUpload"]>[0] | undefined;
88100

89101
const BrandingSettingContent = styled.div`
@@ -558,7 +570,7 @@ export function BrandingSetting() {
558570
<div style={{marginTop : "20px"}}>
559571
<h3>{trans("branding.font")}</h3>
560572
<CustomSelect
561-
options={[] /* Dynamically populate Google Fonts */}
573+
options={fonts}
562574
value={brandingConfig?.config_set?.font}
563575
onChange={(font) => updateSettings(SettingsEnum.FONT, font)}
564576
/>

0 commit comments

Comments
 (0)