fix: task sort popup active checkmarks not showing
This commit is contained in:
parent
ce3afec8a0
commit
3992e4c2de
@ -30,7 +30,7 @@ export const ActionItem = styled.li`
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
&:hover {
|
||||
background: ${props => props.theme.colors.primary};
|
||||
background: ${(props) => props.theme.colors.primary};
|
||||
}
|
||||
&:hover ${ActionExtraMenuContainer} {
|
||||
visibility: visible;
|
||||
@ -69,11 +69,11 @@ export const ActionExtraMenuItem = styled.li`
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
&:hover {
|
||||
background: ${props => props.theme.colors.primary};
|
||||
background: ${(props) => props.theme.colors.primary};
|
||||
}
|
||||
`;
|
||||
const ActionExtraMenuSeparator = styled.li`
|
||||
color: ${props => props.theme.colors.text.primary};
|
||||
color: ${(props) => props.theme.colors.text.primary};
|
||||
font-size: 12px;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
|
@ -2,6 +2,11 @@ import React, { useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { TaskSorting, TaskSortingType, TaskSortingDirection } from 'shared/utils/sorting';
|
||||
import { mixin } from 'shared/utils/styles';
|
||||
import { Checkmark } from 'shared/icons';
|
||||
|
||||
const ActiveIcon = styled(Checkmark)`
|
||||
position: absolute;
|
||||
`;
|
||||
|
||||
export const ActionsList = styled.ul`
|
||||
margin: 0;
|
||||
@ -21,7 +26,7 @@ export const ActionItem = styled.li`
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
&:hover {
|
||||
background: ${props => props.theme.colors.primary};
|
||||
background: ${(props) => props.theme.colors.primary};
|
||||
}
|
||||
`;
|
||||
|
||||
@ -30,7 +35,7 @@ export const ActionTitle = styled.span`
|
||||
`;
|
||||
|
||||
const ActionItemSeparator = styled.li`
|
||||
color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
|
||||
color: ${(props) => mixin.rgba(props.theme.colors.text.primary, 0.4)};
|
||||
font-size: 12px;
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
@ -52,31 +57,37 @@ const SortPopup: React.FC<SortPopupProps> = ({ sorting, onChangeTaskSorting }) =
|
||||
return (
|
||||
<ActionsList>
|
||||
<ActionItem onClick={() => handleSetSorting({ type: TaskSortingType.NONE, direction: TaskSortingDirection.ASC })}>
|
||||
{currentSorting.type === TaskSortingType.NONE && <ActiveIcon width={12} height={12} />}
|
||||
<ActionTitle>None</ActionTitle>
|
||||
</ActionItem>
|
||||
<ActionItem
|
||||
onClick={() => handleSetSorting({ type: TaskSortingType.DUE_DATE, direction: TaskSortingDirection.ASC })}
|
||||
>
|
||||
{currentSorting.type === TaskSortingType.DUE_DATE && <ActiveIcon width={12} height={12} />}
|
||||
<ActionTitle>Due date</ActionTitle>
|
||||
</ActionItem>
|
||||
<ActionItem
|
||||
onClick={() => handleSetSorting({ type: TaskSortingType.MEMBERS, direction: TaskSortingDirection.ASC })}
|
||||
>
|
||||
{currentSorting.type === TaskSortingType.MEMBERS && <ActiveIcon width={12} height={12} />}
|
||||
<ActionTitle>Members</ActionTitle>
|
||||
</ActionItem>
|
||||
<ActionItem
|
||||
onClick={() => handleSetSorting({ type: TaskSortingType.LABELS, direction: TaskSortingDirection.ASC })}
|
||||
>
|
||||
{currentSorting.type === TaskSortingType.LABELS && <ActiveIcon width={12} height={12} />}
|
||||
<ActionTitle>Labels</ActionTitle>
|
||||
</ActionItem>
|
||||
<ActionItem
|
||||
onClick={() => handleSetSorting({ type: TaskSortingType.TASK_TITLE, direction: TaskSortingDirection.ASC })}
|
||||
>
|
||||
{currentSorting.type === TaskSortingType.TASK_TITLE && <ActiveIcon width={12} height={12} />}
|
||||
<ActionTitle>Task title</ActionTitle>
|
||||
</ActionItem>
|
||||
<ActionItem
|
||||
onClick={() => handleSetSorting({ type: TaskSortingType.COMPLETE, direction: TaskSortingDirection.ASC })}
|
||||
>
|
||||
{currentSorting.type === TaskSortingType.COMPLETE && <ActiveIcon width={12} height={12} />}
|
||||
<ActionTitle>Complete</ActionTitle>
|
||||
</ActionItem>
|
||||
</ActionsList>
|
||||
|
@ -60,19 +60,20 @@ const FilterChip = styled(Chip)`
|
||||
type MetaFilterCloseFn = (meta: TaskMeta, key: string) => void;
|
||||
|
||||
const renderTaskSortingLabel = (sorting: TaskSorting) => {
|
||||
if (sorting.type === TaskSortingType.TASK_TITLE) {
|
||||
return 'Sort: Card title';
|
||||
}
|
||||
if (sorting.type === TaskSortingType.MEMBERS) {
|
||||
switch (sorting.type) {
|
||||
case TaskSortingType.TASK_TITLE:
|
||||
return 'Sort: Task Title';
|
||||
case TaskSortingType.MEMBERS:
|
||||
return 'Sort: Members';
|
||||
}
|
||||
if (sorting.type === TaskSortingType.DUE_DATE) {
|
||||
case TaskSortingType.DUE_DATE:
|
||||
return 'Sort: Due Date';
|
||||
}
|
||||
if (sorting.type === TaskSortingType.LABELS) {
|
||||
case TaskSortingType.LABELS:
|
||||
return 'Sort: Labels';
|
||||
}
|
||||
case TaskSortingType.COMPLETE:
|
||||
return 'Sort: Complete';
|
||||
default:
|
||||
return 'Sort';
|
||||
}
|
||||
};
|
||||
|
||||
const renderMetaFilters = (filters: TaskMetaFilters, onClose: MetaFilterCloseFn) => {
|
||||
|
Loading…
Reference in New Issue
Block a user