diff --git a/frontend/src/shared/components/TaskDetails/Styles.ts b/frontend/src/shared/components/TaskDetails/Styles.ts index 319ee65..e2ab94c 100644 --- a/frontend/src/shared/components/TaskDetails/Styles.ts +++ b/frontend/src/shared/components/TaskDetails/Styles.ts @@ -585,3 +585,30 @@ export const ActivityItemLog = styled.span` margin-left: 2px; 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; +`; diff --git a/frontend/src/shared/components/TaskDetails/index.tsx b/frontend/src/shared/components/TaskDetails/index.tsx index d2e0219..9d9b23f 100644 --- a/frontend/src/shared/components/TaskDetails/index.tsx +++ b/frontend/src/shared/components/TaskDetails/index.tsx @@ -30,6 +30,7 @@ import { AssignUserLabel, AssignUsersButton, AssignedUsersSection, + ViewRawButton, DueDateTitle, Container, LeftSidebar, @@ -65,6 +66,7 @@ import { CommentProfile, CommentInnerWrapper, ActivitySection, + TaskDetailsEditor, } from './Styles'; import Checklist, { ChecklistItem, ChecklistItems } from '../Checklist'; import onDragEnd from './onDragEnd'; @@ -153,6 +155,7 @@ const TaskDetails: React.FC = ({ return true; }); const [saveTimeout, setSaveTimeout] = useState(null); + const [showRaw, setShowRaw] = useState(false); const [showCommentActions, setShowCommentActions] = useState(false); const taskDescriptionRef = useRef(task.description ?? ''); const $noMemberBtn = useRef(null); @@ -309,28 +312,34 @@ const TaskDetails: React.FC = ({ - { - if (!editTaskDescription) { - setEditTaskDescription(true); - } - }} - > - { - setSaveTimeout(() => { - clearTimeout(saveTimeout); - return setTimeout(saveDescription, 2000); - }); - const text = value(); - taskDescriptionRef.current = text; + {showRaw ? ( + + ) : ( + { + if (!editTaskDescription) { + setEditTaskDescription(true); + } }} - /> - + > + { + setSaveTimeout(() => { + clearTimeout(saveTimeout); + return setTimeout(saveDescription, 2000); + }); + const text = value(); + taskDescriptionRef.current = text; + }} + /> + + )} + + setShowRaw(!showRaw)}>{showRaw ? 'Show editor' : 'Show raw'} onDragEnd(result, task, onChecklistDrop, onChecklistItemDrop)}>