From 7b546c567c4683a37fe94595362f4c2bf92ffd59 Mon Sep 17 00:00:00 2001
From: undergroundwires <git@undergroundwires.dev>
Date: Sat, 6 Apr 2024 14:11:30 +0200
Subject: [PATCH] Fix card arrow not being animated in sync

This commit fixes an UI inconsitency where the arrow did not animate in
sync with with the card's expansion panel during the expansion process.
The solution implemented involves the use of actual DOM element for the
arrow, rather than a pseude-element, allowing for unified animation with
the expansion panel.

Changes:

- Extraction of the expansion arrow into its own Vue component,
  `CardExpansionArrow`, improving maintainability and separation of
  concerns.
- Transition to using a real DOM element for the expansion arrow, moving
  away from the `&:before` pseudo-class. This leads to simpler codebase,
  better separation of concerns and closer alignment with HTML
  semantics.
---
 .../Scripts/View/Cards/CardExpansionArrow.vue | 32 ++++++++++++
 .../Scripts/View/Cards/CardListItem.vue       | 49 ++++++++-----------
 2 files changed, 53 insertions(+), 28 deletions(-)
 create mode 100644 src/presentation/components/Scripts/View/Cards/CardExpansionArrow.vue

diff --git a/src/presentation/components/Scripts/View/Cards/CardExpansionArrow.vue b/src/presentation/components/Scripts/View/Cards/CardExpansionArrow.vue
new file mode 100644
index 00000000..2871b507
--- /dev/null
+++ b/src/presentation/components/Scripts/View/Cards/CardExpansionArrow.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="arrow-container">
+    <div class="arrow" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  // Empty component for ESLint compatibility, workaround for https://github.com/vuejs/vue-eslint-parser/issues/125.
+});
+</script>
+
+<style scoped lang="scss">
+@use "@/presentation/assets/styles/main" as *;
+
+$arrow-size: $font-size-absolute-normal;
+
+.arrow-container {
+  position: relative;
+  .arrow {
+    position: absolute;
+    left: calc(50% - $arrow-size * 1.5);
+    top: calc(-0.35 * $arrow-size);
+    border: solid $color-primary-darker;
+    border-width: 0 $arrow-size $arrow-size 0;
+    padding: $arrow-size;
+    transform: rotate(-135deg);
+  }
+}
+</style>
diff --git a/src/presentation/components/Scripts/View/Cards/CardListItem.vue b/src/presentation/components/Scripts/View/Cards/CardListItem.vue
index dd1e6035..ea5c0d3a 100644
--- a/src/presentation/components/Scripts/View/Cards/CardListItem.vue
+++ b/src/presentation/components/Scripts/View/Cards/CardListItem.vue
@@ -29,22 +29,24 @@
       />
     </div>
     <CardExpandTransition>
-      <div
-        v-show="isExpanded"
-        class="card__expander"
-        @click.stop
-      >
-        <div class="card__expander__close-button">
-          <FlatButton
-            icon="xmark"
-            @click="collapse()"
-          />
-        </div>
-        <div class="card__expander__content">
-          <ScriptsTree
-            :category-id="categoryId"
-            :has-top-padding="false"
-          />
+      <div v-show="isExpanded">
+        <CardExpansionArrow />
+        <div
+          class="card__expander"
+          @click.stop
+        >
+          <div class="card__expander__close-button">
+            <FlatButton
+              icon="xmark"
+              @click="collapse()"
+            />
+          </div>
+          <div class="card__expander__content">
+            <ScriptsTree
+              :category-id="categoryId"
+              :has-top-padding="false"
+            />
+          </div>
         </div>
       </div>
     </CardExpandTransition>
@@ -62,6 +64,7 @@ import ScriptsTree from '@/presentation/components/Scripts/View/Tree/ScriptsTree
 import { sleep } from '@/infrastructure/Threading/AsyncSleep';
 import CardSelectionIndicator from './CardSelectionIndicator.vue';
 import CardExpandTransition from './CardExpandTransition.vue';
+import CardExpansionArrow from './CardExpansionArrow.vue';
 
 export default defineComponent({
   components: {
@@ -70,6 +73,7 @@ export default defineComponent({
     CardSelectionIndicator,
     FlatButton,
     CardExpandTransition,
+    CardExpansionArrow,
   },
   props: {
     categoryId: {
@@ -136,12 +140,11 @@ export default defineComponent({
 @use "@/presentation/assets/styles/main" as *;
 
 $card-inner-padding     : 30px;
-$arrow-size             : 15px;
 $expanded-margin-top    : 30px;
 $card-horizontal-gap    : $card-gap;
 
 .card {
-  &__inner {
+  .card__inner {
     padding-top: $card-inner-padding;
     padding-right: $card-inner-padding;
     padding-bottom: 0;
@@ -220,16 +223,6 @@ $card-horizontal-gap    : $card-gap;
       height: auto;
       background-color: $color-secondary;
       color: $color-on-secondary;
-      &:after { // arrow
-        content: "";
-        display: block;
-        position: absolute;
-        bottom: calc(-1 * #{$expanded-margin-top});
-        left: calc(50% - #{$arrow-size});
-        border-left: #{$arrow-size} solid transparent;
-        border-right: #{$arrow-size} solid transparent;
-        border-bottom: #{$arrow-size} solid $color-primary-darker;
-      }
     }
 
     .card__expander {