From c040620185b19b64d6dd3d367ad5c8d53a536f63 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 2 Nov 2021 22:50:10 +0100
Subject: [PATCH] chore: move margin outside of the popup component

---
 src/components/list/partials/filter-popup.vue | 14 +++++++++++++-
 src/components/misc/popup.vue                 |  4 +---
 src/views/list/views/Table.vue                | 12 ++++++++++--
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/components/list/partials/filter-popup.vue b/src/components/list/partials/filter-popup.vue
index 71eed3acc..0c3792bc4 100644
--- a/src/components/list/partials/filter-popup.vue
+++ b/src/components/list/partials/filter-popup.vue
@@ -16,10 +16,12 @@
 				{{ $t('filters.title') }}
 			</x-button>
 		</template>
-		<template #content>
+		<template #content="{isOpen}">
 			<filters
 				v-model="value"
 				ref="filters"
+				class="filter-popup"
+				:class="{'is-open': isOpen}"
 			/>
 		</template>
 	</popup>
@@ -84,3 +86,13 @@ export default {
 	},
 }
 </script>
+
+<style scoped lang="scss">
+.filter-popup {
+	margin: 0 !important;
+
+	&.is-open {
+		margin: 2rem 0 1rem !important;
+	}
+}
+</style>
diff --git a/src/components/misc/popup.vue b/src/components/misc/popup.vue
index 23506b997..92dbe0e8d 100644
--- a/src/components/misc/popup.vue
+++ b/src/components/misc/popup.vue
@@ -1,7 +1,7 @@
 <template>
 	<slot name="trigger" :isOpen="open" :toggle="toggle"></slot>
 	<div class="popup" :class="{'is-open': open}" ref="popup">
-		<slot name="content"/>
+		<slot name="content" :isOpen="open"/>
 	</div>
 </template>
 
@@ -45,12 +45,10 @@ onBeforeUnmount(() => {
 	overflow: hidden;
 	position: absolute;
 	top: 1rem;
-	margin: 0 !important;
 
 	&.is-open {
 		opacity: 1;
 		height: auto;
-		margin: 1rem 0 !important;
 	}
 }
 </style>
diff --git a/src/views/list/views/Table.vue b/src/views/list/views/Table.vue
index bd7a66fd6..b0b65c672 100644
--- a/src/views/list/views/Table.vue
+++ b/src/views/list/views/Table.vue
@@ -12,8 +12,8 @@
 							{{ $t('list.table.columns') }}
 						</x-button>
 					</template>
-					<template #content>
-						<card class="columns-filter">
+					<template #content="{isOpen}">
+						<card class="columns-filter" :class="{'is-open': isOpen}">
 							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.id">#</fancycheckbox>
 							<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.done">
 								{{ $t('task.attributes.done') }}
@@ -320,4 +320,12 @@ export default {
 		}
 	}
 }
+
+.columns-filter {
+	margin: 0 !important;
+
+	&.is-open {
+		margin: 2rem 0 1rem !important;
+	}
+}
 </style>
\ No newline at end of file