mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
fix: fix submenu header double line (#14631)
* fix submenu header * remove unused css * lint * address comment * address more comments
This commit is contained in:
parent
884ded0507
commit
60f903ff58
@ -21,7 +21,7 @@ import { Link, useHistory } from 'react-router-dom';
|
|||||||
import { styled } from '@superset-ui/core';
|
import { styled } from '@superset-ui/core';
|
||||||
import cx from 'classnames';
|
import cx from 'classnames';
|
||||||
import { debounce } from 'lodash';
|
import { debounce } from 'lodash';
|
||||||
import { Col, Row } from 'antd';
|
import { Row } from 'antd';
|
||||||
import { Menu, MenuMode } from 'src/common/components';
|
import { Menu, MenuMode } from 'src/common/components';
|
||||||
import Button, { OnClickHandler } from 'src/components/Button';
|
import Button, { OnClickHandler } from 'src/components/Button';
|
||||||
|
|
||||||
@ -42,6 +42,8 @@ const StyledHeader = styled.div`
|
|||||||
padding: 14px 0;
|
padding: 14px 0;
|
||||||
margin-right: ${({ theme }) => theme.gridUnit * 3}px;
|
margin-right: ${({ theme }) => theme.gridUnit * 3}px;
|
||||||
float: right;
|
float: right;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
}
|
}
|
||||||
.nav-right-collapse {
|
.nav-right-collapse {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -111,8 +113,8 @@ const StyledHeader = styled.div`
|
|||||||
@media (max-width: 767px) {
|
@media (max-width: 767px) {
|
||||||
.header,
|
.header,
|
||||||
.nav-right {
|
.nav-right {
|
||||||
float: left;
|
position: relative;
|
||||||
padding-left: ${({ theme }) => theme.gridUnit * 2}px;
|
margin-left: ${({ theme }) => theme.gridUnit * 2}px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
@ -150,13 +152,11 @@ export interface SubMenuProps {
|
|||||||
* otherwise, a 'You should not use <Link> outside a <Router>' error will be thrown */
|
* otherwise, a 'You should not use <Link> outside a <Router>' error will be thrown */
|
||||||
usesRouter?: boolean;
|
usesRouter?: boolean;
|
||||||
color?: string;
|
color?: string;
|
||||||
headerSize?: number;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const SubMenuComponent: React.FunctionComponent<SubMenuProps> = props => {
|
const SubMenuComponent: React.FunctionComponent<SubMenuProps> = props => {
|
||||||
const [showMenu, setMenu] = useState<MenuMode>('horizontal');
|
const [showMenu, setMenu] = useState<MenuMode>('horizontal');
|
||||||
const [navRightStyle, setNavRightStyle] = useState('nav-right');
|
const [navRightStyle, setNavRightStyle] = useState('nav-right');
|
||||||
const [navRightCol, setNavRightCol] = useState(8);
|
|
||||||
|
|
||||||
let hasHistory = true;
|
let hasHistory = true;
|
||||||
// If no parent <Router> component exists, useHistory throws an error
|
// If no parent <Router> component exists, useHistory throws an error
|
||||||
@ -177,14 +177,12 @@ const SubMenuComponent: React.FunctionComponent<SubMenuProps> = props => {
|
|||||||
props.buttons.length >= 3 &&
|
props.buttons.length >= 3 &&
|
||||||
window.innerWidth >= 795
|
window.innerWidth >= 795
|
||||||
) {
|
) {
|
||||||
setNavRightCol(8);
|
|
||||||
setNavRightStyle('nav-right');
|
setNavRightStyle('nav-right');
|
||||||
} else if (
|
} else if (
|
||||||
props.buttons &&
|
props.buttons &&
|
||||||
props.buttons.length >= 3 &&
|
props.buttons.length >= 3 &&
|
||||||
window.innerWidth <= 795
|
window.innerWidth <= 795
|
||||||
) {
|
) {
|
||||||
setNavRightCol(24);
|
|
||||||
setNavRightStyle('nav-right-collapse');
|
setNavRightStyle('nav-right-collapse');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -197,64 +195,53 @@ const SubMenuComponent: React.FunctionComponent<SubMenuProps> = props => {
|
|||||||
return (
|
return (
|
||||||
<StyledHeader>
|
<StyledHeader>
|
||||||
<Row className="menu" role="navigation">
|
<Row className="menu" role="navigation">
|
||||||
{props.name && (
|
{props.name && <div className="header">{props.name}</div>}
|
||||||
<Col flex="none">
|
<Menu mode={showMenu} style={{ backgroundColor: 'transparent' }}>
|
||||||
<div className="header">{props.name}</div>
|
{props.tabs?.map(tab => {
|
||||||
</Col>
|
if ((props.usesRouter || hasHistory) && !!tab.usesRouter) {
|
||||||
)}
|
return (
|
||||||
<Col flex="auto" xs={24}>
|
<Menu.Item key={tab.label}>
|
||||||
<Menu mode={showMenu} style={{ backgroundColor: 'transparent' }}>
|
<li
|
||||||
{props.tabs &&
|
role="tab"
|
||||||
props.tabs.map(tab => {
|
data-test={tab['data-test']}
|
||||||
if ((props.usesRouter || hasHistory) && !!tab.usesRouter) {
|
className={tab.name === props.activeChild ? 'active' : ''}
|
||||||
return (
|
>
|
||||||
<Menu.Item key={tab.label}>
|
<div>
|
||||||
<li
|
<Link to={tab.url || ''}>{tab.label}</Link>
|
||||||
role="tab"
|
</div>
|
||||||
data-test={tab['data-test']}
|
</li>
|
||||||
className={
|
</Menu.Item>
|
||||||
tab.name === props.activeChild ? 'active' : ''
|
);
|
||||||
}
|
}
|
||||||
>
|
|
||||||
<div>
|
|
||||||
<Link to={tab.url || ''}>{tab.label}</Link>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</Menu.Item>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Menu.Item key={tab.label}>
|
<Menu.Item key={tab.label}>
|
||||||
<li
|
<li
|
||||||
className={cx('no-router', {
|
className={cx('no-router', {
|
||||||
active: tab.name === props.activeChild,
|
active: tab.name === props.activeChild,
|
||||||
})}
|
})}
|
||||||
role="tab"
|
role="tab"
|
||||||
>
|
>
|
||||||
<a href={tab.url} onClick={tab.onClick}>
|
<a href={tab.url} onClick={tab.onClick}>
|
||||||
{tab.label}
|
{tab.label}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</Menu>
|
</Menu>
|
||||||
</Col>
|
<div className={navRightStyle}>
|
||||||
<Col lg={8} md={navRightCol} sm={24} xs={24}>
|
{props.buttons?.map((btn, i) => (
|
||||||
<div className={navRightStyle}>
|
<Button
|
||||||
{props.buttons?.map((btn, i) => (
|
key={i}
|
||||||
<Button
|
buttonStyle={btn.buttonStyle}
|
||||||
key={i}
|
onClick={btn.onClick}
|
||||||
buttonStyle={btn.buttonStyle}
|
data-test={btn['data-test']}
|
||||||
onClick={btn.onClick}
|
>
|
||||||
data-test={btn['data-test']}
|
{btn.name}
|
||||||
>
|
</Button>
|
||||||
{btn.name}
|
))}
|
||||||
</Button>
|
</div>
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
</Row>
|
||||||
{props.children}
|
{props.children}
|
||||||
</StyledHeader>
|
</StyledHeader>
|
||||||
|
@ -344,11 +344,7 @@ function AnnotationLayersList({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<SubMenu
|
<SubMenu name={t('Annotation layers')} buttons={subMenuButtons} />
|
||||||
headerSize={8}
|
|
||||||
name={t('Annotation layers')}
|
|
||||||
buttons={subMenuButtons}
|
|
||||||
/>
|
|
||||||
<AnnotationLayerModal
|
<AnnotationLayerModal
|
||||||
addDangerToast={addDangerToast}
|
addDangerToast={addDangerToast}
|
||||||
layer={currentAnnotationLayer}
|
layer={currentAnnotationLayer}
|
||||||
|
@ -303,7 +303,7 @@ function CssTemplatesList({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<SubMenu headerSize={8} {...menuData} />
|
<SubMenu {...menuData} />
|
||||||
<CssTemplateModal
|
<CssTemplateModal
|
||||||
addDangerToast={addDangerToast}
|
addDangerToast={addDangerToast}
|
||||||
cssTemplate={currentCssTemplate}
|
cssTemplate={currentCssTemplate}
|
||||||
|
Loading…
Reference in New Issue
Block a user