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

Configure sprint and burndown buttons

Browse Source
This commit is contained in:
Gordon 2021-04-14 13:41:32 +01:00
parent 14b512bb12
commit ea2d31282a
4 changed files with 74 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ext-src/KanbnBoardPanel.ts
View File

@ -58,7 +58,9 @@ export default class KanbnBoardPanel {
hiddenColumns: index.options.hiddenColumns ?? [],
startedColumns: index.options.startedColumns ?? [],
completedColumns: index.options.completedColumns ?? [],
dateFormat: KanbnBoardPanel.currentPanel._kanbn.getDateFormat(index)
dateFormat: KanbnBoardPanel.currentPanel._kanbn.getDateFormat(index),
showBurndownButton: vscode.workspace.getConfiguration('vscode-kanbn').get('showBurndownButton'),
showSprintButton: vscode.workspace.getConfiguration('vscode-kanbn').get('showSprintButton')
});
}
}

6
src/App.tsx
View File

@ -22,6 +22,8 @@ function App() {
const [columnName, setColumnName] = useState('');
const [columnNames, setColumnNames] = useState([] as string[]);
const [panelUuid, setPanelUuid] = useState('');
const [showBurndownButton, setShowBurndownButton] = useState(false);
const [showSprintButton, setShowSprintButton] = useState(false);
window.addEventListener('message', event => {
const tasks = Object.fromEntries(event.data.tasks.map(task => [task.id, task]));
@ -38,6 +40,8 @@ function App() {
setHiddenColumns(event.data.hiddenColumns);
setStartedColumns(event.data.startedColumns);
setCompletedColumns(event.data.completedColumns);
setShowBurndownButton(event.data.showBurndownButton);
setShowSprintButton(event.data.showSprintButton);
break;
case 'task':
@ -64,6 +68,8 @@ function App() {
startedColumns={startedColumns}
completedColumns={completedColumns}
dateFormat={dateFormat}
showBurndownButton={showBurndownButton}
showSprintButton={showSprintButton}
vscode={vscode}
/>
}

76
src/Board.tsx
View File

@ -131,7 +131,18 @@ const filterTask = (task: KanbnTask, taskFilter: string) => {
return result;
};
const Board = ({ name, description, columns, hiddenColumns, startedColumns, completedColumns, dateFormat, vscode }: {
const Board = ({
name,
description,
columns,
hiddenColumns,
startedColumns,
completedColumns,
dateFormat,
showBurndownButton,
showSprintButton,
vscode
}: {
name: string,
description: string,
columns: Record<string, KanbnTask[]>,
@ -139,6 +150,8 @@ const Board = ({ name, description, columns, hiddenColumns, startedColumns, comp
startedColumns: string[],
completedColumns: string[],
dateFormat: string,
showBurndownButton: boolean,
showSprintButton: boolean,
vscode: VSCodeApi
}) => {
const [, setColumns] = useState(columns);
@ -167,37 +180,56 @@ const Board = ({ name, description, columns, hiddenColumns, startedColumns, comp
className="kanbn-filter-input"
placeholder="Filter tasks"
/>
<button
type="submit"
className="kanbn-header-button kanbn-header-button-filter"
onClick={filterTasks}
title="Filter tasks"
>
<i className="codicon codicon-filter"></i>
</button>
{
taskFilter &&
<button
type="button"
className="kanbn-clear-filter-button"
className="kanbn-header-button kanbn-header-button-clear-filter"
onClick={clearFilters}
title="Clear task filters"
>
<i className="codicon codicon-clear-all"></i>
</button>
}
<button
type="submit"
className="kanbn-filter-button"
onClick={filterTasks}
title="Filter tasks"
>
<i className="codicon codicon-filter"></i>
</button>
<button
type="button"
className="kanbn-burndown-button"
onClick={() => {
vscode.postMessage({
command: 'kanbn.burndown'
});
}}
title="Open burndown chart"
>
<i className="codicon codicon-graph"></i>
</button>
{
showSprintButton &&
<button
type="button"
className="kanbn-header-button kanbn-header-button-sprint"
onClick={() => {
vscode.postMessage({
command: 'kanbn.sprint'
});
}}
title="Start a new sprint"
>
<i className="codicon codicon-rocket"></i>
Sprint 1
</button>
}
{
showBurndownButton &&
<button
type="button"
className="kanbn-header-button kanbn-header-button-burndown"
onClick={() => {
vscode.postMessage({
command: 'kanbn.burndown'
});
}}
title="Open burndown chart"
>
<i className="codicon codicon-graph"></i>
</button>
}
</form>
</div>
</h1>

34
src/index.css
View File

@ -33,7 +33,7 @@ body.vscode-high-contrast {
.kanbn-filter-input {
box-sizing: border-box;
width: 80%;
width: 60%;
padding: 8px;
background-color: var(--vscode-input-background);
color: var(--vscode-input-foreground);
@ -44,45 +44,33 @@ body.vscode-high-contrast {
border-color: var(--vscode-input-border);
}
.kanbn-clear-filter-button {
position: absolute;
right: 92px;
outline: none;
border: none;
color: var(--vscode-button-foreground);
background-color: transparent;
padding: 9px 1em;
opacity: 0.6;
}
.kanbn-filter-button,
.kanbn-burndown-button {
.kanbn-header-button {
outline: none;
border: none;
background-color: var(--vscode-button-background);
color: var(--vscode-button-foreground);
padding: 9px 1em;
padding: 9px;
margin-left: 8px;
max-width: 120px;
overflow-x: hidden;
text-overflow: ellipsis;
}
.kanbn-filter-button .codicon,
.kanbn-clear-filter-button .codicon,
.kanbn-burndown-button .codicon {
.kanbn-header-button .codicon {
font-size: 12px !important;
position: relative;
top: 1px;
}
.kanbn-burndown-button .codicon {
.kanbn-header-button-burndown .codicon {
top: 2px;
}
.kanbn-clear-filter-button:hover, .kanbn-clear-filter-button:focus {
opacity: 1;
.kanbn-header-button-sprint .codicon {
margin-right: 0.5em;
}
.kanbn-filter-button:hover, .kanbn-filter-button:focus,
.kanbn-burndown-button:hover, .kanbn-burndown-button:focus {
.kanbn-header-button:hover, .kanbn-header-button:focus {
background-color: var(--vscode-button-hoverBackground);
}