diff --git a/docs/styles.md b/docs/styles.md index f77e748..3c352bf 100644 --- a/docs/styles.md +++ b/docs/styles.md @@ -16,6 +16,7 @@ Various Codicon icons have been used in this extension. Check [here](https://cod - `kanbn-header-name` - `kanbn-filter` - `kanbn-filter-input` +- `kanbn-clear-filter-button` - `kanbn-filter-button` - `kanbn-header-description` - `kanbn-board` diff --git a/src/Board.tsx b/src/Board.tsx index d28a2bd..198138a 100644 --- a/src/Board.tsx +++ b/src/Board.tsx @@ -144,6 +144,12 @@ const Board = ({ name, description, columns, hiddenColumns, startedColumns, comp const [, setColumns] = useState(columns); const [taskFilter, setTaskFilter] = useState(''); + // Called when the clear filter button is clicked + const clearFilters = e => { + (document.querySelector('.kanbn-filter-input') as HTMLInputElement).value = ''; + filterTasks(e); + }; + // Called when the filter form is submitted const filterTasks = e => { e.preventDefault(); @@ -161,10 +167,22 @@ const Board = ({ name, description, columns, hiddenColumns, startedColumns, comp className="kanbn-filter-input" placeholder="Filter tasks" /> + { + taskFilter && + + } diff --git a/src/index.css b/src/index.css index 6631cb9..227a0b2 100644 --- a/src/index.css +++ b/src/index.css @@ -26,6 +26,7 @@ body.vscode-high-contrast { } .kanbn-filter { + position: relative; flex: 1; text-align: right; } @@ -43,6 +44,17 @@ body.vscode-high-contrast { border-color: var(--vscode-input-border); } +.kanbn-clear-filter-button { + position: absolute; + right: 45px; + outline: none; + border: none; + color: var(--vscode-button-foreground); + background-color: transparent; + padding: 9px 1em; + opacity: 0.6; +} + .kanbn-filter-button { outline: none; border: none; @@ -52,12 +64,17 @@ body.vscode-high-contrast { margin-left: 8px; } +.kanbn-clear-filter-button .codicon, .kanbn-filter-button .codicon { - font-size: 11px !important; + font-size: 12px !important; position: relative; top: 1px; } +.kanbn-clear-filter-button:hover, .kanbn-clear-filter-button:focus { + opacity: 1; +} + .kanbn-filter-button:hover, .kanbn-filter-button:focus { background-color: var(--vscode-button-hoverBackground); }