From ef21ec94acb929587337088dbd99a7c4c9769c8a Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Wed, 31 May 2023 20:55:11 +0200
Subject: [PATCH] Add open/close collapsible, enable animation for blacklist

---
 .../ftbot/PairlistConfigBlacklist.vue         | 52 +++++++++++--------
 1 file changed, 29 insertions(+), 23 deletions(-)

diff --git a/src/components/ftbot/PairlistConfigBlacklist.vue b/src/components/ftbot/PairlistConfigBlacklist.vue
index 02691fba..15a5253c 100644
--- a/src/components/ftbot/PairlistConfigBlacklist.vue
+++ b/src/components/ftbot/PairlistConfigBlacklist.vue
@@ -2,24 +2,40 @@
   <b-card no-body class="mb-2">
     <template #header>
       <div
-        class="d-flex flex-column align-items-center fw-bold fd-italic"
+        class="d-flex flex-row align-items-center justify-content-between"
         role="button"
         @click="visible = !visible"
       >
-        Blacklist
+        <span class="fw-bold fd-italic">Blacklist</span>
+        <i-mdi-chevron-down
+          v-if="!visible"
+          :class="!visible ? 'visible' : 'invisible'"
+          role="button"
+          class="fs-4"
+          @click="visible = !visible"
+        />
+        <i-mdi-chevron-up
+          v-if="visible"
+          :class="visible ? 'visible' : 'invisible'"
+          role="button"
+          class="fs-4"
+          @click="visible = !visible"
+        />
       </div>
     </template>
-    <b-card-body :class="{ hidden: !visible }">
+    <b-card-body class="p-0">
       <b-collapse v-model="visible">
-        <b-input-group v-for="(item, i) in pairlistStore.blacklist" :key="i" class="mb-2">
-          <b-form-input v-model="pairlistStore.blacklist[i]" />
-          <b-input-group-append>
-            <b-button size="sm" @click="pairlistStore.removeFromBlacklist(i)"
-              ><i-mdi-close
-            /></b-button>
-          </b-input-group-append>
-        </b-input-group>
-        <b-button @click="pairlistStore.addToBlacklist()">Add</b-button>
+        <div class="p-3">
+          <b-input-group v-for="(item, i) in pairlistStore.blacklist" :key="i" class="mb-2">
+            <b-form-input v-model="pairlistStore.blacklist[i]" />
+            <b-input-group-append>
+              <b-button size="sm" @click="pairlistStore.removeFromBlacklist(i)"
+                ><i-mdi-close
+              /></b-button>
+            </b-input-group-append>
+          </b-input-group>
+          <b-button @click="pairlistStore.addToBlacklist()">Add</b-button>
+        </div>
       </b-collapse>
     </b-card-body>
   </b-card>
@@ -31,14 +47,4 @@ const pairlistStore = usePairlistConfigStore();
 
 const visible = ref(false);
 </script>
-<style lang="scss" scoped>
-.hidden {
-  padding: 0;
-}
-
-:deep(.collapsing) {
-  -webkit-transition: none;
-  transition: none;
-  display: none;
-}
-</style>
+<style lang="scss" scoped></style>