From 87329785c7dadcc224b964cf1f73e9a8dd073d93 Mon Sep 17 00:00:00 2001
From: kandrusyak <kandrusyak@t1-consulting.ru>
Date: Sun, 27 Nov 2022 18:49:04 +0300
Subject: [PATCH] fix notifications

---
 src/components/LoggedInLayout.vue                    |  4 +++-
 .../Notifications/TheNotificationProvider.vue        | 12 ++++++++++--
 src/pages/settings/TheSettings.vue                   |  9 +--------
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/components/LoggedInLayout.vue b/src/components/LoggedInLayout.vue
index dd7ad6b..9023f4a 100644
--- a/src/components/LoggedInLayout.vue
+++ b/src/components/LoggedInLayout.vue
@@ -16,15 +16,17 @@
         :updated-clients="updatedClients",
         @reset-updated-clients="resetUpdatedClients"
       )
+    the-notification-provider
 </template>
 
 <script>
 import TheHeader from "@/components/TheHeader";
 import TheSidebar from "@/components/TheSidebar";
+import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider";
 
 export default {
   name: "LoggedInLayout",
-  components: { TheHeader, TheSidebar },
+  components: { TheNotificationProvider, TheHeader, TheSidebar },
   data() {
     return {
       isOpenForm: false,
diff --git a/src/components/Notifications/TheNotificationProvider.vue b/src/components/Notifications/TheNotificationProvider.vue
index c887e28..78f90e0 100644
--- a/src/components/Notifications/TheNotificationProvider.vue
+++ b/src/components/Notifications/TheNotificationProvider.vue
@@ -1,7 +1,9 @@
 <template lang="pug">
   teleport(:to="appContainer")
-    .flex.gap-2.flex-col.absolute.bottom-0.pb-2.right-2.overflow-hidden.pt-32(class="w-1/5")
-      transition-group(name="list")
+  .absolute.bottom-0.p-2.right-0.overflow-hidden.z-50(class="w-1/5")
+    .pt-32(v-if="displayPadding")
+    .flex.gap-2.flex-col.relative
+      transition-group(name="list", @before-leave="displayPadding = true", @after-leave="displayPadding = false")
         notification-item(
             v-for="[id, notification] in notificationsList",
             :id="id",
@@ -22,6 +24,12 @@ export default {
   name: "TheNotificationProvider",
   components: { NotificationItem, BaseButton },
 
+  data() {
+    return {
+      displayPadding: false,
+    };
+  },
+
   computed: {
     appContainer() {
       return this.$.appContext.app._container;
diff --git a/src/pages/settings/TheSettings.vue b/src/pages/settings/TheSettings.vue
index d4bdb59..de90533 100644
--- a/src/pages/settings/TheSettings.vue
+++ b/src/pages/settings/TheSettings.vue
@@ -4,7 +4,6 @@
     BaseButton(@click="showModal = true") Открыть модалку
     base-modal(v-model="showModal", title="Тестовый заголовок окна" )
     base-button(@click="addNotification") Добавить уведомление
-    the-notification-provider
 </template>
 
 <script>
@@ -38,13 +37,7 @@ export default {
   },
   methods: {
     addNotification() {
-      addNotification(
-        new Date().getTime(),
-        "test",
-        "test-text",
-        "warning",
-        3000
-      );
+      addNotification(new Date().getTime(), "test", "test-text", "warning", 0);
     },
   },
 };