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

fix: task label margin issue with task title

Browse Source
This commit is contained in:
Jordan Knott 2020-09-11 14:54:22 -05:00
parent 227ce5966d
commit f7c6ee470e
2 changed files with 38 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -147,6 +147,11 @@ export const ListCardLabelText = styled.span`
line-height: 16px; line-height: 16px;
`; `;
export const ListCardLabelsWrapper = styled.div`
overflow: auto;
position: relative;
`;
export const ListCardLabel = styled.span<{ variant: 'small' | 'large' }>` export const ListCardLabel = styled.span<{ variant: 'small' | 'large' }>`
${props => ${props =>
props.variant === 'small' props.variant === 'small'
@ -178,9 +183,6 @@ export const ListCardLabel = styled.span<{ variant: 'small' | 'large' }>`
`; `;
export const ListCardLabels = styled.div<{ toggleLabels: boolean; toggleDirection: 'expand' | 'shrink' }>` export const ListCardLabels = styled.div<{ toggleLabels: boolean; toggleDirection: 'expand' | 'shrink' }>`
overflow: auto;
position: relative;
display: inline-flex;
&:hover { &:hover {
opacity: 0.8; opacity: 0.8;
} }

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

@ -20,6 +20,7 @@ import {
ListCardLabels, ListCardLabels,
ListCardLabel, ListCardLabel,
ListCardLabelText, ListCardLabelText,
ListCardLabelsWrapper,
ListCardOperation, ListCardOperation,
CardTitle, CardTitle,
CardMembers, CardMembers,
@ -158,35 +159,38 @@ const Card = React.forwardRef(
</ListCardOperation> </ListCardOperation>
)} )}
<ListCardDetails complete={complete ?? false}> <ListCardDetails complete={complete ?? false}>
<ListCardLabels {labels && labels.length !== 0 && (
toggleLabels={toggleLabels} <ListCardLabelsWrapper>
toggleDirection={toggleDirection} <ListCardLabels
onClick={e => { toggleLabels={toggleLabels}
e.stopPropagation(); toggleDirection={toggleDirection}
if (onCardLabelClick) { onClick={e => {
onCardLabelClick(); e.stopPropagation();
} if (onCardLabelClick) {
}} onCardLabelClick();
> }
{labels && }}
labels >
.slice() {labels
.sort((a, b) => a.labelColor.position - b.labelColor.position) .slice()
.map(label => ( .sort((a, b) => a.labelColor.position - b.labelColor.position)
<ListCardLabel .map(label => (
onAnimationEnd={() => { <ListCardLabel
if (setToggleLabels) { onAnimationEnd={() => {
setToggleLabels(false); if (setToggleLabels) {
} setToggleLabels(false);
}} }
variant={labelVariant ?? 'large'} }}
color={label.labelColor.colorHex} variant={labelVariant ?? 'large'}
key={label.id} color={label.labelColor.colorHex}
> key={label.id}
<ListCardLabelText>{label.name}</ListCardLabelText> >
</ListCardLabel> <ListCardLabelText>{label.name}</ListCardLabelText>
))} </ListCardLabel>
</ListCardLabels> ))}
</ListCardLabels>
</ListCardLabelsWrapper>
)}
{editable ? ( {editable ? (
<EditorContent> <EditorContent>
{complete && <CompleteIcon width={16} height={16} />} {complete && <CompleteIcon width={16} height={16} />}