From 8a72fe26f8a5b4f99150a8a7ef1be52b17738ac5 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 2 Apr 2024 14:02:31 +0200
Subject: [PATCH] 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      |  73 +--
 .../src/components/project/ProjectWrapper.vue |  10 +-
 .../components/project/views/ProjectGantt.vue |   6 +-
 .../components/project/views/ProjectTable.vue | 455 +++++++++---------
 frontend/src/styles/components/_index.scss    |   1 -
 frontend/src/styles/components/project.scss   |  77 ---
 6 files changed, 275 insertions(+), 347 deletions(-)
 delete mode 100644 frontend/src/styles/components/project.scss

diff --git a/frontend/src/components/input/button.vue b/frontend/src/components/input/button.vue
index d0c573d69..bc9990dcf 100644
--- a/frontend/src/components/input/button.vue
+++ b/frontend/src/components/input/button.vue
@@ -13,7 +13,7 @@
 		}"
 	>
 		<template v-if="icon">
-			<icon 
+			<icon
 				v-if="showIconOnly"
 				:icon="icon"
 				:style="{'color': iconColor !== '' ? iconColor : undefined}"
@@ -22,32 +22,32 @@
 				v-else
 				class="icon is-small"
 			>
-				<icon 
+				<icon
 					:icon="icon"
 					:style="{'color': iconColor !== '' ? iconColor : undefined}"
 				/>
 			</span>
 		</template>
