Skip to content

Commit 6f3bd42

Browse files
raheeliftikhar5raheeliftikhar5
committed
admin and editor branding
1 parent a13a12d commit 6f3bd42

File tree

10 files changed

+212
-34
lines changed

10 files changed

+212
-34
lines changed

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,9 +83,15 @@ export interface BrandingSettings {
8383
logo: string | null;
8484
squareLogo: string | null;
8585
mainBrandingColor: string;
86-
editorHeaderColor: string;
86+
appHeaderColor: string;
8787
adminSidebarColor: string;
88+
adminSidebarFontColor: string;
89+
adminSidebarActiveBgColor: string;
90+
adminSidebarActiveFontColor: string;
8891
editorSidebarColor: string;
92+
editorSidebarFontColor: string;
93+
editorSidebarActiveBgColor: string;
94+
editorSidebarActiveFontColor: string;
8995
font: string;
9096
errorPageText: string;
9197
errorPageImage: string | null;

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ import GlobalInstances from 'components/GlobalInstances';
5959
import { fetchHomeData, fetchServerSettingsAction } from "./redux/reduxActions/applicationActions";
6060
import { getNpmPackageMeta } from "./comps/utils/remote";
6161
import { packageMetaReadyAction, setLowcoderCompsLoading } from "./redux/reduxActions/npmPluginActions";
62+
import { fetchCommonSettings } from "./redux/reduxActions/commonSettingsActions";
6263

6364
const LazyUserAuthComp = React.lazy(() => import("pages/userAuth"));
6465
const LazyInviteLanding = React.lazy(() => import("pages/common/inviteLanding"));
@@ -92,6 +93,7 @@ type AppIndexProps = {
9293
defaultHomePage: string | null | undefined;
9394
fetchHomeDataFinished: boolean;
9495
fetchConfig: (orgId?: string) => void;
96+
fetchCommonSettings: (orgId: string) => void;
9597
fetchHomeData: (currentUserAnonymous?: boolean | undefined) => void;
9698
fetchLowcoderCompVersions: () => void;
9799
getCurrentUser: () => void;
@@ -119,6 +121,7 @@ class AppIndex extends React.Component<AppIndexProps, any> {
119121
if (!this.props.currentUserAnonymous) {
120122
this.props.fetchHomeData(this.props.currentUserAnonymous);
121123
this.props.fetchLowcoderCompVersions();
124+
this.props.fetchCommonSettings(this.props.currentOrgId!);
122125
}
123126
}
124127
}
@@ -422,6 +425,7 @@ const mapDispatchToProps = (dispatch: any) => ({
422425
fetchHomeData: (currentUserAnonymous: boolean | undefined) => {
423426
dispatch(fetchHomeData({}));
424427
},
428+
fetchCommonSettings: (orgId: string) => dispatch(fetchCommonSettings({ orgId })),
425429
fetchLowcoderCompVersions: async () => {
426430
try {
427431
dispatch(setLowcoderCompsLoading(true));

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

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,21 @@ import SideBar from "components/layout/SideBar";
99
import { CNMainContent, CNSidebar } from "constants/styleSelectors";
1010
import { SideBarSection, SideBarSectionProps } from "./SideBarSection";
1111
import styled from "styled-components";
12+
import { useSelector } from "react-redux";
13+
import { getBrandingSettings } from "@lowcoder-ee/redux/selectors/commonSettingSelectors";
1214

1315
type LayoutProps = {
1416
sections: SideBarSectionProps[];
1517
};
1618

17-
const SideBarV2 = styled(SideBar)`
18-
background: #f7f9fc !important;
19+
const SideBarV2 = styled(SideBar)<{
20+
$bgColor?: string,
21+
$fontColor?: string,
22+
$activeBgColor?: string,
23+
$activeFontColor?: string,
24+
}>`
25+
background: ${props => props.$bgColor ? props.$bgColor : '#f7f9fc'} !important;
26+
${props => props.$fontColor && `color: ${props.$fontColor}`};
1927
padding: 28px 10px;
2028
border-right: 1px solid #ebebeb;
2129
@@ -30,6 +38,8 @@ const SideBarV2 = styled(SideBar)`
3038
`;
3139

3240
export function Layout(props: LayoutProps) {
41+
const brandingSettings = useSelector(getBrandingSettings);
42+
3343
const routes: ReactElement[] = [];
3444
props.sections.forEach((section) => {
3545
section.items.forEach((item) => {
@@ -49,7 +59,13 @@ export function Layout(props: LayoutProps) {
4959
<AppHeader />
5060
<HelpDropdown />
5161
<AntdLayout>
52-
<SideBarV2 className={CNSidebar}>
62+
<SideBarV2
63+
className={CNSidebar}
64+
$bgColor={brandingSettings?.adminSidebarColor}
65+
$fontColor={brandingSettings?.adminSidebarFontColor}
66+
$activeBgColor={brandingSettings?.adminSidebarActiveBgColor}
67+
$activeFontColor={brandingSettings?.adminSidebarActiveFontColor}
68+
>
5369
{props.sections
5470
.filter((section) => section.items.length > 0)
5571
.map((section, index) => (

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

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,12 @@ import { useLocation } from "react-router-dom";
66

77
type SideBarSize = "medium" | "small";
88

9-
const Wrapper = styled.div<{ $size?: SideBarSize; $selected?: boolean }>`
9+
const Wrapper = styled.div<{
10+
$size?: SideBarSize;
11+
$selected?: boolean;
12+
$selectedBgColor?: string;
13+
$selectedFontColor?: string;
14+
}>`
1015
width: 100%;
1116
height: ${(props) => (props.$size === "small" ? "36px" : "44px")};
1217
border-radius: 4px;
@@ -16,7 +21,12 @@ const Wrapper = styled.div<{ $size?: SideBarSize; $selected?: boolean }>`
1621
cursor: pointer;
1722
1823
&:hover {
19-
background: ${(props) => (props.$selected ? "#ebf0f7" : "#efeff1")};
24+
background: ${(props) => (props.$selected ? (
25+
`${props.$selectedBgColor ? props.$selectedBgColor : '#ebf0f7'}`
26+
) : (
27+
`${props.$selectedBgColor ? props.$selectedBgColor : '#efeff1'}`
28+
))};
29+
color: ${(props) => props.$selectedFontColor ? props.$selectedFontColor : '#4965f2'}
2030
}
2131
2232
svg {
@@ -26,8 +36,8 @@ const Wrapper = styled.div<{ $size?: SideBarSize; $selected?: boolean }>`
2636
${(props) =>
2737
props.$selected &&
2838
css`
29-
color: #4965f2;
30-
background: #ebf0f7;
39+
color: ${props.$selectedFontColor ? props.$selectedFontColor : '#4965f2'};
40+
background: ${props.$selectedBgColor ? props.$selectedBgColor : '#ebf0f7'};
3141
`}
3242
`;
3343

@@ -41,6 +51,8 @@ export const SideBarItem = (props: SideBarItemProps) => {
4151
className={CNSidebarItem}
4252
$size={props.size}
4353
$selected={props.selected}
54+
$selectedBgColor={props.selectedBgColor}
55+
$selectedFontColor={props.selectedFontColor}
4456
onClick={() => props.onClick?.(currentPath)}
4557
>
4658
{Icon && <Icon selected={props.selected} style={{ marginRight: "8px" }} />}
@@ -53,6 +65,8 @@ export interface SideBarItemProps {
5365
icon?: FunctionComponent<SVGProps<any> & { selected?: boolean }>;
5466
text: ReactNode | FunctionComponent<{ selected?: boolean }>;
5567
selected?: boolean;
68+
selectedBgColor?: string;
69+
selectedFontColor?: string;
5670
size?: SideBarSize;
5771
onClick?: (currentPath: string) => void;
5872
style?: CSSProperties;

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { getUser } from "../../redux/selectors/usersSelectors";
1111
import { normalAppListSelector } from "../../redux/selectors/applicationSelector";
1212
import { useLocation } from "react-router-dom";
1313
import history from "../../util/history";
14+
import { getBrandingSettings } from "@lowcoder-ee/redux/selectors/commonSettingSelectors";
1415

1516
const defaultOnSelectedFn = (routePath: string, currentPath: string) => routePath === currentPath;
1617

@@ -23,6 +24,7 @@ const Wrapper = styled.div`
2324
export const SideBarSection = (props: SideBarSectionProps) => {
2425
const user = useSelector<AppState, User>(getUser);
2526
const applications = useSelector<AppState, ApplicationMeta[]>(normalAppListSelector);
27+
const brandingSettings = useSelector(getBrandingSettings);
2628
const currentPath = useLocation().pathname;
2729
const isShow = props.items.map(item => item.visible ? item.visible({ user: user, applications: applications }) : true).includes(true);
2830
return (
@@ -42,6 +44,8 @@ export const SideBarSection = (props: SideBarSectionProps) => {
4244
? item.onSelected(item.routePath, currentPath)
4345
: defaultOnSelectedFn(item.routePath, currentPath)
4446
}
47+
selectedBgColor={brandingSettings?.adminSidebarActiveBgColor}
48+
selectedFontColor={brandingSettings?.adminSidebarActiveFontColor}
4549
onClick={
4650
item.onClick ??
4751
(() => currentPath !== item.routePath && history.push(item.routePath))

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2762,8 +2762,20 @@ export const en = {
27622762
"editorHeaderColorHelp": "Choose the color for the editor's header.",
27632763
"adminSidebarColor": "Admin Sidebar Color",
27642764
"adminSidebarColorHelp": "Choose the color for the admin's sidebar.",
2765+
"adminSidebarFontColor": "Admin Sidebar Font Color",
2766+
"adminSidebarFontColorHelp": "Choose the font color for the admin's sidebar.",
2767+
"adminSidebarActiveBgColor": "Admin Sidebar Selected Item's Backround Color",
2768+
"adminSidebarActiveBgColorHelp": "Choose the selected item's background color for the admin's sidebar.",
2769+
"adminSidebarActiveFontColor": "Admin Sidebar Selected Item's Font Color",
2770+
"adminSidebarActiveFontColorHelp": "Choose the selected item's font color for the admin's sidebar.",
27652771
"editorSidebarColor": "Editor Sidebar Color",
27662772
"editorSidebarColorHelp": "Choose the color for the editor's sidebar.",
2773+
"editorSidebarFontColor": "Editor Sidebar Font Color",
2774+
"editorSidebarFontColorHelp": "Choose the font color for the editor's sidebar.",
2775+
"editorSidebarActiveBgColor": "Editor Sidebar Selected Item's Backround Color",
2776+
"editorSidebarActiveBgColorHelp": "Choose the selected item's background color for the editor's sidebar.",
2777+
"editorSidebarActiveFontColor": "Editor Sidebar Selected Item's Font Color",
2778+
"editorSidebarActiveFontColorHelp": "Choose the selected item's font color for the editor's sidebar.",
27672779
"font": "Font",
27682780
"fontHelp": "Select a font from Google Fonts for your application.",
27692781
"textSection": "Texts and Pages",

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

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,8 @@ import Avatar from 'antd/es/avatar';
6464
import UserApi from "@lowcoder-ee/api/userApi";
6565
import { validateResponse } from "@lowcoder-ee/api/apiUtils";
6666
import ProfileImage from "./profileImage";
67+
import { getBrandingSettings } from "@lowcoder-ee/redux/selectors/commonSettingSelectors";
68+
import { buildMaterialPreviewURL } from "@lowcoder-ee/util/materialUtils";
6769

6870
const { Countdown } = Statistic;
6971
const { Text } = Typography;
@@ -321,6 +323,10 @@ const DropdownMenuStyled = styled(DropdownMenu)`
321323
}
322324
`;
323325

326+
const BrandLogo = styled.img`
327+
height: 28px;
328+
`
329+
324330
function HeaderProfile(props: { user: User }) {
325331
const { user } = props;
326332
const fetchingUser = useSelector(isFetchingUser);
@@ -373,6 +379,7 @@ export default function Header(props: HeaderProps) {
373379
const dispatch = useDispatch();
374380
const showAppSnapshot = useSelector(showAppSnapshotSelector);
375381
const {selectedSnapshot, isArchivedSnapshot} = useSelector(getSelectedAppSnapshot);
382+
const brandingSettings = useSelector(getBrandingSettings);
376383
const { appType } = useContext(ExternalEditorContext);
377384
const [editName, setEditName] = useState(false);
378385
const [editing, setEditing] = useState(false);
@@ -428,7 +435,10 @@ export default function Header(props: HeaderProps) {
428435
<>
429436
<StyledLink onClick={() => history.push(ALL_APPLICATIONS_URL)}>
430437
{/* {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 />} */}
431-
<LogoHome />
438+
{ brandingSettings?.squareLogo
439+
? <BrandLogo src={buildMaterialPreviewURL(brandingSettings?.squareLogo)} />
440+
: <LogoHome />
441+
}
432442
</StyledLink>
433443
{editName ? (
434444
<Wrapper>
@@ -673,28 +683,35 @@ export default function Header(props: HeaderProps) {
673683
headerStart={headerStart}
674684
headerMiddle={headerMiddle}
675685
headerEnd={headerEnd}
686+
style={{
687+
backgroundColor: brandingSettings?.appHeaderColor
688+
}}
676689
/>
677690
);
678691
}
679692

680693
// header in manager page
681694
export function AppHeader() {
682695
const user = useSelector(getUser);
683-
const brandingConfig = useSelector(getBrandingConfig);
696+
const brandingSettings = useSelector(getBrandingSettings);
697+
684698
const headerStart = (
685699
<StyledLink onClick={() => history.push(ALL_APPLICATIONS_URL)}>
686700
{/* {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 />} */}
687-
<LogoHome />
701+
{ brandingSettings?.squareLogo
702+
? <BrandLogo src={buildMaterialPreviewURL(brandingSettings?.squareLogo)} />
703+
: <LogoHome />
704+
}
688705
</StyledLink>
689706
);
690707
const headerEnd = <HeaderProfile user={user} />;
691708
return (
692709
<LayoutHeader
693710
headerStart={headerStart}
694711
headerEnd={headerEnd}
695-
style={
696-
user.orgDev ? {} : { backgroundColor: brandingConfig?.headerColor }
697-
}
712+
style={{
713+
backgroundColor: brandingSettings?.appHeaderColor
714+
}}
698715
/>
699716
);
700717
}

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

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ import {
5555
} from "util/localStorageUtil";
5656
import { isAggregationApp } from "util/appUtils";
5757
import EditorSkeletonView from "./editorSkeletonView";
58-
import { getCommonSettings } from "@lowcoder-ee/redux/selectors/commonSettingSelectors";
58+
import { getBrandingSettings, getCommonSettings } from "@lowcoder-ee/redux/selectors/commonSettingSelectors";
5959
import { isEqual, noop } from "lodash";
6060
import { AppSettingContext, AppSettingType } from "@lowcoder-ee/comps/utils/appSettingContext";
6161
// import { BottomSkeleton } from "./bottom/BottomContent";
@@ -145,9 +145,14 @@ const ViewBody = styled.div<{ $hideBodyHeader?: boolean; $height?: number }>`
145145
)`};
146146
`;
147147

148-
const SiderWrapper = styled.div`
148+
const SiderWrapper = styled.div<{
149+
$bgColor?: string;
150+
$fontColor?: string;
151+
$activeBgColor?: string;
152+
$activeFontColor?: string;
153+
}>`
149154
.ant-menu {
150-
background-color: #393b47;
155+
background-color: ${props => props.$bgColor ? props.$bgColor : '#393b47'};
151156
height: calc(100vh - 48px);
152157
153158
.ant-menu-item {
@@ -165,10 +170,10 @@ const SiderWrapper = styled.div`
165170
&.ant-menu-item-selected,
166171
&:hover,
167172
&:active {
168-
background-color: #393b47;
169-
173+
background-color: ${props => props.$bgColor ? props.$bgColor : '#393b47'};
170174
svg {
171-
background: #8b8fa37f;
175+
background: ${props => props.$activeBgColor ? props.$activeBgColor : '#8b8fa37f'};
176+
color: ${props => props.$activeFontColor ? props.$activeFontColor : '#ffffffa6'};
172177
border-radius: 4px;
173178
}
174179
}
@@ -308,6 +313,7 @@ function EditorView(props: EditorViewProps) {
308313
const locationState = useLocation<UserGuideLocationState>().state;
309314
const showNewUserGuide = locationState?.showNewUserGuide;
310315
const showAppSnapshot = useSelector(showAppSnapshotSelector);
316+
const brandingSettings = useSelector(getBrandingSettings);
311317
const [showShortcutList, setShowShortcutList] = useState(false);
312318
const toggleShortcutList = useCallback(
313319
() => setShowShortcutList(!showShortcutList),
@@ -519,7 +525,12 @@ function EditorView(props: EditorViewProps) {
519525
toggleShortcutList={toggleShortcutList}
520526
>
521527
<Body>
522-
<SiderWrapper>
528+
<SiderWrapper
529+
$bgColor={brandingSettings?.editorSidebarColor}
530+
$fontColor={brandingSettings?.editorSidebarFontColor}
531+
$activeBgColor={brandingSettings?.editorSidebarActiveBgColor}
532+
$activeFontColor={brandingSettings?.editorSidebarActiveFontColor}
533+
>
523534
<Sider width={40}>
524535
<Menu
525536
theme="dark"

0 commit comments

Comments
 (0)