add ignored option, closes #62
This commit is contained in:
parent
f48a57122b
commit
3c47eae7dd
5 changed files with 28 additions and 20 deletions
|
@ -108,43 +108,40 @@ const ModuleLink = ({ link }: { link: ModuleLinkInfo }) => {
|
|||
|
||||
let lineColorStyle = tw`bg-gray-200`;
|
||||
let dotColorStyle = tw`bg-white`;
|
||||
let activeTextStyle = tw`text-blue-700 font-medium`;
|
||||
|
||||
// if (isActive) {
|
||||
// lineColorStyle = tw`bg-blue-700`;
|
||||
// dotColorStyle = tw`bg-blue-700`;
|
||||
// }
|
||||
|
||||
if (progress === 'Reading') {
|
||||
lineColorStyle = tw`bg-yellow-400`;
|
||||
dotColorStyle = tw`bg-yellow-400`;
|
||||
activeTextStyle = tw`text-yellow-700 font-medium`;
|
||||
} else if (progress === 'Practicing') {
|
||||
lineColorStyle = tw`bg-orange-400`;
|
||||
dotColorStyle = tw`bg-orange-400`;
|
||||
activeTextStyle = tw`text-orange-700 font-medium`;
|
||||
} else if (progress === 'Complete') {
|
||||
lineColorStyle = tw`bg-green-400`;
|
||||
dotColorStyle = tw`bg-green-400`;
|
||||
activeTextStyle = tw`text-green-700 font-medium`;
|
||||
} else if (progress === 'Skipped') {
|
||||
lineColorStyle = tw`bg-blue-300`;
|
||||
dotColorStyle = tw`bg-blue-300`;
|
||||
activeTextStyle = tw`text-blue-700 font-medium`;
|
||||
} else if (progress === 'Ignored') {
|
||||
lineColorStyle = tw`bg-gray-100`;
|
||||
dotColorStyle = tw`bg-gray-100`;
|
||||
}
|
||||
|
||||
return (
|
||||
<LinkWithProgress
|
||||
lineColorStyle={lineColorStyle}
|
||||
dotColorStyle={dotColorStyle}
|
||||
small={progress === 'Not Started'}
|
||||
small={progress === 'Not Started' || progress === 'Ignored'}
|
||||
>
|
||||
<Link to={link.url}>
|
||||
<StyledLink
|
||||
dotColorStyle={dotColorStyle === tw`bg-gray-200`}
|
||||
className="group"
|
||||
>
|
||||
<p className="text-gray-600 group-hover:text-blue-800 transition duration-150 ease-in-out">
|
||||
<p
|
||||
className={`${
|
||||
progress === 'Ignored' ? 'text-gray-400' : 'text-gray-600'
|
||||
} group-hover:text-blue-800 transition duration-150 ease-in-out`}
|
||||
>
|
||||
{link.title}
|
||||
</p>
|
||||
<p className="block text-sm text-gray-400 group-hover:text-blue-700 transition duration-150 ease-in-out">
|
||||
|
|
|
@ -48,8 +48,7 @@ const LinkWithProgress = styled.span`
|
|||
const StyledLink = styled.span`
|
||||
${tw`focus:outline-none transition ease-in-out duration-150 hover:text-blue-700 hover:bg-blue-50 focus:bg-blue-100 flex items-center pl-12 pr-4 py-3 text-sm leading-5`}
|
||||
|
||||
${({ isActive, activeTextStyle }) =>
|
||||
isActive ? activeTextStyle : tw`text-gray-600`}
|
||||
${({ textStyle }) => textStyle}
|
||||
|
||||
|
||||
&::before {
|
||||
|
@ -116,6 +115,10 @@ const ItemLink = ({ link }: { link: ModuleLinkInfo }) => {
|
|||
lineColorStyle = tw`bg-blue-300`;
|
||||
dotColorStyle = tw`bg-blue-300`;
|
||||
activeTextStyle = tw`text-blue-700 font-medium`;
|
||||
} else if (progress === 'Ignored') {
|
||||
lineColorStyle = tw`bg-gray-100`;
|
||||
dotColorStyle = tw`bg-gray-100`;
|
||||
activeTextStyle = tw`text-gray-400 font-medium`;
|
||||
}
|
||||
|
||||
return (
|
||||
|
@ -128,7 +131,13 @@ const ItemLink = ({ link }: { link: ModuleLinkInfo }) => {
|
|||
isActive={isActive}
|
||||
ref={itemRef}
|
||||
dotColorStyle={dotColorStyle === tw`bg-gray-200`}
|
||||
activeTextStyle={activeTextStyle}
|
||||
textStyle={
|
||||
isActive
|
||||
? activeTextStyle
|
||||
: progress === 'Ignored'
|
||||
? tw`text-gray-400`
|
||||
: tw`text-gray-600`
|
||||
}
|
||||
>
|
||||
{link.title}
|
||||
</StyledLink>
|
||||
|
|
|
@ -23,7 +23,7 @@ export default function ProblemStatusCheckbox({
|
|||
'Not Attempted': 'bg-gray-200',
|
||||
Solving: 'bg-yellow-300',
|
||||
Solved: 'bg-green-500',
|
||||
"Can't Solve": 'bg-red-500',
|
||||
Ignored: 'bg-red-100',
|
||||
Skipped: 'bg-blue-300',
|
||||
};
|
||||
const handleClick = () => {
|
||||
|
|
|
@ -46,7 +46,8 @@ export type ModuleProgress =
|
|||
| 'Reading'
|
||||
| 'Practicing'
|
||||
| 'Complete'
|
||||
| 'Skipped';
|
||||
| 'Skipped'
|
||||
| 'Ignored';
|
||||
|
||||
export const ModuleProgressOptions: ModuleProgress[] = [
|
||||
'Not Started',
|
||||
|
@ -54,4 +55,5 @@ export const ModuleProgressOptions: ModuleProgress[] = [
|
|||
'Practicing',
|
||||
'Complete',
|
||||
'Skipped',
|
||||
'Ignored',
|
||||
];
|
||||
|
|
|
@ -72,10 +72,10 @@ export type ProblemProgress =
|
|||
| 'Not Attempted'
|
||||
| 'Solving'
|
||||
| 'Solved'
|
||||
| "Can't Solve"
|
||||
| 'Skipped';
|
||||
| 'Skipped'
|
||||
| 'Ignored';
|
||||
|
||||
let options = ['Not Attempted', 'Solving', 'Solved', "Can't Solve", 'Skipped'];
|
||||
let options = ['Not Attempted', 'Solving', 'Solved', 'Skipped', 'Ignored'];
|
||||
|
||||
let NEXT_PROBLEM_STATUS: { [key in ProblemProgress]?: ProblemProgress } = {};
|
||||
let PREV_PROBLEM_STATUS: { [key in ProblemProgress]?: ProblemProgress } = {};
|
||||
|
|
Reference in a new issue