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

Add task description preview

Browse Source
This commit is contained in:
Gordon
2021-04-26 14:47:18 +01:00
parent 8a2726a486
commit 7156977666
5 changed files with 394 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/TaskEditor.tsx
View File

@ -4,6 +4,7 @@ import formatDate from 'dateformat';
import VSCodeApi from './VSCodeApi';
import { paramCase } from 'param-case';
import gitUsername from 'git-user-name';
import ReactMarkdown from 'react-markdown';
interface KanbnTaskValidationOutput {
name: string,
@ -23,7 +24,7 @@ interface KanbnTaskValidationInput extends KanbnTaskValidationOutput {
}
const TaskEditor = ({ task, tasks, columnName, columnNames, dateFormat, panelUuid, vscode }: {
task: KanbnTask|null,
task: KanbnTask | null,
tasks: Record<string, KanbnTask>,
columnName: string,
columnNames: string[],
@ -51,9 +52,10 @@ const TaskEditor = ({ task, tasks, columnName, columnNames, dateFormat, panelUui
subTasks: task ? task.subTasks : [],
comments: task ? task.comments : []
});
const [editingDescription, setEditingDescription] = useState(!editing);
// Called when the name field is changed
const handleUpdateName = ({ target: { value }}, values) => {
const handleUpdateName = ({ target: { value } }, values) => {
// Update the id preview
setTaskData({
@ -108,7 +110,7 @@ const TaskEditor = ({ task, tasks, columnName, columnNames, dateFormat, panelUui
};
// Validate form data
const validate = (values: KanbnTaskValidationInput): KanbnTaskValidationOutput|{} => {
const validate = (values: KanbnTaskValidationInput): KanbnTaskValidationOutput | {} => {
let hasErrors = false;
const errors: KanbnTaskValidationOutput = {
name: '',
@ -214,14 +216,38 @@ const TaskEditor = ({ task, tasks, columnName, columnNames, dateFormat, panelUui
/>
</div>
<div className="kanbn-task-editor-field kanbn-task-editor-field-description">
<label className="kanbn-task-editor-field-label">
<label
className="kanbn-task-editor-field-label kanbn-task-editor-field-label-description"
htmlFor="description-input"
>
<p>Description</p>
<Field
className="kanbn-task-editor-field-textarea"
as="textarea"
name="description"
/>
</label>
<button
type="button"
className="kanbn-task-editor-button kanbn-task-editor-button-edit-description"
title="Edit description"
onClick={() => {
setEditingDescription(!editingDescription);
}}
>
{
editingDescription
? <React.Fragment><i className="codicon codicon-preview"></i> Preview</React.Fragment>
: <React.Fragment><i className="codicon codicon-edit"></i> Edit</React.Fragment>
}
</button>
{
editingDescription
? <Field
className="kanbn-task-editor-field-textarea"
id="description-input"
as="textarea"
name="description"
/>
: <ReactMarkdown className="kanbn-task-editor-description-preview">
{taskData.description}
</ReactMarkdown>
}
<ErrorMessage
className="kanbn-task-editor-field-errors"
component="div"

55
src/index.css
View File

@ -53,7 +53,7 @@ body.vscode-high-contrast {
.kanbn-header-button {
outline: none;
border: none;
border: 1px transparent solid;
background-color: var(--vscode-button-background);
color: var(--vscode-button-foreground);
padding: 9px;
@ -77,7 +77,11 @@ body.vscode-high-contrast {
margin-right: 0.5em;
}
.kanbn-header-button:hover, .kanbn-header-button:focus {
.kanbn-header-button:focus {
border-color: var(--vscode-button-hoverBackground);
}
.kanbn-header-button:hover, .kanbn-header-button:active {
background-color: var(--vscode-button-hoverBackground);
}
@ -110,7 +114,7 @@ body.vscode-high-contrast {
top: -2px;
left: -4px;
float: right;
border: none;
border: 1px transparent solid;
outline: none;
color: var(--vscode-foreground);
background-color: transparent;
@ -122,7 +126,11 @@ body.vscode-high-contrast {
border-radius: 1px;
}
.kanbn-create-task-button:focus, .kanbn-create-task-button:hover {
.kanbn-create-task-button:focus {
border-color: var(--vscode-foreground);
}
.kanbn-create-task-button:hover, .kanbn-create-task-button:active {
border: none;
outline: none;
color: var(--vscode-editor-background);
@ -266,7 +274,7 @@ body.vscode-dark .kanbn-task {
}
.kanbn-task-overdue {
color: #f42 !important;
color: #f22 !important;
}
.kanbn-task-progress {
@ -288,7 +296,7 @@ body.vscode-dark .kanbn-task {
.kanbn-task-editor-dirty {
margin-left: 8px;
color: #f42;
color: #f22;
}
.kanbn-task-editor-dates {
@ -304,7 +312,7 @@ body.vscode-dark .kanbn-task {
}
.kanbn-task-editor-field .kanbn-task-editor-title,
.kanbn-task-editor-field-label p {
.kanbn-task-editor-field-label p:first-of-type {
color: var(--vscode-editor-foreground);
font-size: 0.8em;
letter-spacing: 0.1em;
@ -370,7 +378,7 @@ body.vscode-dark .kanbn-task-editor-field-input[type="date"]::-webkit-calendar-p
.kanbn-task-editor-button {
outline: none;
border: none;
border: 1px transparent solid;
background-color: var(--vscode-button-background);
color: var(--vscode-button-foreground);
padding: 9px 1em;
@ -384,17 +392,25 @@ body.vscode-dark .kanbn-task-editor-field-input[type="date"]::-webkit-calendar-p
top: 1px;
}
.kanbn-task-editor-button:hover, .kanbn-task-editor-button:focus {
.kanbn-task-editor-button:focus {
border-color: var(--vscode-button-hoverBackground);
}
.kanbn-task-editor-button:hover, .kanbn-task-editor-button:active {
background-color: var(--vscode-button-hoverBackground);
}
.kanbn-task-editor-button-delete:hover, .kanbn-task-editor-button-delete:focus {
background-color: #f42;
.kanbn-task-editor-button-delete:focus {
border-color: #f22;
}
.kanbn-task-editor-button-delete:hover, .kanbn-task-editor-button-delete:active {
background-color: #f22;
}
.kanbn-task-editor-field-errors {
font-weight: bold;
color: #f42;
color: #f22;
}
.kanbn-task-editor-id {
@ -481,6 +497,21 @@ body.vscode-dark .kanbn-task-editor-field-input[type="date"]::-webkit-calendar-p
min-height: 90px;
}
.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;
}
.kanbn-task-editor-button-edit-description {
float: right;
}
.kanbn-burndown-settings {
position: relative;
flex: 1;