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

fix: update margin on filter chips

Browse Source
This commit is contained in:
Jordan Knott 2020-08-29 02:53:32 -05:00
parent 9541ae70e0
commit a9a1576f46
2 changed files with 16 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/Projects/Project/Board/index.tsx
View File

@ -49,6 +49,10 @@ import FilterStatus from './FilterStatus';
import FilterMeta from './FilterMeta'; import FilterMeta from './FilterMeta';
import SortPopup from './SortPopup'; import SortPopup from './SortPopup';
const FilterChip = styled(Chip)`
margin-right: 4px;
`;
type MetaFilterCloseFn = (meta: TaskMeta, key: string) => void; type MetaFilterCloseFn = (meta: TaskMeta, key: string) => void;
const renderTaskSortingLabel = (sorting: TaskSorting) => { const renderTaskSortingLabel = (sorting: TaskSorting) => {
@ -71,7 +75,7 @@ const renderMetaFilters = (filters: TaskMetaFilters, onClose: MetaFilterCloseFn)
const filterChips = []; const filterChips = [];
if (filters.taskName) { if (filters.taskName) {
filterChips.push( filterChips.push(
<Chip <FilterChip
key="task-name" key="task-name"
label={`Title: ${filters.taskName.name}`} label={`Title: ${filters.taskName.name}`}
onClose={() => onClose(TaskMeta.TITLE, 'task-name')} onClose={() => onClose(TaskMeta.TITLE, 'task-name')}
@ -81,12 +85,16 @@ const renderMetaFilters = (filters: TaskMetaFilters, onClose: MetaFilterCloseFn)
if (filters.dueDate) { if (filters.dueDate) {
filterChips.push( filterChips.push(
<Chip key="due-date" label={filters.dueDate.label} onClose={() => onClose(TaskMeta.DUE_DATE, 'due-date')} />, <FilterChip
key="due-date"
label={filters.dueDate.label}
onClose={() => onClose(TaskMeta.DUE_DATE, 'due-date')}
/>,
); );
} }
for (const memberFilter of filters.members) { for (const memberFilter of filters.members) {
filterChips.push( filterChips.push(
<Chip <FilterChip
key={`member-${memberFilter.id}`} key={`member-${memberFilter.id}`}
label={`Member: ${memberFilter.username}`} label={`Member: ${memberFilter.username}`}
onClose={() => onClose(TaskMeta.MEMBER, memberFilter.id)} onClose={() => onClose(TaskMeta.MEMBER, memberFilter.id)}
@ -95,7 +103,7 @@ const renderMetaFilters = (filters: TaskMetaFilters, onClose: MetaFilterCloseFn)
} }
for (const labelFilter of filters.labels) { for (const labelFilter of filters.labels) {
filterChips.push( filterChips.push(
<Chip <FilterChip
key={`label-${labelFilter.id}`} key={`label-${labelFilter.id}`}
label={labelFilter.name === '' ? 'Label' : `Label: ${labelFilter.name}`} label={labelFilter.name === '' ? 'Label' : `Label: ${labelFilter.name}`}
color={labelFilter.color} color={labelFilter.color}
@ -126,7 +134,7 @@ const ProjectActionWrapper = styled.div<{ disabled?: boolean }>`
font-size: 15px; font-size: 15px;
color: rgba(${props => props.theme.colors.text.primary}); color: rgba(${props => props.theme.colors.text.primary});
&:not(:last-child) { &:not(:last-of-type) {
margin-right: 16px; margin-right: 16px;
} }

6
frontend/src/shared/components/Chip/index.tsx
View File

@ -11,7 +11,6 @@ const LabelText = styled.span`
`; `;
const Container = styled.div<{ color?: string }>` const Container = styled.div<{ color?: string }>`
margin: 0.75rem;
min-height: 26px; min-height: 26px;
min-width: 26px; min-width: 26px;
font-size: 0.8rem; font-size: 0.8rem;
@ -53,11 +52,12 @@ type ChipProps = {
label: string; label: string;
onClose?: () => void; onClose?: () => void;
color?: string; color?: string;
className?: string;
}; };
const Chip: React.FC<ChipProps> = ({ label, onClose, color }) => { const Chip: React.FC<ChipProps> = ({ label, onClose, color, className }) => {
return ( return (
<Container color={color}> <Container className={className} color={color}>
<LabelText>{label}</LabelText> <LabelText>{label}</LabelText>
{onClose && ( {onClose && (
<CloseButton onClick={() => onClose()}> <CloseButton onClick={() => onClose()}>