phares3757/vscode-kanbn
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Better comment rendering

Browse Source
This commit is contained in:
Gordon 2021-04-27 01:59:19 +01:00
parent 1e20554154
commit 178f2fa51e
3 changed files with 91 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/styles.md
View File

@ -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`

33
src/TaskEditor.tsx
View File

@ -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,6 +380,9 @@ const TaskEditor = ({ task, tasks, columnName, columnNames, dateFormat, panelUui
<div className="kanbn-task-editor-row-comment" key={index}>
<div className="kanbn-task-editor-row">
<div className="kanbn-task-editor-column kanbn-task-editor-field-comment-author">
{
editingComment === index
? <React.Fragment>
<Field
className="kanbn-task-editor-field-input"
name={`comments.${index}.author`}
@ -389,6 +393,12 @@ const TaskEditor = ({ task, tasks, columnName, columnNames, dateFormat, panelUui
component="div"
name={`comments.${index}.author`}
/>
</React.Fragment>
: <div className="kanbn-task-editor-field-comment-author-value">
<i className="codicon codicon-account"></i>
{comment.author || 'Anonymous'}
</div>
}
</div>
<div className="kanbn-task-editor-column kanbn-task-editor-field-comment-date">
{formatDate(comment.date, dateFormat)}
@ -402,10 +412,23 @@ const TaskEditor = ({ task, tasks, columnName, columnNames, dateFormat, panelUui
>
<i className="codicon codicon-trash"></i>
</button>
<button
type="button"
className="kanbn-task-editor-button kanbn-task-editor-button-edit"
title="Edit comment"
onClick={() => {
setEditingComment(editingComment !== index ? index : -1);
}}
>
<i className="codicon codicon-edit"></i>
</button>
</div>
</div>
<div className="kanbn-task-editor-row">
<div className="kanbn-task-editor-column kanbn-task-editor-field-comment-text">
{
editingComment === index
? <React.Fragment>
<Field
className="kanbn-task-editor-field-textarea"
as="textarea"
@ -416,6 +439,11 @@ const TaskEditor = ({ task, tasks, columnName, columnNames, dateFormat, panelUui
component="div"
name={`comments.${index}.text`}
/>
</React.Fragment>
: <div className="kanbn-task-editor-comment-text">
{comment.text}
</div>
}
</div>
</div>
</div>
@ -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);
}}
>
<i className="codicon codicon-comment"></i>Add comment
</button>

45
src/index.css
View File

@ -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 {