chore: move margin outside of the popup component

cypress/integration/list/list.spec.js

@@ -219,10 +219,10 @@ describe('Lists', () => {
 			cy.get('.table-view .filter-container .items .button')
 				.contains('Columns')
 				.click()
-			cy.get('.table-view .filter-container .card .card-content .fancycheckbox .check')
+			cy.get('.table-view .filter-container .card.columns-filter .card-content .fancycheckbox .check')
 				.contains('Priority')
 				.click()
-			cy.get('.table-view .filter-container .card .card-content .fancycheckbox .check')
+			cy.get('.table-view .filter-container .card.columns-filter .card-content .fancycheckbox .check')
 				.contains('Done')
 				.click()
 

src/components/list/partials/filter-popup.vue

@@ -1,37 +1,49 @@
 <template>
-	<transition name="fade">
+	<x-button
+		v-if="hasFilters"
+		type="secondary"
+		@click="clearFilters"
+	>
+		{{ $t('filters.clear') }}
+	</x-button>
+	<popup>
+		<template #trigger="{toggle}">
+			<x-button
+				@click.prevent.stop="toggle()"
+				type="secondary"
+				icon="filter"
+			>
+				{{ $t('filters.title') }}
+			</x-button>
+		</template>
+		<template #content="{isOpen}">
 			<filters
-			v-if="visibleInternal"
 				v-model="value"
 				ref="filters"
+				class="filter-popup"
+				:class="{'is-open': isOpen}"
 			/>
-	</transition>
+		</template>
+	</popup>
 </template>
 
 <script>
-import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
 import Filters from '../../../components/list/partials/filters'
+import {getDefaultParams} from '../../tasks/mixins/taskList'
+import Popup from '../../misc/popup'
 
 export default {
 	name: 'filter-popup',
 	components: {
+		Popup,
 		Filters,
 	},
 	props: {
 		modelValue: {
 			required: true,
 		},
-		visible: {
-			type: Boolean,
-			default: false,
-		},
 	},
 	emits: ['update:modelValue'],
-	data() {
-		return {
-			visibleInternal: false,
-		}
-	},
 	computed: {
 		value: {
 			get() {
@@ -41,34 +53,46 @@ export default {
 				this.$emit('update:modelValue', value)
 			},
 		},
+		hasFilters() {
+			// this.value also contains the page parameter which we don't want to include in filters
+			// eslint-disable-next-line no-unused-vars
+			const {filter_by, filter_value, filter_comparator, filter_concat, s} = this.value
+			const def = {...getDefaultParams()}
+
+			const params = {filter_by, filter_value, filter_comparator, filter_concat, s}
+			const defaultParams = {
+				filter_by: def.filter_by,
+				filter_value: def.filter_value,
+				filter_comparator: def.filter_comparator,
+				filter_concat: def.filter_concat,
+				s: s ? def.s : undefined,
+			}
+
+			return JSON.stringify(params) !== JSON.stringify(defaultParams)
 		},
-	mounted() {
-		document.addEventListener('click', this.hidePopup)
-	},
-	beforeUnmount() {
-		document.removeEventListener('click', this.hidePopup)
 	},
 	watch: {
 		modelValue: {
 			handler(value) {
-				this.params = value
+				this.value = value
 			},
 			immediate: true,
 		},
-		visible() {
-			this.visibleInternal = !this.visibleInternal
-		},
 	},
 	methods: {
-		hidePopup(e) {
+		clearFilters() {
-			if (!this.visibleInternal) {
+			this.value = {...getDefaultParams()}
-				return
-			}
-
-			closeWhenClickedOutside(e, this.$refs.filters.$el, () => {
-				this.visibleInternal = false
-			})
 		},
 	},
 }
 </script>
+
+<style scoped lang="scss">
+.filter-popup {
+	margin: 0 !important;
+
+	&.is-open {
+		margin: 2rem 0 1rem !important;
+	}
+}
+</style>

src/components/list/partials/filters.vue

@@ -458,15 +458,7 @@ export default {
 				return
 			}
 
-			let foundDone = false
+			this.filters.done = this.params.filter_by.some((f) => f === 'done') === false
-			this.params.filter_by.forEach((f, i) => {
-				if (f === 'done') {
-					foundDone = i
-				}
-			})
-			if (foundDone === false) {
-				this.filters.done = true
-			}
 		},
 		async prepareRelatedObjectFilter(kind, filterName = null, servicePrefix = null) {
 			if (filterName === null) {

src/components/misc/popup.vue

@@ -0,0 +1,54 @@
+<template>
+	<slot name="trigger" :isOpen="open" :toggle="toggle"></slot>
+	<div class="popup" :class="{'is-open': open}" ref="popup">
+		<slot name="content" :isOpen="open"/>
+	</div>
+</template>
+
+<script setup>
+import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
+import {onBeforeUnmount, onMounted, ref} from 'vue'
+
+const open = ref(false)
+const popup = ref(null)
+
+const toggle = () => {
+	open.value = !open.value
+}
+
+const hidePopup = e => {
+	if (!open.value) {
+		return
+	}
+
+	// we actually want to use popup.$el, not its value.
+	// eslint-disable-next-line vue/no-ref-as-operand
+	closeWhenClickedOutside(e, popup.value, () => {
+		open.value = false
+	})
+}
+
+onMounted(() => {
+	document.addEventListener('click', hidePopup)
+})
+
+onBeforeUnmount(() => {
+	document.removeEventListener('click', hidePopup)
+})
+</script>
+
+<style scoped lang="scss">
+.popup {
+	transition: opacity $transition;
+	opacity: 0;
+	height: 0;
+	overflow: hidden;
+	position: absolute;
+	top: 1rem;
+
+	&.is-open {
+		opacity: 1;
+		height: auto;
+	}
+}
+</style>

src/components/tasks/gantt-component.vue

@@ -9,13 +9,13 @@
 				>
 					{{ $t('filters.title') }}
 				</x-button>
-			</div>
 				<filter-popup
 					:visible="showTaskFilter"
 					v-model="params"
 					@update:modelValue="loadTasks()"
 				/>
 			</div>
+		</div>
 		<div class="dates">
 			<template v-for="(y, yk) in days" :key="yk + 'year'">
 				<div class="months">

src/components/tasks/mixins/taskList.js

@@ -1,14 +1,14 @@
 import TaskCollectionService from '@/services/taskCollection'
 
 // FIXME: merge with DEFAULT_PARAMS in filters.vue
-const DEFAULT_PARAMS = {
+export const getDefaultParams = () => ({
 	sort_by: ['position', 'id'],
 	order_by: ['asc', 'desc'],
 	filter_by: ['done'],
 	filter_value: ['false'],
 	filter_comparator: ['equals'],
 	filter_concat: 'and',
-}
+})
 
 /**
  * This mixin provides a base set of methods and properties to get tasks on a list.
@@ -26,7 +26,7 @@ export default {
 			searchTerm: '',
 
 			showTaskFilter: false,
-			params: DEFAULT_PARAMS,
+			params: {...getDefaultParams()},
 		}
 	},
 	watch: {

src/i18n/lang/en.json

@@ -344,6 +344,7 @@
   },
   "filters": {
     "title": "Filters",
+    "clear": "Clear Filters",
     "attributes": {
       "title": "Title",
       "titlePlaceholder": "The saved filter title goes here…",

src/styles/components/list.scss

@@ -47,10 +47,6 @@ $filter-container-top-link-share-list: -47px;
     justify-content: space-between;
     margin-right: .5rem;
 
-    .button, .input {
-      height: $switch-view-height;
-    }
-
     .field {
       transition: width $transition;
       width: 100%;

src/views/list/views/Kanban.vue

@@ -2,19 +2,12 @@
 	<div class="kanban-view">
 		<div class="filter-container" v-if="isSavedFilter">
 			<div class="items">
-				<x-button
-					@click.prevent.stop="toggleFilterPopup"
-					icon="filter"
-					type="secondary"
-				>
-					{{ $t('filters.title') }}
-				</x-button>
-			</div>
 				<filter-popup
-				:visible="showFilters"
 					v-model="params"
+					@update:modelValue="loadBuckets"
 				/>
 			</div>
+		</div>
 		<div
 			:class="{ 'is-loading': loading && !oneTaskUpdating}"
 			class="kanban kanban-bucket-container loader-container"
@@ -300,7 +293,6 @@ export default {
 				filter_comparator: [],
 				filter_concat: 'and',
 			},
-			showFilters: false,
 		}
 	},
 	created() {
@@ -359,10 +351,6 @@ export default {
 	},
 
 	methods: {
-		toggleFilterPopup() {
-			this.showFilters = !this.showFilters
-		},
-
 		loadBuckets() {
 			// Prevent trying to load buckets if the task popup view is active
 			if (this.$route.name !== 'list.kanban') {

src/views/list/views/List.vue

@@ -41,20 +41,12 @@
 						v-if="!showTaskSearch"
 					/>
 				</div>
-				<x-button
-					@click.prevent.stop="showTaskFilter = !showTaskFilter"
-					type="secondary"
-					icon="filter"
-				>
-					{{ $t('filters.title') }}
-				</x-button>
-			</div>
 				<filter-popup
-				:visible="showTaskFilter"
 					v-model="params"
 					@update:modelValue="loadTasks()"
 				/>
 			</div>
+		</div>
 
 		<card :padding="false" :has-content="false" class="has-overflow">
 			<template
@@ -154,6 +146,7 @@ import FilterPopup from '@/components/list/partials/filter-popup.vue'
 import {HAS_TASKS} from '@/store/mutation-types'
 import Nothing from '@/components/misc/nothing.vue'
 import Pagination from '@/components/misc/pagination.vue'
+import Popup from '@/components/misc/popup'
 
 import draggable from 'vuedraggable'
 import {calculateItemPosition} from '../../../helpers/calculateItemPosition'
@@ -197,6 +190,7 @@ export default {
 		taskList,
 	],
 	components: {
+		Popup,
 		Nothing,
 		FilterPopup,
 		SingleTaskInList,

src/views/list/views/Table.vue

@@ -2,23 +2,18 @@
 	<div :class="{'is-loading': taskCollectionService.loading}" class="table-view loader-container">
 		<div class="filter-container">
 			<div class="items">
+				<popup>
+					<template #trigger="{toggle}">
 						<x-button
-					@click.prevent.stop="() => {showActiveColumnsFilter = !showActiveColumnsFilter; showTaskFilter = false}"
+							@click.prevent.stop="toggle()"
 							icon="th"
 							type="secondary"
 						>
 							{{ $t('list.table.columns') }}
 						</x-button>
-				<x-button
+					</template>
-					@click.prevent.stop="() => {showTaskFilter = !showTaskFilter; showActiveColumnsFilter = false}"
+					<template #content="{isOpen}">
-					icon="filter"
+						<card class="columns-filter" :class="{'is-open': isOpen}">
-					type="secondary"
-				>
-					{{ $t('filters.title') }}
-				</x-button>
-			</div>
-			<transition name="fade">
-				<card v-if="showActiveColumnsFilter">
 							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.id">#</fancycheckbox>
 							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.done">
 								{{ $t('task.attributes.done') }}
@@ -57,13 +52,14 @@
 								{{ $t('task.attributes.createdBy') }}
 							</fancycheckbox>
 						</card>
-			</transition>
+					</template>
+				</popup>
 				<filter-popup
-				:visible="showTaskFilter"
 					v-model="params"
 					@update:modelValue="loadTasks()"
 				/>
 			</div>
+		</div>
 
 		<card :padding="false" :has-content="false">
 			<div class="has-horizontal-overflow">
@@ -200,10 +196,12 @@ import Sort from '../../../components/tasks/partials/sort'
 import {saveListView} from '@/helpers/saveListView'
 import FilterPopup from '@/components/list/partials/filter-popup.vue'
 import Pagination from '@/components/misc/pagination.vue'
+import Popup from '../../../components/misc/popup'
 
 export default {
 	name: 'Table',
 	components: {
+		Popup,
 		Done,
 		FilterPopup,
 		Sort,
@@ -219,7 +217,6 @@ export default {
 	],
 	data() {
 		return {
-			showActiveColumnsFilter: false,
 			activeColumns: {
 				id: true,
 				done: true,
@@ -323,4 +320,12 @@ export default {
 		}
 	}
 }
+
+.columns-filter {
+	margin: 0 !important;
+
+	&.is-open {
+		margin: 2rem 0 1rem !important;
+	}
+}
 </style>