fix(header): avoid affecting the colours of other menus (#3357)
* fix: avoid affecting the colours of other menus
* Revert "Revert "fix(theme): fix color of header menu (#3354)""
This reverts commit 3a06893463.
This commit is contained in:
Zeke Zhang
GitHub
parent
6eff76ffa2
commit
7534e12029
@ -31,7 +31,7 @@ export const PinnedPluginList = () => {
|
||||
width: 46px;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
color: rgba(255, 255, 255, 0.65) !important;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { css } from '@emotion/css';
|
||||
import { useSessionStorageState } from 'ahooks';
|
||||
import { App, Layout } from 'antd';
|
||||
import { App, ConfigProvider, Layout } from 'antd';
|
||||
import { createGlobalStyle } from 'antd-style';
|
||||
import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { Link, Outlet, useMatch, useNavigate, useParams } from 'react-router-dom';
|
||||
import {
|
||||
@ -193,6 +194,72 @@ const MenuEditor = (props) => {
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* 鼠标悬浮在顶部“更多”按钮时显示的子菜单的样式
|
||||
*/
|
||||
const GlobalStyleForAdminLayout = createGlobalStyle`
|
||||
.nb-container-of-header-submenu {
|
||||
.ant-menu.ant-menu-submenu.ant-menu-submenu-popup {
|
||||
.ant-menu.ant-menu-sub.ant-menu-vertical {
|
||||
background-color: ${(p) => {
|
||||
// @ts-ignore
|
||||
return p.theme.colorBgHeader + ' !important';
|
||||
}};
|
||||
color: ${(p) => {
|
||||
// @ts-ignore
|
||||
return p.theme.colorTextHeaderMenu + ' !important';
|
||||
}};
|
||||
.ant-menu-item:hover {
|
||||
color: ${(p) => {
|
||||
// @ts-ignore
|
||||
return p.theme.colorTextHeaderMenuHover + ' !important';
|
||||
}};
|
||||
background-color: ${(p) => {
|
||||
// @ts-ignore
|
||||
return p.theme.colorBgHeaderMenuHover + ' !important';
|
||||
}};
|
||||
}
|
||||
.ant-menu-item.ant-menu-item-selected {
|
||||
color: ${(p) => {
|
||||
// @ts-ignore
|
||||
return p.theme.colorTextHeaderMenuActive + ' !important';
|
||||
}};
|
||||
background-color: ${(p) => {
|
||||
// @ts-ignore
|
||||
return p.theme.colorBgHeaderMenuActive + ' !important';
|
||||
}};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
/**
|
||||
* 确保顶部菜单的子菜单的主题样式正确
|
||||
* @param param0
|
||||
* @returns
|
||||
*/
|
||||
const SetThemeOfHeaderSubmenu = ({ children }) => {
|
||||
const containerRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
containerRef.current = document.createElement('div');
|
||||
containerRef.current.classList.add('nb-container-of-header-submenu');
|
||||
document.body.appendChild(containerRef.current);
|
||||
|
||||
return () => {
|
||||
document.body.removeChild(containerRef.current);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<GlobalStyleForAdminLayout />
|
||||
<ConfigProvider getPopupContainer={() => containerRef.current}>{children}</ConfigProvider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const InternalAdminLayout = (props: any) => {
|
||||
const sideMenuRef = useRef<HTMLDivElement>();
|
||||
const result = useSystemSettings();
|
||||
@ -203,17 +270,18 @@ export const InternalAdminLayout = (props: any) => {
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<GlobalStyleForAdminLayout />
|
||||
<Layout.Header
|
||||
className={css`
|
||||
.ant-menu.ant-menu-dark .ant-menu-item-selected,
|
||||
.ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected,
|
||||
.ant-menu-submenu-horizontal.ant-menu-submenu-selected {
|
||||
background-color: ${token.colorBgHeaderMenuActive};
|
||||
color: ${token.colorTextHeaderMenuActive};
|
||||
background-color: ${token.colorBgHeaderMenuActive} !important;
|
||||
color: ${token.colorTextHeaderMenuActive} !important;
|
||||
}
|
||||
.ant-menu-dark.ant-menu-horizontal > .ant-menu-item:hover {
|
||||
background-color: ${token.colorBgHeaderMenuHover};
|
||||
color: ${token.colorTextHeaderMenuHover};
|
||||
background-color: ${token.colorBgHeaderMenuHover} !important;
|
||||
color: ${token.colorTextHeaderMenuHover} !important;
|
||||
}
|
||||
|
||||
position: fixed;
|
||||
@ -223,14 +291,15 @@ export const InternalAdminLayout = (props: any) => {
|
||||
line-height: var(--nb-header-height);
|
||||
padding: 0;
|
||||
z-index: 100;
|
||||
background-color: ${token.colorBgHeader};
|
||||
background-color: ${token.colorBgHeader} !important;
|
||||
|
||||
.ant-menu {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.ant-menu-item {
|
||||
color: ${token.colorTextHeaderMenu};
|
||||
.ant-menu-item,
|
||||
.ant-menu-submenu-horizontal {
|
||||
color: ${token.colorTextHeaderMenu} !important;
|
||||
}
|
||||
`}
|
||||
>
|
||||
@ -277,7 +346,9 @@ export const InternalAdminLayout = (props: any) => {
|
||||
width: 0;
|
||||
`}
|
||||
>
|
||||
<MenuEditor sideMenuRef={sideMenuRef} />
|
||||
<SetThemeOfHeaderSubmenu>
|
||||
<MenuEditor sideMenuRef={sideMenuRef} />
|
||||
</SetThemeOfHeaderSubmenu>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
||||
@ -18,9 +18,9 @@ import { createDesignable, DndContext, SortableItem, useDesignable, useDesigner
|
||||
import { Icon, useAPIClient, useSchemaInitializerRender } from '../../../';
|
||||
import { useCollectMenuItems, useMenuItem } from '../../../hooks/useMenuItem';
|
||||
import { useProps } from '../../hooks/useProps';
|
||||
import { useMenuTranslation } from './locale';
|
||||
import { MenuDesigner } from './Menu.Designer';
|
||||
import { findKeysByUid, findMenuItem } from './util';
|
||||
import { useMenuTranslation } from './locale';
|
||||
|
||||
const subMenuDesignerCss = css`
|
||||
position: relative;
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
"@formily/react": "2.x",
|
||||
"@formily/shared": "2.x",
|
||||
"antd": "5.x",
|
||||
"antd-style": "3.x",
|
||||
"async-mutex": "^0.3.2",
|
||||
"mysql2": "^2.3.3",
|
||||
"pg": "^8.7.3",
|
||||
|
||||
@ -0,0 +1,10 @@
|
||||
import { createStyles } from 'antd-style';
|
||||
|
||||
export const useStyles = createStyles(({ token }) => {
|
||||
return {
|
||||
button: {
|
||||
// @ts-ignore
|
||||
color: token.colorTextHeaderMenu + ' !important',
|
||||
},
|
||||
};
|
||||
});
|
||||
@ -3,9 +3,11 @@ import { Button, Dropdown } from 'antd';
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { AppNameInput } from './AppNameInput';
|
||||
import { useStyles } from './MultiAppManagerProvider.style';
|
||||
import { usePluginUtils } from './utils';
|
||||
|
||||
const MultiAppManager = () => {
|
||||
const { styles } = useStyles();
|
||||
const { data, run } = useRequest<{
|
||||
data: any[];
|
||||
}>(
|
||||
@ -46,7 +48,7 @@ const MultiAppManager = () => {
|
||||
}}
|
||||
menu={{ items }}
|
||||
>
|
||||
<Button title={'Apps'} icon={<Icon type={'AppstoreOutlined'} />} />
|
||||
<Button className={styles.button} title={'Apps'} icon={<Icon type={'AppstoreOutlined'} />} />
|
||||
</Dropdown>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user