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;
`;
export const ListCardLabelsWrapper = styled.div`
overflow: auto;
position: relative;
`;
export const ListCardLabel = styled.span<{ variant: 'small' | 'large' }>`
${props =>
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' }>`
overflow: auto;
position: relative;
display: inline-flex;
&:hover {
opacity: 0.8;
}

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

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