From 4bb3f35e5b0aeccefa9f3503fbd191b864fff2f1 Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Mon, 20 Nov 2023 22:40:21 +0300
Subject: [PATCH] added dialog window for notifications about off animations

---
 .../css/ComponentsStyles/notification.css     | 24 +++++++++++++++++++
 .../src/components/AsidebarComponent.vue      |  3 +++
 .../components/NotiicationwindowComponent.vue | 23 ++++++++++++++++++
 3 files changed, 50 insertions(+)
 create mode 100644 luckydiamond/src/assets/css/ComponentsStyles/notification.css
 create mode 100644 luckydiamond/src/components/NotiicationwindowComponent.vue

diff --git a/luckydiamond/src/assets/css/ComponentsStyles/notification.css b/luckydiamond/src/assets/css/ComponentsStyles/notification.css
new file mode 100644
index 0000000..14d8dfb
--- /dev/null
+++ b/luckydiamond/src/assets/css/ComponentsStyles/notification.css
@@ -0,0 +1,24 @@
+.notification {
+    position: absolute;
+    top: 0%;
+    left: 34%;
+    background: #000;
+    width: 20%;
+    height: 5%;
+    z-index: 1000;
+}
+
+.notification__content  {
+    margin-top: 10px;
+    display: flex;
+    justify-content: center;
+}
+
+.fade-enter-active, .fade-leave-active {
+    opacity: 0;
+    transform: translateY(20px);
+}
+.fade-enter, .fade-leave-to {
+    opacity: 1;
+    transform: translateY(100px);
+}
\ No newline at end of file
diff --git a/luckydiamond/src/components/AsidebarComponent.vue b/luckydiamond/src/components/AsidebarComponent.vue
index ba344e0..7794291 100644
--- a/luckydiamond/src/components/AsidebarComponent.vue
+++ b/luckydiamond/src/components/AsidebarComponent.vue
@@ -17,14 +17,17 @@
       </div>
     </div>
   </aside>
+  <notiicationwindow-component :isAnimationOn = "AnimationOff"></notiicationwindow-component>
 </template>
 
 
 <script>
+import NotiicationwindowComponent from "@/components/NotiicationwindowComponent.vue";
 import '@/assets/css/ComponentsStyles/asidebar.css'
 
 export default {
   name: 'AsideBar-Element',
+  components: { NotiicationwindowComponent },
   data() {
     return {
       AnimationOff: false
diff --git a/luckydiamond/src/components/NotiicationwindowComponent.vue b/luckydiamond/src/components/NotiicationwindowComponent.vue
new file mode 100644
index 0000000..f37b756
--- /dev/null
+++ b/luckydiamond/src/components/NotiicationwindowComponent.vue
@@ -0,0 +1,23 @@
+<template>
+  <transition name="fade">
+    <div class="notification" v-if="isAnimationOn">
+      <div class="notification__content">
+        <h3>Анимации выключены</h3>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import '@/assets/css/ComponentsStyles/notification.css'
+
+export default {
+  props: {
+    isAnimationOn: Boolean
+  }
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file