Add create task button to column headers

This commit is contained in:
Gordon
2021-03-31 00:45:53 +01:00
parent 154a325369
commit aafdf128a3
8 changed files with 28988 additions and 3577 deletions

View File

@ -73,7 +73,8 @@ export default class KanbnBoardPanel {
// Restrict the webview to only loading content from allowed paths
localResourceRoots: [
vscode.Uri.file(path.join(this._extensionPath, 'build')),
vscode.Uri.file(path.join(this._workspacePath, '.kanbn'))
vscode.Uri.file(path.join(this._workspacePath, '.kanbn')),
vscode.Uri.file(path.join(this._extensionPath, 'node_modules', 'vscode-codicons', 'dist'))
]
});
@ -151,6 +152,9 @@ export default class KanbnBoardPanel {
const customStyleUri = vscode.Uri
.file(path.join(this._workspacePath, '.kanbn', 'board.css'))
.with({ scheme: 'vscode-resource' });
const codiconsUri = vscode.Uri
.file(path.join(this._extensionPath, 'node_modules', 'vscode-codicons', 'dist', 'codicon.css'))
.with({ scheme: 'vscode-resource' });
// Use a nonce to whitelist which scripts can be run
const nonce = getNonce();
@ -164,7 +168,8 @@ export default class KanbnBoardPanel {
<title>Kanbn Board</title>
<link rel="stylesheet" type="text/css" href="${styleUri}">
<link rel="stylesheet" type="text/css" href="${customStyleUri}">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src vscode-resource: https:; script-src 'nonce-${nonce}';style-src vscode-resource: 'unsafe-inline' http: https: data:;">
<link rel="stylesheet" type="text/css" href="${codiconsUri}">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src vscode-resource: https:; script-src 'nonce-${nonce}'; font-src vscode-resource:; style-src vscode-resource: 'unsafe-inline' http: https: data:;">
<base href="${vscode.Uri.file(path.join(this._extensionPath, 'build')).with({ scheme: 'vscode-resource' })}/">
</head>
<body>

View File

@ -0,0 +1,2 @@
import * as path from 'path';
import * as vscode from 'vscode';

25375
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -29,7 +29,8 @@
"react-beautiful-dnd": "12.2.0",
"react-dom": "^16.3.2",
"terser": "3.14.1",
"vscode": "^1.1.37"
"vscode": "^1.1.37",
"vscode-codicons": "^0.0.15"
},
"scripts": {
"vscode:prepublish": "./scripts/build-non-split.js && tsc -p tsconfig.extension.json",

View File

@ -84,12 +84,15 @@ const Board = ({ columns, startedColumns, completedColumns }: {
<h2 className="kanbn-column-name">
{columnName}
<span className="kanbn-column-count">{column.length || ''}</span>
<button
type="button"
className="kanbn-create-task-button"
onClick={e => null}
title={`Create task in ${columnName}`}
>
<i className="codicon codicon-add"></i>
</button>
</h2>
{/*
// TODO codicons https://github.com/microsoft/vscode-extension-samples/tree/main/webview-codicons-sample
// TODO 'Add task' button next to each column header
// TODO show count next to header
*/}
<div>
<Droppable droppableId={columnName} key={columnName}>
{(provided, snapshot) => {

View File

@ -25,7 +25,7 @@ const Task = ({ task, index }: { task: KanbnTask, index: number }) => {
>
<button
type="button"
onClick={e => null} // TODO open task editor modal when clicked
onClick={e => null} // TODO open task editor webview panel when clicked
title={task.id}
>
{task.name}

View File

@ -37,6 +37,14 @@ body {
padding-left: 8px;
}
.kanbn-create-task-button {
float: right;
}
.kanbn-create-task-button .codicon {
font-size: 14px;
}
.kanbn-column:first-child .kanbn-column-name {
padding-left: 0;
}
@ -86,8 +94,7 @@ body {
color: var(--vscode-editor-foreground);
}
.kanbn-task button:focus,
.kanbn-task button:hover {
.kanbn-task button:focus, .kanbn-task button:hover {
border: none;
outline: none;
text-decoration: underline;

7140
yarn.lock

File diff suppressed because it is too large Load Diff