From 5836d72513d0be5ee9e3ec0e219bdf7b6c6a2dbc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sat, 13 Apr 2019 00:43:38 +0100
Subject: [PATCH] fix(ui): fix grid animations

Fade on mount wasn't working because it was placed at the wrong level.
Animate group moves around the grid.
---
 ui/src/Components/Animations/MountFade/index.css     |  4 ++--
 ui/src/Components/Animations/MountFade/index.js      |  2 +-
 ui/src/Components/Grid/AlertGrid/AlertGroup/index.js | 11 ++++-------
 ui/src/Components/Grid/AlertGrid/index.css           |  5 +++++
 ui/src/Components/Grid/AlertGrid/index.js            |  2 ++
 5 files changed, 14 insertions(+), 10 deletions(-)
 create mode 100644 ui/src/Components/Grid/AlertGrid/index.css

diff --git a/ui/src/Components/Animations/MountFade/index.css b/ui/src/Components/Animations/MountFade/index.css
index 96cc05776..37b4a1323 100644
--- a/ui/src/Components/Animations/MountFade/index.css
+++ b/ui/src/Components/Animations/MountFade/index.css
@@ -5,7 +5,7 @@
 .components-animation-fade-appear-active,
 .components-animation-fade-enter-active {
   opacity: 1;
-  transition: opacity 0.15s ease-in;
+  transition: all 0.3s ease-in;
 }
 
 .components-animation-fade-exit {
@@ -13,5 +13,5 @@
 }
 .components-animation-fade-exit-active {
   opacity: 0.01;
-  transition: opacity 0.15s ease-out;
+  transition: all 0.3s ease-out;
 }
diff --git a/ui/src/Components/Animations/MountFade/index.js b/ui/src/Components/Animations/MountFade/index.js
index c63c9049a..5ae94cf10 100644
--- a/ui/src/Components/Animations/MountFade/index.js
+++ b/ui/src/Components/Animations/MountFade/index.js
@@ -8,7 +8,7 @@ import "./index.css";
 const MountFade = ({ children, duration, ...props }) => (
   <CSSTransition
     classNames="components-animation-fade"
-    timeout={150}
+    timeout={300}
     appear={true}
     enter={true}
     exit={true}
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js
index 1e085a8df..235eefa34 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js
@@ -177,11 +177,8 @@ const AlertGroup = observer(
       }
 
       return (
-        <MountFade>
-          <div
-            className="components-grid-alertgrid-alertgroup p-1"
-            style={style}
-          >
+        <div className="components-grid-alertgrid-alertgroup p-1" style={style}>
+          <MountFade in={true}>
             <div className="card">
               <GroupHeader
                 collapseStore={this.collapse}
@@ -240,8 +237,8 @@ const AlertGroup = observer(
                 />
               ) : null}
             </div>
-          </div>
-        </MountFade>
+          </MountFade>
+        </div>
       );
     }
   }
diff --git a/ui/src/Components/Grid/AlertGrid/index.css b/ui/src/Components/Grid/AlertGrid/index.css
new file mode 100644
index 000000000..3f4667fad
--- /dev/null
+++ b/ui/src/Components/Grid/AlertGrid/index.css
@@ -0,0 +1,5 @@
+.components-grid-alertgrid-alertgroup {
+  transition-property: top, left;
+  transition-duration: 0.3s;
+  transition-timing-function: ease;
+}
diff --git a/ui/src/Components/Grid/AlertGrid/index.js b/ui/src/Components/Grid/AlertGrid/index.js
index bb37d42cf..ccfe9a800 100644
--- a/ui/src/Components/Grid/AlertGrid/index.js
+++ b/ui/src/Components/Grid/AlertGrid/index.js
@@ -23,6 +23,8 @@ import { SilenceFormStore } from "Stores/SilenceFormStore";
 import { AlertGroup } from "./AlertGroup";
 import { GridSizesConfig, GetGridElementWidth } from "./Constants";
 
+import "./index.css";
+
 const AlertGrid = observer(
   class AlertGrid extends Component {
     static propTypes = {