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

chore(1-3349): no border for event timeline / dropdowns to the right (#9252)

Browse Source 
Removes the border between the accordion summary and its contents for
the event timeline, and moves dropdown selectors to the right to avoid
overcrowding on the left.


![image](https://github.com/user-attachments/assets/b0df4c11-8e61-46f8-b844-349a709bd4e9)
This commit is contained in:
Thomas Heartman 2025-02-07 11:11:54 +01:00 committed by GitHub
parent f9bd9d2d03
commit 4f30ce7155
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 64 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
frontend/src/component/events/EventTimeline/EventTimelineHeader/EventTimelineHeader.tsx
View File

@ -94,6 +94,27 @@ export const EventTimelineHeader = ({
/>
);
const TimeSpanFilter = () => (
<StyledFilter
select
size='small'
variant='outlined'
value={timeSpan.key}
onChange={(e) =>
setTimeSpan(
timeSpanOptions.find(({ key }) => key === e.target.value) ||
timeSpanOptions[0],
)
}
>
{timeSpanOptions.map(({ key, label }) => (
<MenuItem key={key} value={key}>
{label}
</MenuItem>
))}
</StyledFilter>
);
return (
<>
<StyledCol>
@ -102,49 +123,37 @@ export const EventTimelineHeader = ({
{totalEvents === 1 ? '' : 's'}
<HelpIcon tooltip='These are key events per environment across all your projects. For more details, visit the event log.' />
</StyledTimelineEventsCount>
<StyledFilter
select
size='small'
variant='outlined'
value={timeSpan.key}
onChange={(e) =>
setTimeSpan(
timeSpanOptions.find(
({ key }) => key === e.target.value,
) || timeSpanOptions[0],
)
}
>
{timeSpanOptions.map(({ key, label }) => (
<MenuItem key={key} value={key}>
{label}
</MenuItem>
))}
</StyledFilter>
{frontendHeaderRefactor && <EnvironmentFilter />}
{!frontendHeaderRefactor && <TimeSpanFilter />}
</StyledCol>
<StyledCol>
{frontendHeaderRefactor ? (
<>
<TimeSpanFilter />
<EnvironmentFilter />
</>
) : (
<>
<EventTimelineHeaderTip />
<EnvironmentFilter />
<Tooltip title='Hide event timeline' arrow>
<IconButton
aria-label='close'
size='small'
onClick={() => {
trackEvent('event-timeline', {
props: {
eventType: 'close',
},
});
setOpen(false);
}}
>
<CloseIcon />
</IconButton>
</Tooltip>
</>
)}
</StyledCol>
{!frontendHeaderRefactor && (
<StyledCol>
<EventTimelineHeaderTip />
<EnvironmentFilter />
<Tooltip title='Hide event timeline' arrow>
<IconButton
aria-label='close'
size='small'
onClick={() => {
trackEvent('event-timeline', {
props: {
eventType: 'close',
},
});
setOpen(false);
}}
>
<CloseIcon />
</IconButton>
</Tooltip>
</StyledCol>
)}
</>
);
};

21
frontend/src/component/personalDashboard/PersonalDashboard.tsx
View File

@ -71,12 +71,17 @@ const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({
'&>.MuiAccordionSummary-content.MuiAccordionSummary-content': {
margin: '0',
},
"&[aria-expanded='true']": {
// only add the border when it's open
borderBottom: `1px solid ${theme.palette.divider}`,
},
}));
const StyledAccordionSummaryWithBorder = styled(StyledAccordionSummary)(
({ theme }) => ({
"&[aria-expanded='true']": {
// only add the border when it's open
borderBottom: `1px solid ${theme.palette.divider}`,
},
}),
);
const StyledAccordionDetails = styled(AccordionDetails)({
padding: 0,
});
@ -231,7 +236,7 @@ export const PersonalDashboard = () => {
expanded={expandProjects ?? true}
onChange={() => toggleSectionState('projects')}
>
<StyledAccordionSummary
<StyledAccordionSummaryWithBorder
expandIcon={
<ExpandMore titleAccess='Toggle projects section' />
}
@ -247,7 +252,7 @@ export const PersonalDashboard = () => {
you are a member of
</AccordionSummarySubtitle>
</AccordionSummaryText>
</StyledAccordionSummary>
</StyledAccordionSummaryWithBorder>
<StyledAccordionDetails>
<MyProjects
owners={personalDashboard?.projectOwners ?? []}
@ -266,7 +271,7 @@ export const PersonalDashboard = () => {
expanded={expandFlags ?? true}
onChange={() => toggleSectionState('flags')}
>
<StyledAccordionSummary
<StyledAccordionSummaryWithBorder
expandIcon={
<ExpandMore titleAccess='Toggle flags section' />
}
@ -281,7 +286,7 @@ export const PersonalDashboard = () => {
Feature flags you have created or favorited
</AccordionSummarySubtitle>
</AccordionSummaryText>
</StyledAccordionSummary>
</StyledAccordionSummaryWithBorder>
<StyledAccordionDetails>
<MyFlags
hasProjects={projects?.length > 0}