Skip to content

Commit e007719

Browse files
raheeliftikhar5raheeliftikhar5
committed
handle images separately for global branding
1 parent 41d17cc commit e007719

File tree

7 files changed

+167
-108
lines changed

7 files changed

+167
-108
lines changed

‎client/packages/lowcoder/src/api/enterpriseApi.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export interface BrandingConfig {
3636
config_description?: string,
3737
config_icon?: string,
3838
config_set?: BrandingSettings,
39-
org_id?: string,
39+
orgId?: string,
4040
user_id?: string,
4141
id?: string,
4242
}

‎client/packages/lowcoder/src/components/layout/SideBarSection.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ export const SideBarSection = (props: SideBarSectionProps) => {
2525
const user = useSelector<AppState, User>(getUser);
2626
const applications = useSelector<AppState, ApplicationMeta[]>(normalAppListSelector);
2727
const brandingSettings = useSelector(getBrandingSetting);
28-
console.log('brandingSettings', brandingSettings);
2928
const currentPath = useLocation().pathname;
3029
const isShow = props.items
3130
.map((item) => (item.visible ? item.visible({ user: user, applications: applications }) : true))

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2907,8 +2907,12 @@ export const en = {
29072907
"logoSection": "Logos",
29082908
"logo": "Logo",
29092909
"logoHelp": "Upload your company's logo in SVG or PNG format.",
2910+
"logoUrlHelp": "Provide valid image url for Logo.",
2911+
"logoUrlPlaceholder" : "Provider image url for Logo",
29102912
"squareLogo": "Square Logo",
29112913
"squareLogoHelp": "Upload a square version of your logo in SVG or PNG format.",
2914+
"squareLogoUrlHelp": "Provide valid image url for Square Logo.",
2915+
"squareLogoUrlPlaceholder": "Provide url for Square Logo.",
29122916
"colorFontSection": "Colors and Fonts",
29132917
"mainBrandingColor": "Main Branding Color",
29142918
"mainBrandingColorHelp": "Choose the primary color for your branding.",
@@ -2948,7 +2952,13 @@ export const en = {
29482952
"whatsNew": "Enable What's New",
29492953
"saveButton": "Save Settings",
29502954
"errorPageImage" : "Upload an image for the Error Page in SVG or PNG format.",
2951-
"signUpPageImage" : "Upload an image for the Sign Up Page in SVG or PNG format.",
2955+
"errorPageImageUrl" : "Image URL for the Error Page",
2956+
"errorPageImageUrlPlaceholder" : "Provider image url for Error Page",
2957+
"errorPageImageUrlHelp" : "Provider a valid image url to show on Error Page.",
2958+
"signUpPageImage" : "Upload an image for the Sign Up Page in SVG or PNG format.",
2959+
"signUpPageImageUrl" : "Image URL for the Sign Up Page",
2960+
"signUpPageImageUrlPlaceholder" : "Provider image url for Sign Up Page",
2961+
"signUpPageImageUrlHelp" : "Provider a valid image url to show on Sign Up Page.",
29522962
"loggedOutPageImage" : "Upload an image for the Logged-out Page in SVG or PNG format.",
29532963
"showDocumentationSection": "Documentation Link Settings",
29542964
"showWhatsNewSection" : "Whats New Link Settings",

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -431,14 +431,16 @@ export default function Header(props: HeaderProps) {
431431
editorState.setEditorModeStatus(value);
432432
};
433433

434-
435434
const headerStart = (
436435
<>
437436
<StyledLink onClick={() => history.push(ALL_APPLICATIONS_URL)}>
438437
{/* {REACT_APP_LOWCODER_SHOW_BRAND === 'true' ? REACT_APP_LOWCODER_CUSTOM_LOGO_SQUARE !== "" ? <img src={REACT_APP_LOWCODER_CUSTOM_LOGO_SQUARE } height={24} width={24} alt="logo" /> :<LogoIcon /> : <LogoHome />} */}
439438
{ brandingSettings?.config_set?.squareLogo
440-
? <BrandLogo src={buildMaterialPreviewURL(brandingSettings?.config_set?.squareLogo)} />
441-
: <LogoHome />
439+
? (
440+
Boolean(brandingSettings?.orgId)
441+
? <BrandLogo src={buildMaterialPreviewURL(brandingSettings?.config_set?.squareLogo)} />
442+
: <BrandLogo src={brandingSettings?.config_set?.squareLogo} />
443+
) : <LogoHome />
442444
}
443445
</StyledLink>
444446
{editName ? (

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

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ import MobileOutlined from "@ant-design/icons/MobileOutlined";
2626
import TabletOutlined from "@ant-design/icons/TabletOutlined";
2727
import DesktopOutlined from "@ant-design/icons/DesktopOutlined";
2828
import { DeviceOrientation, DeviceType, EditorContext } from "@lowcoder-ee/comps/editorState";
29+
import { getBrandingSetting } from "@lowcoder-ee/redux/selectors/enterpriseSelectors";
30+
import { buildMaterialPreviewURL } from "@lowcoder-ee/util/materialUtils";
2931

3032
const HeaderFont = styled.div<{ $bgColor: string }>`
3133
font-weight: 500;
@@ -111,6 +113,10 @@ const Wrapper = styled.div`
111113
}
112114
`;
113115

116+
const BrandLogo = styled.img`
117+
height: 28px;
118+
`
119+
114120
export function HeaderProfile(props: { user: User }) {
115121
const { user } = props;
116122
const fetchingUser = useSelector(isFetchingUser);
@@ -149,14 +155,21 @@ const PreviewHeaderComp = () => {
149155
const isPublicApp = useSelector(isPublicApplication);
150156
const applicationId = useApplicationId();
151157
const templateId = useSelector(getTemplateId);
152-
const brandingConfig = useSelector(getBrandingConfig);
158+
const brandingSettings = useSelector(getBrandingSetting);
153159
const [permissionDialogVisible, setPermissionDialogVisible] = useState(false);
154160
const isViewMarketplaceMode = params.viewMode === 'view_marketplace' || isPublicApp;
155161

156162
const headerStart = (
157163
<>
158164
<StyledLink onClick={() => !isPublicApp && history.push(ALL_APPLICATIONS_URL)}>
159-
<LogoIcon branding={true} />
165+
{/* <LogoIcon branding={true} /> */}
166+
{ brandingSettings?.config_set?.squareLogo
167+
? (
168+
Boolean(brandingSettings?.orgId)
169+
? <BrandLogo src={buildMaterialPreviewURL(brandingSettings?.config_set?.squareLogo)} />
170+
: <BrandLogo src={brandingSettings?.config_set?.squareLogo} />
171+
) : <LogoIcon branding={true} />
172+
}
160173
</StyledLink>
161174
{isViewMarketplaceMode && (
162175
<HeaderStartDropdown
@@ -165,7 +178,7 @@ const PreviewHeaderComp = () => {
165178
/>
166179
)}
167180
{!isViewMarketplaceMode && (
168-
<HeaderFont $bgColor={brandingConfig?.headerColor ?? "#2c2c2c"}>
181+
<HeaderFont $bgColor={brandingSettings?.config_set?.appHeaderColor ?? "#2c2c2c"}>
169182
{application && application.name}
170183
</HeaderFont>
171184
)}
@@ -256,7 +269,7 @@ const PreviewHeaderComp = () => {
256269
headerStart={headerStart}
257270
headerMiddle={headerMiddle}
258271
headerEnd={headerEnd}
259-
style={{ backgroundColor: brandingConfig?.headerColor }}
272+
style={{ backgroundColor: brandingSettings?.config_set?.appHeaderColor }}
260273
/>
261274
);
262275
};

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

Lines changed: 124 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -331,44 +331,68 @@ export function BrandingSetting() {
331331
<Card>
332332
<div>
333333
<h3>{trans("branding.logo")}</h3>
334-
<StyledRectUploadContainer>
335-
<Upload
336-
name="logo"
337-
className="avatar-uploader"
338-
listType="picture-card"
339-
showUploadList={false}
340-
beforeUpload={beforeUpload}
341-
maxCount={1}
342-
customRequest={(options) => handleUpload(options, SettingsEnum.LOGO)}
343-
>
344-
{Boolean(brandingConfig?.config_set?.[SettingsEnum.LOGO])
345-
? <img src={buildMaterialPreviewURL(brandingConfig?.config_set?.[SettingsEnum.LOGO]!)} alt="logo" />
346-
: uploadButton(loading[SettingsEnum.LOGO])
347-
}
348-
</Upload>
349-
<HelpText>{trans("branding.logoHelp")}</HelpText>
350-
</StyledRectUploadContainer>
334+
{!Boolean(configOrgId) ? (
335+
<>
336+
<Input
337+
placeholder={trans("branding.logoUrlPlaceholder")}
338+
value={brandingConfig?.config_set?.[SettingsEnum.LOGO] || ""}
339+
onChange={(e) => updateSettings(SettingsEnum.LOGO, e.target.value)}
340+
style={{ marginBottom: 12 }}
341+
/>
342+
<HelpText>{trans("branding.logoUrlHelp")}</HelpText>
343+
</>
344+
) : (
345+
<StyledRectUploadContainer>
346+
<Upload
347+
name="logo"
348+
className="avatar-uploader"
349+
listType="picture-card"
350+
showUploadList={false}
351+
beforeUpload={beforeUpload}
352+
maxCount={1}
353+
customRequest={(options) => handleUpload(options, SettingsEnum.LOGO)}
354+
>
355+
{Boolean(brandingConfig?.config_set?.[SettingsEnum.LOGO])
356+
? <img src={buildMaterialPreviewURL(brandingConfig?.config_set?.[SettingsEnum.LOGO]!)} alt="logo" />
357+
: uploadButton(loading[SettingsEnum.LOGO])
358+
}
359+
</Upload>
360+
<HelpText>{trans("branding.logoHelp")}</HelpText>
361+
</StyledRectUploadContainer>
362+
)}
351363
</div>
352364

353365
<div style={{marginTop : "20px"}}>
354366
<h3>{trans("branding.squareLogo")}</h3>
355-
<StyledSquareUploadContainer>
356-
<Upload
357-
name="squareLogo"
358-
className="avatar-uploader"
359-
listType="picture-card"
360-
showUploadList={false}
361-
beforeUpload={beforeUpload}
362-
maxCount={1}
363-
customRequest={(options) => handleUpload(options, SettingsEnum.SQUARE_LOGO)}
364-
>
365-
{Boolean(brandingConfig?.config_set?.[SettingsEnum.SQUARE_LOGO])
366-
? <img src={buildMaterialPreviewURL(brandingConfig?.config_set?.[SettingsEnum.SQUARE_LOGO]!)} alt="square_logo" />
367-
: uploadButton(loading[SettingsEnum.SQUARE_LOGO])
368-
}
369-
</Upload>
370-
<HelpText>{trans("branding.squareLogoHelp")}</HelpText>
371-
</StyledSquareUploadContainer>
367+
{!Boolean(configOrgId) ? (
368+
<>
369+
<Input
370+
placeholder={trans("branding.squareLogoUrlPlaceholder")}
371+
value={brandingConfig?.config_set?.[SettingsEnum.SQUARE_LOGO] || ""}
372+
onChange={(e) => updateSettings(SettingsEnum.SQUARE_LOGO, e.target.value)}
373+
style={{ marginBottom: 12 }}
374+
/>
375+
<HelpText>{trans("branding.squareLogoUrlHelp")}</HelpText>
376+
</>
377+
) : (
378+
<StyledSquareUploadContainer>
379+
<Upload
380+
name="squareLogo"
381+
className="avatar-uploader"
382+
listType="picture-card"
383+
showUploadList={false}
384+
beforeUpload={beforeUpload}
385+
maxCount={1}
386+
customRequest={(options) => handleUpload(options, SettingsEnum.SQUARE_LOGO)}
387+
>
388+
{Boolean(brandingConfig?.config_set?.[SettingsEnum.SQUARE_LOGO])
389+
? <img src={buildMaterialPreviewURL(brandingConfig?.config_set?.[SettingsEnum.SQUARE_LOGO]!)} alt="square_logo" />
390+
: uploadButton(loading[SettingsEnum.SQUARE_LOGO])
391+
}
392+
</Upload>
393+
<HelpText>{trans("branding.squareLogoHelp")}</HelpText>
394+
</StyledSquareUploadContainer>
395+
)}
372396
</div>
373397
</Card>
374398
</BrandingSettingContent>
@@ -536,23 +560,39 @@ export function BrandingSetting() {
536560
style={{ marginBottom: 12 }}
537561
/>
538562
<HelpText>{trans("branding.errorPageHelp")}</HelpText>
539-
<h3 style={{marginTop : "20px"}}>{trans("branding.errorPageImage")}</h3>
540-
<StyledRectUploadContainer>
541-
<Upload
542-
name="errorPageImage"
543-
className="avatar-uploader"
544-
listType="picture-card"
545-
showUploadList={false}
546-
beforeUpload={beforeUpload}
547-
maxCount={1}
548-
customRequest={(options) => handleUpload(options, SettingsEnum.ERROR_PAGE_IMAGE)}
549-
>
550-
{Boolean(brandingConfig?.config_set?.[SettingsEnum.ERROR_PAGE_IMAGE])
551-
? <img src={buildMaterialPreviewURL(brandingConfig?.config_set?.[SettingsEnum.ERROR_PAGE_IMAGE]!)} alt="error_page_image" />
552-
: uploadButton(loading[SettingsEnum.ERROR_PAGE_IMAGE])
553-
}
554-
</Upload>
555-
</StyledRectUploadContainer>
563+
564+
{!Boolean(configOrgId) ? (
565+
<>
566+
<h3 style={{marginTop : "20px"}}>{trans("branding.errorPageImageUrl")}</h3>
567+
<Input
568+
placeholder={trans("branding.errorPageImageUrlPlaceholder")}
569+
value={brandingConfig?.config_set?.[SettingsEnum.ERROR_PAGE_IMAGE] || ""}
570+
onChange={(e) => updateSettings(SettingsEnum.ERROR_PAGE_IMAGE, e.target.value)}
571+
style={{ marginBottom: 12 }}
572+
/>
573+
<HelpText>{trans("branding.errorPageImageUrlHelp")}</HelpText>
574+
</>
575+
) : (
576+
<>
577+
<h3 style={{marginTop : "20px"}}>{trans("branding.errorPageImage")}</h3>
578+
<StyledRectUploadContainer>
579+
<Upload
580+
name="errorPageImage"
581+
className="avatar-uploader"
582+
listType="picture-card"
583+
showUploadList={false}
584+
beforeUpload={beforeUpload}
585+
maxCount={1}
586+
customRequest={(options) => handleUpload(options, SettingsEnum.ERROR_PAGE_IMAGE)}
587+
>
588+
{Boolean(brandingConfig?.config_set?.[SettingsEnum.ERROR_PAGE_IMAGE])
589+
? <img src={buildMaterialPreviewURL(brandingConfig?.config_set?.[SettingsEnum.ERROR_PAGE_IMAGE]!)} alt="error_page_image" />
590+
: uploadButton(loading[SettingsEnum.ERROR_PAGE_IMAGE])
591+
}
592+
</Upload>
593+
</StyledRectUploadContainer>
594+
</>
595+
)}
556596
</div>
557597
<Divider />
558598
<div>
@@ -564,51 +604,39 @@ export function BrandingSetting() {
564604
style={{ marginBottom: 12 }}
565605
/>
566606
<HelpText>{trans("branding.signUpPageHelp")}</HelpText>
567-
<h3 style={{marginTop : "20px"}}>{trans("branding.signUpPageImage")}</h3>
568-
<StyledRectUploadContainer>
569-
<Upload
570-
name="signUpPageImage"
571-
className="avatar-uploader"
572-
listType="picture-card"
573-
showUploadList={false}
574-
beforeUpload={beforeUpload}
575-
maxCount={1}
576-
customRequest={(options) => handleUpload(options, SettingsEnum.SIGNUP_PAGE_IMAGE)}
577-
>
578-
{Boolean(brandingConfig?.config_set?.[SettingsEnum.SIGNUP_PAGE_IMAGE])
579-
? <img src={buildMaterialPreviewURL(brandingConfig?.config_set?.[SettingsEnum.SIGNUP_PAGE_IMAGE]!)} alt="signup_page_image" />
580-
: uploadButton(loading[SettingsEnum.SIGNUP_PAGE_IMAGE])
581-
}
582-
</Upload>
583-
</StyledRectUploadContainer>
584-
</div>
585-
<Divider />
586-
<div>
587-
<h3 style={{marginTop : "20px"}}>{trans("branding.loggedOutPage")}</h3>
588-
<TextArea
589-
rows={4}
590-
value={brandingConfig?.config_set?.loggedOutPageText || ""}
591-
onChange={(e) => updateSettings(SettingsEnum.LOGGED_OUT_PAGE_TEXT, e.target.value)}
592-
style={{ marginBottom: 12 }}
593-
/>
594-
<HelpText>{trans("branding.loggedOutPageHelp")}</HelpText>
595-
<h3 style={{marginTop : "20px"}}>{trans("branding.loggedOutPageImage")}</h3>
596-
<StyledRectUploadContainer>
597-
<Upload
598-
name="loggedOutPageImage"
599-
className="avatar-uploader"
600-
listType="picture-card"
601-
showUploadList={false}
602-
beforeUpload={beforeUpload}
603-
maxCount={1}
604-
customRequest={(options) => handleUpload(options, SettingsEnum.LOGOUT_PAGE_IMAGE)}
605-
>
606-
{Boolean(brandingConfig?.config_set?.[SettingsEnum.LOGOUT_PAGE_IMAGE])
607-
? <img src={buildMaterialPreviewURL(brandingConfig?.config_set?.[SettingsEnum.LOGOUT_PAGE_IMAGE]!)} alt="logout_page_image" />
608-
: uploadButton(loading[SettingsEnum.LOGOUT_PAGE_IMAGE])
609-
}
610-
</Upload>
611-
</StyledRectUploadContainer>
607+
608+
{!Boolean(configOrgId) ? (
609+
<>
610+
<h3 style={{marginTop : "20px"}}>{trans("branding.signUpPageImageUrl")}</h3>
611+
<Input
612+
placeholder={trans("branding.signUpPageImageUrlPlaceholder")}
613+
value={brandingConfig?.config_set?.[SettingsEnum.SIGNUP_PAGE_IMAGE] || ""}
614+
onChange={(e) => updateSettings(SettingsEnum.SIGNUP_PAGE_IMAGE, e.target.value)}
615+
style={{ marginBottom: 12 }}
616+
/>
617+
<HelpText>{trans("branding.signUpPageImageUrlHelp")}</HelpText>
618+
</>
619+
) : (
620+
<>
621+
<h3 style={{marginTop : "20px"}}>{trans("branding.signUpPageImage")}</h3>
622+
<StyledRectUploadContainer>
623+
<Upload
624+
name="signUpPageImage"
625+
className="avatar-uploader"
626+
listType="picture-card"
627+
showUploadList={false}
628+
beforeUpload={beforeUpload}
629+
maxCount={1}
630+
customRequest={(options) => handleUpload(options, SettingsEnum.SIGNUP_PAGE_IMAGE)}
631+
>
632+
{Boolean(brandingConfig?.config_set?.[SettingsEnum.SIGNUP_PAGE_IMAGE])
633+
? <img src={buildMaterialPreviewURL(brandingConfig?.config_set?.[SettingsEnum.SIGNUP_PAGE_IMAGE]!)} alt="signup_page_image" />
634+
: uploadButton(loading[SettingsEnum.SIGNUP_PAGE_IMAGE])
635+
}
636+
</Upload>
637+
</StyledRectUploadContainer>
638+
</>
639+
)}
612640
</div>
613641
<Divider />
614642
<div style={{marginTop : "20px"}}>

0 commit comments

Comments
 (0)