fix(filters): rework filter popup button

frontend/src/components/project/partials/filter-popup.vue

@@ -1,11 +1,4 @@
 <template>
-	<x-button
-		v-if="hasFilters"
-		variant="secondary"
-		@click="clearFilters"
-	>
-		{{ $t('filters.clear') }}
-	</x-button>
 	<x-button
 		variant="secondary"
 		icon="filter"

frontend/src/components/project/partials/filters.vue

@@ -25,6 +25,13 @@
 			v-if="hasFooter"
 			#footer
 		>
+			<x-button
+				variant="secondary"
+				@click.prevent.stop="clearFiltersAndEmit"
+				class="mr-2"
+			>
+				{{ $t('filters.clear') }}
+			</x-button>
 			<x-button
 				variant="primary"
 				@click.prevent.stop="changeAndEmitButton"
@@ -130,4 +137,9 @@ function changeAndEmitButton() {
 	change()
 	emit('showResultsButtonClicked')
 }
+
+function clearFiltersAndEmit() {
+	params.value.filter = ''
+	changeAndEmitButton()
+}
 </script>

frontend/src/styles/components/project.scss

@@ -18,14 +18,12 @@ $filter-container-top-link-share-list: -47px;
   margin-top: $filter-container-top-default;
   z-index: 4;
 
-  .items {
   display: flex;
   justify-content: flex-end;
 
   .button:not(:last-of-type) {
     margin-right: .5rem;
   }
-  }
 
   .button {
     height: $switch-view-height;
@@ -35,37 +33,6 @@ $filter-container-top-link-share-list: -47px;
     text-align: left;
   }
 
-  .fancycheckbox {
-    display: block;
-  }
-
-  .search {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-right: .5rem;
-
-    .field {
-      transition: width $transition;
-      width: 100%;
-
-      &.hidden {
-        width: 0;
-        height: 0;
-        margin: 0;
-        overflow: hidden;
-      }
-
-      .button {
-        height: 100%;
-      }
-    }
-  }
-
-  .filters input {
-    font-size: .9rem;
-  }
-
   @media screen and (max-width: $tablet) {
     position: static;
     margin: 0 0 1rem 0 !important;

frontend/src/views/project/ProjectKanban.vue

@@ -5,13 +5,11 @@
 		view-name="kanban"
 	>
 		<template #header>
-			<div
+			<div class="filter-container">
+				<FilterPopup
 					v-if="!isSavedFilter(project)"
-				class="filter-container"
-			>
-				<div class="items">
-					<FilterPopup v-model="params" />
-				</div>
+					v-model="params"
+				/>
 			</div>
 		</template>
 
@@ -197,7 +195,9 @@
 												variant="secondary"
 												@click="toggleShowNewTaskInput(bucket.id)"
 											>
-												{{ bucket.tasks.length === 0 ? $t('project.kanban.addTask') : $t('project.kanban.addAnotherTask') }}
+												{{
+													bucket.tasks.length === 0 ? $t('project.kanban.addTask') : $t('project.kanban.addAnotherTask')
+												}}
 											</x-button>
 										</div>
 									</template>
@@ -290,7 +290,11 @@ import KanbanCard from '@/components/tasks/partials/kanban-card.vue'
 import Dropdown from '@/components/misc/dropdown.vue'
 import DropdownItem from '@/components/misc/dropdown-item.vue'
 
-import {getCollapsedBucketState, saveCollapsedBucketState, type CollapsedBuckets} from '@/helpers/saveCollapsedBucketState'
+import {
+	type CollapsedBuckets,
+	getCollapsedBucketState,
+	saveCollapsedBucketState,
+} from '@/helpers/saveCollapsedBucketState'
 import {calculateItemPosition} from '@/helpers/calculateItemPosition'
 
 import {isSavedFilter} from '@/services/savedFilter'
@@ -739,6 +743,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 		* {
 			opacity: 0;
 		}
+
 		&::after {
 			content: '';
 			position: absolute;
@@ -780,6 +785,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 			&:first-of-type {
 				padding-top: .5rem;
 			}
+
 			&:last-of-type {
 				padding-bottom: .5rem;
 			}

frontend/src/views/project/ProjectList.vue

@@ -5,53 +5,13 @@
 		view-name="project"
 	>
 		<template #header>
-			<div
-				v-if="!isSavedFilter(project)"
-				class="filter-container"
-			>
-				<div class="items">
-					<div class="search">
-						<div
-							:class="{ hidden: !showTaskSearch }"
-							class="field has-addons"
-						>
-							<div class="control has-icons-left has-icons-right">
-								<input
-									v-model="searchTerm"
-									v-focus
-									class="input"
-									:placeholder="$t('misc.search')"
-									type="text"
-									@blur="hideSearchBar()"
-									@keyup.enter="searchTasks"
-								>
-								<span class="icon is-left">
-									<icon icon="search" />
-								</span>
-							</div>
-							<div class="control">
-								<x-button
-									:loading="loading"
-									:shadow="false"
-									@click="searchTasks"
-								>
-									{{ $t('misc.search') }}
-								</x-button>
-							</div>
-						</div>
-						<x-button
-							v-if="!showTaskSearch"
-							icon="search"
-							variant="secondary"
-							@click="showTaskSearch = !showTaskSearch"
-						/>
-					</div>
+			<div class="filter-container">
 				<FilterPopup
+					v-if="!isSavedFilter(project)"
 					v-model="params"
 					@update:modelValue="prepareFiltersAndLoadTasks()"
 				/>
 			</div>
-			</div>
 		</template>
 
 		<template #default>
@@ -265,6 +225,7 @@ function hideSearchBar() {
 }
 
 const addTaskRef = ref<typeof AddTask | null>(null)
+
 function focusNewTaskInput() {
 	addTaskRef.value?.focusTaskInput()
 }
@@ -273,8 +234,7 @@ function updateTaskList(task: ITask) {
 	if (isAlphabeticalSorting.value) {
 		// reload tasks with current filter and sorting
 		loadTasks()
-	}
-	else {
+	} else {
 		allTasks.value = [
 			task,
 			...allTasks.value,

frontend/src/views/project/ProjectTable.vue

@@ -284,9 +284,8 @@ import FilterPopup from '@/components/project/partials/filter-popup.vue'
 import Pagination from '@/components/misc/pagination.vue'
 import Popup from '@/components/misc/popup.vue'
 
-import {useTaskList} from '@/composables/useTaskList'
-
 import type {SortBy} from '@/composables/useTaskList'
+import {useTaskList} from '@/composables/useTaskList'
 import type {ITask} from '@/modelTypes/ITask'
 import type {IProject} from '@/modelTypes/IProject'
 import AssigneeList from '@/components/tasks/partials/assigneeList.vue'
@@ -381,6 +380,11 @@ const taskDetailRoutes = computed(() => Object.fromEntries(
 .columns-filter {
 	margin: 0;
 
+	:deep(.card-content .content) {
+		display: flex;
+		flex-direction: column;
+	}
+
 	&.is-open {
 		margin: 2rem 0 1rem;
 	}