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

Style updates, add more TODOs

Browse Source
This commit is contained in:
Gordon 2021-04-05 23:55:14 +01:00
parent 6efe282b81
commit d889148e56
4 changed files with 83 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
docs/styles.md
View File

@ -38,4 +38,9 @@ The kanbn board has a default style which is based on the current vscode theme,
### Task editor
- `// TODO add task editor classes`
- `div.kanbn-task-editor`
- `h1.kanbn-task-editor-title`
- `div.kanbn-task-editor-form`
- `div.kanbn-task-editor-column-left`
- `div.kanbn-task-editor-column-right`
- `// TODO finish class structure docs...`

1
ext-src/KanbnTaskPanel.ts
View File

@ -146,6 +146,7 @@ export default class KanbnTaskPanel {
// Delete a task
case 'kanbn.delete':
// TODO delete task
// TODO add yes/no confirmation buttons to information message, then delete task and close task panel
vscode.window.showInformationMessage('delete task');
return;
}

67
src/TaskEditor.tsx
View File

@ -28,6 +28,19 @@ const TaskEditor = ({ task, tasks, columnName, columnNames, dateFormat, vscode }
});
};
// Called when the delete task button is clicked
const handleRemoveTask = () => {
vscode.postMessage({
command: 'kanbn.delete',
taskId: task!.id
});
};
// TODO progress bar below progress input
// TODO auto-colour tags while typing
// TODO comments
// TODO make sure all buttons have title attributes, maybe remove labels from array delete buttons?
return (
<div className="kanbn-task-editor">
<h1 className="kanbn-task-editor-title">{editing ? 'Update task' : 'Create new task'}</h1>
@ -50,6 +63,10 @@ const TaskEditor = ({ task, tasks, columnName, columnNames, dateFormat, vscode }
}}
validate={values => {
const errors: { name?: string } = {};
// TODO validation
// Task name cannot be empty
if (!values.name) {
errors.name = 'Task name is required.';
}
@ -80,7 +97,7 @@ const TaskEditor = ({ task, tasks, columnName, columnNames, dateFormat, vscode }
isSubmitting
}) => (
<Form>
<div style={{ display: "flex" }}>
<div className="kanbn-task-editor-form">
<div className="kanbn-task-editor-column-left">
<div className="kanbn-task-editor-field kanbn-task-editor-field-name">
<label className="kanbn-task-editor-field-label">
@ -236,6 +253,7 @@ const TaskEditor = ({ task, tasks, columnName, columnNames, dateFormat, vscode }
type="button"
className="kanbn-task-editor-button kanbn-task-editor-button-delete"
title="Delete"
onClick={handleRemoveTask}
>
<i className="codicon codicon-trash"></i>Delete
</button>}
@ -313,6 +331,53 @@ const TaskEditor = ({ task, tasks, columnName, columnNames, dateFormat, vscode }
name="progress"
/>
</div>
<div className="kanbn-task-editor-field kanbn-task-editor-field-tags">
<label className="kanbn-task-editor-field-label">
<p>Tags</p>
</label>
<FieldArray name="metadata.tags">
{({ insert, remove, push }) => (
<div>
{(
'tags' in values.metadata &&
values.metadata.tags!.length > 0
) && values.metadata.tags!.map((tag, index) => (
<div className="kanbn-task-editor-row kanbn-task-editor-row-tag" key={index}>
<div className="kanbn-task-editor-column kanbn-task-editor-field-tag">
<Field
className="kanbn-task-editor-field-input"
name={`metadata.tags.${index}`}
/>
<ErrorMessage
className="kanbn-task-editor-field-errors"
component="div"
name={`metadata.tags.${index}`}
/>
</div>
<div className="kanbn-task-editor-column kanbn-task-editor-column-buttons">
<button
type="button"
className="kanbn-task-editor-button kanbn-task-editor-button-delete"
onClick={() => remove(index)}
>
<i className="codicon codicon-trash"></i>Delete
</button>
</div>
</div>
))}
<div className="kanbn-task-editor-buttons">
<button
type="button"
className="kanbn-task-editor-button kanbn-task-editor-button-add"
onClick={() => push('')}
>
<i className="codicon codicon-plus"></i>Add tag
</button>
</div>
</div>
)}
</FieldArray>
</div>
</div>
</div>
</Form>

16
src/index.css
View File

@ -174,32 +174,32 @@ body {
border-radius: 4px;
}
.kanbn-task-tag-Nothing {
.kanbn-task-tag-nothing {
background-color: #6bf;
color: #333;
}
.kanbn-task-tag-Tiny {
.kanbn-task-tag-tiny {
background-color: #36d;
color: #333;
}
.kanbn-task-tag-Small {
.kanbn-task-tag-small {
background-color: #194;
color: #333;
}
.kanbn-task-tag-Medium {
.kanbn-task-tag-medium {
background-color: #eb1;
color: #333;
}
.kanbn-task-tag-Large {
.kanbn-task-tag-large {
background-color: #e83;
color: #333;
}
.kanbn-task-tag-Huge {
.kanbn-task-tag-huge {
background-color: #f42;
color: #333;
}
@ -220,6 +220,10 @@ body {
border-bottom: 1px var(--vscode-activityBar-inactiveForeground) solid;
}
.kanbn-task-editor-form {
display: flex;
}
.kanbn-task-editor-field .kanbn-task-editor-title {
font-size: 1.1em;
padding: 0.5em 0;