Add create task button to column headers
This commit is contained in:
@ -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>
|
||||
|
2
ext-src/KanbnTaskPanel.ts
Normal file
2
ext-src/KanbnTaskPanel.ts
Normal file
@ -0,0 +1,2 @@
|
||||
import * as path from 'path';
|
||||
import * as vscode from 'vscode';
|
25375
package-lock.json
generated
25375
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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",
|
||||
|
@ -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) => {
|
||||
|
@ -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}
|
||||
|
@ -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;
|
||||
|
Reference in New Issue
Block a user