diff --git a/docs/styles.md b/docs/styles.md
index e758943..56a886c 100644
--- a/docs/styles.md
+++ b/docs/styles.md
@@ -76,6 +76,7 @@ Various Codicon icons have been used in this extension. Check [here](https://cod
- `kanbn-task-editor-button-delete`
- `kanbn-task-editor-buttons`
- `kanbn-task-editor-button-add`
+- `kanbn-task-editor-button-edit`
- `kanbn-task-editor-field-relations`
- `kanbn-task-editor-row-relation`
- `kanbn-task-editor-field-relation-type`
@@ -84,8 +85,10 @@ Various Codicon icons have been used in this extension. Check [here](https://cod
- `kanbn-task-editor-field-comments`
- `kanbn-task-editor-row-comment`
- `kanbn-task-editor-field-comment-author`
+- `kanbn-task-editor-field-comment-author-value`
- `kanbn-task-editor-field-comment-date`
- `kanbn-task-editor-field-comment-text`
+- `kanbn-task-editor-comment-text`
- `kanbn-task-editor-column-right`
- `kanbn-task-editor-button-submit`
- `kanbn-task-editor-field-column`
diff --git a/src/TaskEditor.tsx b/src/TaskEditor.tsx
index 17ec034..74c3b3e 100644
--- a/src/TaskEditor.tsx
+++ b/src/TaskEditor.tsx
@@ -53,6 +53,7 @@ const TaskEditor = ({ task, tasks, columnName, columnNames, dateFormat, panelUui
comments: task ? task.comments : []
});
const [editingDescription, setEditingDescription] = useState(!editing);
+ const [editingComment, setEditingComment] = useState(-1);
// Called when the name field is changed
const handleUpdateName = ({ target: { value } }, values) => {
@@ -379,16 +380,25 @@ const TaskEditor = ({ task, tasks, columnName, columnNames, dateFormat, panelUui
-
-
+ {
+ editingComment === index
+ ?
+
+
+
+ :
+
+ {comment.author || 'Anonymous'}
+
+ }
{formatDate(comment.date, dateFormat)}
@@ -402,20 +412,38 @@ const TaskEditor = ({ task, tasks, columnName, columnNames, dateFormat, panelUui
>
+
-
-
+ {
+ editingComment === index
+ ?
+
+
+
+ :
+ {comment.text}
+
+ }
@@ -425,7 +453,10 @@ const TaskEditor = ({ task, tasks, columnName, columnNames, dateFormat, panelUui
type="button"
className="kanbn-task-editor-button kanbn-task-editor-button-add"
title="Add comment"
- onClick={() => push({ text: '', date: new Date(), author: gitUsername() || '' })}
+ onClick={() => {
+ push({ text: '', date: new Date(), author: gitUsername() || '' });
+ setEditingComment(values.comments.length);
+ }}
>
Add comment
diff --git a/src/index.css b/src/index.css
index f6bb4b2..bee0728 100644
--- a/src/index.css
+++ b/src/index.css
@@ -451,7 +451,11 @@ body.vscode-dark .kanbn-task-editor-field-input[type="date"]::-webkit-calendar-p
}
.kanbn-task-editor-column-buttons .kanbn-task-editor-button {
- margin: 8px 0;
+ margin: 8px 0 8px 8px;
+}
+
+.kanbn-task-editor-column-buttons .kanbn-task-editor-button .codicon {
+ margin-right: 0;
}
.kanbn-task-editor-field-progress {
@@ -464,10 +468,6 @@ body.vscode-dark .kanbn-task-editor-field-input[type="date"]::-webkit-calendar-p
opacity: 1;
}
-.kanbn-task-editor-column .kanbn-task-editor-button-delete .codicon {
- margin-right: 0;
-}
-
.kanbn-task-editor-field-tag {
position: relative;
}
@@ -482,10 +482,20 @@ body.vscode-dark .kanbn-task-editor-field-input[type="date"]::-webkit-calendar-p
.kanbn-task-editor-row-comment {
padding-bottom: 1em;
- border-bottom: 1px var(--vscode-activityBar-inactiveForeground) solid;
margin-bottom: 1em;
}
+.kanbn-task-editor-field-comment-author-value {
+ padding: 16px 0;
+ font-style: italic;
+ opacity: 0.8;
+}
+
+.kanbn-task-editor-field-comment-author-value .codicon {
+ font-size: 0.8em !important;
+ margin-right: 0.5em;
+}
+
.kanbn-task-editor-field-comment-date {
padding: 16px 0;
text-align: right;
@@ -497,15 +507,32 @@ body.vscode-dark .kanbn-task-editor-field-input[type="date"]::-webkit-calendar-p
min-height: 90px;
}
+.kanbn-task-editor-comment-text {
+ position: relative;
+ padding: .5em;
+ background-color: var(--vscode-input-background);
+ min-height: 90px;
+ white-space: pre-wrap;
+}
+
+.kanbn-task-editor-comment-text::after {
+ content: "";
+ position: absolute;
+ height: 16px;
+ width: 24px;
+ bottom: -15px;
+ left: 95%;
+ background-color: var(--vscode-input-background);
+ clip-path: polygon(0 0, 100% 0, 100% 100%);
+}
+
.kanbn-task-editor-field-label-description {
display: inline-block;
}
.kanbn-task-editor-description-preview {
padding: .5em;
- border: 1px var(--vscode-activityBar-inactiveForeground) solid;
- border-radius: 3px;
- margin-top: 0;
+ border: 1px var(--vscode-input-background) solid;
}
.kanbn-task-editor-button-edit-description {