This is an automated email from the ASF dual-hosted git repository.
diegopucci pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 59dda1fa05 fix: Navbar styles and Welcome page text (#19586)
59dda1fa05 is described below
commit 59dda1fa05488c921cacc8791d761cd9f9b86e9c
Author: Geido <[email protected]>
AuthorDate: Tue Apr 12 18:41:00 2022 +0300
fix: Navbar styles and Welcome page text (#19586)
* Enhance navbar styles
* Clean up style
---
.../src/assets/stylesheets/superset.less | 9 +-
.../src/views/CRUD/welcome/Welcome.tsx | 36 ++--
superset-frontend/src/views/components/Menu.tsx | 183 ++++++++++-----------
3 files changed, 115 insertions(+), 113 deletions(-)
diff --git a/superset-frontend/src/assets/stylesheets/superset.less
b/superset-frontend/src/assets/stylesheets/superset.less
index 97db49ec44..0cf419b30d 100644
--- a/superset-frontend/src/assets/stylesheets/superset.less
+++ b/superset-frontend/src/assets/stylesheets/superset.less
@@ -539,12 +539,11 @@ td.filtered {
width: 100% !important;
}
-// Remove this when the jinja menu/navbar is replaced with react.
-// This style already exists in that view
+/*
+Hides the logo while loading the page.
+Emotion styles will take care of the correct styling
+*/
.navbar-brand {
- display: flex;
- flex-direction: column;
- justify-content: center;
display: none;
}
diff --git a/superset-frontend/src/views/CRUD/welcome/Welcome.tsx
b/superset-frontend/src/views/CRUD/welcome/Welcome.tsx
index 056e02e8f6..2d564bc66f 100644
--- a/superset-frontend/src/views/CRUD/welcome/Welcome.tsx
+++ b/superset-frontend/src/views/CRUD/welcome/Welcome.tsx
@@ -113,23 +113,27 @@ const WelcomeContainer = styled.div`
`;
const WelcomeNav = styled.div`
- height: 50px;
- background-color: white;
- .navbar-brand {
- margin-left: ${({ theme }) => theme.gridUnit * 2}px;
- font-weight: ${({ theme }) => theme.typography.weights.bold};
- }
- .switch {
- float: right;
- margin: ${({ theme }) => theme.gridUnit * 5}px;
+ ${({ theme }) => `
display: flex;
- flex-direction: row;
- span {
- display: block;
- margin: ${({ theme }) => theme.gridUnit * 1}px;
- line-height: 1;
+ justify-content: space-between;
+ height: 50px;
+ background-color: ${theme.colors.grayscale.light5};
+ .welcome-header {
+ font-size: ${theme.typography.sizes.l}px;
+ padding: ${theme.gridUnit * 4}px ${theme.gridUnit * 2 + 2}px;
+ margin: 0 ${theme.gridUnit * 2}px;
}
- }
+ .switch {
+ display: flex;
+ flex-direction: row;
+ margin: ${theme.gridUnit * 4}px;
+ span {
+ display: block;
+ margin: ${theme.gridUnit * 1}px;
+ line-height: 1;
+ }
+ }
+ `}
`;
export const LoadingCards = ({ cover }: LoadingProps) => (
@@ -275,7 +279,7 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
return (
<WelcomeContainer>
<WelcomeNav>
- <span className="navbar-brand">Home</span>
+ <h1 className="welcome-header">Home</h1>
{isFeatureEnabled(FeatureFlag.THUMBNAILS) ? (
<div className="switch">
<AntdSwitch checked={checked} onChange={handleToggle} />
diff --git a/superset-frontend/src/views/components/Menu.tsx
b/superset-frontend/src/views/components/Menu.tsx
index d26742096a..3cc61f5243 100644
--- a/superset-frontend/src/views/components/Menu.tsx
+++ b/superset-frontend/src/views/components/Menu.tsx
@@ -84,101 +84,100 @@ export interface MenuObjectProps extends
MenuObjectChildProps {
}
const StyledHeader = styled.header`
- background-color: white;
- margin-bottom: 2px;
- &:nth-last-of-type(2) nav {
- margin-bottom: 2px;
- }
-
- .caret {
- display: none;
- }
- .navbar-brand {
- display: flex;
- flex-direction: column;
- justify-content: center;
- /* must be exactly the height of the Antd navbar */
- min-height: 50px;
- padding: ${({ theme }) =>
- `${theme.gridUnit}px ${theme.gridUnit * 2}px ${theme.gridUnit}px ${
- theme.gridUnit * 4
- }px`};
- max-width: ${({ theme }) => `${theme.gridUnit * 37}px`};
- img {
- height: 100%;
- object-fit: contain;
- }
- }
- .navbar-brand-text {
- border-left: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
- border-right: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
- height: 100%;
- color: ${({ theme }) => theme.colors.grayscale.dark1};
- padding-left: ${({ theme }) => theme.gridUnit * 4}px;
- padding-right: ${({ theme }) => theme.gridUnit * 4}px;
- margin-right: ${({ theme }) => theme.gridUnit * 6}px;
- font-size: ${({ theme }) => theme.gridUnit * 4}px;
- float: left;
- display: flex;
- flex-direction: column;
- justify-content: center;
-
- span {
- max-width: ${({ theme }) => theme.gridUnit * 58}px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- @media (max-width: 1127px) {
- display: none;
- }
- }
- .main-nav .ant-menu-submenu-title > svg {
- top: ${({ theme }) => theme.gridUnit * 5.25}px;
- }
- @media (max-width: 767px) {
- .navbar-brand {
- float: none;
- }
- }
- .ant-menu-horizontal .ant-menu-item {
- height: 100%;
- line-height: inherit;
- }
- .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;
- }
- .main-nav .ant-menu-submenu-title > svg:nth-child(1) {
- display: none;
- }
- .ant-menu-item-active > a {
- &:hover {
- color: ${({ theme }) => theme.colors.primary.base} !important;
- background-color: transparent !important;
+ ${({ theme }) => `
+ background-color: ${theme.colors.grayscale.light5};
+ margin-bottom: 2px;
+ &:nth-last-of-type(2) nav {
+ margin-bottom: 2px;
}
- }
- }
+ .caret {
+ display: none;
+ }
+ .navbar-brand {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ /* must be exactly the height of the Antd navbar */
+ min-height: 50px;
+ padding: ${theme.gridUnit}px ${theme.gridUnit * 2}px ${
+ theme.gridUnit
+ }px ${theme.gridUnit * 4}px;
+ max-width: ${theme.gridUnit * 37}px;
+ img {
+ height: 100%;
+ object-fit: contain;
+ }
+ }
+ .navbar-brand-text {
+ border-left: 1px solid ${theme.colors.grayscale.light2};
+ border-right: 1px solid ${theme.colors.grayscale.light2};
+ height: 100%;
+ color: ${theme.colors.grayscale.dark1};
+ padding-left: ${theme.gridUnit * 4}px;
+ padding-right: ${theme.gridUnit * 4}px;
+ margin-right: ${theme.gridUnit * 6}px;
+ font-size: ${theme.gridUnit * 4}px;
+ float: left;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
- .ant-menu-item a {
- &:hover {
- color: ${({ theme }) => theme.colors.grayscale.dark1};
- background-color: ${({ theme }) => theme.colors.primary.light5};
- border-bottom: none;
- margin: 0;
- &:after {
- opacity: 1;
- width: 100%;
+ span {
+ max-width: ${theme.gridUnit * 58}px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ @media (max-width: 1127px) {
+ display: none;
+ }
}
- }
- }
+ .main-nav .ant-menu-submenu-title > svg {
+ top: ${theme.gridUnit * 5.25}px;
+ }
+ @media (max-width: 767px) {
+ .navbar-brand {
+ float: none;
+ }
+ }
+ .ant-menu-horizontal .ant-menu-item {
+ height: 100%;
+ line-height: inherit;
+ }
+ .ant-menu > .ant-menu-item > a {
+ padding: ${theme.gridUnit * 4}px;
+ }
+ @media (max-width: 767px) {
+ .ant-menu-item {
+ padding: 0 ${theme.gridUnit * 6}px 0
+ ${theme.gridUnit * 3}px !important;
+ }
+ .ant-menu > .ant-menu-item > a {
+ padding: 0px;
+ }
+ .main-nav .ant-menu-submenu-title > svg:nth-child(1) {
+ display: none;
+ }
+ .ant-menu-item-active > a {
+ &:hover {
+ color: ${theme.colors.primary.base} !important;
+ background-color: transparent !important;
+ }
+ }
+ }
+ .ant-menu-item a {
+ &:hover {
+ color: ${theme.colors.grayscale.dark1};
+ background-color: ${theme.colors.primary.light5};
+ border-bottom: none;
+ margin: 0;
+ &:after {
+ opacity: 1;
+ width: 100%;
+ }
+ }
+ }
+ `}
`;
const globalStyles = (theme: SupersetTheme) => css`
.ant-menu-submenu.ant-menu-submenu-popup.ant-menu.ant-menu-light.ant-menu-submenu-placement-bottomLeft
{
