coop-cloud-chaos-patchs/outline
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: Task progress svg shrinks width in some circumstances

Browse Source
This commit is contained in:
Tom Moor
2021-07-27 10:33:11 -04:00
parent 84f647674a
commit b6703671e2
1 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/components/CircularProgressBar.js
View File

@ -1,6 +1,6 @@
// @flow // @flow
import React from "react"; import React from "react";
import { useTheme } from "styled-components"; import styled, { useTheme } from "styled-components";
const cleanPercentage = (percentage) => { const cleanPercentage = (percentage) => {
const tooLow = !Number.isFinite(+percentage) || percentage < 0; const tooLow = !Number.isFinite(+percentage) || percentage < 0;
@ -56,7 +56,7 @@ const CircularProgressBar = ({
const offset = Math.floor(size / 2); const offset = Math.floor(size / 2);
return ( return (
<svg width={size} height={size}> <SVG width={size} height={size}>
<g transform={`rotate(-90 ${offset} ${offset})`}> <g transform={`rotate(-90 ${offset} ${offset})`}>
<Circle color={theme.progressBarBackground} offset={offset} /> <Circle color={theme.progressBarBackground} offset={offset} />
{percentage > 0 && ( {percentage > 0 && (
@ -67,8 +67,12 @@ const CircularProgressBar = ({
/> />
)} )}
</g> </g>
</svg> </SVG>
); );
}; };
const SVG = styled.svg`
flex-shrink: 0;
`;
export default CircularProgressBar; export default CircularProgressBar;