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 { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { mixin } from 'shared/utils/styles'; import { mixin } from 'shared/utils/styles';
import TextareaAutosize from 'react-autosize-textarea'; import TextareaAutosize from 'react-autosize-textarea';
import { CheckCircle } from 'shared/icons'; import { CheckCircle, CheckSquare } from 'shared/icons';
import { RefObject } from 'react'; 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 ClockIcon = styled(FontAwesomeIcon)``;
export const EditorTextarea = styled(TextareaAutosize)` 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; font-size: 12px;
padding: 0 4px 0 6px; padding: 0 4px 0 6px;
vertical-align: top; vertical-align: top;
white-space: nowrap; white-space: nowrap;
${props => props.color === 'success' && `color: rgba(${props.theme.colors.success});`}
`; `;
export const ListCardContainer = styled.div<{ isActive: boolean; editable: boolean }>` 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 { import {
EditorTextarea, EditorTextarea,
EditorContent, EditorContent,
ChecklistIcon,
CompleteIcon, CompleteIcon,
DescriptionBadge, DescriptionBadge,
DueDateCardBadge, DueDateCardBadge,
@ -23,6 +24,7 @@ import {
CardTitle, CardTitle,
CardMembers, CardMembers,
} from './Styles'; } from './Styles';
import { CheckSquare } from 'shared/icons';
type DueDate = { type DueDate = {
isPastDue: boolean; isPastDue: boolean;
@ -229,8 +231,14 @@ const Card = React.forwardRef(
)} )}
{checklists && ( {checklists && (
<ListCardBadge> <ListCardBadge>
<FontAwesomeIcon color="#6b778c" icon={faCheckSquare} size="xs" /> <ChecklistIcon
<ListCardBadgeText>{`${checklists.complete}/${checklists.total}`}</ListCardBadgeText> 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> </ListCardBadge>
)} )}
</ListCardBadges> </ListCardBadges>