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