Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: nav submenu dropdown styles #14580

Merged
merged 10 commits into from May 17, 2021
Merged

fix: nav submenu dropdown styles #14580

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
6c939dd
fix nav submenu dropdown styles
pkdotson May 11, 2021
87e866e
lint
pkdotson May 11, 2021
abbd85f
fix mobile view styles
pkdotson May 11, 2021
8283112
run lint
pkdotson May 11, 2021
9f64e43
Merge branch 'master' into fix-menu-styles
pkdotson May 11, 2021
2df7684
address comments
pkdotson May 13, 2021
8810bd7
Merge branch 'fix-menu-styles' of https://github.com/preset-io/supers…
pkdotson May 13, 2021
2f8b8f6
Merge branch 'master' of https://github.com/preset-io/superset into f…
pkdotson May 14, 2021
f1c626c
undo comit lock files
pkdotson May 17, 2021
9391f23
Update superset-frontend/src/common/components/index.tsx
pkdotson May 17, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
31 changes: 23 additions & 8 deletions superset-frontend/src/common/components/index.tsx
View file
Open in desktop
Expand Up @@ -123,18 +123,29 @@ export const StyledNav = styled(AntdMenu)`
color: ${({ theme }) => theme.colors.grayscale.dark1};
}
}

&:not(.ant-menu-dark) > .ant-menu-submenu,
&:not(.ant-menu-dark) > .ant-menu-item {
margin: 0px;
&:hover {
border-bottom: none;
}
}

@media (min-width: 767px) {
&:not(.ant-menu-dark) > .ant-menu-submenu,
&:not(.ant-menu-dark) > .ant-menu-item {
margin: 0px;
}
}

& > .ant-menu-item > a {
padding: ${({ theme }) => theme.gridUnit * 4}px;
}
`;

export const StyledSubMenu = styled(AntdMenu.SubMenu)`
color: ${({ theme }) => theme.colors.grayscale.dark1};
border-bottom: none;
.ant-menu-submenu-open,
.ant-menu-submenu-active {
background-color: ${({ theme }) => theme.colors.primary.light5};
Expand All @@ -149,12 +160,9 @@ export const StyledNav = styled(AntdMenu)`
}
}
}
`;

export const StyledSubMenu = styled(AntdMenu.SubMenu)`
color: ${({ theme }) => theme.colors.grayscale.dark1};
border-bottom: none;
.ant-menu-submenu-title {
position: relative;
top: ${({ theme }) => -theme.gridUnit - 3}px;
&:after {
content: '';
position: absolute;
Expand All @@ -168,17 +176,24 @@ export const StyledSubMenu = styled(AntdMenu.SubMenu)`
background-color: ${({ theme }) => theme.colors.primary.base};
}
}
.ant-menu-submenu-arrow {
top: 67%;
}
& > .ant-menu-submenu-title {
padding: 0 ${({ theme }) => theme.gridUnit * 6}px 0
${({ theme }) => theme.gridUnit * 3}px !important;
svg {
position: absolute;
top: ${({ theme }) => theme.gridUnit * 4}px;
top: ${({ theme }) => theme.gridUnit * 4 + 7}px;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps top: ${({ theme }) => theme.gridUnit * 5 + 3}px;?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This depends on what relationship we want the svg to have to the grid unit. When pixel amounts are hardcoded, it should be to format the thing being positioned so that it can look right in any grid. We could also do theme.gridUnit * 6 - 1, for example.

right: ${({ theme }) => theme.gridUnit}px;
width: ${({ theme }) => theme.gridUnit * 6}px;
}
& > span {
position: relative;
top: 7px;
}
&:hover {
color: ${({ theme }) => theme.colors.grayscale.dark1};
color: ${({ theme }) => theme.colors.primary.base};
}
}
`;
Expand Down
21 changes: 18 additions & 3 deletions superset-frontend/src/components/Menu/Menu.tsx
View file
Open in desktop
Expand Up @@ -17,8 +17,9 @@
* under the License.
*/
import React, { useState, useEffect } from 'react';
import { styled } from '@superset-ui/core';
import { styled, css } from '@superset-ui/core';
import { debounce } from 'lodash';
import { Global } from '@emotion/react';
import { getUrlParam } from 'src/utils/urlUtils';
import { MainNav as DropdownMenu, MenuMode } from 'src/common/components';
import { Link } from 'react-router-dom';
Expand Down Expand Up @@ -98,10 +99,14 @@ const StyledHeader = styled.header`
height: 100%;
line-height: inherit;
}
/*.ant-menu > .ant-menu-item > a {
.ant-menu > .ant-menu-item > a {
padding: ${({ theme }) => theme.gridUnit * 4}px;
}*/
}
@media (max-width: 767px) {
.ant-menu-item {
padding: 0 ${({ theme }) => theme.gridUnit * 6}px 0
${({ theme }) => theme.gridUnit * 3}px !important;
}
.ant-menu > .ant-menu-item > a {
padding: 0px;
}
Expand Down Expand Up @@ -200,6 +205,16 @@ export function Menu({
};
return (
<StyledHeader className="top" id="main-menu" role="navigation">
<Global
styles={css`
.ant-menu-submenu.ant-menu-submenu-popup.ant-menu.ant-menu-light.ant-menu-submenu-placement-bottomLeft {
border-radius: 0px;
}
.ant-menu-submenu.ant-menu-submenu-popup.ant-menu.ant-menu-light {
border-radius: 0px;
}
`}
/>
<Row>
<Col lg={12} md={24} sm={24} xs={24}>
<a className="navbar-brand" href={brand.path}>
Expand Down
21 changes: 0 additions & 21 deletions superset-frontend/stylesheets/superset.less
View file
Open in desktop
Expand Up @@ -582,24 +582,3 @@ hr {
background-image: url('../images/icons/error_solid_small_red.svg') !important;
background-position: -2px center !important;
}

// AntD overrides since these are injected as inline styles and can't
// be overriden in emotion
.ant-menu-submenu.ant-menu-submenu-popup.ant-menu.ant-menu-light.ant-menu-submenu-placement-bottomLeft {
top: 51px !important;
margin-left: -2px !important;
@media (max-width: 767px) {
top: 269px !important;
}
& > .ant-menu {
border-radius: 0px !important;
}
}

.ant-menu-submenu.ant-menu-submenu-popup.ant-menu.ant-menu-light {
top: 51px !important;
border-radius: 0px !important;
@media (max-width: 767px) {
top: 269px !important;
}
}