-		<slot />
+		<slot/>
 	</BaseButton>
 </template>
 
 <script lang="ts">
 const BUTTON_TYPES_MAP = {
-  primary: 'is-primary',
-  secondary: 'is-outlined',
-  tertiary: 'is-text is-inverted underline-none',
+	primary: 'is-primary',
+	secondary: 'is-outlined',
+	tertiary: 'is-text is-inverted underline-none',
 } as const
 
 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 {
@@ -76,37 +76,38 @@ const showIconOnly = computed(() => icon !== '' && typeof slots.default === 'und
 
 <style lang="scss" scoped>
 .button {
-  transition: all $transition;
-  border: 0;
-  text-transform: uppercase;
-  font-size: 0.85rem;
-  font-weight: bold;
-  height: auto;
-  min-height: $button-height;
-  box-shadow: var(--shadow-sm);
-  display: inline-flex;
-  white-space: var(--button-white-space);
+	transition: all $transition;
+	border: 0;
+	text-transform: uppercase;
+	font-size: 0.85rem;
+	font-weight: bold;
+	height: auto;
+	min-height: $button-height;
+	box-shadow: var(--shadow-sm);
+	display: inline-flex;
+	white-space: var(--button-white-space);
+	line-height: 1;
 
-  &:hover {
-    box-shadow: var(--shadow-md);
-  }
+	&:hover {
+		box-shadow: var(--shadow-md);
+	}
 
-  &.fullheight {
-    padding-right: 7px;
-    height: 100%;
-  }
+	&.fullheight {
+		padding-right: 7px;
+		height: 100%;
+	}
 
-  &.is-active,
-  &.is-focused,
-  &:active,
-  &:focus,
-  &:focus:not(:active) {
-    box-shadow: var(--shadow-xs) !important;
-  }
+	&.is-active,
+	&.is-focused,
+	&:active,
+	&:focus,
+	&:focus:not(:active) {
+		box-shadow: var(--shadow-xs) !important;
+	}
 
-  &.is-primary.is-outlined:hover {
-    color: var(--white);
-  }
+	&.is-primary.is-outlined:hover {
+		color: var(--white);
+	}
 }
 
 .is-small {
@@ -114,6 +115,6 @@ const showIconOnly = computed(() => icon !== '' && typeof slots.default === 'und
 }
 
 .underline-none {
-  text-decoration: none !important;
+	text-decoration: none !important;
 }
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/project/ProjectWrapper.vue b/frontend/src/components/project/ProjectWrapper.vue
index 8d23f7629..ec670b2cb 100644
--- a/frontend/src/components/project/ProjectWrapper.vue
+++ b/frontend/src/components/project/ProjectWrapper.vue
@@ -149,8 +149,14 @@ function getViewTitle(view: IProjectView) {
 
 <style lang="scss" scoped>
 .switch-view-container {
+	min-height: $switch-view-height;
+	margin-bottom: 1rem;
+	
+	display: flex;
+	justify-content: space-between;
+	align-items: center;	
+	
 	@media screen and (max-width: $tablet) {
-		display: flex;
 		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;
 }
 
diff --git a/frontend/src/components/project/views/ProjectGantt.vue b/frontend/src/components/project/views/ProjectGantt.vue
index 6f0ec8dcf..5d1c08282 100644
--- a/frontend/src/components/project/views/ProjectGantt.vue
+++ b/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'
diff --git a/frontend/src/components/project/views/ProjectTable.vue b/frontend/src/components/project/views/ProjectTable.vue
index 9393ed559..c3ae1aa79 100644
--- a/frontend/src/components/project/views/ProjectTable.vue
+++ b/frontend/src/components/project/views/ProjectTable.vue
@@ -6,69 +6,68 @@
 	>
 		<template #header>
 			<div class="filter-container">
-				<div class="items">
-					<Popup>
-						<template #trigger="{toggle}">
-							<x-button
-								icon="th"
-								variant="secondary"
-								@click.prevent.stop="toggle()"
-							>
-								{{ $t('project.table.columns') }}
-							</x-button>
-						</template>
-						<template #content="{isOpen}">
-							<card
-								class="columns-filter"
-								:class="{'is-open': isOpen}"
-							>
-								<Fancycheckbox v-model="activeColumns.index">
-									#
-								</Fancycheckbox>
-								<Fancycheckbox v-model="activeColumns.done">
-									{{ $t('task.attributes.done') }}
-								</Fancycheckbox>
-								<Fancycheckbox v-model="activeColumns.title">
-									{{ $t('task.attributes.title') }}
-								</Fancycheckbox>
-								<Fancycheckbox v-model="activeColumns.priority">
-									{{ $t('task.attributes.priority') }}
-								</Fancycheckbox>
-								<Fancycheckbox v-model="activeColumns.labels">
-									{{ $t('task.attributes.labels') }}
-								</Fancycheckbox>
-								<Fancycheckbox v-model="activeColumns.assignees">
-									{{ $t('task.attributes.assignees') }}
-								</Fancycheckbox>
-								<Fancycheckbox v-model="activeColumns.dueDate">
-									{{ $t('task.attributes.dueDate') }}
-								</Fancycheckbox>
-								<Fancycheckbox v-model="activeColumns.startDate">
-									{{ $t('task.attributes.startDate') }}
-								</Fancycheckbox>
-								<Fancycheckbox v-model="activeColumns.endDate">
-									{{ $t('task.attributes.endDate') }}
-								</Fancycheckbox>
-								<Fancycheckbox v-model="activeColumns.percentDone">
-									{{ $t('task.attributes.percentDone') }}
-								</Fancycheckbox>
-								<Fancycheckbox v-model="activeColumns.doneAt">
-									{{ $t('task.attributes.doneAt') }}
-								</Fancycheckbox>
-								<Fancycheckbox v-model="activeColumns.created">
-									{{ $t('task.attributes.created') }}
-								</Fancycheckbox>
-								<Fancycheckbox v-model="activeColumns.updated">
-									{{ $t('task.attributes.updated') }}
-								</Fancycheckbox>
-								<Fancycheckbox v-model="activeColumns.createdBy">
-									{{ $t('task.attributes.createdBy') }}
-								</Fancycheckbox>
-							</card>
-						</template>
-					</Popup>
-					<FilterPopup v-model="params" />
-				</div>
+				<Popup>
+					<template #trigger="{toggle}">
+						<x-button
+							icon="th"
+							variant="secondary"
+							@click.prevent.stop="toggle()"
+							class="mr-2"
+						>
+							{{ $t('project.table.columns') }}
+						</x-button>
+					</template>
+					<template #content="{isOpen}">
+						<card
+							class="columns-filter"
+							:class="{'is-open': isOpen}"
+						>
+							<Fancycheckbox v-model="activeColumns.index">
+								#
+							</Fancycheckbox>
+							<Fancycheckbox v-model="activeColumns.done">
+								{{ $t('task.attributes.done') }}
+							</Fancycheckbox>
+							<Fancycheckbox v-model="activeColumns.title">
+								{{ $t('task.attributes.title') }}
+							</Fancycheckbox>
+							<Fancycheckbox v-model="activeColumns.priority">
+								{{ $t('task.attributes.priority') }}
+							</Fancycheckbox>
+							<Fancycheckbox v-model="activeColumns.labels">
+								{{ $t('task.attributes.labels') }}
+							</Fancycheckbox>
+							<Fancycheckbox v-model="activeColumns.assignees">
+								{{ $t('task.attributes.assignees') }}
+							</Fancycheckbox>
+							<Fancycheckbox v-model="activeColumns.dueDate">
+								{{ $t('task.attributes.dueDate') }}
+							</Fancycheckbox>
+							<Fancycheckbox v-model="activeColumns.startDate">
+								{{ $t('task.attributes.startDate') }}
+							</Fancycheckbox>
+							<Fancycheckbox v-model="activeColumns.endDate">
+								{{ $t('task.attributes.endDate') }}
+							</Fancycheckbox>
+							<Fancycheckbox v-model="activeColumns.percentDone">
+								{{ $t('task.attributes.percentDone') }}
+							</Fancycheckbox>
+							<Fancycheckbox v-model="activeColumns.doneAt">
+								{{ $t('task.attributes.doneAt') }}
+							</Fancycheckbox>
+							<Fancycheckbox v-model="activeColumns.created">
+								{{ $t('task.attributes.created') }}
+							</Fancycheckbox>
+							<Fancycheckbox v-model="activeColumns.updated">
+								{{ $t('task.attributes.updated') }}
+							</Fancycheckbox>
+							<Fancycheckbox v-model="activeColumns.createdBy">
+								{{ $t('task.attributes.createdBy') }}
+							</Fancycheckbox>
+						</card>
+					</template>
+				</Popup>
+				<FilterPopup v-model="params"/>
 			</div>
 		</template>
 
@@ -84,175 +83,175 @@
 					<div class="has-horizontal-overflow">
 						<table class="table has-actions is-hoverable is-fullwidth mb-0">
 							<thead>
-								<tr>
-									<th v-if="activeColumns.index">
-										#
-										<Sort
-											:order="sortBy.index"
-											@click="sort('index')"
-										/>
-									</th>
-									<th v-if="activeColumns.done">
-										{{ $t('task.attributes.done') }}
-										<Sort
-											:order="sortBy.done"
-											@click="sort('done')"
-										/>
-									</th>
-									<th v-if="activeColumns.title">
-										{{ $t('task.attributes.title') }}
-										<Sort
-											:order="sortBy.title"
-											@click="sort('title')"
-										/>
-									</th>
-									<th v-if="activeColumns.priority">
-										{{ $t('task.attributes.priority') }}
-										<Sort
-											:order="sortBy.priority"
-											@click="sort('priority')"
-										/>
-									</th>
-									<th v-if="activeColumns.labels">
-										{{ $t('task.attributes.labels') }}
-									</th>
-									<th v-if="activeColumns.assignees">
-										{{ $t('task.attributes.assignees') }}
-									</th>
-									<th v-if="activeColumns.dueDate">
-										{{ $t('task.attributes.dueDate') }}
-										<Sort
-											:order="sortBy.due_date"
-											@click="sort('due_date')"
-										/>
-									</th>
-									<th v-if="activeColumns.startDate">
-										{{ $t('task.attributes.startDate') }}
-										<Sort
-											:order="sortBy.start_date"
-											@click="sort('start_date')"
-										/>
-									</th>
-									<th v-if="activeColumns.endDate">
-										{{ $t('task.attributes.endDate') }}
-										<Sort
-											:order="sortBy.end_date"
-											@click="sort('end_date')"
-										/>
-									</th>
-									<th v-if="activeColumns.percentDone">
-										{{ $t('task.attributes.percentDone') }}
-										<Sort
-											:order="sortBy.percent_done"
-											@click="sort('percent_done')"
-										/>
-									</th>
-									<th v-if="activeColumns.doneAt">
-										{{ $t('task.attributes.doneAt') }}
-										<Sort
-											:order="sortBy.done_at"
-											@click="sort('done_at')"
-										/>
-									</th>
-									<th v-if="activeColumns.created">
-										{{ $t('task.attributes.created') }}
-										<Sort
-											:order="sortBy.created"
-											@click="sort('created')"
-										/>
-									</th>
-									<th v-if="activeColumns.updated">
-										{{ $t('task.attributes.updated') }}
-										<Sort
-											:order="sortBy.updated"
-											@click="sort('updated')"
-										/>
-									</th>
-									<th v-if="activeColumns.createdBy">
-										{{ $t('task.attributes.createdBy') }}
-									</th>
-								</tr>
+							<tr>
+								<th v-if="activeColumns.index">
+									#
+									<Sort
+										:order="sortBy.index"
+										@click="sort('index')"
+									/>
+								</th>
+								<th v-if="activeColumns.done">
+									{{ $t('task.attributes.done') }}
+									<Sort
+										:order="sortBy.done"
+										@click="sort('done')"
+									/>
+								</th>
+								<th v-if="activeColumns.title">
+									{{ $t('task.attributes.title') }}
+									<Sort
+										:order="sortBy.title"
+										@click="sort('title')"
+									/>
+								</th>
+								<th v-if="activeColumns.priority">
+									{{ $t('task.attributes.priority') }}
+									<Sort
+										:order="sortBy.priority"
+										@click="sort('priority')"
+									/>
+								</th>
+								<th v-if="activeColumns.labels">
+									{{ $t('task.attributes.labels') }}
+								</th>
+								<th v-if="activeColumns.assignees">
+									{{ $t('task.attributes.assignees') }}
+								</th>
+								<th v-if="activeColumns.dueDate">
+									{{ $t('task.attributes.dueDate') }}
+									<Sort
+										:order="sortBy.due_date"
+										@click="sort('due_date')"
+									/>
+								</th>
+								<th v-if="activeColumns.startDate">
+									{{ $t('task.attributes.startDate') }}
+									<Sort
+										:order="sortBy.start_date"
+										@click="sort('start_date')"
+									/>
+								</th>
+								<th v-if="activeColumns.endDate">
+									{{ $t('task.attributes.endDate') }}
+									<Sort
+										:order="sortBy.end_date"
+										@click="sort('end_date')"
+									/>
+								</th>
+								<th v-if="activeColumns.percentDone">
+									{{ $t('task.attributes.percentDone') }}
+									<Sort
+										:order="sortBy.percent_done"
+										@click="sort('percent_done')"
+									/>
+								</th>
+								<th v-if="activeColumns.doneAt">
+									{{ $t('task.attributes.doneAt') }}
+									<Sort
+										:order="sortBy.done_at"
+										@click="sort('done_at')"
+									/>
+								</th>
+								<th v-if="activeColumns.created">
+									{{ $t('task.attributes.created') }}
+									<Sort
+										:order="sortBy.created"
+										@click="sort('created')"
+									/>
+								</th>
+								<th v-if="activeColumns.updated">
+									{{ $t('task.attributes.updated') }}
+									<Sort
+										:order="sortBy.updated"
+										@click="sort('updated')"
+									/>
+								</th>
+								<th v-if="activeColumns.createdBy">
+									{{ $t('task.attributes.createdBy') }}
+								</th>
+							</tr>
 							</thead>
 							<tbody>
-								<tr
-									v-for="t in tasks"
-									:key="t.id"
-								>
-									<td v-if="activeColumns.index">
-										<router-link :to="taskDetailRoutes[t.id]">
-											<template v-if="t.identifier === ''">
-												#{{ t.index }}
-											</template>
-											<template v-else>
-												{{ t.identifier }}
-											</template>
-										</router-link>
-									</td>
-									<td v-if="activeColumns.done">
-										<Done
-											:is-done="t.done"
-											variant="small"
-										/>
-									</td>
-									<td v-if="activeColumns.title">
-										<router-link :to="taskDetailRoutes[t.id]">
-											{{ t.title }}
-										</router-link>
-									</td>
-									<td v-if="activeColumns.priority">
-										<PriorityLabel
-											:priority="t.priority"
-											:done="t.done"
-											:show-all="true"
-										/>
-									</td>
-									<td v-if="activeColumns.labels">
-										<Labels :labels="t.labels" />
-									</td>
-									<td v-if="activeColumns.assignees">
-										<AssigneeList
-											v-if="t.assignees.length > 0"
-											:assignees="t.assignees"
-											:avatar-size="28"
-											class="ml-1"
-											:inline="true"
-										/>
-									</td>
-									<DateTableCell
-										v-if="activeColumns.dueDate"
-										:date="t.dueDate"
+							<tr
+								v-for="t in tasks"
+								:key="t.id"
+							>
+								<td v-if="activeColumns.index">
+									<router-link :to="taskDetailRoutes[t.id]">
+										<template v-if="t.identifier === ''">
+											#{{ t.index }}
+										</template>
+										<template v-else>
+											{{ t.identifier }}
+										</template>
+									</router-link>
+								</td>
+								<td v-if="activeColumns.done">
+									<Done
+										:is-done="t.done"
+										variant="small"
 									/>
-									<DateTableCell
-										v-if="activeColumns.startDate"
-										:date="t.startDate"
+								</td>
+								<td v-if="activeColumns.title">
+									<router-link :to="taskDetailRoutes[t.id]">
+										{{ t.title }}
+									</router-link>
+								</td>
+								<td v-if="activeColumns.priority">
+									<PriorityLabel
+										:priority="t.priority"
+										:done="t.done"
+										:show-all="true"
 									/>
-									<DateTableCell
-										v-if="activeColumns.endDate"
-										:date="t.endDate"
+								</td>
+								<td v-if="activeColumns.labels">
+									<Labels :labels="t.labels"/>
+								</td>
+								<td v-if="activeColumns.assignees">
+									<AssigneeList
+										v-if="t.assignees.length > 0"
+										:assignees="t.assignees"
+										:avatar-size="28"
+										class="ml-1"
+										:inline="true"
 									/>
-									<td v-if="activeColumns.percentDone">
-										{{ t.percentDone * 100 }}%
-									</td>
-									<DateTableCell
-										v-if="activeColumns.doneAt"
-										:date="t.doneAt"
+								</td>
+								<DateTableCell
+									v-if="activeColumns.dueDate"
+									:date="t.dueDate"
+								/>
+								<DateTableCell
+									v-if="activeColumns.startDate"
+									:date="t.startDate"
+								/>
+								<DateTableCell
+									v-if="activeColumns.endDate"
+									:date="t.endDate"
+								/>
+								<td v-if="activeColumns.percentDone">
+									{{ t.percentDone * 100 }}%
+								</td>
+								<DateTableCell
+									v-if="activeColumns.doneAt"
+									:date="t.doneAt"
+								/>
+								<DateTableCell
+									v-if="activeColumns.created"
+									:date="t.created"
+								/>
+								<DateTableCell
+									v-if="activeColumns.updated"
+									:date="t.updated"
+								/>
+								<td v-if="activeColumns.createdBy">
+									<User
+										:avatar-size="27"
+										:show-username="false"
+										:user="t.createdBy"
 									/>
-									<DateTableCell
-										v-if="activeColumns.created"
-										:date="t.created"
-									/>
-									<DateTableCell
-										v-if="activeColumns.updated"
-										:date="t.updated"
-									/>
-									<td v-if="activeColumns.createdBy">
-										<User
-											:avatar-size="27"
-											:show-username="false"
-											:user="t.createdBy"
-										/>
-									</td>
-								</tr>
+								</td>
+							</tr>
 							</tbody>
 						</table>
 					</div>
@@ -397,4 +396,8 @@ const taskDetailRoutes = computed(() => Object.fromEntries(
 	border: none;
 	box-shadow: none;
 }
+
+.filter-container :deep(.popup) {
+	top: 7rem;
+}
 </style>
\ No newline at end of file
diff --git a/frontend/src/styles/components/_index.scss b/frontend/src/styles/components/_index.scss
index ebb6803c8..4c934929a 100644
--- a/frontend/src/styles/components/_index.scss
+++ b/frontend/src/styles/components/_index.scss
@@ -1,5 +1,4 @@
 @import "tooltip";
 @import "labels";
-@import "project";
 @import "task";
 @import "tasks";
diff --git a/frontend/src/styles/components/project.scss b/frontend/src/styles/components/project.scss
deleted file mode 100644
index 8c9efb929..000000000
--- a/frontend/src/styles/components/project.scss
+++ /dev/null
@@ -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;
-  }
-}
\ No newline at end of file