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

feat: add view raw markdown button to task details

Browse Source
This commit is contained in:
Jordan Knott 2020-09-11 16:21:46 -05:00
parent e4d1e21304
commit 40557ba79f
2 changed files with 57 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/shared/components/TaskDetails/Styles.ts
View File

@ -585,3 +585,30 @@ export const ActivityItemLog = styled.span`
margin-left: 2px; margin-left: 2px;
color: rgba(${props => props.theme.colors.text.primary}); color: rgba(${props => props.theme.colors.text.primary});
`; `;
export const ViewRawButton = styled.button`
border-radius: 3px;
padding: 8px 12px;
display: flex;
position: absolute;
right: 4px;
bottom: -24px;
cursor: pointer;
color: rgba(${props => props.theme.colors.text.primary}, 0.25);
&:hover {
color: rgba(${props => props.theme.colors.text.primary});
}
`;
export const TaskDetailsEditor = styled(TextareaAutosize)`
min-height: 108px;
color: #c2c6dc;
background: #262c49;
border-radius: 3px;
line-height: 20px;
margin-left: 32px;
margin-right: 32px;
padding: 9px 8px 7px 8px;
outline: none;
border: none;
`;

9
frontend/src/shared/components/TaskDetails/index.tsx
View File

@ -30,6 +30,7 @@ import {
AssignUserLabel, AssignUserLabel,
AssignUsersButton, AssignUsersButton,
AssignedUsersSection, AssignedUsersSection,
ViewRawButton,
DueDateTitle, DueDateTitle,
Container, Container,
LeftSidebar, LeftSidebar,
@ -65,6 +66,7 @@ import {
CommentProfile, CommentProfile,
CommentInnerWrapper, CommentInnerWrapper,
ActivitySection, ActivitySection,
TaskDetailsEditor,
} from './Styles'; } from './Styles';
import Checklist, { ChecklistItem, ChecklistItems } from '../Checklist'; import Checklist, { ChecklistItem, ChecklistItems } from '../Checklist';
import onDragEnd from './onDragEnd'; import onDragEnd from './onDragEnd';
@ -153,6 +155,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
return true; return true;
}); });
const [saveTimeout, setSaveTimeout] = useState<any>(null); const [saveTimeout, setSaveTimeout] = useState<any>(null);
const [showRaw, setShowRaw] = useState(false);
const [showCommentActions, setShowCommentActions] = useState(false); const [showCommentActions, setShowCommentActions] = useState(false);
const taskDescriptionRef = useRef(task.description ?? ''); const taskDescriptionRef = useRef(task.description ?? '');
const $noMemberBtn = useRef<HTMLDivElement>(null); const $noMemberBtn = useRef<HTMLDivElement>(null);
@ -309,6 +312,9 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
</HeaderContainer> </HeaderContainer>
<InnerContentContainer> <InnerContentContainer>
<DescriptionContainer> <DescriptionContainer>
{showRaw ? (
<TaskDetailsEditor value={taskDescriptionRef.current} />
) : (
<EditorContainer <EditorContainer
onClick={e => { onClick={e => {
if (!editTaskDescription) { if (!editTaskDescription) {
@ -331,6 +337,9 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
}} }}
/> />
</EditorContainer> </EditorContainer>
)}
<ViewRawButton onClick={() => setShowRaw(!showRaw)}>{showRaw ? 'Show editor' : 'Show raw'}</ViewRawButton>
</DescriptionContainer> </DescriptionContainer>
<ChecklistSection> <ChecklistSection>
<DragDropContext onDragEnd={result => onDragEnd(result, task, onChecklistDrop, onChecklistItemDrop)}> <DragDropContext onDragEnd={result => onDragEnd(result, task, onChecklistDrop, onChecklistItemDrop)}>