fix(views): refactor filter button slot in wrapper

Before this change, the filter button on the top right was positioned using absolute positioning and plenty of tricks, which were brittle and not really maintainable. Now, the buttons are positioned using flexbox, which should make this a lot more maintainable.

frontend/src/components/input/button.vue

@@ -28,7 +28,7 @@
 				/>
 			</span>
 		</template>
-		<slot />
+		<slot/>
 	</BaseButton>
 </template>
 
@@ -41,13 +41,13 @@ const BUTTON_TYPES_MAP = {
 
 export type ButtonTypes = keyof typeof BUTTON_TYPES_MAP
 
-export default { name: 'XButton' }
+export default {name: 'XButton'}
 </script>
 
 <script setup lang="ts">
 import {computed, useSlots} from 'vue'
 import BaseButton, {type BaseButtonProps} from '@/components/base/BaseButton.vue'
-import type { IconProp } from '@fortawesome/fontawesome-svg-core'
+import type {IconProp} from '@fortawesome/fontawesome-svg-core'
 
 // extending the props of the BaseButton
 export interface ButtonProps extends /* @vue-ignore */ BaseButtonProps {
@@ -86,6 +86,7 @@ const showIconOnly = computed(() => icon !== '' && typeof slots.default === 'und
 	box-shadow: var(--shadow-sm);
 	display: inline-flex;
 	white-space: var(--button-white-space);
+	line-height: 1;
 
 	&:hover {
 		box-shadow: var(--shadow-md);

frontend/src/components/project/ProjectWrapper.vue

@@ -149,8 +149,14 @@ function getViewTitle(view: IProjectView) {
 
 <style lang="scss" scoped>
 .switch-view-container {
-	@media screen and (max-width: $tablet) {
+	min-height: $switch-view-height;
+	margin-bottom: 1rem;
+	
 	display: flex;
+	justify-content: space-between;
+	align-items: center;	
+	
+	@media screen and (max-width: $tablet) {
 		justify-content: center;
 		flex-direction: column;
 	}
@@ -162,8 +168,6 @@ function getViewTitle(view: IProjectView) {
 	border-radius: $radius;
 	font-size: .75rem;
 	box-shadow: var(--shadow-sm);
-	height: $switch-view-height;
-	margin: 0 auto 1rem;
 	padding: .5rem;
 }
 

frontend/src/components/project/views/ProjectGantt.vue

@@ -4,7 +4,7 @@
 		:project-id="filters.projectId"
 		:viewId
 	>
-		<template #header>
+		<template #default>
 			<card :has-content="false">
 				<div class="gantt-options">
 					<div class="field">
@@ -45,9 +45,7 @@
 					</Fancycheckbox>
 				</div>
 			</card>
-		</template>
 
-		<template #default>
 			<div class="gantt-chart-container">
 				<card
 					:has-content="false"
@@ -79,7 +77,7 @@ import {useI18n} from 'vue-i18n'
 import type {RouteLocationNormalized} from 'vue-router'
 
 import {useBaseStore} from '@/stores/base'
-import { getFlatpickrLanguage } from '@/helpers/flatpickrLanguage'
+import {getFlatpickrLanguage} from '@/helpers/flatpickrLanguage'
 
 import Foo from '@/components/misc/flatpickr/Flatpickr.vue'
 import ProjectWrapper from '@/components/project/ProjectWrapper.vue'

frontend/src/components/project/views/ProjectTable.vue

@@ -6,13 +6,13 @@
 	>
 		<template #header>
 			<div class="filter-container">
-				<div class="items">
 				<Popup>
 					<template #trigger="{toggle}">
 						<x-button
 							icon="th"
 							variant="secondary"
 							@click.prevent.stop="toggle()"
+							class="mr-2"
 						>
 							{{ $t('project.table.columns') }}
 						</x-button>
@@ -67,8 +67,7 @@
 						</card>
 					</template>
 				</Popup>
-					<FilterPopup v-model="params" />
-				</div>
+				<FilterPopup v-model="params"/>
 			</div>
 		</template>
 
@@ -207,7 +206,7 @@
 									/>
 								</td>
 								<td v-if="activeColumns.labels">
-										<Labels :labels="t.labels" />
+									<Labels :labels="t.labels"/>
 								</td>
 								<td v-if="activeColumns.assignees">
 									<AssigneeList
@@ -397,4 +396,8 @@ const taskDetailRoutes = computed(() => Object.fromEntries(
 	border: none;
 	box-shadow: none;
 }
+
+.filter-container :deep(.popup) {
+	top: 7rem;
+}
 </style>

frontend/src/styles/components/_index.scss

@@ -1,5 +1,4 @@
 @import "tooltip";
 @import "labels";
-@import "project";
 @import "task";
 @import "tasks";

frontend/src/styles/components/project.scss

@@ -1,77 +0,0 @@
-// FIXME: should be a component <FilterContainer>
-// used in
-// - Kanban.vue
-// - Project.vue
-// - Table.vue
-
-$filter-container-top-default: -59px;
-$filter-container-top-link-share-gantt: -133px;
-$filter-container-top-link-share-list: -47px;
-
-.filter-container {
-  text-align: right;
-  width: 100%;
-  min-width: 400px;
-  max-width: 180px;
-  position: absolute;
-  right: 1.5rem;
-  margin-top: $filter-container-top-default;
-  z-index: 4;
-
-  display: flex;
-  justify-content: flex-end;
-
-  .button:not(:last-of-type) {
-    margin-right: .5rem;
-  }
-
-  .button {
-    height: $switch-view-height;
-  }
-
-  .card {
-    text-align: left;
-  }
-
-  @media screen and (max-width: $tablet) {
-    position: static;
-    margin: 0 0 1rem 0 !important;
-    max-width: 100%;
-    min-width: auto;
-
-    .items {
-      justify-content: center;
-    }
-
-    .search {
-      width: 100%;
-
-      .control:first-child {
-        width: 100%;
-      }
-    }
-  }
-}
-
-
-.link-share-container .gantt-chart-container .filter-container,
-.gantt-chart-container .filter-container {
-  right: 0;
-  margin-top: calc(#{$filter-container-top-link-share-gantt - 2} - 7rem);
-}
-
-.link-share-container .gantt-chart-container .filter-container {
-  margin-top: calc(#{$filter-container-top-link-share-gantt} - 5rem);
-}
-
-.link-share-container .list-view .filter-container {
-  margin-top: $filter-container-top-link-share-list - 10px;
-}
-
-.link-share-container.project\.table-view,
-.link-share-container.project\.list-view {
-  .filter-container {
-    right: 9rem;
-    margin-top: $filter-container-top-default;
-  }
-}