Configure sprint and burndown buttons

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')
       });
     }
   }

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}
         />
       }

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<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"
+                showSprintButton &&
-                className="kanbn-filter-button"
+                <button
-                onClick={filterTasks}
+                  type="button"
-                title="Filter tasks"
+                  className="kanbn-header-button kanbn-header-button-sprint"
-              >
+                  onClick={() => {
-                <i className="codicon codicon-filter"></i>
+                    vscode.postMessage({
-              </button>
+                      command: 'kanbn.sprint'
-              <button
+                    });
-                type="button"
+                  }}
-                className="kanbn-burndown-button"
+                  title="Start a new sprint"
-                onClick={() => {
+                >
-                  vscode.postMessage({
+                  <i className="codicon codicon-rocket"></i>
-                    command: 'kanbn.burndown'
+                  Sprint 1
-                  });
+                </button>
-                }}
+              }
-                title="Open burndown chart"
+              {
-              >
+                showBurndownButton &&
-                <i className="codicon codicon-graph"></i>
+                <button
-              </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>

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 {
+.kanbn-header-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 {
     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-header-button .codicon {
-.kanbn-clear-filter-button .codicon,
-.kanbn-burndown-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 {
+.kanbn-header-button-sprint .codicon {
-    opacity: 1;
+    margin-right: 0.5em;
 }
 
-.kanbn-filter-button:hover, .kanbn-filter-button:focus,
+.kanbn-header-button:hover, .kanbn-header-button:focus {
-.kanbn-burndown-button:hover, .kanbn-burndown-button:focus {
     background-color: var(--vscode-button-hoverBackground);
 }