Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00
Code Issues Projects Releases Wiki Activity

Improve tabs UI on smaller devices (#2014)

Browse Source 
* Improve tabs UI on smaller devices

* Improve tabs UI on smaller devices

* bug fix

* add proper scrollable tabs

* removed centered from Tabs (conflicts with scrollable)

* PR comments
This commit is contained in:
andreas-unleash 2022-09-06 15:32:42 +03:00 committed by GitHub
parent 13e0130824
commit b74b2bf070
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 68 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
frontend/src/component/admin/menu/AdminMenu.tsx
View File

@ -1,28 +1,30 @@
import React from 'react';
import { NavLink, useLocation } from 'react-router-dom';
import { Paper, Tab, Tabs } from '@mui/material';
import { Paper, Tab, Tabs, Theme } from '@mui/material';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { useInstanceStatus } from 'hooks/api/getters/useInstanceStatus/useInstanceStatus';
const navLinkStyle = {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
width: '100%',
textDecoration: 'none',
color: 'inherit',
padding: '0.8rem 1.5rem',
};
const activeNavLinkStyle: React.CSSProperties = {
fontWeight: 'bold',
borderRadius: '3px',
padding: '0.8rem 1.5rem',
};
import { useTheme } from '@mui/material/styles';
const createNavLinkStyle = (props: {
isActive: boolean;
theme: Theme;
}): React.CSSProperties => {
const navLinkStyle = {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
width: '100%',
textDecoration: 'none',
color: 'inherit',
padding: props.theme.spacing(1.5, 3),
};
const activeNavLinkStyle: React.CSSProperties = {
fontWeight: 'bold',
borderRadius: '3px',
padding: props.theme.spacing(1.5, 3),
};
return props.isActive
? { ...navLinkStyle, ...activeNavLinkStyle }
: navLinkStyle;
@ -30,6 +32,7 @@ const createNavLinkStyle = (props: {
function AdminMenu() {
const { uiConfig } = useUiConfig();
const theme = useTheme();
const { pathname } = useLocation();
const { isBilling } = useInstanceStatus();
const { flags } = uiConfig;
@ -42,11 +45,21 @@ function AdminMenu() {
boxShadow: 'none',
}}
>
<Tabs centered value={pathname}>
<Tabs
value={pathname}
variant="scrollable"
scrollButtons="auto"
allowScrollButtonsMobile
>
<Tab
value="/admin/users"
label={
<NavLink to="/admin/users" style={createNavLinkStyle}>
<NavLink
to="/admin/users"
style={({ isActive }) =>
createNavLinkStyle({ isActive, theme })
}
>
<span>Users</span>
</NavLink>
}
@ -57,7 +70,9 @@ function AdminMenu() {
label={
<NavLink
to="/admin/groups"
style={createNavLinkStyle}
style={({ isActive }) =>
createNavLinkStyle({ isActive, theme })
}
>
<span>Groups</span>
</NavLink>
@ -70,7 +85,9 @@ function AdminMenu() {
label={
<NavLink
to="/admin/roles"
style={createNavLinkStyle}
style={({ isActive }) =>
createNavLinkStyle({ isActive, theme })
}
>
<span>Project roles</span>
</NavLink>
@ -80,7 +97,12 @@ function AdminMenu() {
<Tab
value="/admin/api"
label={
<NavLink to="/admin/api" style={createNavLinkStyle}>
<NavLink
to="/admin/api"
style={({ isActive }) =>
createNavLinkStyle({ isActive, theme })
}
>
API access
</NavLink>
}
@ -91,7 +113,9 @@ function AdminMenu() {
label={
<NavLink
to="/admin/cors"
style={createNavLinkStyle}
style={({ isActive }) =>
createNavLinkStyle({ isActive, theme })
}
>
CORS origins
</NavLink>
@ -101,7 +125,12 @@ function AdminMenu() {
<Tab
value="/admin/auth"
label={
<NavLink to="/admin/auth" style={createNavLinkStyle}>
<NavLink
to="/admin/auth"
style={({ isActive }) =>
createNavLinkStyle({ isActive, theme })
}
>
Single sign-on
</NavLink>
}
@ -112,7 +141,9 @@ function AdminMenu() {
label={
<NavLink
to="/admin/billing"
style={createNavLinkStyle}
style={({ isActive }) =>
createNavLinkStyle({ isActive, theme })
}
>
Billing
</NavLink>

2
frontend/src/component/common/TabNav/TabNav/TabNav.tsx
View File

@ -15,7 +15,6 @@ interface ITabData {
label: string;
component: ReactNode;
}
export const TabNav = ({
tabData,
className = '',
@ -24,7 +23,6 @@ export const TabNav = ({
}: ITabNavProps) => {
const { classes: styles } = useStyles();
const [activeTab, setActiveTab] = useState(startingTab);
const renderTabs = () =>
tabData.map((tab, index) => (
<Tab

16
frontend/src/themes/theme.ts
View File

@ -262,20 +262,25 @@ export default createTheme({
},
MuiTabs: {
styleOverrides: {
root: {
root: ({ theme }) => ({
'& .MuiTabs-indicator': {
height: '4px',
},
},
'& .MuiTabs-flexContainer': {
minHeight: '70px',
maxHeight: '70px',
},
}),
},
},
MuiTab: {
styleOverrides: {
root: {
root: ({ theme }) => ({
color: colors.grey[900],
fontSize: '1rem',
textTransform: 'none',
fontWeight: 400,
lineHeight: '1',
minHeight: '62px',
'&:hover': {
backgroundColor: colors.grey[200],
@ -287,7 +292,10 @@ export default createTheme({
'& > span': {
color: colors.purple[900],
},
},
[theme.breakpoints.down('md')]: {
padding: '12px 0px',
},
}),
},
},
MuiAccordion: {