Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-19 00:15:43 +01:00
Code Issues Projects Releases Wiki Activity

feat: tweak command bar UI styles to match sketches (#7447)

Browse Source
This commit is contained in:
David Leek 2024-06-25 14:30:39 +02:00 committed by GitHub
parent ed9d0cccbc
commit ffe306714b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 80 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/component/commandBar/CommandBar.tsx
View File

@ -30,9 +30,11 @@ export const CommandResultsPaper = styled(Paper)(({ theme }) => ({
position: 'absolute', position: 'absolute',
width: '100%', width: '100%',
left: 0, left: 0,
top: '20px', top: '39px',
zIndex: 2, zIndex: 4,
padding: theme.spacing(4, 1.5, 1.5), borderTop: theme.spacing(0),
padding: theme.spacing(4, 0, 1.5),
borderRadius: 0,
borderBottomLeftRadius: theme.spacing(1), borderBottomLeftRadius: theme.spacing(1),
borderBottomRightRadius: theme.spacing(1), borderBottomRightRadius: theme.spacing(1),
boxShadow: '0px 8px 20px rgba(33, 33, 33, 0.15)', boxShadow: '0px 8px 20px rgba(33, 33, 33, 0.15)',
@ -46,6 +48,7 @@ const StyledContainer = styled('div', {
})<{ })<{
active: boolean | undefined; active: boolean | undefined;
}>(({ theme, active }) => ({ }>(({ theme, active }) => ({
border: `1px solid transparent`,
display: 'flex', display: 'flex',
flexGrow: 1, flexGrow: 1,
alignItems: 'center', alignItems: 'center',
@ -68,13 +71,15 @@ const StyledSearch = styled('div')(({ theme }) => ({
width: '100%', width: '100%',
zIndex: 3, zIndex: 3,
'&:focus-within': { '&:focus-within': {
borderColor: theme.palette.primary.main, borderBottomLeftRadius: 0,
boxShadow: theme.boxShadows.main, borderBottomRightRadius: 0,
borderBottom: '0px',
}, },
})); }));
const StyledInputBase = styled(InputBase)(({ theme }) => ({ const StyledInputBase = styled(InputBase)(({ theme }) => ({
width: '100%', width: '100%',
minWidth: '300px',
backgroundColor: theme.palette.background.elevation1, backgroundColor: theme.palette.background.elevation1,
})); }));
@ -180,7 +185,7 @@ export const CommandBar = () => {
searchInputRef.current?.blur(); searchInputRef.current?.blur();
} }
}); });
const placeholder = `Search (${hotkey})`; const placeholder = `Command bar (${hotkey})`;
useOnClickOutside([searchContainerRef], hideSuggestions); useOnClickOutside([searchContainerRef], hideSuggestions);
useOnBlur(searchContainerRef, hideSuggestions); useOnBlur(searchContainerRef, hideSuggestions);
@ -212,6 +217,7 @@ export const CommandBar = () => {
setShowSuggestions(true); setShowSuggestions(true);
}} }}
/> />
<Box sx={{ width: (theme) => theme.spacing(4) }}> <Box sx={{ width: (theme) => theme.spacing(4) }}>
<ConditionallyRender <ConditionallyRender
condition={Boolean(value)} condition={Boolean(value)}
@ -239,7 +245,7 @@ export const CommandBar = () => {
<ConditionallyRender <ConditionallyRender
condition={Boolean(value) && showSuggestions} condition={Boolean(value) && showSuggestions}
show={ show={
<CommandResultsPaper className='dropdown-outline'> <CommandResultsPaper>
<CommandResultGroup <CommandResultGroup
groupName={'Flags'} groupName={'Flags'}
icon={'flag'} icon={'flag'}
@ -259,7 +265,7 @@ export const CommandBar = () => {
} }
elseShow={ elseShow={
showSuggestions && ( showSuggestions && (
<CommandResultsPaper className='dropdown-outline'> <CommandResultsPaper>
<RecentlyVisited <RecentlyVisited
lastVisited={lastVisited} lastVisited={lastVisited}
routes={allRoutes} routes={allRoutes}

37
frontend/src/component/commandBar/PageSuggestions.tsx
View File

@ -11,16 +11,25 @@ import { IconRenderer } from 'component/layout/MainLayout/NavigationSidebar/Icon
import type { Theme } from '@mui/material/styles/createTheme'; import type { Theme } from '@mui/material/styles/createTheme';
const listItemButtonStyle = (theme: Theme) => ({ const listItemButtonStyle = (theme: Theme) => ({
borderRadius: theme.spacing(0.5), border: `1px solid transparent`,
borderLeft: `${theme.spacing(0.5)} solid transparent`, borderLeft: `${theme.spacing(0.5)} solid transparent`,
'&.Mui-selected': { '&:hover': {
border: `1px solid ${theme.palette.primary.main}`,
borderLeft: `${theme.spacing(0.5)} solid ${theme.palette.primary.main}`, borderLeft: `${theme.spacing(0.5)} solid ${theme.palette.primary.main}`,
}, },
}); });
const StyledContainer = styled('div')(({ theme }) => ({
marginBottom: theme.spacing(3),
}));
const StyledButtonTypography = styled(Typography)(({ theme }) => ({
fontSize: theme.fontSizes.smallerBody,
}));
const StyledTypography = styled(Typography)(({ theme }) => ({ const StyledTypography = styled(Typography)(({ theme }) => ({
fontSize: theme.fontSizes.bodySize, fontSize: theme.fontSizes.smallBody,
padding: theme.spacing(0, 3), padding: theme.spacing(0, 2.5),
})); }));
const StyledListItemIcon = styled(ListItemIcon)(({ theme }) => ({ const StyledListItemIcon = styled(ListItemIcon)(({ theme }) => ({
@ -30,6 +39,7 @@ const StyledListItemIcon = styled(ListItemIcon)(({ theme }) => ({
const StyledListItemText = styled(ListItemText)(({ theme }) => ({ const StyledListItemText = styled(ListItemText)(({ theme }) => ({
margin: 0, margin: 0,
fontSize: theme.fontSizes.smallBody,
})); }));
const toListItemData = ( const toListItemData = (
@ -64,7 +74,7 @@ export const PageSuggestions = ({
const filtered = pages.filter((page) => routes[page]); const filtered = pages.filter((page) => routes[page]);
const pageItems = toListItemData(filtered, routes); const pageItems = toListItemData(filtered, routes);
return ( return (
<> <StyledContainer>
<StyledTypography color='textSecondary'>Pages</StyledTypography> <StyledTypography color='textSecondary'>Pages</StyledTypography>
<List> <List>
{pageItems.map((item, index) => ( {pageItems.map((item, index) => (
@ -75,15 +85,24 @@ export const PageSuggestions = ({
to={item.path} to={item.path}
sx={listItemButtonStyle} sx={listItemButtonStyle}
> >
<StyledListItemIcon>{item.icon}</StyledListItemIcon> <StyledListItemIcon
sx={(theme) => ({
color: theme.palette.primary.main,
fontSize: theme.fontSizes.smallBody,
minWidth: theme.spacing(0.5),
margin: theme.spacing(0, 1, 0, 0),
})}
>
{item.icon}
</StyledListItemIcon>
<StyledListItemText> <StyledListItemText>
<Typography color='textPrimary'> <StyledButtonTypography color='textPrimary'>
{item.name} {item.name}
</Typography> </StyledButtonTypography>
</StyledListItemText> </StyledListItemText>
</ListItemButton> </ListItemButton>
))} ))}
</List> </List>
</> </StyledContainer>
); );
}; };

52
frontend/src/component/commandBar/RecentlyVisited/RecentlyVisited.tsx
View File

@ -18,25 +18,41 @@ import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectO
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
const listItemButtonStyle = (theme: Theme) => ({ const listItemButtonStyle = (theme: Theme) => ({
borderRadius: theme.spacing(0.5), border: `1px solid transparent`,
borderLeft: `${theme.spacing(0.5)} solid transparent`, borderLeft: `${theme.spacing(0.5)} solid transparent`,
'&.Mui-selected': { '&:hover': {
border: `1px solid ${theme.palette.primary.main}`,
borderLeft: `${theme.spacing(0.5)} solid ${theme.palette.primary.main}`, borderLeft: `${theme.spacing(0.5)} solid ${theme.palette.primary.main}`,
}, },
}); });
const StyledContainer = styled('div')(({ theme }) => ({
marginBottom: theme.spacing(3),
}));
const StyledButtonTypography = styled(Typography)(({ theme }) => ({
fontSize: theme.fontSizes.smallerBody,
}));
const ColoredStyledProjectIcon = styled(StyledProjectIcon)(({ theme }) => ({
fill: theme.palette.primary.main,
stroke: theme.palette.primary.main,
}));
const StyledTypography = styled(Typography)(({ theme }) => ({ const StyledTypography = styled(Typography)(({ theme }) => ({
fontSize: theme.fontSizes.bodySize, fontSize: theme.fontSizes.smallBody,
padding: theme.spacing(0, 3), padding: theme.spacing(0, 2.5),
})); }));
const StyledListItemIcon = styled(ListItemIcon)(({ theme }) => ({ const StyledListItemIcon = styled(ListItemIcon)(({ theme }) => ({
minWidth: theme.spacing(4), minWidth: theme.spacing(0.5),
margin: theme.spacing(0.25, 0), margin: theme.spacing(0, 1, 0, 0),
color: theme.palette.primary.main,
})); }));
const StyledListItemText = styled(ListItemText)(({ theme }) => ({ const StyledListItemText = styled(ListItemText)(({ theme }) => ({
margin: 0, margin: 0,
fontSize: theme.fontSizes.smallBody,
})); }));
const toListItemButton = ( const toListItemButton = (
@ -86,7 +102,9 @@ const RecentlyVisitedFeatureButton = ({
<Icon>{'flag'}</Icon> <Icon>{'flag'}</Icon>
</StyledListItemIcon> </StyledListItemIcon>
<StyledListItemText> <StyledListItemText>
<Typography color='textPrimary'>{featureId}</Typography> <StyledButtonTypography color='textPrimary'>
{featureId}
</StyledButtonTypography>
</StyledListItemText> </StyledListItemText>
</ListItemButton> </ListItemButton>
); );
@ -105,15 +123,19 @@ const RecentlyVisitedPathButton = ({
to={path} to={path}
sx={listItemButtonStyle} sx={listItemButtonStyle}
> >
<StyledListItemIcon> <StyledListItemIcon
sx={(theme) => ({ color: theme.palette.primary.main })}
>
<ConditionallyRender <ConditionallyRender
condition={path === '/projects'} condition={path === '/projects'}
show={<StyledProjectIcon />} show={<ColoredStyledProjectIcon />}
elseShow={<IconRenderer path={path} />} elseShow={<IconRenderer path={path} />}
/> />
</StyledListItemIcon> </StyledListItemIcon>
<StyledListItemText> <StyledListItemText>
<Typography color='textPrimary'>{name}</Typography> <StyledButtonTypography color='textPrimary'>
{name}
</StyledButtonTypography>
</StyledListItemText> </StyledListItemText>
</ListItemButton> </ListItemButton>
); );
@ -135,10 +157,12 @@ const RecentlyVisitedProjectButton = ({
sx={listItemButtonStyle} sx={listItemButtonStyle}
> >
<StyledListItemIcon> <StyledListItemIcon>
<StyledProjectIcon /> <ColoredStyledProjectIcon />
</StyledListItemIcon> </StyledListItemIcon>
<StyledListItemText> <StyledListItemText>
<Typography color='textPrimary'>{project.name}</Typography> <StyledButtonTypography color='textPrimary'>
{project.name}
</StyledButtonTypography>
</StyledListItemText> </StyledListItemText>
</ListItemButton> </ListItemButton>
); );
@ -155,11 +179,11 @@ export const RecentlyVisited = ({
toListItemButton(item, routes, index), toListItemButton(item, routes, index),
); );
return ( return (
<> <StyledContainer>
<StyledTypography color='textSecondary'> <StyledTypography color='textSecondary'>
Recently visited Recently visited
</StyledTypography> </StyledTypography>
<List>{buttons}</List> <List>{buttons}</List>
</> </StyledContainer>
); );
}; };