diff --git a/ext-src/KanbnBoardPanel.ts b/ext-src/KanbnBoardPanel.ts index 3068a4e..6591894 100644 --- a/ext-src/KanbnBoardPanel.ts +++ b/ext-src/KanbnBoardPanel.ts @@ -1,5 +1,6 @@ import * as path from 'path'; import * as vscode from 'vscode'; +import KanbnTaskPanel from './KanbnTaskPanel'; export default class KanbnBoardPanel { public static currentPanel: KanbnBoardPanel | undefined; @@ -101,7 +102,12 @@ export default class KanbnBoardPanel { return; case 'kanbn.task': - // TODO open task panel with task + // KanbnTaskPanel.create( + // this._extensionPath, + // this._workspacePath, + // this._kanbn, + // message.taskId + // ); vscode.window.showInformationMessage(`Opening task ${message.taskId}`); return; diff --git a/package-lock.json b/package-lock.json index 3666f10..32dc493 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7101,6 +7101,39 @@ "domelementtype": "1" } }, + "dot-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", + "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==", + "requires": { + "no-case": "^3.0.4", + "tslib": "^2.0.3" + }, + "dependencies": { + "lower-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", + "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "requires": { + "tslib": "^2.0.3" + } + }, + "no-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", + "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "requires": { + "lower-case": "^2.0.2", + "tslib": "^2.0.3" + } + }, + "tslib": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz", + "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==" + } + } + }, "dot-prop": { "version": "5.3.0", "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz", @@ -10111,6 +10144,17 @@ "param-case": "2.1.x", "relateurl": "0.2.x", "uglify-js": "3.4.x" + }, + "dependencies": { + "param-case": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/param-case/-/param-case-2.1.1.tgz", + "integrity": "sha1-35T9jPZTHs915r75oIWPvHK+Ikc=", + "dev": true, + "requires": { + "no-case": "^2.2.0" + } + } } }, "html-webpack-plugin": { @@ -13314,12 +13358,19 @@ } }, "param-case": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/param-case/-/param-case-2.1.1.tgz", - "integrity": "sha1-35T9jPZTHs915r75oIWPvHK+Ikc=", - "dev": true, + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz", + "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==", "requires": { - "no-case": "^2.2.0" + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + }, + "dependencies": { + "tslib": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz", + "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==" + } } }, "parent-module": { diff --git a/package.json b/package.json index 7abd478..8c1a1ad 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "@basementuniverse/kanbn": "file:~/Projects/kanbn", "@types/dateformat": "^3.0.1", "dateformat": "^4.5.1", + "param-case": "^3.0.4", "react": "^16.3.2", "react-beautiful-dnd": "12.2.0", "react-dom": "^16.3.2", diff --git a/src/Board.tsx b/src/Board.tsx index 96f88ae..c3fab94 100644 --- a/src/Board.tsx +++ b/src/Board.tsx @@ -2,6 +2,7 @@ import { DragDropContext, Droppable } from "react-beautiful-dnd"; import React, { useState } from "react"; import Task from './Task'; import VSCodeApi from "./VSCodeApi"; +import { paramCase } from 'param-case'; declare var acquireVsCodeApi: Function; const vscode: VSCodeApi = acquireVsCodeApi(); @@ -77,7 +78,10 @@ const Board = ({ columns, startedColumns, completedColumns, dateFormat }: { {Object.entries(columns).map(([columnName, column]) => { return (
{ startedColumns.indexOf(columnName) > -1 && - + } { completedColumns.indexOf(columnName) > -1 && - + } {columnName} {column.length || ''} diff --git a/src/KanbnTask.d.ts b/src/KanbnTask.d.ts index 1a44460..66eb296 100644 --- a/src/KanbnTask.d.ts +++ b/src/KanbnTask.d.ts @@ -9,6 +9,7 @@ declare type KanbnTask = { metadata: { created: Date, updated?: Date, + started?: Date, completed?: Date, assigned?: string, tags?: string[] diff --git a/src/Task.tsx b/src/Task.tsx index 33974ad..31e8dd1 100644 --- a/src/Task.tsx +++ b/src/Task.tsx @@ -9,6 +9,10 @@ const Task = ({ task, index, dateFormat, vscode }: { dateFormat: string, vscode: VSCodeApi }) => { + const createdDate = 'created' in task.metadata ? formatDate(task.metadata.created, dateFormat) : ''; + const updatedDate = 'updated' in task.metadata ? formatDate(task.metadata.updated, dateFormat) : ''; + const startedDate = 'started' in task.metadata ? formatDate(task.metadata.started, dateFormat) : ''; + const completedDate = 'completed' in task.metadata ? formatDate(task.metadata.completed, dateFormat) : ''; return ( - - { - 'tags' in task.metadata && -
- {task.metadata.tags!.map(tag => { - return ( - - {tag} - - ); - })} -
- } - { - 'assigned' in task.metadata && -
- {task.metadata.assigned} -
- } -
+
+ +
+
{ - 'updated' in task.metadata - ? formatDate(task.metadata.updated, dateFormat) - : formatDate(task.metadata.created, dateFormat) + 'tags' in task.metadata && +
+ {task.metadata.tags!.map(tag => { + return ( + + {tag} + + ); + })} +
}
-
- {task.description} +
+ { + 'assigned' in task.metadata && +
+ {task.metadata.assigned} +
+ } + { + (createdDate || updatedDate) && +
i).join('\n')}> + {updatedDate || createdDate} +
+ } + { + task.comments.length > 0 && +
+ {task.comments.length} +
+ } + { + task.subTasks.length > 0 && +
+ + {task.subTasks.filter(subTask => subTask.completed).length} / {task.subTasks.length} +
+ } + { + task.workload !== undefined && +
+ {task.workload} +
+ } + { + task.workload !== undefined && + task.progress !== undefined && +
+ }
- { - task.comments.length > 0 && -
- {task.comments.length} -
- } - { - task.subTasks.length > 0 && -
- - {task.subTasks.filter(subTask => subTask.completed).length} / {task.subTasks.length} -
- } - { - task.workload !== undefined && -
- {task.workload} -
- } - { - task.workload !== undefined && - task.progress !== undefined && -
- }
); }} diff --git a/src/index.css b/src/index.css index d748364..9f318da 100644 --- a/src/index.css +++ b/src/index.css @@ -1,17 +1,3 @@ -/* ---vscode-editor-background ---vscode-editor-foreground ---vscode-foreground - ---vscode-activityBar-background ---vscode-activityBar-foreground ---vscode-activityBar-inactiveForeground - ---vscode-button-background ---vscode-button-foreground ---vscode-button-hoverBackground -*/ - body { margin: 0; padding: 1em; @@ -37,16 +23,35 @@ body { padding-left: 8px; } +.kanbn-column-icon { + font-size: 0.8em !important; + margin-right: 0.5em; +} + .kanbn-create-task-button { + position: relative; + top: -2px; + left: -4px; float: right; + border: none; + outline: none; + color: var(--vscode-foreground); + background-color: transparent; + padding: 2px; + height: 16px; + width: 16px; + margin-right: 8px; +} + +.kanbn-create-task-button:focus, .kanbn-create-task-button:hover { + border: none; + outline: none; + color: var(--vscode-editor-background); + background-color: var(--vscode-foreground); } .kanbn-create-task-button .codicon { - font-size: 14px; -} - -.kanbn-column:first-child .kanbn-column-name { - padding-left: 0; + font-size: 11px !important; } .kanbn-column-count { @@ -61,32 +66,62 @@ body { border-left: 3px var(--vscode-activityBar-inactiveForeground) solid; } -.kanbn-column:first-child .kanbn-column-task-list { - margin-left: 0; -} - -.kanbn-column:last-child .kanbn-column-task-list { - margin-right: 0; -} - .kanbn-column-task-list.drag-over { border-color: var(--vscode-activityBar-foreground); } +.kanbn-column-backlog .kanbn-column-task-list { + border-color: #36d; +} + +.kanbn-column-backlog .kanbn-column-task-list.drag-over { + border-color: #69f; +} + +.kanbn-column-in-progress .kanbn-column-task-list { + border-color: #194; +} + +.kanbn-column-in-progress .kanbn-column-task-list.drag-over { + border-color: #3c7; +} + +.kanbn-column-todo .kanbn-column-task-list { + border-color: #eb1; +} + +.kanbn-column-todo .kanbn-column-task-list.drag-over { + border-color: #fe5; +} + +.kanbn-column-done .kanbn-column-task-list { + border-color: #e83; +} + +.kanbn-column-done .kanbn-column-task-list.drag-over { + border-color: #fa4; +} + .kanbn-task { + position: relative; + overflow: hidden; padding: 4px; margin: 8px; - min-height: 50px; + min-height: 30px; border: 1px var(--vscode-activityBar-inactiveForeground) solid; border-radius: 2px; color: var(--vscode-editor-foreground); + transition: background-color .5s ease-in-out; } .kanbn-task.drag { + background-color: var(--vscode-activityBar-inactiveForeground); border-color: var(--vscode-activityBar-activeBackground); } .kanbn-task-name { + margin: 0; + padding: 0; border: none; outline: none; background-color: transparent; @@ -99,3 +134,69 @@ body { outline: none; text-decoration: underline; } + +.kanbn-task-data { + display: inline-block; + margin: 4px 8px 4px 0; + min-width: 30%; + opacity: 0.7; + font-size: 0.9em; + font-weight: normal; + font-style: italic; +} + +.kanbn-task div .codicon { + position: relative; + top: 1px; + font-size: 0.9em !important; + margin-right: 4px; +} + +.kanbn-task-tag { + display: inline-block; + background-color: var(--vscode-activityBar-inactiveForeground); + color: var(--vscode-editor-background); + font-weight: bold; + padding: 2px 4px; + margin: 4px 4px 4px 0; + border-radius: 2px; +} + +.kanbn-task-tag-Nothing { + background-color: #aab; + color: #333; +} + +.kanbn-task-tag-Tiny { + background-color: #36d; + color: #333; +} + +.kanbn-task-tag-Small { + background-color: #194; + color: #333; +} + +.kanbn-task-tag-Medium { + background-color: #eb1; + color: #333; +} + +.kanbn-task-tag-Large { + background-color: #e83; + color: #333; +} + +.kanbn-task-tag-Huge { + background-color: #f42; + color: #333; +} + +.kanbn-task-progress { + position: absolute; + bottom: -2px; + left: 0; + height: 4px; + background-color: #3c7; + opacity: 0.7; +}