From 4dc0a6159b67e797618b81a5f5d952b47bbba3bd Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Tue, 2 Mar 2021 14:32:05 +0200
Subject: [PATCH] Animated log entries

---
 .../character/CharacterSheetRightDrawer.vue        |  6 +++---
 app/imports/ui/log/CharacterLog.vue                | 14 +++++++++++---
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/app/imports/ui/creature/character/CharacterSheetRightDrawer.vue b/app/imports/ui/creature/character/CharacterSheetRightDrawer.vue
index f3af8445..7db4b1ca 100644
--- a/app/imports/ui/creature/character/CharacterSheetRightDrawer.vue
+++ b/app/imports/ui/creature/character/CharacterSheetRightDrawer.vue
@@ -5,15 +5,15 @@
     right
     clipped
   >
-    <log-tab :creature-id="$route.params.id" />
+    <character-log :creature-id="$route.params.id" />
   </v-navigation-drawer>
 </template>
 
 <script>
-import LogTab from '/imports/ui/log/CharacterLog.vue';
+import CharacterLog from '/imports/ui/log/CharacterLog.vue';
 export default {
   components: {
-    LogTab,
+    CharacterLog,
   },
   computed: {
     drawer: {
diff --git a/app/imports/ui/log/CharacterLog.vue b/app/imports/ui/log/CharacterLog.vue
index b29d65a3..ec68e11f 100644
--- a/app/imports/ui/log/CharacterLog.vue
+++ b/app/imports/ui/log/CharacterLog.vue
@@ -3,8 +3,10 @@
     style="height: 100%; overflow: hidden;"
     class="character-log layout column justify-end"
   >
-    <div
-      class="log flex layout column reverse align-end pa-3"
+    <v-slide-y-reverse-transition
+      group
+      hide-on-leave
+      class="log-entries flex layout column reverse align-end pa-3"
       style="overflow: auto;"
     >
       <log-entry
@@ -12,7 +14,7 @@
         :key="log._id"
         :model="log"
       />
-    </div>
+    </v-slide-y-reverse-transition>
     <v-card>
       <v-text-field
         v-model="input"
@@ -120,4 +122,10 @@ export default {
   .log-tab p:last-child {
     margin-bottom: 0;
   }
+  .theme--dark .log-entries {
+    background: #303030;
+  }
+  .log-entries {
+    background: #fafafa;
+  }
 </style>