diff --git a/ext-src/KanbnBoardPanel.ts b/ext-src/KanbnBoardPanel.ts index 4abbe7d..8082fef 100644 --- a/ext-src/KanbnBoardPanel.ts +++ b/ext-src/KanbnBoardPanel.ts @@ -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') }); } } diff --git a/src/App.tsx b/src/App.tsx index 7126118..470a025 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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} /> } diff --git a/src/Board.tsx b/src/Board.tsx index ca9e195..592e946 100644 --- a/src/Board.tsx +++ b/src/Board.tsx @@ -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, @@ -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" /> + { taskFilter && } - - + { + showSprintButton && + + } + { + showBurndownButton && + + } diff --git a/src/index.css b/src/index.css index a0e2047..9435bf6 100644 --- a/src/index.css +++ b/src/index.css @@ -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); }