From be331d6200bbe87d70dc8bcc79b02a3602f3719c Mon Sep 17 00:00:00 2001
From: cgfhtw <christopher.gerbrich@technikum-wien.at>
Date: Wed, 24 May 2023 12:05:36 +0200
Subject: [PATCH] Styles

---
 public/js/components/filter/Filter.js         | 20 +++++++++++--------
 public/js/components/filter/Filter/Columns.js | 18 ++++++++---------
 public/js/components/filter/Table/Download.js |  7 ++++---
 3 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/public/js/components/filter/Filter.js b/public/js/components/filter/Filter.js
index ed9452925..776405614 100644
--- a/public/js/components/filter/Filter.js
+++ b/public/js/components/filter/Filter.js
@@ -510,14 +510,8 @@ export const CoreFilterCmpt = {
 
 		<div :id="'filterCollapsables' + idExtra">
 
-			<div class="d-flex flex-row-reverse justify-content-between">
-				<div class="filter-header-title">
-					<span v-if="!tableOnly" class="filter-header-title-span-filter">[ {{ filterName }} ]</span>
-					<span v-if="!tableOnly" data-bs-toggle="collapse" :data-bs-target="'#collapseFilters' + idExtra" class="filter-header-title-span-icon fa-solid fa-filter fa-xl"></span>
-					<span data-bs-toggle="collapse" :data-bs-target="'#collapseColumns' + idExtra" class="filter-header-title-span-icon fa-solid fa-table-columns fa-xl"></span>
-					<table-download class="filter-header-title-span-icon fa-xl text-dark" :tabulator="tabulator" :config="download"></table-download>
-				</div>
-				<div v-if="newBtnShow || reload || $slots.actions" class="filter-header-title d-flex gap-2 align-items-baseline">
+			<div class="d-flex flex-row justify-content-between flex-wrap">
+				<div v-if="newBtnShow || reload || $slots.actions" class="d-flex gap-2 align-items-baseline flex-wrap">
 					<button v-if="newBtnShow" class="btn btn-outline-secondary" :class="newBtnClass" :title="newBtnLabel ? undefined : 'New'" :aria-label="newBtnLabel ? undefined : 'New'" @click="$emit('click:new', $event)" :disabled="newBtnDisabled">
 						<span class="fa-solid fa-plus" aria-hidden="true"></span>
 						{{ newBtnLabel }}
@@ -528,6 +522,16 @@ export const CoreFilterCmpt = {
 					<span v-if="$slots.actions && tabulatorHasSelector">Mit {{selectedData.length}} ausgewählten: </span>
 					<slot name="actions" v-bind="tabulatorHasSelector ? selectedData : []"></slot>
 				</div>
+				<div class="d-flex gap-1 align-items-baseline flex-grow-1 justify-content-end">
+					<span v-if="!tableOnly">[ {{ filterName }} ]</span>
+					<a v-if="!tableOnly" href="#" class="btn btn-link px-0 text-dark" data-bs-toggle="collapse" :data-bs-target="'#collapseFilters' + idExtra">
+						<span class="fa-solid fa-xl fa-filter"></span>
+					</a>
+					<a href="#" class="btn btn-link px-0 text-dark" data-bs-toggle="collapse" :data-bs-target="'#collapseColumns' + idExtra">
+						<span class="fa-solid fa-xl fa-table-columns"></span>
+					</a>
+					<table-download class="btn btn-link px-0 text-dark" :tabulator="tabulator" :config="download"></table-download>
+				</div>
 			</div>
 
 			<filter-columns
diff --git a/public/js/components/filter/Filter/Columns.js b/public/js/components/filter/Filter/Columns.js
index ca8fc0aec..8c26df984 100644
--- a/public/js/components/filter/Filter/Columns.js
+++ b/public/js/components/filter/Filter/Columns.js
@@ -64,16 +64,14 @@ export default {
 	template: `
 	<div class="filter-columns">
 		<div class="card">
-			<div class="row card-body filter-options-div">
-				<div class="filter-fields-area">
-					<div
-						v-for="fieldToDisplay in fields"
-						class="filter-fields-field"
-						:class="selected.indexOf(fieldToDisplay) != -1 ? 'text-light bg-dark' : '' "
-						@click="toggle(fieldToDisplay)"
-					>
-						{{ names[fieldToDisplay] || fieldToDisplay }}
-					</div>
+			<div class="d-flex flex-wrap gap-2 p-3 justify-content-center">
+				<div
+					v-for="fieldToDisplay in fields"
+					class="btn"
+					:class="selected.indexOf(fieldToDisplay) != -1 ? 'btn-dark' : 'btn-outline-dark' "
+					@click="toggle(fieldToDisplay)"
+				>
+					{{ names[fieldToDisplay] || fieldToDisplay }}
 				</div>
 			</div>
 		</div>
diff --git a/public/js/components/filter/Table/Download.js b/public/js/components/filter/Table/Download.js
index 7d4512d55..057fdad5e 100644
--- a/public/js/components/filter/Table/Download.js
+++ b/public/js/components/filter/Table/Download.js
@@ -42,7 +42,8 @@ export default {
 		config: {
 			type: [Boolean, String, Function, Array, Object],
 			default: false
-		}
+		},
+		iconClass: [String, Array, Object]
 	},
 	computed: {
 		currentConfig() {
@@ -215,7 +216,7 @@ export default {
 				aria-title="Download"
 				@click.prevent="download(currentConfig[0])"
 			>
-				<span class="fa-solid fa-download" aria-hidden="true"></span>
+				<span :class="iconClass || 'fa-solid fa-xl fa-download'" aria-hidden="true"></span>
 			</a>
 		</template>
 		<div v-else class="dropdown d-inline">
@@ -229,7 +230,7 @@ export default {
 				data-bs-toggle="dropdown"
 				aria-expanded="false"
 			>
-				<span class="fa-solid fa-download" aria-hidden="true"></span>
+				<span :class="iconClass || 'fa-solid fa-xl fa-download'" aria-hidden="true"></span>
 			</a>
 			<ul class="dropdown-menu dropdown-menu-end">
 				<li v-for="(conf, i) in currentConfig" :key="i">