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

feature: connect card operation icon to quick card editor

Browse Source
This commit is contained in:
Jordan Knott 2020-07-13 16:20:06 -05:00
parent b95cc6859e
commit 609baa98aa
2 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -134,10 +134,9 @@ export const ListCardOperation = styled.span`
position: absolute; position: absolute;
right: 2px; right: 2px;
top: 2px; top: 2px;
z-index: 10; z-index: 100;
&:hover { &:hover {
background-color: ${props => mixin.darken('#262c49', 0.45)}; background-color: ${props => mixin.darken('#262c49', .25)};
} }
`; `;

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

@ -1,8 +1,8 @@
import React, { useState, useRef, useEffect } from 'react'; import React, {useState, useRef, useEffect} from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import TaskAssignee from 'shared/components/TaskAssignee'; import TaskAssignee from 'shared/components/TaskAssignee';
import { faPencilAlt, faList } from '@fortawesome/free-solid-svg-icons'; import {faPencilAlt, faList} from '@fortawesome/free-solid-svg-icons';
import { faClock, faCheckSquare, faEye } from '@fortawesome/free-regular-svg-icons'; import {faClock, faCheckSquare, faEye} from '@fortawesome/free-regular-svg-icons';
import { import {
EditorTextarea, EditorTextarea,
EditorContent, EditorContent,
@ -132,7 +132,12 @@ const Card = React.forwardRef(
> >
<ListCardInnerContainer ref={$innerCardRef}> <ListCardInnerContainer ref={$innerCardRef}>
{isActive && ( {isActive && (
<ListCardOperation> <ListCardOperation onClick={e => {
e.stopPropagation();
if (onContextMenu) {
onContextMenu($innerCardRef, taskID, taskGroupID);
}
}}>
<FontAwesomeIcon onClick={onOperationClick} color="#c2c6dc" size="xs" icon={faPencilAlt} /> <FontAwesomeIcon onClick={onOperationClick} color="#c2c6dc" size="xs" icon={faPencilAlt} />
</ListCardOperation> </ListCardOperation>
)} )}
@ -164,11 +169,11 @@ const Card = React.forwardRef(
/> />
</EditorContent> </EditorContent>
) : ( ) : (
<CardTitle> <CardTitle>
{complete && <CompleteIcon width={16} height={16} />} {complete && <CompleteIcon width={16} height={16} />}
{title} {title}
</CardTitle> </CardTitle>
)} )}
<ListCardBadges> <ListCardBadges>
{watched && ( {watched && (
<ListCardBadge> <ListCardBadge>