Yadciel/taskcafe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: set checklist badge color to green when all items complete

Browse Source
This commit is contained in:
Jordan Knott 2020-08-13 16:56:03 -05:00
parent df4d114b98
commit 3d4a0ff28c
2 changed files with 21 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/shared/components/Card/Styles.ts
View File

@ -2,9 +2,17 @@ import styled, { css, keyframes } from 'styled-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { mixin } from 'shared/utils/styles';
import TextareaAutosize from 'react-autosize-textarea';
import { CheckCircle } from 'shared/icons';
import { CheckCircle, CheckSquare } from 'shared/icons';
import { RefObject } from 'react';
export const ChecklistIcon = styled(CheckSquare)<{ color: 'success' | 'normal' }>`
${props =>
props.color === 'success' &&
css`
fill: rgba(${props.theme.colors.success});
stroke: rgba(${props.theme.colors.success});
`}
`;
export const ClockIcon = styled(FontAwesomeIcon)``;
export const EditorTextarea = styled(TextareaAutosize)`
@ -69,11 +77,12 @@ export const DueDateCardBadge = styled(ListCardBadge)<{ isPastDue: boolean }>`
`}
`;
export const ListCardBadgeText = styled.span`
export const ListCardBadgeText = styled.span<{ color?: 'success' | 'normal' }>`
font-size: 12px;
padding: 0 4px 0 6px;
vertical-align: top;
white-space: nowrap;
${props => props.color === 'success' && `color: rgba(${props.theme.colors.success});`}
`;
export const ListCardContainer = styled.div<{ isActive: boolean; editable: boolean }>`

12
frontend/src/shared/components/Card/index.tsx
View File

@ -6,6 +6,7 @@ import { faClock, faCheckSquare, faEye } from '@fortawesome/free-regular-svg-ico
import {
EditorTextarea,
EditorContent,
ChecklistIcon,
CompleteIcon,
DescriptionBadge,
DueDateCardBadge,
@ -23,6 +24,7 @@ import {
CardTitle,
CardMembers,
} from './Styles';
import { CheckSquare } from 'shared/icons';
type DueDate = {
isPastDue: boolean;
@ -229,8 +231,14 @@ const Card = React.forwardRef(
)}
{checklists && (
<ListCardBadge>
<FontAwesomeIcon color="#6b778c" icon={faCheckSquare} size="xs" />
<ListCardBadgeText>{`${checklists.complete}/${checklists.total}`}</ListCardBadgeText>
<ChecklistIcon
color={checklists.complete === checklists.total ? 'success' : 'normal'}
width={8}
height={8}
/>
<ListCardBadgeText
color={checklists.complete === checklists.total ? 'success' : 'normal'}
>{`${checklists.complete}/${checklists.total}`}</ListCardBadgeText>
</ListCardBadge>
)}
</ListCardBadges>