mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-25 00:07:47 +01:00
feat: Stage timeline styling (#6903)
This commit is contained in:
Mateusz Kwasniewski
GitHub
parent
e7fe31ec6a
commit
d59f1adfe5
8
frontend/src/assets/icons/stage-archived.svg
Normal file
8
frontend/src/assets/icons/stage-archived.svg
Normal file
@ -0,0 +1,8 @@
|
||||
<svg width="40" height="20" viewBox="0 0 40 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 4C0 1.79086 1.79086 0 4 0H36C38.2091 0 40 1.79086 40 4V16C40 18.2091 38.2091 20 36 20H4C1.79086 20 0 18.2091 0 16V4Z" fill="#F3F3FD"/>
|
||||
<path d="M8.48149 4.7716C9.27968 3.84038 10.7203 3.84038 11.5185 4.7716L14.8844 8.69842C15.5263 9.4474 15.5263 10.5526 14.8844 11.3016L11.5185 15.2284C10.7203 16.1596 9.27968 16.1596 8.48149 15.2284L5.11564 11.3016C4.47366 10.5526 4.47366 9.4474 5.11564 8.69842L8.48149 4.7716Z" fill="#9F9FA1"/>
|
||||
<path d="M17.2778 4.12081C16.0805 2.72397 13.9195 2.72397 12.7222 4.12081L9.35639 8.04763C8.39341 9.17109 8.39341 10.8289 9.35639 11.9524L12.7222 15.8792C13.9195 17.276 16.0805 17.276 17.2778 15.8792L20.6436 11.9524C21.6066 10.8289 21.6066 9.1711 20.6436 8.04763L17.2778 4.12081Z" fill="#9F9FA1" stroke="#F3F3FD" stroke-width="2"/>
|
||||
<path d="M22.2778 4.12081C21.0805 2.72397 18.9195 2.72397 17.7222 4.12081L14.3564 8.04763C13.3934 9.17109 13.3934 10.8289 14.3564 11.9524L17.7222 15.8792C18.9195 17.276 21.0805 17.276 22.2778 15.8792L25.6436 11.9524C26.6066 10.8289 26.6066 9.1711 25.6436 8.04763L22.2778 4.12081Z" fill="#9F9FA1" stroke="#F3F3FD" stroke-width="2"/>
|
||||
<path d="M27.2778 4.12081C26.0805 2.72397 23.9195 2.72397 22.7222 4.12081L19.3564 8.04763C18.3934 9.17109 18.3934 10.8289 19.3564 11.9524L22.7222 15.8792C23.9195 17.276 26.0805 17.276 27.2778 15.8792L30.6436 11.9524C31.6066 10.8289 31.6066 9.17109 30.6436 8.04763L27.2778 4.12081Z" fill="#9F9FA1" stroke="#F3F3FD" stroke-width="2"/>
|
||||
<path d="M32.2778 4.12081C31.0805 2.72397 28.9195 2.72397 27.7222 4.12081L24.3564 8.04763C23.3934 9.17109 23.3934 10.8289 24.3564 11.9524L27.7222 15.8792C28.9195 17.276 31.0805 17.276 32.2778 15.8792L35.6436 11.9524C36.6066 10.8289 36.6066 9.17109 35.6436 8.04763L32.2778 4.12081Z" fill="#6E6E70" stroke="#F3F3FD" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
7
frontend/src/assets/icons/stage-completed-discarded.svg
Normal file
7
frontend/src/assets/icons/stage-completed-discarded.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<svg width="40" height="20" viewBox="0 0 40 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 4C0 1.79086 1.79086 0 4 0H36C38.2091 0 40 1.79086 40 4V16C40 18.2091 38.2091 20 36 20H4C1.79086 20 0 18.2091 0 16V4Z" fill="#FFF2F3"/>
|
||||
<path d="M10.4815 4.7716C11.2797 3.84038 12.7203 3.84038 13.5185 4.7716L16.8844 8.69842C17.5263 9.4474 17.5263 10.5526 16.8844 11.3016L13.5185 15.2284C12.7203 16.1596 11.2797 16.1596 10.4815 15.2284L7.11564 11.3016C6.47366 10.5526 6.47366 9.4474 7.11564 8.69842L10.4815 4.7716Z" fill="#FEB0B7"/>
|
||||
<path d="M19.2778 4.12081C18.0805 2.72397 15.9195 2.72397 14.7222 4.12081L11.3564 8.04763C10.3934 9.17109 10.3934 10.8289 11.3564 11.9524L14.7222 15.8792C15.9195 17.276 18.0805 17.276 19.2778 15.8792L22.6436 11.9524C23.6066 10.8289 23.6066 9.1711 22.6436 8.04763L19.2778 4.12081Z" fill="#FEB0B7" stroke="#F3F3FD" stroke-width="2"/>
|
||||
<path d="M24.2778 4.12081C23.0805 2.72397 20.9195 2.72397 19.7222 4.12081L16.3564 8.04763C15.3934 9.17109 15.3934 10.8289 16.3564 11.9524L19.7222 15.8792C20.9195 17.276 23.0805 17.276 24.2778 15.8792L27.6436 11.9524C28.6066 10.8289 28.6066 9.17109 27.6436 8.04763L24.2778 4.12081Z" fill="#FEB0B7" stroke="#F3F3FD" stroke-width="2"/>
|
||||
<path d="M29.2778 4.12081C28.0805 2.72397 25.9195 2.72397 24.7222 4.12081L21.3564 8.04763C20.3934 9.17109 20.3934 10.8289 21.3564 11.9524L24.7222 15.8792C25.9195 17.276 28.0805 17.276 29.2778 15.8792L32.6436 11.9524C33.6066 10.8289 33.6066 9.1711 32.6436 8.04763L29.2778 4.12081Z" fill="#D93644" stroke="#F3F3FD" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
7
frontend/src/assets/icons/stage-completed.svg
Normal file
7
frontend/src/assets/icons/stage-completed.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<svg width="40" height="20" viewBox="0 0 40 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 4C0 1.79086 1.79086 0 4 0H36C38.2091 0 40 1.79086 40 4V16C40 18.2091 38.2091 20 36 20H4C1.79086 20 0 18.2091 0 16V4Z" fill="#F4FAEB"/>
|
||||
<path d="M10.4815 4.7716C11.2797 3.84038 12.7203 3.84038 13.5185 4.7716L16.8844 8.69842C17.5263 9.4474 17.5263 10.5526 16.8844 11.3016L13.5185 15.2284C12.7203 16.1596 11.2797 16.1596 10.4815 15.2284L7.11564 11.3016C6.47366 10.5526 6.47366 9.4474 7.11564 8.69842L10.4815 4.7716Z" fill="#B0D182"/>
|
||||
<path d="M19.2778 4.12081C18.0805 2.72397 15.9195 2.72397 14.7222 4.12081L11.3564 8.04763C10.3934 9.17109 10.3934 10.8289 11.3564 11.9524L14.7222 15.8792C15.9195 17.276 18.0805 17.276 19.2778 15.8792L22.6436 11.9524C23.6066 10.8289 23.6066 9.1711 22.6436 8.04763L19.2778 4.12081Z" fill="#B0D182" stroke="#F3F3FD" stroke-width="2"/>
|
||||
<path d="M24.2778 4.12081C23.0805 2.72397 20.9195 2.72397 19.7222 4.12081L16.3564 8.04763C15.3934 9.17109 15.3934 10.8289 16.3564 11.9524L19.7222 15.8792C20.9195 17.276 23.0805 17.276 24.2778 15.8792L27.6436 11.9524C28.6066 10.8289 28.6066 9.1711 27.6436 8.04763L24.2778 4.12081Z" fill="#B0D182" stroke="#F3F3FD" stroke-width="2"/>
|
||||
<path d="M29.2778 4.12081C28.0805 2.72397 25.9195 2.72397 24.7222 4.12081L21.3564 8.04763C20.3934 9.17109 20.3934 10.8289 21.3564 11.9524L24.7222 15.8792C25.9195 17.276 28.0805 17.276 29.2778 15.8792L32.6436 11.9524C33.6066 10.8289 33.6066 9.1711 32.6436 8.04763L29.2778 4.12081Z" fill="#68A611" stroke="#F3F3FD" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
4
frontend/src/assets/icons/stage-initial.svg
Normal file
4
frontend/src/assets/icons/stage-initial.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg width="40" height="20" viewBox="0 0 40 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="39" height="19" rx="3.5" stroke="#BDBDBF" stroke-dasharray="2 2"/>
|
||||
<path d="M18.8611 5.09699C19.4598 4.39858 20.5402 4.39858 21.1389 5.09699L24.5047 9.02381C24.9862 9.58555 24.9862 10.4145 24.5047 10.9762L21.1389 14.903C20.5402 15.6014 19.4598 15.6014 18.8611 14.903L15.4953 10.9762C15.0138 10.4145 15.0138 9.58555 15.4953 9.02381L18.8611 5.09699Z" stroke="#78787A"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 508 B |
6
frontend/src/assets/icons/stage-live.svg
Normal file
6
frontend/src/assets/icons/stage-live.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<svg width="40" height="20" viewBox="0 0 40 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 4C0 1.79086 1.79086 0 4 0H36C38.2091 0 40 1.79086 40 4V16C40 18.2091 38.2091 20 36 20H4C1.79086 20 0 18.2091 0 16V4Z" fill="#F3F3FD"/>
|
||||
<path d="M12.4815 4.7716C13.2797 3.84038 14.7203 3.84038 15.5185 4.7716L18.8844 8.69842C19.5263 9.4474 19.5263 10.5526 18.8844 11.3016L15.5185 15.2284C14.7203 16.1596 13.2797 16.1596 12.4815 15.2284L9.11564 11.3016C8.47366 10.5526 8.47366 9.4474 9.11564 8.69842L12.4815 4.7716Z" fill="#BEBBF3"/>
|
||||
<path d="M22.2778 4.12081C21.0805 2.72397 18.9195 2.72397 17.7222 4.12081L14.3564 8.04763C13.3934 9.17109 13.3934 10.8289 14.3564 11.9524L17.7222 15.8792C18.9195 17.276 21.0805 17.276 22.2778 15.8792L25.6436 11.9524C26.6066 10.8289 26.6066 9.1711 25.6436 8.04763L22.2778 4.12081Z" fill="#BEBBF3" stroke="#F3F3FD" stroke-width="2"/>
|
||||
<path d="M28.2778 4.12081C27.0805 2.72397 24.9195 2.72397 23.7222 4.12081L20.3564 8.04763C19.3934 9.17109 19.3934 10.8289 20.3564 11.9524L23.7222 15.8792C24.9195 17.276 27.0805 17.276 28.2778 15.8792L31.6436 11.9524C32.6066 10.8289 32.6066 9.1711 31.6436 8.04763L28.2778 4.12081Z" fill="#817AFE" stroke="#F3F3FD" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
5
frontend/src/assets/icons/stage-pre-live.svg
Normal file
5
frontend/src/assets/icons/stage-pre-live.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<svg width="40" height="20" viewBox="0 0 40 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="39" height="19" rx="3.5" stroke="#BDBDBF" stroke-dasharray="2 2"/>
|
||||
<path d="M15.4815 4.7716C16.2797 3.84038 17.7203 3.84038 18.5185 4.7716L21.8844 8.69842C22.5263 9.4474 22.5263 10.5526 21.8844 11.3016L18.5185 15.2284C17.7203 16.1596 16.2797 16.1596 15.4815 15.2284L12.1156 11.3016C11.4737 10.5526 11.4737 9.4474 12.1156 8.69842L15.4815 4.7716Z" fill="#BDBDBF"/>
|
||||
<path d="M25.2778 4.12081C24.0805 2.72397 21.9195 2.72397 20.7222 4.12081L17.3564 8.04763C16.3934 9.17109 16.3934 10.8289 17.3564 11.9524L20.7222 15.8792C21.9195 17.276 24.0805 17.276 25.2778 15.8792L28.6436 11.9524C29.6066 10.8289 29.6066 9.1711 28.6436 8.04763L25.2778 4.12081Z" fill="#78787A" stroke="#F7F7FA" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 839 B |
@ -1,8 +1,13 @@
|
||||
import { Box, styled, Typography } from '@mui/material';
|
||||
import { Badge } from '../../../../common/Badge/Badge';
|
||||
import { Badge } from 'component/common/Badge/Badge';
|
||||
import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
|
||||
import type { FC } from 'react';
|
||||
import type * as React from 'react';
|
||||
import type { FC } from 'react';
|
||||
import { ReactComponent as InitialStageIcon } from 'assets/icons/stage-initial.svg';
|
||||
import { ReactComponent as PreLiveStageIcon } from 'assets/icons/stage-pre-live.svg';
|
||||
import { ReactComponent as LiveStageIcon } from 'assets/icons/stage-live.svg';
|
||||
import { ReactComponent as CompletedStageIcon } from 'assets/icons/stage-completed.svg';
|
||||
import { ReactComponent as ArchivedStageIcon } from 'assets/icons/stage-archived.svg';
|
||||
|
||||
const TimeLabel = styled('span')(({ theme }) => ({
|
||||
color: theme.palette.text.secondary,
|
||||
@ -24,18 +29,89 @@ const TimeLifecycleRow = styled(Box)(({ theme }) => ({
|
||||
marginBottom: theme.spacing(1.5),
|
||||
}));
|
||||
|
||||
const IconsRow = styled(Box)(({ theme }) => ({
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
marginTop: theme.spacing(4),
|
||||
marginBottom: theme.spacing(6),
|
||||
}));
|
||||
|
||||
const Line = styled(Box)(({ theme }) => ({
|
||||
height: '1px',
|
||||
background: theme.palette.background.application,
|
||||
flex: 1,
|
||||
}));
|
||||
|
||||
const StageBox = styled(Box, {
|
||||
shouldForwardProp: (prop) => prop !== 'active',
|
||||
})<{ active?: boolean }>(({ theme, active }) => ({
|
||||
position: 'relative',
|
||||
// speech bubble triangle for active stage
|
||||
...(active && {
|
||||
'&:before': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
display: 'block',
|
||||
borderStyle: 'solid',
|
||||
borderColor: `${theme.palette.primary.main} transparent`,
|
||||
borderWidth: '0 6px 6px',
|
||||
top: theme.spacing(3.25),
|
||||
left: theme.spacing(1.75),
|
||||
},
|
||||
}),
|
||||
// stage name text
|
||||
'&:after': {
|
||||
content: 'attr(data-after-content)',
|
||||
display: 'block',
|
||||
position: 'absolute',
|
||||
top: theme.spacing(4),
|
||||
left: theme.spacing(-1.25),
|
||||
right: theme.spacing(-1.25),
|
||||
textAlign: 'center',
|
||||
whiteSpace: 'nowrap',
|
||||
fontSize: theme.spacing(1.25),
|
||||
padding: theme.spacing(0.25, 0),
|
||||
color: theme.palette.text.secondary,
|
||||
// active wrapper for stage name text
|
||||
...(active && {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
color: theme.palette.primary.contrastText,
|
||||
fontWeight: theme.fontWeight.bold,
|
||||
borderRadius: theme.spacing(0.5),
|
||||
}),
|
||||
},
|
||||
}));
|
||||
|
||||
const ColorFill = styled(Box)(({ theme }) => ({
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
color: theme.palette.primary.contrastText,
|
||||
borderRadius: theme.spacing(0, 0, 1, 1), // has to match the parent tooltip container
|
||||
margin: theme.spacing(-1, -1.5), // has to match the parent tooltip container
|
||||
padding: theme.spacing(2, 3),
|
||||
}));
|
||||
|
||||
export const FeatureLifecycleTooltip: FC<{
|
||||
children: React.ReactElement<any, any>;
|
||||
}> = ({ children }) => (
|
||||
<HtmlTooltip
|
||||
maxHeight={800}
|
||||
maxWidth={350}
|
||||
arrow
|
||||
title={
|
||||
<Box>
|
||||
<Box sx={(theme) => ({ padding: theme.spacing(2) })}>
|
||||
<MainLifecycleRow>
|
||||
<Typography variant='h3'>Lifecycle</Typography>
|
||||
<Badge>Initial</Badge>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<Badge>Initial</Badge>
|
||||
<InitialStageIcon />
|
||||
</Box>
|
||||
</MainLifecycleRow>
|
||||
<TimeLifecycleRow>
|
||||
<TimeLabel>Stage entered at</TimeLabel>
|
||||
@ -45,16 +121,37 @@ export const FeatureLifecycleTooltip: FC<{
|
||||
<TimeLabel>Time spent in stage</TimeLabel>
|
||||
<span>3 days</span>
|
||||
</TimeLifecycleRow>
|
||||
<IconsRow>
|
||||
<StageBox data-after-content='Initial' active={true}>
|
||||
<InitialStageIcon />
|
||||
</StageBox>
|
||||
|
||||
<Line />
|
||||
|
||||
<StageBox data-after-content='Pre-live'>
|
||||
<PreLiveStageIcon />
|
||||
</StageBox>
|
||||
|
||||
<Line />
|
||||
|
||||
<StageBox data-after-content='Live'>
|
||||
<LiveStageIcon />
|
||||
</StageBox>
|
||||
|
||||
<Line />
|
||||
|
||||
<StageBox data-after-content='Completed'>
|
||||
<CompletedStageIcon />
|
||||
</StageBox>
|
||||
|
||||
<Line />
|
||||
|
||||
<StageBox data-after-content='Archived'>
|
||||
<ArchivedStageIcon />
|
||||
</StageBox>
|
||||
</IconsRow>
|
||||
</Box>
|
||||
<Box
|
||||
sx={(theme) => ({
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
color: theme.palette.primary.contrastText,
|
||||
borderRadius: theme.spacing(0, 0, 1, 1), // has to match the parent tooltip container
|
||||
margin: theme.spacing(-1, -1.5), // has to match the parent tooltip container
|
||||
p: theme.spacing(2, 3),
|
||||
})}
|
||||
>
|
||||
<ColorFill>
|
||||
<InfoText>
|
||||
This feature toggle is currently in the initial phase of
|
||||
it's life cycle.
|
||||
@ -67,7 +164,7 @@ export const FeatureLifecycleTooltip: FC<{
|
||||
Once we detect metrics for a non-production environment
|
||||
it will move into pre-live.
|
||||
</InfoText>
|
||||
</Box>
|
||||
</ColorFill>
|
||||
</Box>
|
||||
}
|
||||
>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user